Your SlideShare is downloading. ×
0
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
MVCの先、状態管理、ジェスチャー
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

12,936

Published on

2014/05/03 kyoto.なんか

2014/05/03 kyoto.なんか

Published in: Technology
0 Comments
31 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,936
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
21
Comments
0
Likes
31
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×