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

More Related Content

What's hot

Observableで非同期処理
Observableで非同期処理Observableで非同期処理
Observableで非同期処理
torisoup
 
速攻で価値検証して無駄なものを作らないプロダクトデザイン
速攻で価値検証して無駄なものを作らないプロダクトデザイン速攻で価値検証して無駄なものを作らないプロダクトデザイン
速攻で価値検証して無駄なものを作らないプロダクトデザイン
Akiko Kurono
 
綺麗なプレゼン資料の作り方、10のテクニック
綺麗なプレゼン資料の作り方、10のテクニック綺麗なプレゼン資料の作り方、10のテクニック
綺麗なプレゼン資料の作り方、10のテクニック
Manabu Uekusa
 
『天空の城ラピュタ』のエピソード構成表
『天空の城ラピュタ』のエピソード構成表『天空の城ラピュタ』のエピソード構成表
『天空の城ラピュタ』のエピソード構成表
小林 信行
 
本当に無駄な仕事をしたくない人のためのHoudiniプロシージャル入門
本当に無駄な仕事をしたくない人のためのHoudiniプロシージャル入門本当に無駄な仕事をしたくない人のためのHoudiniプロシージャル入門
本当に無駄な仕事をしたくない人のためのHoudiniプロシージャル入門
jyouryuusui
 
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
小林 信行
 
【Unite Tokyo 2019】3Dアバターファイルフォーマット「VRM」詳説
【Unite Tokyo 2019】3Dアバターファイルフォーマット「VRM」詳説【Unite Tokyo 2019】3Dアバターファイルフォーマット「VRM」詳説
【Unite Tokyo 2019】3Dアバターファイルフォーマット「VRM」詳説
UnityTechnologiesJapan002
 
Unity道場08「絵づくりの基礎」ライティング虎の巻
Unity道場08「絵づくりの基礎」ライティング虎の巻Unity道場08「絵づくりの基礎」ライティング虎の巻
Unity道場08「絵づくりの基礎」ライティング虎の巻
小林 信行
 
ソフトウェア設計の学び方を考える
ソフトウェア設計の学び方を考えるソフトウェア設計の学び方を考える
ソフトウェア設計の学び方を考える
増田 亨
 
0528 kanntigai ui_ux
0528 kanntigai ui_ux0528 kanntigai ui_ux
0528 kanntigai ui_ux
Saori Matsui
 
ゲーム産業講義2023
ゲーム産業講義2023ゲーム産業講義2023
ゲーム産業講義2023
Shibaura Institute of Technology
 
Unityではじめるオープンワールド入門 アーティスト編
Unityではじめるオープンワールド入門 アーティスト編Unityではじめるオープンワールド入門 アーティスト編
Unityではじめるオープンワールド入門 アーティスト編
Unity Technologies Japan K.K.
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
 
普段C#を使っている僕から見たKotlin
普段C#を使っている僕から見たKotlin普段C#を使っている僕から見たKotlin
普段C#を使っている僕から見たKotlin
Ryota Murohoshi
 
Unity道場 14 Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~ カスタムライティング/トゥーンシェーダー編
Unity道場 14 Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~ カスタムライティング/トゥーンシェーダー編Unity道場 14 Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~ カスタムライティング/トゥーンシェーダー編
Unity道場 14 Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~ カスタムライティング/トゥーンシェーダー編
小林 信行
 
正しいものを正しく作る塾-設計コース
正しいものを正しく作る塾-設計コース正しいものを正しく作る塾-設計コース
正しいものを正しく作る塾-設計コース
増田 亨
 
【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現
Unity Technologies Japan K.K.
 
Unityネイティブプラグインマニアクス #denatechcon
Unityネイティブプラグインマニアクス #denatechconUnityネイティブプラグインマニアクス #denatechcon
Unityネイティブプラグインマニアクス #denatechcon
DeNA
 
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
historia_Inc
 

What's hot (20)

Observableで非同期処理
Observableで非同期処理Observableで非同期処理
Observableで非同期処理
 
速攻で価値検証して無駄なものを作らないプロダクトデザイン
速攻で価値検証して無駄なものを作らないプロダクトデザイン速攻で価値検証して無駄なものを作らないプロダクトデザイン
速攻で価値検証して無駄なものを作らないプロダクトデザイン
 
