Pyonkeeの皮をはぐiPadでSmalltalkハッキング

第69回Smalltalk勉強会合同会社ソフトウメヤ 梅澤真史

合同会社ソフトウメヤ梅澤真史

<ume@softumeya.com>

Smalltalkビアバッシュ2014

ピョンキーとは?● iPadで動くScratchクローン

○ Scratch 1.4ベース

○ JMMさんのScratch Viewerを復活させたもの

■ http://www.slideshare.net/umejava/i-padscratch○ タッチ UIに最適化

○ カメラとの連携など

● App Storeで入手可能

○ https://itunes.apple.com/jp/app/pyonki/id905012686○ 4ヶ月で10000 DL 突破!

ピョンキーはOSS● GPLまたはScratchライセンス

● githubでソースの閲覧可能

○ https://github.com/SoftUmeYa/Pyonkee● 自由にカスタマイズして好きな環境にできる

ウサギの皮をかぶったネズミ

● Squeak がいる!

● ちょっとしたハッキングで

Smalltalk環境としてピョンキーを動かしてみる

○ PyonTalk と命名

● 評判よければ単体でAppStoreに出します!?

改造のポリシー

● あまり頑張らない

○ ビアバッシュ向けに最小限の変更で対処

● 破壊的にはやらない

○ Smalltalk側もObjective-C側も、手を加えた部分は

明確に分離できるようにする

■ 将来のピョンキーのバージョンアップにも

追随できるように

デモ定番の 3+4 を“print it”

デモ縦モードで入力をスムーズに

do it

print it

inspect it

esc(menu)

space

Transcript

Workspace

Browser

enter

backspace

ボタン配置

Smalltalk側の改造の前に

● PyonkeeのScratch.imageはレガシーVM用(Cogでない)○ 古いVMを入手する必要あり

● Squeak 3.10.2J-all-in-one.zip ○ http://sourceforge.jp/projects/squeak-

ja/downloads/51524/Squeak3.10.2J-all-in-one.zip/○ 同梱されるSqueak-4.2.2beta1Uの VMを使う

開発用モードでの作業

● Scratch.image起動後、Shiftを押しながらFileメニューを選

ぶと、”Exit User Mode”の項目がある

○ Smalltalkでの開発モードへ

● Change Sorterを開き、 PyonTalkといった

名前で新たなチェンジセットを作って

作業すると良い

● 作業後はShift+Fileメニューから

”Save Image in User Mode”で抜けること

Hack1: 起動後いきなり開発者モードに

● IPhoneScratchProxy classの起動時フック

(prepareScratchFrameMorphBeforeOpen)に2行追加

prepareScratchFrameMorphBeforeOpen

SqueakProxy scratchMorphic: ScratchFrameMorph allInstances first.SqueakProxy scratchMorphic setupTheLanguageOnThisDevice.

SqueakProxy scratchMorphic fillScreenOff.Preferences useLargeFonts

フルスクリーンoff

フォントを大きく

Hack2: 開発ツールを楽に起動

● 右上のモード切り替えボタンを流用

○ IPhoneScratchProxy>>setViewModeIndex:の書き換え

○setViewModeIndex: viewModeNumberviewModeNumber caseOf: {

[0]->[Transcript open].[1]->[Workspace open].[2]->[Browser openBrowser].

}

0,1,2をそれぞれTranscript, Workspace, Browserの起動に割りあてる

Hack3: 黄ボタンメニューを楽に表示(1)● Escキーで黄色ボタンメニューが瞬時に開くように

○ PluggableListMorph○ TextMorphForEditorView

の書き換え

Hack3: 黄ボタンメニューを楽に表示(2)● PluggableListMorph>>specialKeyPressed:

