Download - MVCの先、状態管理、ジェスチャー
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