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

Webサービスにおける 
Surface 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 対応

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
↓ 再度凝視... ↓

Surface Pro 3
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
多様なディスプレイサイズと
多様な入力方法が用意された 
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)
最適化
UI

UI
• マウスやペンによるクリック、ドラグ操作
• 指によるタッチやムーブ、スワイプ操作
両立したUIを提供する

UI
つまり
iPadで閲覧されることを想定して
PC UIをデザインする場合
と同様

UI - サイズ
リンクサイズ（タップエリア）は
なるべく大きく、 
理想は44px角(※)以上
※ 押し間違いが1%未満になるサイズ＝ 44px以上
⃝ better

UI - 操作 1
Click 
Tap
Swipe
Click 
Tap
操作系においては 
マウス操作とタッチ操作を両立する

UI - 操作 2
Click 
Tap
Pinch
操作系においては 
マウス操作とタッチ操作を両立する

Surface Pro 3 
(Touch PC)
最適化
Rotate

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

Rotate
SurfaceのIE以外のCSSピクセル
1,440 x 960

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

Surface Pro 3 
(Touch PC)
最適化
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

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).oﬀ(eventTouch.move, $TARGET);
$(document).oﬀ(eventTouch.end, $TARGET);
}
ｊQueryだと...

2014年7月に発売以来、 
売れ行きは爆発的とはいかず
じわじわと売れているらしい
Surface Pro 3

PCコンテンツをそのまま
表示するだけでも十分

ただし
Touch操作可能でPC的なデバイスが
さらに普及することになると
前述のようなケアが
より重要になることでしょう

関家栄治
!
!
フロントエンドエンジニア
!
 
https://twitter.com/sekiyaeiji

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

More Related Content