omonuinen

モーフに文字を表示する方法について学ぶ。
モーフに文字を表示するには、おおまかに２通りの方法がある。１つはStringMorphを使う方法、もう１つはdrawOn:で直接描画する方法である。

StringMorphを使う

StringMorphは文字を表示するためのモーフである。

(StringMorph contents: 'aiueo') openInWorld.

上のコードをPlaygroundに入力してDo itすれば、画面の左上に小さく aiueo と表示されるのがわかる。

これは文字を表示するモーフであり、マウスでドラッグして好きな場所に移動することができる。
表示するフォント名やポイント数を指定したい場合には、contents:の代わりにcontents:fonts:メッセージを送る。

(StringMorph contents: 'あいうえお'
                  font: (LogicalFont familyName: 'Osaka' pointSize: 30)) openInWorld.

StringMorphをサブモーフにすることもできる。MyMorph2でメッセージを表示するようにするなら、initializeメソッドを以下のように変更する。

initialize
    super initialize.
    ActiveHand keyboardFocus: self.
    keys := Set new.
    (StringMorph contents: 'Hello!'
                 font: (LogicalFont familyName: 'Apple Chancery' pointSize: 30))
        in: [ :morph |
            morph topLeft: self topRight.
            morph color: Color red.
            self addMorphBack: morph ]

後半の4行がStringMorphを追加している部分である。簡単に説明しておくと、まず指定した文字列とフォントでStringMorphを生成しておき、得られたモーフに対して位置を設定（StringMorphの左上がMyMorph2の右上の座標になるように）して赤色にし、サブモーフとして追加するという流れになっている。

残念ながらStringMorphでは背景色を設定できないので、背景色が必要な場合にはStringMorphを、色を付けた素のモーフのサブモーフにして同じ位置に設定する。

drawOn:で表示する

drawOn:はモーフを描画する際に送られるメッセージで、第１２回ではそのことを利用して画像を表示した。これと同様にモーフ描画の一部として文字を書く方法がある。
モーフを描画する必要が生じると、各モーフに対してdrawOn:というメッセージが送られる。メッセージには描画先としてのCanvasオブジェクトが引数として添えられているので、このCanvasオブジェクトに描画メッセージを送ってモーフを描く。
文字を描くためにCanvasオブジェクトに送ることのできるメッセージはいくつかあり、Canvasクラスのdrawing-textプロトコルを見ればわかるが、実際にはdrawString:at:メッセージか、drawString:at:font:color:メッセージだけで事足りるだろう。前者は指定された文字列を指定された位置にデフォルトフォントを用いて黒色で描画するというものであり、後者は更にフォントと色を指定できるというものである。
応用例として、押下中の文字を表示する機能をMyMorph2に付けてみよう。

drawOn: aCanvas
    super drawOn: aCanvas.
    aCanvas drawString: keys asString at: self topLeft

２行目は本来のモーフの描画を、親クラスであるMyMorphに行わせるためのものである。３行目では、押下中のキーを保持しているインスタンス変数keysの内容を文字列に変換し、モーフの左上に描画している。
drawOn:を用いる際の注意点として、特定のタイミングで明示的に表示内容を更新したい場合には、自分自身に対してchangedメッセージを送る必要があることである。MyMorph/MyMorph2では、画像を表示させる際に大きさや位置を変更しているため暗黙的な描画が行われるのでchangedメッセージを送る必要はないが、文字列内容だけを変更した場合などは、変更後に描画を行わせるためにself changed.というメッセージ式を実行する必要がある。
（第１４回おわり）

クラスの機能を拡張するにはメソッドを追加していく必要があることを第５回の記事以降で学んできた。
既存のクラスの機能を維持しつつ、似たような新たな機能を持った異なるクラスを必要とする場合、第４回で学んだクラス定義によって新たなクラスを作成する。
例えば、今まで作成したMyMorphクラスと同様にScratch Catが移動していくのだが、マウスではなくキーボード操作によって移動するようなクラスが欲しい場合、MyMorphを親（基底）クラスとする新たなクラスを作成する。そうすればMyMorphの機能を引き継いだ、新たなクラスを作ることができる。
ここでは、そのような新しいクラスをMyMorph2として定義してみよう。

