説明: http://dsuket.hatenablog.com/entry/2012/07/27/154303 補足記事を書きました: http://dsuket.hatenablog.com/entry/2012/07/28/084740

1. UX
on
HTML5 × Touch UI
TAKAOKA Daisuke (@dsuket)
2012/07/27 ありえるえりあミニ勉強会#3 ∼Sencha Touch
1

2. About me
高岡大介: TAKAOKA Daisuke
@dsuket
dsuket
お仕事
‣ Free agent engineer
Inkpod Web
‣ カラビナシステムズ http://inkpodweb.com
2

3. Touch UI
Touch UI の特徴
3

4. Touch UI の特徴
Feature
✤ Touch Finger
✤ Multi-touch
✤ Gesture
✤ Virtual keyboard
最重要ポイント
Many touch devices
4

5. Touch UI の特徴
Feature
✤ Touch Finger
✤ Multi-touch
✤ Gesture
✤ Virtual keyboard
最重要ポイント
指の精度は高くない！
Many touch devices
4

6. Touch Position
タッチ位置はズレる！
1. 静電容量方式の制限
✤ ある程度のエリアが必要
2. 指の感覚によるもの
✤ 斜めにタッチ
iOSでは補正されている
✤ 上方向へ
✤ キーボード予測 http://www.nikkeibp.co.jp/article/column/20120420/306320/
5

7. Touch Feedback
★ 押せる場所を分かりやすく OK
✤ 視覚的フィードバック
✤ hoverは使えない
（Xperia Sola の floating touch technologyという例外も）
★ 指はじっとしていない
✤ マウスより段違いにブレる
✤ 不安定な場所での利用が多い
6

8. HTML5 × Touch
HTML5のTouch仕様
7

9. Touch Events Specification
✤ W3Cで標準化が進められている（実はHTML5ではない）
✤ W3C Candidate Recommendation (勧告候補)
8

10. Touch Events Specification
✤ W3Cで標準化が進められている（実はHTML5ではない）
✤ W3C Candidate Recommendation (勧告候補)
✤ 現在活動停止中・・・
✤ Touch Events PAG (Patent Advisory Group) の報告待ち
✤ Appleの特許公開をうけて影響を検討中
8

11. Touch Events Specification
✤ W3Cで標準化が進められている（実はHTML5ではない）
✤ W3C Candidate Recommendation (勧告候補)
✤ 現在活動停止中・・・
✤ Touch Events PAG (Patent Advisory Group) の報告待ち
✤ Appleの特許公開をうけて影響を検討中
Event 標準 対応状況
Apple Touch Event W3Cのベース iOSで採用
Google Touch Event ほぼW3C準拠 3.0からマルチタッチに対応
Microsoft Pointer Event 旧Mozillaベース IE10，Windows 8でサポート
8

12. Touch Event Types
Event Type dispatch timing
touchstart タッチ開始時に発生
touchend タッチ終了時に発生
touchmove タッチ移動時に発生
touchcancel システムによる割り込み（着信、アラーム等）で発生
✤ DOM要素にリスナーを登録
dom.addEventListener(‘touchstart’, function(event) {
// do something.
}, false);
✤ 基本はマウスイベントと同じ
9

13. Touch Event Interface
TouchEvent Touch
changedTouches: TouchList identifier: long
targetTouches: TouchList clientX/clientY: long
touches: TouchList pageX/pageY: long
rotation(*1): float screenX/screenY: long
scale(*1): float target: EventTarget
preventDefault()
stopPropagation()
*1: iOS独自仕様
10

14. GestureEvent (iOS only)
ピンチや回転のジェスチャーイベント
iOS 独自機能
Event Type dispatch timing GestureEvent
gesturestart ジェスチャー開始時 rotation: float
gesturechange ジェスチャー変更時 scale: float
gestureend ジェスチャー終了時
発生タイミングと、touchesが無いことに注意
11

15. UX
on
HTML5 Touch
HTML5でTouchのUXを実現
12

16. 1．ボタンは大きく
13

17. 1．ボタンは大きく
推奨サイズ
✤ 44pt (iOS), 48dp (Android) 以上
✤ 参考:
✤ iOS human interface Guidelines
✤ Android Design
13

18. 1．ボタンは大きく
推奨サイズ
✤ 44pt (iOS), 48dp (Android) 以上
✤ 参考:
✤ iOS human interface Guidelines
✤ Android Design
13

