Downloaded 21 times
Uploaded byKen Morishita
知らないと損するアプリ開発におけるStateMachineの活用法（１５分版）
StateMachine for iOS/Android/ClientWeb Apps.
![S08_Microsoft 365 E5 Compliance による内部不正対策の実践 [Microsoft Japan Digital Days]](https://cdn.slidesharecdn.com/ss_thumbnails/s08microsoft365e5compliance-211028192815-thumbnail.jpg?width=640&height=640&fit=bounds)
知らないと損するアプリ開発におけるStateMachineの活用法（１５分版）
- 1.
- 2. 自己紹介 • mokemokechicken @{Twitter, Facebook,Github, Qiita} • 株式会社ゆめみ 2014年度CTO • 設計/インフラ/サーバサイド/iOS が主 • こもんちゃん好きな二児のパパ 任期は1年なのです 2
- 3. 3 あるあるじゃない？ あるよね？ • 通信やダイアログやアニメーションが多い ViewControllerがカオス状態 •アプリの初期化・起動処理が 複雑でダ・ヴィンチ・コード級の謎 こんな困ったことありませんか？
- 4. 4 今回はそんな悩みを解決するState Machineの話だよ。 「Finite StateMachine（有限状態機械、略してFSM）」と 呼ぶこともあるね。 そこで
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. 13 そこでState Machine Compilerを使うよ。 SMC TheState Machine Compiler http://smc.sourceforge.net/ ロゴには Map って書いてあるｗ そこで
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. 21 他にもあり得るイベント・遷移を追加する。 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態 tap button select stamp tapcard 縮小中 finish animation tap else finish stamp finish animation cancel
- 22. 22 とりあえずこんな感じで進めましょう！ 足りないものは後で追加できるしね。 押せるスタンプを選べる アニメーション ①スタンプを選択 ②押したい場所でタップ 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button selectstamp 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 { tapEXPANDING {} } 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 selectstamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel 仕様書 状態図
- 28.
- 29.
- 30.
- 31. 31 状態を１個追加して、遷移も変更するよ。 この追加した状態のEntryで表示を行い、Exitで表示を 消す、と良さそうだね。 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button selectstamp 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() { // メッセージ非表示処理 } ・・・ 単体テストも 書きやすい
- 33.
- 34.
- 35. 35 状態を２つ追加するよ。 それぞれの状態のEntry/Exitでダイアログを表示/非表 示するよ。親認証は「成功」「失敗」で遷移が変わるね。 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button selectstamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel メッセージ表示中 finish animation 親認証中 スタンプ追加中 tap_add ok ng finish
- 36.
- 37.
- 38.
- 39.
- 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.
- 43. StateMachineのメリット • 複雑な非同期ロジックがある場合 – 状態図による抜け漏れが（少）ない分析・設計 –可読性が高く・変更に強い実装 – レビューが容易、再利用性も高い 43 夢のような感じだ
- 44. StateMachineのデメリット • 新しい概念を覚えないといけない（人が多い） – 覚えよう •StateMachineを実装するのが大変 – SMC使う • 導入前後ではリファクタリングが必要 – これはしょうがない 44 まあ、手間が増えるのは確かだね
- 45.