MyMorph subclass: #MyMorph2
    instanceVariableNames: ''
    classVariableNames: ''
    category: 'Hajimeteno Morphic Tutorial'

この新しいMyMorph2では、モーフをキーボードで操作してみよう。以前の記事ではキーボードイベントの取り扱いが中途半端になっていたので、この回でより具体的にキーボードイベントを扱う。
MyMorph2の基本的な仕様としては、上下左右の矢印キーが押されている間だけ矢印の向きにモーフが動くようにする。
キーボード入力に反応するために定義しなければならないメソッドは以下の通りである。

• handlesKeyDown:
• handlesKeyUp:
• keyDown:
• keyUp:

前２者はモーフがキーボードイベントを受け取るためにtrueを返す必要がある。後２者で受け取ったキーボードイベントを実際に処理する。まず、前２者のメソッドは以下のようになる。

handlesKeyDown: evt
    ^ true

handlesKeyUp: evt
    ^ true

これらのメソッドにより、キーボードが押された瞬間にkeyDown:メッセージがモーフに送られ、離された瞬間にkeyUp:メッセージが送られる。それぞれキーボードイベントが引数となっている。
キーボードイベントの実体はKeyboardEventオブジェクトであり、keyメッセージを送るとKeyオブジェクトが得られる。Keyオブジェクトにnameメッセージを送ると押されたキーの情報を得ることができる。少し寄り道してkeyDown:メッセージの内容を表示して、どんな内容となっているのか確認してみよう。

keyDown: evt
    self inform: evt key name

今までの３つのメソッドを実装したら以下をDo itする。

ActiveHand keyboardFocus: MyMorph2 new openInWorld.

キーボードイベントの説明のところで述べたように、キーボードフォーカスをモーフに移動しないとキーボードイベントを受け取れない。そこで、生成したモーフに強制的にキーボードフォーカスを設定している。MyMorph2が現れたら適当なキーを押してみると、押した瞬間と押し続けている間、画面の左下にメッセージが現れ、Keyオブジェクトのnameが表示される。
矢印キーのnameは以下のような文字列である。

• KP_UP — 上矢印
• KP_DOWN — 下矢印
• KP_LEFT — 左矢印
• KP_RIGHT — 右矢印

これらの値を使えば押されたキーの判定を行うことができる。
矢印キーが押されている間だけ矢印の向きにモーフを動かすとすると、押されているキーを覚えておく必要がある。そこで、MyMorph2のクラス定義を修正して、keysという名前のインスタンス変数を追加する。

MyMorph subclass: #MyMorph2
    instanceVariableNames: 'keys'
    classVariableNames: ''
    category: 'Hajimeteno Morphic Tutorial'

押されたキーを全てkeysに覚えておくため、keyDown:メッセージを受け取ったタイミングでKeyオブジェクトの名前をkeysに追加し、keyUp:メッセージで除外する。キーが押し続けられるとkeyDown:メッセージを複数受け取ることになるが、そのあたりをうまく処理するためにSetオブジェクトを用いることにする。Setは集合のようにデータを扱うためのクラスで、同じデータを複数追加しても個数はカウントされない。MyMorph2のinitializeメソッドを用いて初期化しておく。ついでにキーボードフォーカスを自分自身にセットするようにしておこう。

initialize
    super initialize.
    ActiveHand keyboardFocus: self.
    keys := Set new

モーフの移動は今までと同じくstepメッセージを受け取ったタイミングで行うが、移動量であるvecはkeyDown:とkeyUp:のタイミングで更新することにする。keysの内容に基づいてvecの値を計算するメソッドcalcVecを新たに作成する。

calcVec
    vec := 0 @ 0.
    (keys includes: 'KP_UP')
        ifTrue: [ vec := vec + (0 @ -10) ].
    (keys includes: 'KP_DOWN')
        ifTrue: [ vec := vec + (0 @ 10) ].
    (keys includes: 'KP_LEFT')
        ifTrue: [ vec := vec + (-10 @ 0) ].
    (keys includes: 'KP_RIGHT')
        ifTrue: [ vec := vec + (10 @ 0) ]