19. 1．ボタンは大きく
推奨サイズ
✤ 44pt (iOS), 48dp (Android) 以上
✤ 参考:
✤ iOS human interface Guidelines
✤ Android Design
Sencha Touch の場合
✤ ボタンのデフォルトは 39px (iOS)
✤ 独立したボタンの場合はもう少し大きくてよいかも
13

20. Inkpod Webの例（ボタン）
ツールボックスのボタン メニューバーのボタン
46px 35px
46px 43px
Buttonコンポーネントも
カスタムボタンは大きめに
デフォルトより少し大きく
14

21. 2．当たり判定を調整
15

22. 2．当たり判定を調整
✤ アイコンが小さい場合
✤ 透明なDIVなどを置いて当たり判定を広げる
15

23. 2．当たり判定を調整
✤ アイコンが小さい場合
✤ 透明なDIVなどを置いて当たり判定を広げる
✤ タッチポイントの補正
✤ 画面上方に補正（Androidの場合）
15

24. 2．当たり判定を調整
✤ アイコンが小さい場合
✤ 透明なDIVなどを置いて当たり判定を広げる
✤ タッチポイントの補正
✤ 画面上方に補正（Androidの場合）
✤ 動作予測
✤ 次の動きを予測して当たり判定を変える
15

25. Inkpod Webの例（当たり判定）
詳細ボタン オブジェクトハンドル
16

26. Inkpod Webの例（当たり判定）
詳細ボタン オブジェクトハンドル
当たり判定エリア
透明な要素を重ね、見えている
範囲よりも当たり判定を広く
取っている。
16

27. Inkpod Webの例（当たり判定）
詳細ボタン オブジェクトハンドル
当たり判定エリア
透明な要素を重ね、見えている デフォルトから広げることが多
範囲よりも当たり判定を広く いため、外側に当たり判定を多
取っている。 く取っている。
16

28. 3．Click Eventを使わない
17

29. 3．Click Eventを使わない
1. touchstart で視覚的フィードバックを与える
✤ フォーカスリング、凹みなど
✤ デフォルトのタップハイライトは無効に
17

30. 3．Click Eventを使わない
1. touchstart で視覚的フィードバックを与える
✤ フォーカスリング、凹みなど
✤ デフォルトのタップハイライトは無効に
17

31. 3．Click Eventを使わない
1. touchstart で視覚的フィードバックを与える
✤ フォーカスリング、凹みなど
✤ デフォルトのタップハイライトは無効に
-webkit-tap-highlight-color: rgba(0,0,0,0)
17

32. 3．Click Eventを使わない
1. touchstart で視覚的フィードバックを与える
✤ フォーカスリング、凹みなど
✤ デフォルトのタップハイライトは無効に
-webkit-tap-highlight-color: rgba(0,0,0,0)
2. レスポンスが遅い (click delay問題)
✤ 0.5sほど遅れる
17

33. 3．Click Eventを使わない
1. touchstart で視覚的フィードバックを与える
✤ フォーカスリング、凹みなど
✤ デフォルトのタップハイライトは無効に
-webkit-tap-highlight-color: rgba(0,0,0,0)
2. レスポンスが遅い (click delay問題)
✤ 0.5sほど遅れる
Sencha Touch なら
✤ touchstart時に自動でハイライト
✤ clickイベントを高速にエミュレート 17

34. Inkpod Webの例（feedback）
オブジェクトをタッチした時
通常時
ハンドルをタッチした時
18

35. Inkpod Webの例（feedback）
オブジェクトをタッチした時
フォーカスリング
通常時 を表示
ハンドルをタッチした時
18

36. Inkpod Webの例（feedback）
オブジェクトをタッチした時
フォーカスリング
通常時 を表示
ハンドルをタッチした時
タッチしたハンドル
の色を変更
18

37. 4．Dragging / Double Tap
19

38. 4．Dragging / Double Tap
✦ ドラッグ開始までの閾値を入れる
✤ タップとドラッグの切り分け
✤ 6pxくらい？（経験則）
19

39. 4．Dragging / Double Tap
✦ ドラッグ開始までの閾値を入れる
✤ タップとドラッグの切り分け
✤ 6pxくらい？（経験則）
✦ ダブルタップ
✤ ダブルタップ判定エリアは広く取る
19

