Download - MVCの先、状態管理、ジェスチャー
![Page 1: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/1.jpg)
MVCの先、状態管理、ジェスチャー
id:kiwanami
2014/05/03 at hatena
![Page 2: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/2.jpg)
今日のお話
MVCについて一言
GUIと状態の話
ジェスチャーの設計と実装
※Emacsの話はありません
![Page 3: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/3.jpg)
id:kiwanami
UIデザイン、プログラマー(※EmacsもGUI)
![Page 4: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/4.jpg)
タッチUIデモ
![Page 5: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/5.jpg)
MVCについて一言
● 記事書いた
● 素のMVCやろう
● バインド?
![Page 6: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/6.jpg)
MVなんか
![Page 7: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/7.jpg)
MVCと同時に必要な技術
● 状態管理とイベント– ※今回お話する内容
● コンポーネント(部品化)– 疎結合– 再利用– 仕様変更への対応
![Page 8: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/8.jpg)
今のMVCに無い観点
● 画面遷移ごとの状態保存– 画面戻っても状態が復帰しない– Dialog? Session?
● アニメーションとの統合– モデルとView更新の細かい制御– 遷移前後の協調
● 音– 楽しさ、ユーザーへの通知、触感を補う
![Page 9: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/9.jpg)
状態管理
![Page 10: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/10.jpg)
状態管理?
● 有限オートマトン
● 状態遷移図、遷移表
● 組み込み系、TCPとか
http://www.tcpipguide.com/free/t_TCPOperationalOverviewandtheTCPFiniteStateMachineF-2.htm
![Page 11: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/11.jpg)
![Page 12: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/12.jpg)
GUIでの状態
● D&Dとか細かい画面遷移とかボタンをなくすと出てくる
● アニメーション、非同期処理– スキマ時間、時間かかる処理の間の応答– アニメーションしている時– キャンセル、スキップ
● 参考:D.ノーマン著「誰のためのデザイン」
![Page 13: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/13.jpg)
GUIの状態管理の実装
● Cが状態を持って、振り分け– ViewとControllerの間ぐらい
● モデルが状態を持っても良い– フラグという形になることが多い
→死亡フラグ
![Page 14: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/14.jpg)
ジェスチャー
![Page 15: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/15.jpg)
ジェスチャー?
● 長所– ボタンを減らす、マウス移動量やクリック数を減らす– 現実を模して、覚えやすくする– タッチUIだと直接触れて操作できる
● 短所– 機能が見えないので練習が必要– 設計や実装が大変
![Page 16: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/16.jpg)
各ジェスチャー操作の定義
● タップ、ダブルタップ– 一定時間内のタップ
● ピンチ– 2本指の距離
● フリック– 移動量、離した時の速度
● ホールド– 一定時間押しっぱなし
![Page 17: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/17.jpg)
イベントがかぶってる
● フリックとスクロール– ユーザーは意識してる?
● タップ、ダブルタップ、ホールド、スクロール– 初回プレス、微動
● ピンチとスクロール– 前後に1本になるタイミングがある
→どこでどうやって判断するか?
![Page 18: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/18.jpg)
イベントの見分け方
● 複数の可能性を同時並行にチェックする– DFA:決定性有限オートマトン
● パーサーの状態管理とジェスチャーのイベント列解釈は似ている– 「一定時間」 → Lookahead
→DFAを手作りする
![Page 19: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/19.jpg)
先ほどのタッチデモの例
![Page 20: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/20.jpg)
イベントと状態管理の層
タッチ、マウスイベント
ジェスチャー解釈状態管理
ジェスチャーイベント
上位Controllerの状態管理
モデル変更と再描画イベント
![Page 21: MVCの先、状態管理、ジェスチャー](https://reader035.vdocuments.pub/reader035/viewer/2022081514/558deca81a28ab31668b45e7/html5/thumbnails/21.jpg)
いろいろ
● 先程のデモ– http://kiwanami.net/temp/box2d/ipad-zoom.html
● BeautifulFSM– https://github.com/jbking/BeautifulFSM.js