Setオブジェクトであるkeysに送られているincludes:というメッセージは、引数のデータがSetオブジェクトにあるかどうかを調べるためのものである。calcVecメソッドでは押されているキーに応じて上下左右の移動量をセットしている。
keyDown:メソッドでは、単に受け取ったキーボードイベントのKeyオブジェクトの名前をkeysに追加し、自分自身にcalcVecメッセージを送るだけである。

keyDown: evt
    keys add: evt key name.
    self calcVec

Setなど複数のデータを扱うことのできるものをコレクションと呼ぶ。コレクションにデータを追加する場合、たいていadd:メッセージを用いる。
keyUp:メソッドでは、単に受け取ったキーボードイベントのKeyオブジェクトの名前をkeysから取り除き、自分自身にcalcVecメッセージを送る。

keyUp: evt
    keys remove: evt key name ifAbsent: [  ].
    self calcVec

Setオブジェクトからデータを削除するにはremove:メッセージを使うが、削除したいデータがないとエラーになるので、ここではremove:ifAbsent:というメッセージを用いている。2番目の引数は、データがなかった場合の処理を書くが、ここでは何もしないようにしている。
以上で矢印キーにより上下左右に移動するMyMorph2ができた。
（第１３回おわり）

クラスを拡張してメソッドを増やして行くと、System Browserでのメソッドの一覧性が悪くなってくる。たとえば、今までにMyMorphのクラスで定義したメソッドは14個程度だが、ペインに入りきらない状況になっているだろう。

Smalltalkでは、メソッドの分類を行うためにプロトコルと呼ばれるものを用意している。プロトコル自体はプログラムの動作に何の影響もなく、単にプログラマにメソッドの分類方法を提供しているだけのものだ。とはいえ、プロトコルがなければ数十ときに数百に上るメソッドを持ったクラスのメンテナンスがとても面倒なものになってしまう。今回のチュートリアルでは、プロトコルによる分類について学ぶ。
まずプロトコルについて。以前、クラスの分類にクラスカテゴリを用いることを述べたが、プロトコルも同様のものである。座標をあらわすPointクラスを例にあげて説明しよう。
座標をあらわすPointクラスには様々なメソッドが定義されており、座標自身の情報の設定や取得に加えて、座標同士の演算や比較、変換や便利な機能など、およそ100のメソッドがある。

Point methods size. "99"

プロトコルによって多数のメソッドを分類する。Pointクラスには以下のようなプロトコルがある。

Point protocols joinUsing: String cr.
 "'-- all --
copying
*Fuel
accessing
private
point functions
printing
self evaluating
transforming
interpolating
testing
geometry
truncation and roundoff
polar coordinates
extent functions
converting
truncation and round off
comparing
arithmetic'"

先頭の’– all –‘は、全てのメソッドの一覧を得る際の擬似的なものであり、アスタリスクで始まるプロトコルは他のパッケージに属しているものを表す。その他は、Pointクラスにおけるさまざまな役割や機能を表すプロトコルとなっている。
どのメソッドをどのプロトコルに配置すべきかはクラスの設計者が決定しなければならない。このあたりの判断はなかなか難しい。既存のクラスを参考にしながらどのプロトコルに配置するかを決めていく。例えば、printOn:というメッセージが他のクラスではどのようなプロトコルで定義されているか調べるには以下のようにする。

SystemNavigation default browseAllImplementorsOf: #printOn:

printOn:を定義しているクラスの一覧が表示され、クラス名の右側の丸括弧の内側に定義されているプロトコル名が表示される。

これを見ればprintingプロトコルで定義されているのがわかる。
最近のブラウザでは親クラスの配置を参考に、自動的にプロトコルへ振り分けてくれる機能を持っている。SystemBrowserのプロトコルペインで右クリックすると、categorize all uncategorizedというメニュー項目が現れるのでクリックすると、プロトコルに分類していないメソッドを自動的に分類してくれる。

メニューを選んで分類が終わると以下のようになる。

