WebサービスにおけるSurface Pro 3 対応とは

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)




User Agent Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; rv:11.0) like Gecko

↓ 再度凝視... ↓



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と比較... ↓



Surface Pro 3を特定する情報は

含まれていない



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において、コンテンツは

常にタッチされる可能性を

含んでいる



最適化 UI

UI

• マウスやペンによるクリック、ドラグ操作

• 指によるタッチやムーブ、スワイプ操作

両立したUIを提供する


UIつまり

iPadで閲覧されることを想定して

PC UIをデザインする場合

と同様


UI - サイズ


リンクサイズ（タップエリア）はなるべく大きく、理想は44px角(※)以上

※ 押し間違いが1%未満になるサイズ＝ 44px以上

◯ better

UI - 操作 1


ClickTap

Swipe

ClickTap

操作系においてはマウス操作とタッチ操作を両立する

UI - 操作 2


ClickTap

Pinch

操作系においてはマウス操作とタッチ操作を両立する


最適化 Rotate

Rotate


Surfaceのタブレットらしさの１つ SurfaceはRotateできる

Rotate


SurfaceのIE以外のCSSピクセル

1,440 x 960

Rotate


たとえば横幅1,000pxのコンテンツにおいて 40px欠けるこれを防ぐためにはリキッドレイアウトなどの対応が求められる


最適化 JavaScript - Event

JavaScript - Event


非 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


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' } };



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 };



// 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 }



Demo http://codepen.io/sekiyaeiji/pen/dPoJyz?editors=001

http://codepen.io/sekiyaeiji/pen/dPoJyz?editors=001



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' } };

ｊQueryだと...



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 };

ｊQueryだと...



// 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); }

ｊQueryだと...

最後に

2014年7月に発売以来、

売れ行きは爆発的とはいかず

じわじわと売れているらしい

Surface Pro 3

PCコンテンツをそのまま

表示するだけでも十分

ただし

Touch操作可能でPC的なデバイスが

さらに普及することになると

前述のようなケアが

より重要になることでしょう

関家栄治 !

!

フロントエンドエンジニア !

https://twitter.com/sekiyaeiji

https://twitter.com/sekiyaeiji

Engineering

WebサービスにおけるSurface Pro 3 対応とは