Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

知らないと損するアプリ開発におけるStateMachineの活用法(15分版)

6,756 views

Published on

StateMachine for iOS/Android/ClientWeb Apps.

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

知らないと損するアプリ開発におけるStateMachineの活用法(15分版)

  1. 1. 知らないと損する アプリ開発における StateMachineの活用法 2014年10月 ゆめみ 森下 健 1
  2. 2. 自己紹介 • mokemokechicken @{Twitter, Facebook, Github, Qiita} • 株式会社ゆめみ 2014年度CTO • 設計/インフラ/サーバサイド/iOS が主 • こもんちゃん好きな二児のパパ 任期は1年なのです 2
  3. 3. 3 あるあるじゃない? あるよね? • 通信やダイアログやアニメーションが多い ViewControllerがカオス状態 • アプリの初期化・起動処理が 複雑でダ・ヴィンチ・コード級の謎 こんな困ったことありませんか?
  4. 4. 4 今回はそんな悩みを解決するState Machineの話だよ。 「Finite State Machine(有限状態機械、略してFSM)」と 呼ぶこともあるね。 そこで
  5. 5. 5 TVはリモコンの同じ電源ボタンを押しても振る舞いが 違うよね。これはTVが状態を持っている、からと言える。 これを状態図で表すとこんな感じになるよ。 OFF ON 電源ボタン / 電源ON 電源ボタン / 電源OFF 例えば
  6. 6. 6 「状態」「イベント」「アクション」「遷移」は大事な言葉だ から覚えてね。「状態OFF」のときに「電源ボタンイベン ト」で「電源ONアクション」が実行されて「状態ON」に遷 移する、という意味になるよ。 OFF ON 状態 イベント 遷移 アクション 電源ボタン / 電源ON 電源ボタン / 電源OFF
  7. 7. 7 例えば、TCPの通信状態は状態図で書くとわかりやす いね。 http://www.atmarkit.co.jp/ait/articles/0402/13/news096_3.html 状態 イベント アクション TCPの通信状態
  8. 8. 8 AndroidのActivityも状態図だと説明しやすいよ。 http://www.tutorialspoint.com/android/android_acitivities.htm 状態 アクション
  9. 9. 9 そして、StateMachineは簡単に言うと 状態図を実装したもの になります。 状態図 実装 StateMachine
  10. 10. 10 こんな風に状態図やStateMachineは色々なところで使 われているよ。
  11. 11. 11
  12. 12. 12 簡易実装ならまだ簡単なんだけどね StateMachineを実際に自分で実装すると結 構たいへん。 例えばJavaだと、ちょっとしたものでも数百行 になってしまう。
  13. 13. 13 そこでState Machine Compilerを使うよ。 SMC The State Machine Compiler http://smc.sourceforge.net/ ロゴには Map って書いてあるw そこで
  14. 14. 14 これを使うと、DSLで書いたコードから、「各言語の StateMachineコード」と「状態図(画像)」ができる。状態 図とコードが対応していることが保証されるので、 StateMachine部分のコードを読む必要が無くなる。 DSL 状態図 StateMachine コード 入力 出力 意味的に同じもの こっちを見れば こっちは見なくても良い
  15. 15. 15 実際の例
  16. 16. 16 では、実際のアプリケーションを考えます。 「ぺたんぷ」っていう「子供用ご褒美シールアプリ」を題 材にしてみるよ。
  17. 17. ③スタンプを選択 17 例えば、こんな仕様の画面制御を行うとします。 ①押せるスタンプを選べる ②アニメーション ④押したい場所でタップ
  18. 18. 18 こんな手順で進めていくよ 1.状態図を作る 2.DSLを書いてコンパイル 3.アクションを実装する SMCを使うときの3つのStep
  19. 19. 19 まず、ざっくりと状態名を考える。 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態 ①押せるスタンプを選べる ②アニメーション ③スタンプを選択 ④押したい場所でタップ
  20. 20. 20 遷移とイベント名を考えます 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態 tap button finish animation select stamp tap card
  21. 21. 21 他にもあり得るイベント・遷移を追加する。 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態 tap button select stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel
  22. 22. 22 とりあえずこんな感じで進めましょう! 足りないものは後で追加できるしね。 押せるスタンプを選べる アニメーション ①スタンプを選択 ②押したい場所でタップ 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button select stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel
  23. 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. 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. 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. 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) { // アニメーションコード } } ・・・ ←これ書いて これを書く→ 大事なことなので 2度言います
  27. 27. 27 この手法の良い点としてFSMや状態図はほぼ仕様書と 対応するということがあるよ。つまり、iOSやAndroidとい う別なプラットフォームでも同じものが使えます(普通は)。 押せるスタンプを選べる アニメーション ①スタンプを選択 ②押したい場所でタップ 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button select stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel 仕様書 状態図
  28. 28. 28 状態図と仕様書を見比べると仕様を満たせそうか判断 しやすいので、レビューがものすごく捗ります。状態図 が適切なら「設計上の大枠はOKだね」となります。 レビューも捗る! https://twitter.com/Hackadoll
  29. 29. 29 まあ、確かにね。 よろしい。ならば仕様追加だ。 ん〜、この程度UIだったら 別に要らないんじゃない? む、来たな
  30. 30. またひとつスタンプ をおせたね!! つぎもがんばって ね! 30 スタンプを押した時にアニメーションが追加されたよ。 スタンプが押されると キャラクターが登場し メッセージを表示 3秒で消える
  31. 31. 31 状態を1個追加して、遷移も変更するよ。 この追加した状態のEntryで表示を行い、Exitで表示を 消す、と良さそうだね。 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button select stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel メッセージ表示中 SHOWING_MESSAGE finish animation
  32. 32. 32 アクションを2つ追加するよ。 この時、他には何も手を入れなくて良いのがまた良い 所なんだよね。 Action class PetampAction : Petamp_Action { ・・・ func onEntryShowingMessage () { // メッセージ表示処理 // 3秒後にfsm.finish_animation() する } func onExitShowingMessage() { // メッセージ非表示処理 } ・・・ 単体テストも 書きやすい
  33. 33. 33 よろしい。 ならば仕様追加だ。 ん〜、この程度UIだったら いつも普通に書いてるよ? 仕様追加は 世の常人の常
  34. 34. 34 「スタンプを追加する機能」とその前に「親認証」を行う とするよ。 押せるスタンプを親が追加 下の数字を入力してください nine two seven 親認証スタンプ追加ボタン 「親認証ダイアログ」で認証を行う
  35. 35. 35 状態を2つ追加するよ。 それぞれの状態のEntry/Exitでダイアログを表示/非表 示するよ。親認証は「成功」「失敗」で遷移が変わるね。 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button select stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel メッセージ表示中 finish animation 親認証中 スタンプ追加中 tap_add ok ng finish
  36. 36. 36 Actionを4つ追加するよ。 この時、他には何も手を入れなくて良いのがまた良い 所なんだよね。 認証ダイアログ表示 認証ダイアログ非表示 スタンプ追加ダイアログ表示 スタンプ追加ダイアログ非表示 onEntryAuthParent() onExitAuthParent() onEntryAddingStamp() onExitAddingStamp() 親認証中 スタンプ追加中 大事なことなので2度 (ry
  37. 37. 37 少し複雑になったね。でも、この図のおかげで仕様書と 見比べれば何をやっているか想像つくし、変更するとき にどこを触れば良いかもわかりやすいでしょ? http://goodparts.d.yumemi.jp/generator#StateMachineGenerator--078e39c669ee45f55a2bf6b92523d32f0924aad8
  38. 38. 38 よろしい。 ならば仕様追加だ。 ま、まだまだ・・・ やれる・・・ 実際普通に 増えるんだよね・・・
  39. 39. 39 この2つの仕様が追加されたよ。 もう説明は省くけど、似たような感じで対応できるよ。 2012/12/ 21 スタンプをタップするとスタンプを 押した日付が見える 長押しでXボタン出現→削除
  40. 40. 40 コンポーネント間の連携はこんな感じになるよ。 ViewController Activity FSM Action ユーザ Model Event ① onBtnTouch ② tap 初期 伸長中 ③ tap ④ onEnterExpanding() ⑤ Animation処理開始
  41. 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があれば1行!
  42. 42. 42 まとめ
  43. 43. StateMachineのメリット • 複雑な非同期ロジックがある場合 – 状態図による抜け漏れが(少)ない分析・設計 – 可読性が高く・変更に強い実装 – レビューが容易、再利用性も高い 43 夢のような感じだ
  44. 44. StateMachineのデメリット • 新しい概念を覚えないといけない(人が多い) – 覚えよう • StateMachineを実装するのが大変 – SMC使う • 導入前後ではリファクタリングが必要 – これはしょうがない 44 まあ、手間が増えるのは確かだね
  45. 45. 45

×