おおむねそれらしく配置されているが、handlesMouseOver:がevent handlingではなく、recategorizedに分類されているのは違和感がある。このような場合には手動で分類する。handlesMouseOver:をドラッグしながらevent handlingでドロップすれば良い。
なお、どこにも定義されていないような自分メソッドを作った場合、既存のプロトコルで適切なものがなければ自分で作成することになる。新たにプロトコルを作成するには、プロトコルペインでAdd protocol…を選べば良い。
メソッドはどのプロトコルに分類したからといって実行性能に影響するわけではない。プロトコルはクラスの開発者や利用者がメソッドを探しやすくするための工夫である。Smalltalkerは「こんな機能（メソッド）ないかな？」と思ったときにプロトコルを手がかりにメソッドを探すことが多い。うまくメソッドを分類できれば時間短縮につながるので、ひと手間かけてプロトコルに分類することには価値がある。
（番外編おわり）

今回は画像ファイルをモーフに表示する方法について学ぶ。
はじめてのMorphicチュートリアル（番外編）「ScratchCatをダウンロードする」でダウンロードしたScratch Catをモーフの表面に表示させる。https://wiki.scratch.mit.edu/wiki/Scratch_Mediaから画像ファイルをダウンロードしておいてもよい。いずれにせよ、ダウンロードしたファイルが展開され、画像ファイルが適当なフォルダに格納されている前提で話を進める。
ファイルに保存された画像を表示するには、画像ファイルを読み込んでFormオブジェクトを作り、それを表示するという流れで処理を行う。
画像ファイルを読み込むには以下のようにする。（ファイル名はフルパスで指定してもよい）

f1 := PNGReadWriter formFromFileNamed: 'Cat_1_Bitmap.png'.

PNGReadWriterはPNG形式のファイルの読み書きを行うためのクラスである。他にもBMPReadWriterやGIFReadWriter、AnimatedGIFReadWriter、JPEGReadWriterがある。各クラスに対し、ファイル名の引数を付けてformFromFileNamed:というキーワードメッセージを送れば、指定した画像ファイルを読み込んでFormオブジェクトを生成する。
生成して得られたFormオブジェクトから大きさやビット深度などの情報を得ることができる。

f1 extent. "(184@200)"
f1 depth. "32"

MyMorphで色のついた四角形の変わりにScratch Catを表示するなら、事前に画像を読み込んでおいてモーフ表示の際に描画する必要がある。そのため、画像ファイルを読み込んで得たFormオブジェクトは、formという名前のインスタンス変数で覚えておくことにする。
新たなインスタンス変数を追加するには、MyMorphのクラス定義を以下のように変える必要がある。

Morph subclass: #MyMorph
    instanceVariableNames: 'vec form'
    classVariableNames: ''
    category: 'Hajimeteno Morphic Tutorial'

System BrowserでMyMorphクラスを変更してAcceptするか、適当な場所で上記をDo itする。
画像ファイルはinitializeメソッドの中で（つまりモーフ生成時に）読み込むことにする。モーフ生成のたびに同じ画像ファイルを読み込むのは効率が悪いが、ここでは単純化のためにそうする。また、元のMyMorphは16×16ピクセルの大きさなので、Scratch Catを表示できない。そこで、モーフの大きさを画像の大きさに設定している。また、少し早めに動作するよう10ピクセルずつの移動とした。

initialize
    super initialize.
    vec := 10 @ 0.
    form := PNGReadWriter formFromFileNamed: 'Cat_1_Bitmap.png'.
    self extent: form extent

モーフはdrawOn:メッセージが送られると引数に与えられたキャンバスへ自分自身を描画するようになっており、現状ではモーフの大きさの色の付いた四角形を表示している。そこで、読み込んだFormオブジェクトを表示するために以下のようなdrawOn:メソッドを実装する。

drawOn: aCanvas
    aCanvas drawImage: form at: self topLeft

drawImage:at:というキーワードメッセージは２つの引数を持ち、最初に表示させたいFormオブジェクト、次に画面上の位置を指定する。
以上のような変更を加えた上で、MyMorph new openInWorldをDo itしてみると、以下のように表示される。

ご覧の通り、Scratch Catが表示されるものの、モーフが動くたびに分身が残って表示されてしまう。このような現象は、今回のように透明部分を含む画像を描画したり、全ての表示範囲を使わずに描画したモーフを動かす際に発生してしまう。
これを回避するには数カ所を変更する必要がある。まず必要なことは、先ほど実装したdrawOn:で、drawImage:at:の代わりにtranslucentImage:at:を用いて、透明部分の描画に対応することである。

