Submit Search
Upload
知らないと損するアプリ開発におけるStateMachineの活用法(15分版)
•
Download as PPTX, PDF
•
24 likes
•
7,885 views
Ken Morishita
Follow
StateMachine for iOS/Android/ClientWeb Apps.
Read less
Read more
Technology
Report
Share
Report
Share
1 of 45
Download now
Recommended
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
Springを何となく使ってる人が抑えるべきポイント
Springを何となく使ってる人が抑えるべきポイント
土岐 孝平
MySQLレプリケーションあれやこれや
MySQLレプリケーションあれやこれや
yoku0825
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
iOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPractice
Ken Morishita
SQL大量発行処理をいかにして高速化するか
SQL大量発行処理をいかにして高速化するか
Shogo Wakayama
組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術
Takuto Wada
これから始めるSpringのwebアプリケーション
これから始めるSpringのwebアプリケーション
土岐 孝平
Recommended
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
Springを何となく使ってる人が抑えるべきポイント
Springを何となく使ってる人が抑えるべきポイント
土岐 孝平
MySQLレプリケーションあれやこれや
MySQLレプリケーションあれやこれや
yoku0825
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
iOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPractice
Ken Morishita
SQL大量発行処理をいかにして高速化するか
SQL大量発行処理をいかにして高速化するか
Shogo Wakayama
組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術
Takuto Wada
これから始めるSpringのwebアプリケーション
これから始めるSpringのwebアプリケーション
土岐 孝平
Spring 歴約1年初心者の Test 奮闘記
Spring 歴約1年初心者の Test 奮闘記
chishizu naito
マインドマップを使った 仕様分析&テスト設計
マインドマップを使った 仕様分析&テスト設計
Akira Ikeda
入社1年目のプログラミング初心者がSpringを学ぶための手引き
入社1年目のプログラミング初心者がSpringを学ぶための手引き
土岐 孝平
継続的にテスト可能な設計を考える
継続的にテスト可能な設計を考える
Atsushi Nakamura
Spring Fest 2018 Spring Bootで作るRESTful Web Service
Spring Fest 2018 Spring Bootで作るRESTful Web Service
WataruOhno
IOS/Androidアプリの3つの大事な設計方針
IOS/Androidアプリの3つの大事な設計方針
Ken Morishita
SpringBootTest入門
SpringBootTest入門
Yahoo!デベロッパーネットワーク
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
Ken Morishita
Strutsから移行する人のためのjsf基礎
Strutsから移行する人のためのjsf基礎
Satoshi Kubo
Iocコンテナについて
Iocコンテナについて
Akio Terayama
ITコミュニティと情報発信に共通する成長と貢献の要素
ITコミュニティと情報発信に共通する成長と貢献の要素
NISHIHARA Shota
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
JustSystems Corporation
RailsでのREST API開発の知見共有
RailsでのREST API開発の知見共有
Yusuke Kon
ワタシはSingletonがキライだ
ワタシはSingletonがキライだ
Tetsuya Kaneuchi
60分でわかった気になるISO29119 #wacate
60分でわかった気になるISO29119 #wacate
Kinji Akemine
Spring Data RESTを利用したAPIの設計と、作り直しまでの道のり
Spring Data RESTを利用したAPIの設計と、作り直しまでの道のり
Rakuten Group, Inc.
ジャストシステムJava100本ノックのご紹介
ジャストシステムJava100本ノックのご紹介
JustSystems Corporation
Spring boot 勉強会
Spring boot 勉強会
太志郎 遠藤
Pivotal認定講師によるSpring Framework 5.1 & Spring Boot 2.1ハンズオン! #jjug_ccc
Pivotal認定講師によるSpring Framework 5.1 & Spring Boot 2.1ハンズオン! #jjug_ccc
Masatoshi Tada
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
Ken Morishita
WKWebViewとUIWebView
WKWebViewとUIWebView
Yuki Hirai
Mvc
Mvc
Shutaro Anno
More Related Content
What's hot
Spring 歴約1年初心者の Test 奮闘記
Spring 歴約1年初心者の Test 奮闘記
chishizu naito
マインドマップを使った 仕様分析&テスト設計
マインドマップを使った 仕様分析&テスト設計
Akira Ikeda
入社1年目のプログラミング初心者がSpringを学ぶための手引き
入社1年目のプログラミング初心者がSpringを学ぶための手引き
土岐 孝平
継続的にテスト可能な設計を考える
継続的にテスト可能な設計を考える
Atsushi Nakamura
Spring Fest 2018 Spring Bootで作るRESTful Web Service
Spring Fest 2018 Spring Bootで作るRESTful Web Service
WataruOhno
IOS/Androidアプリの3つの大事な設計方針
IOS/Androidアプリの3つの大事な設計方針
Ken Morishita
SpringBootTest入門
SpringBootTest入門
Yahoo!デベロッパーネットワーク
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
Ken Morishita
Strutsから移行する人のためのjsf基礎
Strutsから移行する人のためのjsf基礎
Satoshi Kubo
Iocコンテナについて
Iocコンテナについて
Akio Terayama
ITコミュニティと情報発信に共通する成長と貢献の要素
ITコミュニティと情報発信に共通する成長と貢献の要素
NISHIHARA Shota
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
JustSystems Corporation
RailsでのREST API開発の知見共有
RailsでのREST API開発の知見共有
Yusuke Kon
ワタシはSingletonがキライだ
ワタシはSingletonがキライだ
Tetsuya Kaneuchi
60分でわかった気になるISO29119 #wacate
60分でわかった気になるISO29119 #wacate
Kinji Akemine
Spring Data RESTを利用したAPIの設計と、作り直しまでの道のり
Spring Data RESTを利用したAPIの設計と、作り直しまでの道のり
Rakuten Group, Inc.
ジャストシステムJava100本ノックのご紹介
ジャストシステムJava100本ノックのご紹介
JustSystems Corporation
Spring boot 勉強会
Spring boot 勉強会
太志郎 遠藤
Pivotal認定講師によるSpring Framework 5.1 & Spring Boot 2.1ハンズオン! #jjug_ccc
Pivotal認定講師によるSpring Framework 5.1 & Spring Boot 2.1ハンズオン! #jjug_ccc
Masatoshi Tada
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
Ken Morishita
What's hot
(20)
Spring 歴約1年初心者の Test 奮闘記
Spring 歴約1年初心者の Test 奮闘記
マインドマップを使った 仕様分析&テスト設計
マインドマップを使った 仕様分析&テスト設計
入社1年目のプログラミング初心者がSpringを学ぶための手引き
入社1年目のプログラミング初心者がSpringを学ぶための手引き
継続的にテスト可能な設計を考える
継続的にテスト可能な設計を考える
Spring Fest 2018 Spring Bootで作るRESTful Web Service
Spring Fest 2018 Spring Bootで作るRESTful Web Service
IOS/Androidアプリの3つの大事な設計方針
IOS/Androidアプリの3つの大事な設計方針
SpringBootTest入門
SpringBootTest入門
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
Strutsから移行する人のためのjsf基礎
Strutsから移行する人のためのjsf基礎
Iocコンテナについて
Iocコンテナについて
ITコミュニティと情報発信に共通する成長と貢献の要素
ITコミュニティと情報発信に共通する成長と貢献の要素
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
RailsでのREST API開発の知見共有
RailsでのREST API開発の知見共有
ワタシはSingletonがキライだ
ワタシはSingletonがキライだ
60分でわかった気になるISO29119 #wacate
60分でわかった気になるISO29119 #wacate
Spring Data RESTを利用したAPIの設計と、作り直しまでの道のり
Spring Data RESTを利用したAPIの設計と、作り直しまでの道のり
ジャストシステムJava100本ノックのご紹介
ジャストシステムJava100本ノックのご紹介
Spring boot 勉強会
Spring boot 勉強会
Pivotal認定講師によるSpring Framework 5.1 & Spring Boot 2.1ハンズオン! #jjug_ccc
Pivotal認定講師によるSpring Framework 5.1 & Spring Boot 2.1ハンズオン! #jjug_ccc
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
Viewers also liked
WKWebViewとUIWebView
WKWebViewとUIWebView
Yuki Hirai
Mvc
Mvc
Shutaro Anno
Canvas tutorial
Canvas tutorial
oneslocus
用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法
Takao Sumitomo
さらに上を目指すための iOS アプリ設計
さらに上を目指すための iOS アプリ設計
Taketo Sano
VC「もしかして...」Model「私たち...」「「入れ替わってるー!?」」を前前前世から防ぐ方法
VC「もしかして...」Model「私たち...」「「入れ替わってるー!?」」を前前前世から防ぐ方法
Kenji Tanaka
Android cleanarchitecture
Android cleanarchitecture
Tomoaki Imai
あのアニメのOp,edっぽいアニメーションを実装する話
あのアニメのOp,edっぽいアニメーションを実装する話
Kenji Tanaka
Viewers also liked
(8)
WKWebViewとUIWebView
WKWebViewとUIWebView
Mvc
Mvc
Canvas tutorial
Canvas tutorial
用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法
さらに上を目指すための iOS アプリ設計
さらに上を目指すための iOS アプリ設計
VC「もしかして...」Model「私たち...」「「入れ替わってるー!?」」を前前前世から防ぐ方法
VC「もしかして...」Model「私たち...」「「入れ替わってるー!?」」を前前前世から防ぐ方法
Android cleanarchitecture
Android cleanarchitecture
あのアニメのOp,edっぽいアニメーションを実装する話
あのアニメのOp,edっぽいアニメーションを実装する話
知らないと損するアプリ開発におけるStateMachineの活用法(15分版)
1.
知らないと損する アプリ開発における StateMachineの活用法 2014年10月 ゆめみ 森下 健 1
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
7.
7 例えば、TCPの通信状態は状態図で書くとわかりやす いね。 http://www.atmarkit.co.jp/ait/articles/0402/13/news096_3.html 状態 イベント アクション TCPの通信状態
8.
8 AndroidのActivityも状態図だと説明しやすいよ。 http://www.tutorialspoint.com/android/android_acitivities.htm 状態 アクション
9.
9 そして、StateMachineは簡単に言うと 状態図を実装したもの になります。 状態図 実装 StateMachine
10.
10 こんな風に状態図やStateMachineは色々なところで使 われているよ。
11.
11
12.
12 簡易実装ならまだ簡単なんだけどね StateMachineを実際に自分で実装すると結 構たいへん。 例えばJavaだと、ちょっとしたものでも数百行 になってしまう。
13.
13 そこでState Machine Compilerを使うよ。 SMC The
State Machine Compiler http://smc.sourceforge.net/ ロゴには Map って書いてあるw そこで
14.
14 これを使うと、DSLで書いたコードから、「各言語の StateMachineコード」と「状態図(画像)」ができる。状態 図とコードが対応していることが保証されるので、 StateMachine部分のコードを読む必要が無くなる。 DSL 状態図 StateMachine コード 入力 出力 意味的に同じもの こっちを見れば こっちは見なくても良い
15.
15 実際の例
16.
16 では、実際のアプリケーションを考えます。 「ぺたんぷ」っていう「子供用ご褒美シールアプリ」を題 材にしてみるよ。
17.
③スタンプを選択 17 例えば、こんな仕様の画面制御を行うとします。 ①押せるスタンプを選べる ②アニメーション ④押したい場所でタップ
18.
18 こんな手順で進めていくよ 1.状態図を作る 2.DSLを書いてコンパイル 3.アクションを実装する SMCを使うときの3つのStep
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) { // アニメーションコード } } ・・・ ←これ書いて これを書く→ 大事なことなので 2度言います
27.
27 この手法の良い点としてFSMや状態図はほぼ仕様書と 対応するということがあるよ。つまり、iOSやAndroidとい う別なプラットフォームでも同じものが使えます(普通は)。 押せるスタンプを選べる アニメーション ①スタンプを選択 ②押したい場所でタップ 初期 伸長中 シート表示中 スタンプ選択済み スタンプ押下済み 状態遷移 tap button select
stamp tap card 縮小中 finish animation tap else finish stamp finish animation cancel 仕様書 状態図
28.
28 状態図と仕様書を見比べると仕様を満たせそうか判断 しやすいので、レビューがものすごく捗ります。状態図 が適切なら「設計上の大枠はOKだね」となります。 レビューも捗る! https://twitter.com/Hackadoll
29.
29 まあ、確かにね。 よろしい。ならば仕様追加だ。 ん〜、この程度UIだったら 別に要らないんじゃない? む、来たな
30.
またひとつスタンプ をおせたね!! つぎもがんばって ね! 30 スタンプを押した時にアニメーションが追加されたよ。 スタンプが押されると キャラクターが登場し メッセージを表示 3秒で消える
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 アクションを2つ追加するよ。 この時、他には何も手を入れなくて良いのがまた良い 所なんだよね。 Action class PetampAction :
Petamp_Action { ・・・ func onEntryShowingMessage () { // メッセージ表示処理 // 3秒後にfsm.finish_animation() する } func onExitShowingMessage() { // メッセージ非表示処理 } ・・・ 単体テストも 書きやすい
33.
33 よろしい。 ならば仕様追加だ。 ん〜、この程度UIだったら いつも普通に書いてるよ? 仕様追加は 世の常人の常
34.
34 「スタンプを追加する機能」とその前に「親認証」を行う とするよ。 押せるスタンプを親が追加 下の数字を入力してください nine two seven 親認証スタンプ追加ボタン 「親認証ダイアログ」で認証を行う
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 Actionを4つ追加するよ。 この時、他には何も手を入れなくて良いのがまた良い 所なんだよね。 認証ダイアログ表示 認証ダイアログ非表示 スタンプ追加ダイアログ表示 スタンプ追加ダイアログ非表示 onEntryAuthParent() onExitAuthParent() onEntryAddingStamp() onExitAddingStamp() 親認証中 スタンプ追加中 大事なことなので2度 (ry
37.
37 少し複雑になったね。でも、この図のおかげで仕様書と 見比べれば何をやっているか想像つくし、変更するとき にどこを触れば良いかもわかりやすいでしょ? http://goodparts.d.yumemi.jp/generator#StateMachineGenerator--078e39c669ee45f55a2bf6b92523d32f0924aad8
38.
38 よろしい。 ならば仕様追加だ。 ま、まだまだ・・・ やれる・・・ 実際普通に 増えるんだよね・・・
39.
39 この2つの仕様が追加されたよ。 もう説明は省くけど、似たような感じで対応できるよ。 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があれば1行!
42.
42 まとめ
43.
StateMachineのメリット • 複雑な非同期ロジックがある場合 – 状態図による抜け漏れが(少)ない分析・設計 –
可読性が高く・変更に強い実装 – レビューが容易、再利用性も高い 43 夢のような感じだ
44.
StateMachineのデメリット • 新しい概念を覚えないといけない(人が多い) – 覚えよう •
StateMachineを実装するのが大変 – SMC使う • 導入前後ではリファクタリングが必要 – これはしょうがない 44 まあ、手間が増えるのは確かだね
45.
45
Download now