綺麗なプレゼン資料の作り方、10のテクニック
綺麗なプレゼン資料の作り方、10のテクニック綺麗なプレゼン資料の作り方、10のテクニック
綺麗なプレゼン資料の作り方、10のテクニック
 
『天空の城ラピュタ』のエピソード構成表
『天空の城ラピュタ』のエピソード構成表『天空の城ラピュタ』のエピソード構成表
『天空の城ラピュタ』のエピソード構成表
 
本当に無駄な仕事をしたくない人のためのHoudiniプロシージャル入門
本当に無駄な仕事をしたくない人のためのHoudiniプロシージャル入門本当に無駄な仕事をしたくない人のためのHoudiniプロシージャル入門
本当に無駄な仕事をしたくない人のためのHoudiniプロシージャル入門
 
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
 
【Unite Tokyo 2019】3Dアバターファイルフォーマット「VRM」詳説
【Unite Tokyo 2019】3Dアバターファイルフォーマット「VRM」詳説【Unite Tokyo 2019】3Dアバターファイルフォーマット「VRM」詳説
【Unite Tokyo 2019】3Dアバターファイルフォーマット「VRM」詳説
 
Unity道場08「絵づくりの基礎」ライティング虎の巻
Unity道場08「絵づくりの基礎」ライティング虎の巻Unity道場08「絵づくりの基礎」ライティング虎の巻
Unity道場08「絵づくりの基礎」ライティング虎の巻
 
ソフトウェア設計の学び方を考える
ソフトウェア設計の学び方を考えるソフトウェア設計の学び方を考える
ソフトウェア設計の学び方を考える
 
0528 kanntigai ui_ux
0528 kanntigai ui_ux0528 kanntigai ui_ux
0528 kanntigai ui_ux
 
ゲーム産業講義2023
ゲーム産業講義2023ゲーム産業講義2023
ゲーム産業講義2023
 
MVVM入門
MVVM入門MVVM入門
MVVM入門
 
Unityではじめるオープンワールド入門 アーティスト編
Unityではじめるオープンワールド入門 アーティスト編Unityではじめるオープンワールド入門 アーティスト編
Unityではじめるオープンワールド入門 アーティスト編
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
 
普段C#を使っている僕から見たKotlin
普段C#を使っている僕から見たKotlin普段C#を使っている僕から見たKotlin
普段C#を使っている僕から見たKotlin
 
Unity道場 14 Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~ カスタムライティング/トゥーンシェーダー編
Unity道場 14 Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~ カスタムライティング/トゥーンシェーダー編Unity道場 14 Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~ カスタムライティング/トゥーンシェーダー編
Unity道場 14 Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~ カスタムライティング/トゥーンシェーダー編
 
正しいものを正しく作る塾-設計コース
正しいものを正しく作る塾-設計コース正しいものを正しく作る塾-設計コース
正しいものを正しく作る塾-設計コース
 
【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現
 
Unityネイティブプラグインマニアクス #denatechcon
Unityネイティブプラグインマニアクス #denatechconUnityネイティブプラグインマニアクス #denatechcon
Unityネイティブプラグインマニアクス #denatechcon
 
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
 

Viewers also liked

WKWebViewとUIWebView
WKWebViewとUIWebViewWKWebViewとUIWebView
WKWebViewとUIWebView
Yuki Hirai
 
Mvc
MvcMvc
Canvas tutorial
Canvas tutorialCanvas tutorial
Canvas tutorial
oneslocus
 
用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法
Takao Sumitomo
 
さらに上を目指すための iOS アプリ設計
さらに上を目指すための iOS アプリ設計さらに上を目指すための iOS アプリ設計
さらに上を目指すための iOS アプリ設計
Taketo Sano
 
VC「もしかして...」Model「私たち...」「「入れ替わってるー!?」」を前前前世から防ぐ方法
VC「もしかして...」Model「私たち...」「「入れ替わってるー!?」」を前前前世から防ぐ方法VC「もしかして...」Model「私たち...」「「入れ替わってるー!?」」を前前前世から防ぐ方法
VC「もしかして...」Model「私たち...」「「入れ替わってるー!?」」を前前前世から防ぐ方法
Kenji Tanaka
 
Android cleanarchitecture
Android cleanarchitectureAndroid cleanarchitecture
Android cleanarchitecture
Tomoaki Imai
 