drawOn: aCanvas
    aCanvas translucentImage: form at: self topLeft

更にモーフ自身の色が透明であるように設定する。

initialize
    super initialize.
    vec := 10 @ 0.
    self color: Color transparent.
    form := PNGReadWriter formFromFileNamed: 'Cat_1_Bitmap.png'.
    self extent: form extent

中央の行で透明色に設定している。
通常はこれだけで良いのだが、MyMorphではstepのたびに色を変えるようにしていたので、色を変えないようにstepメソッドを修正する。

step
    self topLeft: (self topLeft + vec)

以上で画像ファイルを表示させることができた。
２枚の画像を交互に表示させるのは今までの延長線上でできるので演習にしておこう。
（第１２回おわり）

Scratchのキャラクターの猫をサイトからダウンロードする方法について。
https://wiki.scratch.mit.edu/wiki/Scratch_Mediaを開いて、そこから「https://wiki.scratch.mit.edu/w/images/ScratchCat.zip」という圧縮ファイルをダウンロードして展開するということなので、ブラウザとOS上の操作があれば解決する簡単な仕事なのだが、これをPharoでやるとどうなるかということである。
まず、http://wiki.scratch.mit.edu/w/images/ScratchCat.zip のファイルをダウンロードするには、以下のようにZnEasyクラスを使うのが簡単である。

res := ZnEasy get: 'http://wiki.scratch.mit.edu/w/images/ScratchCat.zip'.

こうすると、resにはZnResponseオブジェクトが返ってくる。問題なければ以下のような内容となる。

"a ZnResponse(200 OK application/zip 12017B)"

12017バイトのZIPファイルが得られることがわかる。
ZIPファイルの内容を得るには、contentsというメッセージを送れば良い。

res contents.

ZIPファイルをアーカイブとして読み込むには、ZipArchiveのインスタンスに対してreadFrom:でストリームを与える。

arc := ZipArchive new readFrom: res contents readStream.

アーカイブされたファイル群（メンバー）は以下のように知ることができる。

arc members.
"an OrderedCollection(a ZipFileMember(Cat_1.svg) a ZipFileMember(Cat_2.svg)
 a ZipFileMember(Cat_1_Bitmap.png) a ZipFileMember(Cat_2_Bitmap.png))"

4つの画像ファイルが入っていることがわかる。
アーカイブから特定の画像ファイルを保存するには、以下のようにすればよい。

arc extractMember: 'Cat_1_Bitmap.png'.

簡単！と思ったのだが落とし穴があった。上をDo itするとエラーが発生する。

どうやらZipFileMemberクラスの extractToFileNamed:inDirectory: メソッドに問題があるらしい。

エラーを起こしている箇所はここである。

    fullDir
        forceNewFileNamed: file basename
        do: [:stream |  self extractTo: stream]]

よく見るとメソッド内でfullDirの値を設定している箇所がない。実際、fullDirの内容はnilだし、エラーはUndefinedObject（つまりnil）に対するメッセージ送信となっている。
これは想像だが、以前にFileDirectoryをFileSystemに置き換えた際、この部分の修正が取り残されたのではないだろうか。コメントぐらい残しとけよって感じである。Pharo1.4までさかのぼってみると、想像どおりFileDirectoryを用いてfullDirが作られていた。

extractToFileNamed: aLocalFileName inDirectory: dir
    | fullName fullDir |
    self isEncrypted ifTrue: [ ^self error: 'encryption unsupported' ].
    fullName := dir fullNameFor: aLocalFileName.
    fullDir := FileDirectory forFileName: fullName.
    fullDir assureExistence.
    self isDirectory
        ifFalse: [ fullDir
            forceNewFileNamed: (FileDirectory localNameFor: fullName)
            do: [:stream |  self extractTo: stream]]
    ifTrue: [ fullDir assureExistence ]

こういうことでメゲていてはいけない。せっかく全てのソースがアクセス可能なのだから自分で何とかすることを考えるべきである。
fullDirにはforceNewFileNamed:do:というメッセージとassureExistenceというメッセージが送られている。前者は新しいファイルを作ってファイルの中身を流し込んでおり、後者はディレクトリを作っているにすぎない。これを現在のFileSystemで実現することを考える。

    self isDirectory
        ifFalse: [
            file isFile
                ifTrue: [ file delete ].
            self extractTo: file writeStream ]
        ifTrue: [ file ensureCreateDirectory ]

