Post on 11-Jul-2015
WebサービスにおけるSurface Pro 3 対応とは
...aboutSurface Pro 3
...about Surface Pro 3
OS Windows 8.1 Pro
ディスプレイサイズ 12 インチ
解像度 2,160 x 1,440
デバイスピクセル比 IE : 1 / IE以外 : 1.5
CSSピクセル IE : 2,160 x 1,440 / IE以外 : 1,440 x 960
標準ブラウザ Internet Explorer 11
入力デバイス Surfaceペン、指、マウス、キーボード
センサー 光センサー、加速度センサー、ジャイロスコープ、電子コンパス
サイズ 292mm × 201.3mm × 9.1mm、 800g
vendor Microsoft
※ 2014年11月現在
Surface Pro 3 対応
Surface Pro 3の特性を活かし
最適なユーザ体験を提供すること
Surface Pro 3 対応
Surface Pro 3Web Browser
Internet Explorer 11
Surface Pro 3 Web Browser
User Agent Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; rv:11.0) like Gecko
※ 他のデバイスのUser Agent
iPhone (SP)
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D201 Safari/9537.53
iPad (Tablet)
Mozilla/5.0 (iPad; CPU OS 8_1_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B435 Safari/600.1.4
GALAXY S4 (SP)
Mozilla/5.0 (Linux; Android 4.2.2; ja-jp; SC-04E Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Version/1.0 Chrome/18.0.1025.308 Mobile Safari/535.19
Nexus 10 (Tablet)
Mozilla/5.0 (Linux; Android 4.3; Nexus 10 Build/JWR66Y) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.72 Safari/537.36
Windows Phone
Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)
Surface Pro 3 Web Browser
Internet Explorer 11
Surface Pro 3 Web Browser
User Agent Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; rv:11.0) like Gecko
↓ 再度凝視... ↓
Internet Explorer 11
Surface Pro 3 Web Browser
Surface Pro 3 Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; rv:11.0) like Gecko
PC(Touchless)
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
↓ PC IEと比較... ↓
Internet Explorer 11
Surface Pro 3 Web Browser
Surface Pro 3を特定する情報は
含まれていない
Internet Explorer 11
Surface Pro 3 Web Browser
Touch PCであることだけは
特定できる
Touch PC
Touch PC
Touch PC多様なディスプレイサイズと
多様な入力方法が用意された
Windows PC
・・・
タブレットの枠に
おさまらない
他のタブレット実装との比較
他のタブレット実装との比較
Apple 製品における Safari の例
Mac OS(PC)
iOS
iPhone (SP) iPad(Tablet)
上記すべて、特定可能 & 専用ページ提供可能※ 専用ページを提供することの是非はまた別の議論
他のタブレット実装との比較
Android 標準ブラウザの例
Android OS
上記すべて、特定可能 & 専用ページ提供可能※ 専用ページを提供することの是非はまた別の議論
Mobile Safari (SP) Safari(Tablet)
ここまでのまとめ
ここまでのまとめ
• サービス側から特定できない • 専用コンテンツの提供はできない • Win 8 Touch PCの1機種 • Touch端末であることの特定はできる • Windows PCとしてのコンテンツ提供が必要 • PC用 IE11としてのコンテンツ提供が必要
Surface Pro 3 は
以上を踏まえた上で
あえて...
今後、もしも
Surfaceのシェアが拡大した場合に、
無視できなくなるかもしれない
現実のひとつとして...
Surface Pro 3(Touch PC)
最適化
Surface Pro 3 (Touch PC) 最適化
前提 1
Surface Pro 3 ユーザーは
PCページに導かれる
前提 2
Win 8 PCにおいて、コンテンツは
常にタッチされる可能性を
含んでいる
Surface Pro 3 (Touch PC) 最適化
Surface Pro 3(Touch PC)
最適化 UI
UI
• マウスやペンによるクリック、ドラグ操作
• 指によるタッチやムーブ、スワイプ操作
両立したUIを提供する
Surface Pro 3 (Touch PC) 最適化
UIつまり
iPadで閲覧されることを想定して
PC UIをデザインする場合
と同様
Surface Pro 3 (Touch PC) 最適化
UI - サイズ
Surface Pro 3 (Touch PC) 最適化
リンクサイズ(タップエリア)は なるべく大きく、理想は44px角(※)以上
※ 押し間違いが1%未満になるサイズ = 44px以上
◯ better
UI - 操作 1
Surface Pro 3 (Touch PC) 最適化
ClickTap
Swipe
ClickTap
操作系においてはマウス操作とタッチ操作を両立する
UI - 操作 2
Surface Pro 3 (Touch PC) 最適化
ClickTap
Pinch
操作系においてはマウス操作とタッチ操作を両立する
Surface Pro 3(Touch PC)
最適化 Rotate
Rotate
Surface Pro 3 (Touch PC) 最適化
Surfaceのタブレットらしさの1つ SurfaceはRotateできる
Rotate
Surface Pro 3 (Touch PC) 最適化
SurfaceのIE以外のCSSピクセル
1,440 x 960
Rotate
Surface Pro 3 (Touch PC) 最適化
たとえば 横幅1,000pxのコンテンツにおいて 40px欠ける これを防ぐためには リキッドレイアウトなどの 対応が求められる
Surface Pro 3(Touch PC)
最適化 JavaScript - Event
JavaScript - Event
Surface Pro 3 (Touch PC) 最適化
非 Touch PC mousedown、mousemove、mouseup
Touch PC IE pointerdown、pointermove、pointerup
Touch PC webkit系touchstart、touchmove、touchend => タッチ mousedown、mousemove、mouseup => マウスなど ※ すべて設定する
Touch PC mozilla mousedown、mousemove、mouseup
JavaScript - Event 1
Surface Pro 3 (Touch PC) 最適化
var eventConf = { // touch touch: { start: 'touchstart', move: 'touchmove', end: 'touchend' }, ! // pointer pointer: { start: 'pointerdown', move: 'pointermove', end: 'pointerup' }, ! // mouse mouse: { start: 'mousedown', move: 'mousemove', end: 'mouseup' } };
JavaScript - Event 1
Surface Pro 3 (Touch PC) 最適化
var eventTouch = { start: (conf.isTouch)? eventConf.touch.start: (conf.isPointer)? eventConf.pointer.start: eventConf.mouse.start, move: (conf.isTouch)? eventConf.touch.move: (conf.isPointer)? eventConf.pointer.move: eventConf.mouse.move, end: (conf.isTouch)? eventConf.touch.end: (conf.isPointer)? eventConf.pointer.end: eventConf.mouse.end };
JavaScript - Event 1
Surface Pro 3 (Touch PC) 最適化
// start TARGET.addEventListener(eventTouch.start, dragStart); TARGET.addEventListener(eventConf.mouse.start, dragStart); // for Touch PC Chrome !// move and end function setEvent() { // move TARGET.addEventListener(eventTouch.move, drag); TARGET.addEventListener(eventConf.mouse.move, drag); // for Touch PC Chrome ! // end TARGET.addEventListener(eventTouch.end, dragEnd); TARGET.addEventListener(eventConf.mouse.end, dragEnd); // for Touch PC Chrome } !// remove function removeEvent() { TARGET.removeEventListener(eventTouch.move, drag); TARGET.removeEventListener(eventConf.mouse.move, drag); // for Touch PC Chrome TARGET.removeEventListener(eventTouch.end, dragEnd); TARGET.removeEventListener(eventConf.mouse.end, dragEnd); // for Touch PC Chrome }
JavaScript - Event 1
Surface Pro 3 (Touch PC) 最適化
Demo http://codepen.io/sekiyaeiji/pen/dPoJyz?editors=001
JavaScript - Event 2
Surface Pro 3 (Touch PC) 最適化
var eventConf = { // touch touch: { start: 'touchstart mousedown', // Touch PC webkit対応を併記できる move: 'touchmove mousemove', // Touch PC webkit対応を併記できる end: 'touchend mouseup' // Touch PC webkit対応を併記できる }, ! // pointer pointer: { start: 'pointerdown', move: 'pointermove', end: 'pointerup' }, ! // mouse mouse: { start: 'mousedown', move: 'mousemove', end: 'mouseup' } };
jQueryだと...
JavaScript - Event 2
Surface Pro 3 (Touch PC) 最適化
var eventTouch = { start: (conf.isTouch)? eventConf.touch.start: (conf.isPointer)? eventConf.pointer.start: eventConf.mouse.start, move: (conf.isTouch)? eventConf.touch.move: (conf.isPointer)? eventConf.pointer.move: eventConf.mouse.move, end: (conf.isTouch)? eventConf.touch.end: (conf.isPointer)? eventConf.pointer.end: eventConf.mouse.end };
jQueryだと...
JavaScript - Event 2
Surface Pro 3 (Touch PC) 最適化
// start $(document).on(eventTouch.start, $TARGET, dragStart); !// move and end function setEvent() { // move $(document).on(eventTouch.move, $TARGET, drag); ! // end $(document).on(eventTouch.end, $TARGET, dragEnd); } !// remove function removeEvent() { $(document).off(eventTouch.move, $TARGET); $(document).off(eventTouch.end, $TARGET); }
jQueryだと...
最後に
2014年7月に発売以来、
売れ行きは爆発的とはいかず
じわじわと売れているらしい
Surface Pro 3
PCコンテンツをそのまま
表示するだけでも十分
ただし
Touch操作可能でPC的なデバイスが
さらに普及することになると
前述のようなケアが
より重要になることでしょう