あのアニメのOp,edっぽいアニメーションを実装する話
あのアニメのOp,edっぽいアニメーションを実装する話あのアニメのOp,edっぽいアニメーションを実装する話
あのアニメのOp,edっぽいアニメーションを実装する話
Kenji Tanaka
 

Viewers also liked (8)

WKWebViewとUIWebView
WKWebViewとUIWebViewWKWebViewとUIWebView
WKWebViewとUIWebView
 
Mvc
MvcMvc
Mvc
 
Canvas tutorial
Canvas tutorialCanvas tutorial
Canvas tutorial
 
用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法
 
さらに上を目指すための iOS アプリ設計
さらに上を目指すための iOS アプリ設計さらに上を目指すための iOS アプリ設計
さらに上を目指すための iOS アプリ設計
 
VC「もしかして...」Model「私たち...」「「入れ替わってるー!?」」を前前前世から防ぐ方法
VC「もしかして...」Model「私たち...」「「入れ替わってるー!?」」を前前前世から防ぐ方法VC「もしかして...」Model「私たち...」「「入れ替わってるー!?」」を前前前世から防ぐ方法
VC「もしかして...」Model「私たち...」「「入れ替わってるー!?」」を前前前世から防ぐ方法
 
Android cleanarchitecture
Android cleanarchitectureAndroid cleanarchitecture
Android cleanarchitecture
 
あのアニメのOp,edっぽいアニメーションを実装する話
あのアニメのOp,edっぽいアニメーションを実装する話あのアニメのOp,edっぽいアニメーションを実装する話
あのアニメのOp,edっぽいアニメーションを実装する話
 

More from Ken Morishita

BigQuery勉強会 Standard SQL Dialect
BigQuery勉強会 Standard SQL DialectBigQuery勉強会 Standard SQL Dialect
BigQuery勉強会 Standard SQL Dialect
Ken Morishita
 
iOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPracticeiOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPractice
Ken Morishita
 
SwiftでのiOSアプリ開発
SwiftでのiOSアプリ開発SwiftでのiOSアプリ開発
SwiftでのiOSアプリ開発
Ken Morishita
 
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞いiOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
Ken Morishita
 
IOS/Androidアプリの3つの大事な設計方針
IOS/Androidアプリの3つの大事な設計方針IOS/Androidアプリの3つの大事な設計方針
IOS/Androidアプリの3つの大事な設計方針Ken Morishita
 
最近の単体テスト
最近の単体テスト最近の単体テスト
最近の単体テスト
Ken Morishita
 
Logをs3とredshiftに格納する仕組み
Logをs3とredshiftに格納する仕組みLogをs3とredshiftに格納する仕組み
Logをs3とredshiftに格納する仕組みKen Morishita
 
Pythonとdeep learningで手書き文字認識
Pythonとdeep learningで手書き文字認識Pythonとdeep learningで手書き文字認識
Pythonとdeep learningで手書き文字認識
Ken Morishita
 

More from Ken Morishita (8)

BigQuery勉強会 Standard SQL Dialect
BigQuery勉強会 Standard SQL DialectBigQuery勉強会 Standard SQL Dialect
BigQuery勉強会 Standard SQL Dialect
 
iOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPracticeiOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPractice
 
SwiftでのiOSアプリ開発
SwiftでのiOSアプリ開発SwiftでのiOSアプリ開発
SwiftでのiOSアプリ開発
 
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞いiOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
 
IOS/Androidアプリの3つの大事な設計方針
IOS/Androidアプリの3つの大事な設計方針IOS/Androidアプリの3つの大事な設計方針
IOS/Androidアプリの3つの大事な設計方針
 
最近の単体テスト
最近の単体テスト最近の単体テスト
最近の単体テスト
 
Logをs3とredshiftに格納する仕組み
Logをs3とredshiftに格納する仕組みLogをs3とredshiftに格納する仕組み
Logをs3とredshiftに格納する仕組み
 
Pythonとdeep learningで手書き文字認識
Pythonとdeep learningで手書き文字認識Pythonとdeep learningで手書き文字認識
Pythonとdeep learningで手書き文字認識
 

Recently uploaded

生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
Osaka University
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
Toru Tamaki
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
嶋 是一 (Yoshikazu SHIMA)
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
chiefujita1
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
Takayuki Nakayama
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
tazaki1
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
t m
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
harmonylab
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
Matsushita Laboratory
 

Recently uploaded (10)

生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
 

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