上記が変更部分である。self isDirectory以降を書き換える。
これで晴れてZIPアーカイブからファイルを展開することができる。

arc extractMember: 'Cat_1_Bitmap.png'.
arc extractMember: 'Cat_2_Bitmap.png'.

以下をDo itすれば、展開したファイルをモーフとして取り込むことができる。

(PNGReadWriter formFromFileNamed: 'Cat_1_Bitmap.png') asMorph openInWorld.
(PNGReadWriter formFromFileNamed: 'Cat_2_Bitmap.png') asMorph openInWorld.

（番外編おわり）

今回はモーフに状態を持たせることについて学ぶ。
もちろん今までもモーフは大きさ、位置、色などさまざまな状態を持っていたが、それとは異なる内部的な状態を持たせたい。
例として今まで右に移動するだけだったMyMorphを、クリックするたびに90度ずつ向きを変えて移動するようにしよう。
さて、MyMorphで「移動」を実現しているのはstepメソッドである。

step
    self color: Color random.
    self topLeft: (self topLeft + (2@0))

MyMorphの左上のX座標を2増やすことで右に2ピクセル移動する。
例えばモーフが右に90度向きを変える（つまり下向きに移動する）とすれば、３行目は以下のようになるだろう。

self topLeft: (self topLeft + (0@2))

さらに90度向きを変えると左向きに進み、コードは以下のようになる。

self topLeft: (self topLeft - (2@0))

モーフの左上座標に対して、一定数の座標値を加減することで向きが変わると考えられるので、以下のようにコードを変更できる。

self topLeft: (self topLeft + vec)

つまり、座標値に加えるvecが2@0であれば右に進み、0@2であれば下に進むので、（vecは）モーフが進む方向を表す状態とみなせる。
このvecは動作しているモーフ固有の情報である。他にMyMorphモーフがあったとしても、それぞれの値は独立している。
このような値を表すのにSmalltalkではインスタンス変数を用いる。インスタンス変数はクラスを定義する際に宣言し、そのクラスに属する全てのモーフが独立した値を持つようになる。
MyMorphにインスタンス変数vecを加えるには、以下のようにクラス定義を変更する。

Morph subclass: #MyMorph
	instanceVariableNames: 'vec'
	classVariableNames: ''
	category: 'Hajimeteno Morphic Tutorial'

文字通りinstanceVariableNames:の後の文字列が、インスタンス変数の並びを表す。複数のインスタンス変数が必要ならば、スペースで区切り両端をシングルクオートで囲んで（つまり文字列として）指定する。
第４回のクラス定義と同じ方法で、クラス定義のテンプレートを上のように修正してAcceptすれば、既存のMyMorphの定義は上書きされる。上書きをしてもメソッド定義は消えないので心配しなくて良いが、動作中のモーフがあるとクラス定義の変更の影響を受ける場合があるので、あらかじめ削除しておいた方が無難である。
インスタンス変数vecを加えたMyMorphをAcceptしたら、stepの内容を以下のように変更する。

step
    self color: Color random.
    self topLeft: (self topLeft + vec)

この状態でMyMorphを動かすと、vecが未定義なためにエラーが発生する。モーフの生成と同時にvecの初期値を設定する必要がある。
そのため第６回で説明したようにinitializeメソッドを以下のように変更し、vecの初期値を2@0とする。（モーフは右に進む）

initialize
    super initialize.
    vec := 2@0.
    self extent: 16@16

クリックするたびにモーフが90度向きを変えるようにするため、mouseDown:メソッドを修正する。

mouseDown: anEvent
    self extent: self extent + (10@10).
    vec := vec y negated @ vec x

インスタンス変数vecの値を変更する部分で説明が必要なのはnegatedメッセージの意味である。negatedメッセージはメッセージを送った数値の正負を反転した値を返すメッセージである。
上記までの変更を行えば、MyMorphはクリックするたびに右へ90度向きを変えながら移動するようになる。
（第１１回おわり）