知らないと損するアプリ開発におけるStateMachineの活用法（１５分版）
•Download as PPTX, PDF•
24 likes•7,897 views
StateMachine for iOS/Android/ClientWeb Apps.
More Related Content
What's hot
What's hot (20)
Viewers also liked
More from Ken Morishita
Recently uploaded
Recently uploaded (12)
知らないと損するアプリ開発におけるStateMachineの活用法（１５分版）
- 2. 自己紹介 • mokemokechicken @{Twitter, Facebook, Github, Qiita} • 株式会社ゆめみ 2014年度CTO • 設計/インフラ/サーバサイド/iOS が主 • こもんちゃん好きな二児のパパ 任期は1年なのです 2
- 3. 3 あるあるじゃない？ あるよね？ • 通信やダイアログやアニメーションが多い ViewControllerがカオス状態 • アプリの初期化・起動処理が 複雑でダ・ヴィンチ・コード級の謎 こんな困ったことありませんか？
- 4. 4 今回はそんな悩みを解決するState Machineの話だよ。 「Finite State Machine（有限状態機械、略してFSM）」と 呼ぶこともあるね。 そこで
- 5. 5 TVはリモコンの同じ電源ボタンを押しても振る舞いが 違うよね。これはTVが状態を持っている、からと言える。 これを状態図で表すとこんな感じになるよ。 OFF ON 電源ボタン / 電源ON 電源ボタン / 電源OFF 例えば
- 6. 6 「状態」「イベント」「アクション」「遷移」は大事な言葉だ から覚えてね。「状態OFF」のときに「電源ボタンイベン ト」で「電源ONアクション」が実行されて「状態ON」に遷 移する、という意味になるよ。 OFF ON 状態 イベント 遷移 アクション 電源ボタン / 電源ON 電源ボタン / 電源OFF
- 11. 11
- 13. 13 そこでState Machine Compilerを使うよ。 SMC The State Machine Compiler http://smc.sourceforge.net/ ロゴには Map って書いてあるｗ そこで
- 15. 15 実際の例
- 19. 19 まず、ざっくりと状態名を考える。 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態 ①押せるスタンプを選べる ②アニメーション ③スタンプを選択 ④押したい場所でタップ
- 20. 20 遷移とイベント名を考えます 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態 tap button finish animation select stamp tap card
- 21. 21 他にもあり得るイベント・遷移を追加する。 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態 tap button select stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel
- 22. 22 とりあえずこんな感じで進めましょう！ 足りないものは後で追加できるしね。 押せるスタンプを選べる アニメーション ①スタンプを選択 ②押したい場所でタップ 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button select stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel
- 23. 23 状態図通りにDSLを書いていくよ。 「状態」「イベント」「遷移」は状態図にあるけど、「アク ション名」をさらに考える必要があるよ。 オススメは「機械的に付けること」かな。 初期 INIT 伸長中 EXPANDING シート表示中 SHOWING_SHEET 状態遷移 tap 縮小中 tap else finish INIT { tap EXPANDING {} } EXPANDING Entry { onEntryExpading(); } { finish SHOWING_SHEET {} } SHOWING_SHEET ・・・ DSL 名前考えるのむずい onEntryExpading
- 24. 24 DSLをSMCで変換 するよ。画像とFSM が生成されます。 INIT { tap EXPANDING {} } EXPANDING Entry { onEntryExpading(); } { finish SHOWING_SHEET {} } SHOWING_SHEET ・・・ DSL http://goodparts.d.yumemi.jp/generator#StateMachineGenerator-- 8774598a35e825c6da9a9275f50cb373b5685e06
- 25. 25 必要なアクションを書いていくよ。 アクションの内容は、「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も生成してくれる。 （他の言語はしてくれない…）
- 26. 26 こんな感じで「状態図→DSL → アクションコード」という 流れになるよ。コーディングとしては、「DSL書いて、アク ション書く」という感じだね。 INIT { tap EXPANDING {} } EXPANDING Entry { onEntryExpading(); } { finish SHOWING_SHEET {} } SHOWING_SHEET ・・・ DSL Action class PetampAction : Petamp_Action { func onEntryExpanding() { UIView.animateWithDuration(0.5) { // アニメーションコード } } ・・・ ←これ書いて これを書く→ 大事なことなので ２度言います
- 27. 27 この手法の良い点としてFSMや状態図はほぼ仕様書と 対応するということがあるよ。つまり、iOSやAndroidとい う別なプラットフォームでも同じものが使えます（普通は）。 押せるスタンプを選べる アニメーション ①スタンプを選択 ②押したい場所でタップ 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button select stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel 仕様書 状態図
- 30. またひとつスタンプ をおせたね！！ つぎもがんばって ね！ 30 スタンプを押した時にアニメーションが追加されたよ。 スタンプが押されると キャラクターが登場し メッセージを表示 ３秒で消える
- 31. 31 状態を１個追加して、遷移も変更するよ。 この追加した状態のEntryで表示を行い、Exitで表示を 消す、と良さそうだね。 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button select stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel メッセージ表示中 SHOWING_MESSAGE finish animation
- 32. 32 アクションを２つ追加するよ。 この時、他には何も手を入れなくて良いのがまた良い 所なんだよね。 Action class PetampAction : Petamp_Action { ・・・ func onEntryShowingMessage () { // メッセージ表示処理 // ３秒後にfsm.finish_animation() する } func onExitShowingMessage() { // メッセージ非表示処理 } ・・・ 単体テストも 書きやすい
- 35. 35 状態を２つ追加するよ。 それぞれの状態のEntry/Exitでダイアログを表示/非表 示するよ。親認証は「成功」「失敗」で遷移が変わるね。 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button select stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel メッセージ表示中 finish animation 親認証中 スタンプ追加中 tap_add ok ng finish
- 39. 39 この２つの仕様が追加されたよ。 もう説明は省くけど、似たような感じで対応できるよ。 2012/12/ 21 スタンプをタップするとスタンプを 押した日付が見える 長押しでXボタン出現→削除
- 40. 40 コンポーネント間の連携はこんな感じになるよ。 ViewController Activity FSM Action ユーザ Model Event ① onBtnTouch ② tap 初期 伸長中 ③ tap ④ onEnterExpanding() ⑤ Animation処理開始
- 41. 41 続きは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があれば１行！
- 42. 42 まとめ
- 43. StateMachineのメリット • 複雑な非同期ロジックがある場合 – 状態図による抜け漏れが（少）ない分析・設計 – 可読性が高く・変更に強い実装 – レビューが容易、再利用性も高い 43 夢のような感じだ
- 44. StateMachineのデメリット • 新しい概念を覚えないといけない（人が多い） – 覚えよう • StateMachineを実装するのが大変 – SMC使う • 導入前後ではリファクタリングが必要 – これはしょうがない 44 まあ、手間が増えるのは確かだね
- 45. 45