specialKeyPressed: asciiValue | oldSelection nextSelection max howManyItemsShowing |nextSelection := oldSelection := self getCurrentSelectionIndex.max := self maximumSelection.asciiValue == 27 ifTrue: [

self yellowButtonActivity: false.].asciiValue == 31 ifTrue: [...

Esc(ASCIIコード27)で黄ボタンメニューが開くように

Hack3: 黄ボタンメニューを楽に表示(3)● TextMorphForEditorView>>keyStroke:

keyStroke: evt| view |evt keyValue == 27 ifTrue: [

^ editView yellowButtonActivity.].(editView scrollByKeyboard: evt) ifTrue: [^self]....

Esc(ASCIIコード27)で黄ボタンメニューが開くように

Hack4:一発でdo it, print it, inspect it ● TextMorphForEditorView>>keyStroke:

keyStroke: evt| view |evt keyValue == 27 ifTrue: [

^ editView yellowButtonActivity.].evt keyValue == 24 ifTrue: [^ editView doIt].evt keyValue == 25 ifTrue: [^ editView printIt].evt keyValue == 26 ifTrue: [^ editView inspectIt]....

普段使わない制御文字(24,25,26)をdo it, print it, inspect itに

Hack5:ハロを２本指クリックで(1)● PyonkeeのMorphicEventでは2本指クリックでreserverd=3

のフラグが立つ

○ 条件を黄ボタンメニューから青ボタン(ハロ)メニューへ移す

● MorphicEvent>>rightButtonPressed:rightButtonPressed

^ (buttons anyMask: 3) or: [self redButtonPressed & self controlKeyPressed]

”or: [self reserved = 3]”or: [IPhonePresentationSpaceKeyState isCommandPressed]

reserved = 3の条件をコメントアウト

Hack5:ハロを２本指クリックで(2)● MorphicEvent>>blueButtonPressed:

blueButtonPressed^ (buttons anyMask: 1) or: [self reserved = 3]

ST側は以上!

reserved = 3の条件を追加

Objective-C側の準備

● Xcode 6.1があれば良い

○ https://developer.apple.com/jp/xcode/downloads/● Obj-Cソースの直接書き換えは避け

PyonTalkカテゴリを作って対応

○ SUYScratchPresentationSpace+PyonTalk.h○ SUYScratchPresentationSpace+PyonTalk.m

の追加

● XIB部分は面倒なので直接書き換え

モード切り替えボタン対応

● SUYScratchPresentationSpace+PyonTalk.m○ モード切り替えボタン選択時のコールバックを書き換え

■ そのままでは表示が消えてしまうため

- (void)radioButtonSetController:(GSRadioButtonSetController *)controller didSelectButtonAtIndex:(NSUInteger)selectedIndex{ //[self changedViewModeIndex:selectedIndex]; [self setViewModeIndex:selectedIndex];}

表示が消えないようコメントアウトに

両サイドボタンを開発向けに

● ScratchIPhonePresentationSpaceiPad.xib○ 両サイドのボタンに Esc, Backspace, Enterなど配置

● SUYScratchPresentationSpace+PyonTalk.m○ 各キー押下時のメソッドを追加していく

- (IBAction) keyEscape: (id) sender { [self pushCharacter: [NSString stringWithFormat:@"%c", 27]];}- (IBAction) keyBackspace: (id) sender { [self pushCharacter: [NSString stringWithFormat:@"%c", 8]];}...

ESC(ASCIIコード27)をSmalltalk側に送る

Do it系ツールバーの追加

● ScratchIPhonePresentationSpaceiPad.xib○ 左上が空いているので”do it”, “print it”, “inspect it”ボタンを配置

● SUYScratchPresentationSpace+PyonTalk.m○ 各キー用のメソッドを追加 (前ページとキーが違うだけ)

- (IBAction) doIt: (id) sender { [self pushCharacter: [NSString stringWithFormat:@"%c", 24]];}- (IBAction) printIt: (id) sender { [self pushCharacter: [NSString stringWithFormat:@"%c", 25]];}...

制御文字24をSmalltalk側に送る

縦向き対応は?● Auto Layoutでちまちま指定することでなんとかなる

○ ScratchIPhonePresentationSpaceiPad.xib○ 省略

○ 次期Pyonkeeが最初から縦向き対応になるため

ObjC側も以

上!

変更分のソースなど

● とりあえずGistに置いています

○ Smalltalk■ https://gist.github.com/mumez/8390779c2913bfec79ff

○ Objective-C■ https://gist.github.com/mumez/98a55fba675e417425c8

● 次期Pyonkeeのソース公開時のタイミングで

PyonTalkプロジェクトとして独立させたい

まとめ

● PyonkeeのSmalltalk開発環境化は割とたやすい

○ 今日の情報を元に、いろいろ試してみてください

● 今後の予定○ SqueakV2.sourcesやScratch.changesも入れる

○ メールでのソース送信(Mail out?)対応

○ AppStoreデビュー?