40. 4．Dragging / Double Tap
✦ ドラッグ開始までの閾値を入れる
✤ タップとドラッグの切り分け
✤ 6pxくらい？（経験則）
✦ ダブルタップ
✤ ダブルタップ判定エリアは広く取る
Sencha Touch なら
✤ drag, doubletap など便利なイベントが沢山！
（場合により問題有り）
19

41. 落とし穴
20

42. User action event restrictions
21

43. User action event restrictions
✦ ユーザアクションのイベントスコープ内でだけ動く制限がある（iOS）
✤ キーボードの表示 (focus)
✤ VIDEOタグの動画の再生
21

44. User action event restrictions
✦ ユーザアクションのイベントスコープ内でだけ動く制限がある（iOS）
✤ キーボードの表示 (focus)
✤ VIDEOタグの動画の再生 text field Edit
21

45. User action event restrictions
✦ ユーザアクションのイベントスコープ内でだけ動く制限がある（iOS）
✤ キーボードの表示 (focus)
✤ VIDEOタグの動画の再生 text field Edit
✦ タイマーやDOMイベント、CSSイベント
21

46. User action event restrictions
✦ ユーザアクションのイベントスコープ内でだけ動く制限がある（iOS）
✤ キーボードの表示 (focus)
✤ VIDEOタグの動画の再生 text field Edit
✦ タイマーやDOMイベント、CSSイベント
21

47. User action event restrictions
✦ ユーザアクションのイベントスコープ内でだけ動く制限がある（iOS）
✤ キーボードの表示 (focus)
✤ VIDEOタグの動画の再生 text field Edit
✦ タイマーやDOMイベント、CSSイベント
✦ Sencha Touch のイベントでこれらは制御できない！ (* ver: 1.1)
➡ タイマーやカスタムイベントを多用
➡ 自前でがんばる！
21

48. Scroller
✤ 縦/横 スクロールの排他制御
✤ Mobile Safari で実装 （Android Browser は無し）
✤ Sencha の Scroller は未サポート
✤ directionLock は入れ子対策用
✤ iScroll 4 が使える
22

49. Scroller
✤ 縦/横 スクロールの排他制御
✤ Mobile Safari で実装 （Android Browser は無し）
✤ Sencha の Scroller は未サポート
✤ directionLock は入れ子対策用
✤ iScroll 4 が使える
✤ ピンチ/2本指スクロール の排他制御
✤ 拡大縮小とスクロールの判断（Drawツール）
✤ 2つのタッチのベクトルを見て判断
22

50. Scroller
✤ 縦/横 スクロールの排他制御
✤ Mobile Safari で実装 （Android Browser は無し）
✤ Sencha の Scroller は未サポート
✤ directionLock は入れ子対策用
✤ iScroll 4 が使える
✤ ピンチ/2本指スクロール の排他制御
✤ 拡大縮小とスクロールの判断（Drawツール）
✤ 2つのタッチのベクトルを見て判断
22

51. Conclusion
23

52. Conclusion
✤ Touch UI の特徴
23

53. Conclusion
✤ Touch UI の特徴
✤ HTML5 × Touch
23

54. Conclusion
✤ Touch UI の特徴
✤ HTML5 × Touch
✤ HTML5 × Touch の UX
1. ボタンは大きく
2. 当たり判定を調整
3. Click Event は使わない
4. Dragging / Double Tap
23

55. Conclusion
✤ Touch UI の特徴
✤ HTML5 × Touch
✤ HTML5 × Touch の UX
1. ボタンは大きく
2. 当たり判定を調整
3. Click Event は使わない
4. Dragging / Double Tap
✤ 落とし穴
23

56. Conclusion
✤ Touch UI の特徴
✤ HTML5 × Touch
✤ HTML5 × Touch の UX
1. ボタンは大きく
2. 当たり判定を調整 HTML5技術コンサルやってます！
3. Click Event は使わない
4. Dragging / Double Tap
✤ 落とし穴
23

57. Conclusion
✤ Touch UI の特徴
✤ HTML5 × Touch
✤ HTML5 × Touch の UX
1. ボタンは大きく
2. 当たり判定を調整 HTML5技術コンサルやってます！
3. Click Event は使わない
4. Dragging / Double Tap
✤ 落とし穴 End 23