知らないと損するアプリ開発におけるStateMachineの活用法（full版）
•Download as PPTX, PDF•
86 likes•18,937 views
StateMachine for client apps.
![22
さっきの ON/OFF のStateMachineをSMCのDSLで書くと
こうなるよ。だいたい見たら対応がわかるんじゃないか
な。
[…略…]
OFF
Entry { offAction(); }
{
power ON {}
}
ON
Entry { onAction(); }
{
power OFF {}
}
状態
イベント
遷移先状態
アクション
OFF ON
電源ボタン / 電源ON
電源ボタン / 電源OFF](https://image.slidesharecdn.com/statemachinefull-141010020134-conversion-gate02/85/StateMachine-full-22-320.jpg)
![23
「Entry」「Exit」というイベントにもアクションを登録できる
よ。これらは「その状態に入った・出たというイベント」を
表すよ。どの遷移（矢印）で来ても発火する共通処理に
なるよ。
[…略…]
OFF
Entry { offAction(); }
{
power ON {}
}
ON
Entry { onAction(); }
{
power OFF {}
}
Entry
OFF ON
電源ボタン / 電源ON
電源ボタン / 電源OFF
Entry
Exit](https://image.slidesharecdn.com/statemachinefull-141010020134-conversion-gate02/85/StateMachine-full-23-320.jpg)
![25
FSMはアクションを呼び出すけど、そのアクションの中
身は自分で書くことになる
状態
イベント
遷移 アクション
DSL
[…略…]
OFF
Entry { offAction(); }
{
power ON {}
}
ON
Entry { onAction(); }
{
power OFF {}
}
func offAction() {
・・・
}
func onAction() {
・・・
}
FSM](https://image.slidesharecdn.com/statemachinefull-141010020134-conversion-gate02/85/StateMachine-full-25-320.jpg)
![26
つまり、開発者が行うのは、DSLとアクションを書くとい
う部分になるね。
アクション
DSL
←これ書いて
これを書く→
[…略…]
OFF
Entry { offAction(); }
{
power ON {}
}
ON
Entry { onAction(); }
{
power OFF {}
}
func offAction() {
・・・
}
func onAction() {
・・・
}](https://image.slidesharecdn.com/statemachinefull-141010020134-conversion-gate02/85/StateMachine-full-26-320.jpg)
知らないと損するアプリ開発におけるStateMachineの活用法（full版）
- 2. 2 あるあるじゃない？ あるよね？ • 通信やダイアログやアニメーションが多い ViewControllerがカオス状態 • アプリの初期化・起動処理が 複雑でダ・ヴィンチ・コード級の謎 こんな困ったことありませんか？
- 3. 3 今回はそんな悩みを解決するState Machineの話だよ。 「Finite State Machine（有限状態機械、略してFSM）」と 呼ぶこともあるね。 そこで
- 4. 4 こんな流れで説明するよ • StateMachine？ • StateMachine Generator • 実際の例 • StateMachineの設計Tips • 考察
- 7. 7 例えば、TVはリモコンの同じ電源ボタンを押しても振る 舞いが違うよね。これはTVが状態を持っている、からと 言える。 これを状態図で表すとこんな感じになるよ。 OFF ON 電源ボタン / 電源ON 電源ボタン / 電源OFF
- 8. 8 「状態」「イベント」「アクション」「遷移」は大事な言葉だ から覚えてね。「状態OFF」のときに「電源ボタンイベン ト」で「電源ONアクション」が実行されて「状態ON」に遷 移する、という意味になるよ。 OFF ON 状態 イベント 遷移 アクション 電源ボタン / 電源ON 電源ボタン / 電源OFF
- 15. 15 つまり、StateMachineが解決する問題は、アプリ開発で 起こる問題と近いんだよ。使えそうでしょ？ ■ スマホアプリの性質・問題 多様な非同期イベント（UI, 通信, センサー) 頻繁に発生する仕様変更（特にUI） 分散されて見通しが悪い非同期ロジック（初期化処理等）
- 16. 16
- 18. 18 そこでState Machine Compilerを使うよ。 これを使うと、DSLで書いたコードから、「各言語の StateMachineコード」と「状態図(画像)」ができるのだ。 ※DSL: Domain Specific Language (=ドメイン固有言語 ≈ オレオレ言語) SMC The State Machine Compiler http://smc.sourceforge.net/ ロゴには Map って書いてあるｗ そこで
- 20. 20 このメリットは非常に大きいと思うの。 なので、これからはこのSMCを使うという前提で話を進 めるよ！ ■ SMCより提供 • Java • Objective-C • Python • Ruby • JavaScript ■ゆめみオリジナル • JavaScript（β） • Swift（β） 対応言語
- 22. 22 さっきの ON/OFF のStateMachineをSMCのDSLで書くと こうなるよ。だいたい見たら対応がわかるんじゃないか な。 […略…] OFF Entry { offAction(); } { power ON {} } ON Entry { onAction(); } { power OFF {} } 状態 イベント 遷移先状態 アクション OFF ON 電源ボタン / 電源ON 電源ボタン / 電源OFF
- 23. 23 「Entry」「Exit」というイベントにもアクションを登録できる よ。これらは「その状態に入った・出たというイベント」を 表すよ。どの遷移（矢印）で来ても発火する共通処理に なるよ。 […略…] OFF Entry { offAction(); } { power ON {} } ON Entry { onAction(); } { power OFF {} } Entry OFF ON 電源ボタン / 電源ON 電源ボタン / 電源OFF Entry Exit
- 25. 25 FSMはアクションを呼び出すけど、そのアクションの中 身は自分で書くことになる 状態 イベント 遷移 アクション DSL […略…] OFF Entry { offAction(); } { power ON {} } ON Entry { onAction(); } { power OFF {} } func offAction() { ・・・ } func onAction() { ・・・ } FSM
- 26. 26 つまり、開発者が行うのは、DSLとアクションを書くとい う部分になるね。 アクション DSL ←これ書いて これを書く→ […略…] OFF Entry { offAction(); } { power ON {} } ON Entry { onAction(); } { power OFF {} } func offAction() { ・・・ } func onAction() { ・・・ }
- 28. 28 実際の例
- 32. 32 まず、ざっくりと状態名を考える。 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態 ①押せるスタンプを選べる ②アニメーション ③スタンプを選択 ④押したい場所でタップ
- 33. 33 遷移とイベント名を考えます 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態 tap button finish animation select stamp tap card
- 34. 34 他にもあり得るイベント・遷移を追加する。 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態 tap button select stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel
- 35. 35 とりあえずこんな感じで進めましょう！ 足りないものは後で追加できるから、それほど気にしな くてもOKだよ！ 押せるスタンプを選べる アニメーション ①スタンプを選択 ②押したい場所でタップ 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button select stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel
- 36. 36 DSLを書いていくよ。Action名は機械的に名前を付ける 方が良いと思う。アプリケーションに特化した名前を付 けると、アプリの仕様や意味合いが変わった時に違和 感が出てしまうことがあるよ。 初期 INIT 伸長中 EXPANDING シート表示中 SHOWING_SHEET 状態遷移 tap 縮小中 tap else finish INIT { tap EXPANDING {} } EXPANDING Entry { onEntryExpading(); } { finish SHOWING_SHEET {} } SHOWING_SHEET ・・・ DSL 名前考えるのむずい onEntryExpading
- 37. 37 DSLをSMCで変換 するよ。画像とFSM が生成されます。 INIT { tap EXPANDING {} } EXPANDING Entry { onEntryExpading(); } { finish SHOWING_SHEET {} } SHOWING_SHEET ・・・ DSL http://goodparts.d.yumemi.jp/generator#StateMachineGenerator-- 8774598a35e825c6da9a9275f50cb373b5685e06
- 38. 38 必要なアクションを書いていくよ。 アクションの内容は、「Viewの操作」「通信開始」などに なるから、基本的にSDKや自分のコード依存だね。 public protocol Petamp_Action { func onEntryExpading() func onEntryShrinking() func onEntryStampFinished() func onEntryStampSelected() } 生成されたコード (Action Protocol) Action class PetampAction : Petamp_Action { func onEntryExpanding() { UIView.animateWithDuration(0.5) { // アニメーションコード } } ・・・ 自作Swift版はprotocolも生成してくれる。 （他の言語はしてくれない…）
- 39. 39 こんな感じで状態遷移などの仕様を表現している部分 は自動生成したり可読性を高めて、アクションなどの実 装依存の部分だけ自分でコードを書くということができ るよ。 INIT { tap EXPANDING {} } EXPANDING Entry { onEntryExpading(); } { finish SHOWING_SHEET {} } SHOWING_SHEET ・・・ DSL Action class PetampAction : Petamp_Action { func onEntryExpanding() { UIView.animateWithDuration(0.5) { // アニメーションコード } } ・・・ ←これ書いて これを書く→ 大事なことなので ２度言います
- 40. 40 この手法の良い点としてFSMや状態図はほぼ仕様書と 対応するということがあるよ。つまり、iOSやAndroidとい う別なプラットフォームでも同じものが使えます（普通は）。 押せるスタンプを選べる アニメーション ①スタンプを選択 ②押したい場所でタップ 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button select stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel 仕様書 状態図
- 45. またひとつスタンプ をおせたね！！ つぎもがんばって ね！ 45 スタンプを押した時にアニメーションが追加されたよ。 スタンプが押されると キャラクターが登場し メッセージを表示 ３秒で消える
- 46. 46 状態を１個追加して、遷移も変更するよ。 この追加した状態のEntryで表示を行い、Exitで表示を 消す、と良さそうだね。 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button select stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel メッセージ表示中 SHOWING_MESSAGE finish animation
- 47. 47 アクションを２つ追加するよ。 この時、他には何も手を入れなくて良いのがまた良い 所なんだよね。 Action class PetampAction : Petamp_Action { ・・・ func onEntryShowingMessage () { // メッセージ表示処理 // ３秒後にfsm.finish_animation() する } func onExitShowingMessage() { // メッセージ非表示処理 } ・・・ 単体テストも 書きやすい
- 48. 48 どう？ 簡単でしょ？
- 51. 51 状態を２つ追加するよ。 それぞれの状態のEntry/Exitでダイアログを表示/非表 示するよ。親認証は「成功」「失敗」で遷移が変わるね。 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button select stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel メッセージ表示中 finish animation 親認証中 スタンプ追加中 tap_add ok ng finish
- 55. 55 この２つの仕様が追加されたよ。 もう説明は省くけど、似たような感じで対応できるよ。 2012/12/ 21 スタンプをタップするとスタンプを 押した日付が見える 長押しでXボタン出現→削除
- 56. 56 コンポーネント間の連携はこんな感じになるよ。電源ボ タンの時と同じだね。 ViewController Activity FSM Action ユーザ Model Event ① onBtnTouch ② tap 初期 伸長中 ③ tap ④ onEnterExpanding() ⑤ Animation処理開始
- 57. 57 続きはWebで！ http://qiita.com/mokemokechicken/items/9f59bbb11eec2f30b524 SMCの実行環境 % docker run -d -p 8000:8000 -p 9000:9000 -p 10022:22 -v /var/lib/smc:/application/GoodParts/mnt mokemokechicken/smc_service Dockerがあれば１行！
- 62. 62 考察
- 68. 68 まとめ
- 69. StateMachineのメリット • 複雑な非同期ロジックがある場合 – 状態図による抜け漏れが（少）ない分析・設計 – 可読性が高く・変更に強い実装 – レビューが容易、再利用性も高い 69 夢のような感じだ
- 70. StateMachineのデメリット • 新しい概念を覚えないといけない（人が多い） – 覚えよう • StateMachineを実装するのが大変 – SMC使う • 導入前後ではリファクタリングが必要 – これはしょうがない 70 まあ、手間が増えるのは確かだね
- 71. 71