MVCの先、状態管理、ジェスチャー

id:kiwanami

2014/05/03 at hatena

今日のお話

MVCについて一言

GUIと状態の話

ジェスチャーの設計と実装

※Emacsの話はありません

id:kiwanami

UIデザイン、プログラマー（※EmacsもGUI）

タッチUIデモ

MVCについて一言

● 記事書いた

● 素のMVCやろう

● バインド？

MVなんか

MVCと同時に必要な技術

● 状態管理とイベント– ※今回お話する内容

● コンポーネント（部品化）– 疎結合– 再利用– 仕様変更への対応

今のMVCに無い観点

● 画面遷移ごとの状態保存– 画面戻っても状態が復帰しない– Dialog？ Session？

● アニメーションとの統合– モデルとView更新の細かい制御– 遷移前後の協調

● 音– 楽しさ、ユーザーへの通知、触感を補う

状態管理

状態管理？

● 有限オートマトン

● 状態遷移図、遷移表

● 組み込み系、TCPとか

http://www.tcpipguide.com/free/t_TCPOperationalOverviewandtheTCPFiniteStateMachineF-2.htm

GUIでの状態

● D&Dとか細かい画面遷移とかボタンをなくすと出てくる

● アニメーション、非同期処理– スキマ時間、時間かかる処理の間の応答– アニメーションしている時– キャンセル、スキップ

● 参考：D.ノーマン著「誰のためのデザイン」

GUIの状態管理の実装

● Cが状態を持って、振り分け– ViewとControllerの間ぐらい

● モデルが状態を持っても良い– フラグという形になることが多い

→死亡フラグ

ジェスチャー

ジェスチャー？

● 長所– ボタンを減らす、マウス移動量やクリック数を減らす– 現実を模して、覚えやすくする– タッチUIだと直接触れて操作できる

● 短所– 機能が見えないので練習が必要– 設計や実装が大変

各ジェスチャー操作の定義

● タップ、ダブルタップ– 一定時間内のタップ

● ピンチ– 2本指の距離

● フリック– 移動量、離した時の速度

● ホールド– 一定時間押しっぱなし

イベントがかぶってる

● フリックとスクロール– ユーザーは意識してる？

● タップ、ダブルタップ、ホールド、スクロール– 初回プレス、微動

● ピンチとスクロール– 前後に1本になるタイミングがある

→どこでどうやって判断するか？

イベントの見分け方

● 複数の可能性を同時並行にチェックする– DFA：決定性有限オートマトン

● パーサーの状態管理とジェスチャーのイベント列解釈は似ている– 「一定時間」 → Lookahead

→DFAを手作りする

先ほどのタッチデモの例

イベントと状態管理の層

タッチ、マウスイベント

ジェスチャー解釈状態管理

ジェスチャーイベント

上位Controllerの状態管理

モデル変更と再描画イベント

いろいろ

● 先程のデモ– http://kiwanami.net/temp/box2d/ipad-zoom.html

● BeautifulFSM– https://github.com/jbking/BeautifulFSM.js