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_TCPOperationalOv
erviewandtheTCPFiniteStateMac...
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
MVCの先、状態管理、ジェスチャー
of 21

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

2014/05/03 kyoto.なんか
Published on: Mar 4, 2016
Published in: Technology      
Source: www.slideshare.net


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

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

Related Documents