TOiNX 電子入札対応認証サービス 電子入札専用ソ …2014/07/08 · TOiNX 電子入札対応認証サービス 電子入札専用ソフト インストール手順書
WebサービスにおけるSurface Pro 3 対応とは
-
Upload
eiji-sekiya -
Category
Engineering
-
view
690 -
download
2
Transcript of WebサービスにおけるSurface Pro 3 対応とは
![Page 1: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/1.jpg)
WebサービスにおけるSurface Pro 3 対応とは
![Page 2: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/2.jpg)
...aboutSurface Pro 3
![Page 3: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/3.jpg)
...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月現在
![Page 4: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/4.jpg)
Surface Pro 3 対応
![Page 5: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/5.jpg)
Surface Pro 3の特性を活かし
最適なユーザ体験を提供すること
Surface Pro 3 対応
![Page 6: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/6.jpg)
Surface Pro 3Web Browser
![Page 7: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/7.jpg)
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
![Page 8: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/8.jpg)
※ 他のデバイスの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
![Page 9: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/9.jpg)
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
↓ 再度凝視... ↓
![Page 10: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/10.jpg)
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と比較... ↓
![Page 11: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/11.jpg)
Internet Explorer 11
Surface Pro 3 Web Browser
Surface Pro 3を特定する情報は
含まれていない
![Page 12: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/12.jpg)
Internet Explorer 11
Surface Pro 3 Web Browser
Touch PCであることだけは
特定できる
![Page 13: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/13.jpg)
Touch PC
![Page 14: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/14.jpg)
Touch PC
![Page 15: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/15.jpg)
Touch PC多様なディスプレイサイズと
多様な入力方法が用意された
Windows PC
・・・
タブレットの枠に
おさまらない
![Page 16: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/16.jpg)
他のタブレット実装との比較
![Page 17: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/17.jpg)
他のタブレット実装との比較
Apple 製品における Safari の例
Mac OS(PC)
iOS
iPhone (SP) iPad(Tablet)
上記すべて、特定可能 & 専用ページ提供可能※ 専用ページを提供することの是非はまた別の議論
![Page 18: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/18.jpg)
他のタブレット実装との比較
Android 標準ブラウザの例
Android OS
上記すべて、特定可能 & 専用ページ提供可能※ 専用ページを提供することの是非はまた別の議論
Mobile Safari (SP) Safari(Tablet)
![Page 19: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/19.jpg)
ここまでのまとめ
![Page 20: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/20.jpg)
ここまでのまとめ
• サービス側から特定できない • 専用コンテンツの提供はできない • Win 8 Touch PCの1機種 • Touch端末であることの特定はできる • Windows PCとしてのコンテンツ提供が必要 • PC用 IE11としてのコンテンツ提供が必要
Surface Pro 3 は
![Page 21: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/21.jpg)
以上を踏まえた上で
あえて...
![Page 22: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/22.jpg)
今後、もしも
Surfaceのシェアが拡大した場合に、
無視できなくなるかもしれない
現実のひとつとして...
![Page 23: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/23.jpg)
Surface Pro 3(Touch PC)
最適化
![Page 24: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/24.jpg)
Surface Pro 3 (Touch PC) 最適化
前提 1
Surface Pro 3 ユーザーは
PCページに導かれる
![Page 25: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/25.jpg)
前提 2
Win 8 PCにおいて、コンテンツは
常にタッチされる可能性を
含んでいる
Surface Pro 3 (Touch PC) 最適化
![Page 26: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/26.jpg)
Surface Pro 3(Touch PC)
最適化 UI
![Page 27: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/27.jpg)
UI
• マウスやペンによるクリック、ドラグ操作
• 指によるタッチやムーブ、スワイプ操作
両立したUIを提供する
Surface Pro 3 (Touch PC) 最適化
![Page 28: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/28.jpg)
UIつまり
iPadで閲覧されることを想定して
PC UIをデザインする場合
と同様
Surface Pro 3 (Touch PC) 最適化
![Page 29: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/29.jpg)
UI - サイズ
Surface Pro 3 (Touch PC) 最適化
リンクサイズ(タップエリア)は なるべく大きく、理想は44px角(※)以上
※ 押し間違いが1%未満になるサイズ = 44px以上
◯ better
![Page 30: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/30.jpg)
UI - 操作 1
Surface Pro 3 (Touch PC) 最適化
ClickTap
Swipe
ClickTap
操作系においてはマウス操作とタッチ操作を両立する
![Page 31: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/31.jpg)
UI - 操作 2
Surface Pro 3 (Touch PC) 最適化
ClickTap
Pinch
操作系においてはマウス操作とタッチ操作を両立する
![Page 32: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/32.jpg)
Surface Pro 3(Touch PC)
最適化 Rotate
![Page 33: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/33.jpg)
Rotate
Surface Pro 3 (Touch PC) 最適化
Surfaceのタブレットらしさの1つ SurfaceはRotateできる
![Page 34: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/34.jpg)
Rotate
Surface Pro 3 (Touch PC) 最適化
SurfaceのIE以外のCSSピクセル
1,440 x 960
![Page 35: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/35.jpg)
Rotate
Surface Pro 3 (Touch PC) 最適化
たとえば 横幅1,000pxのコンテンツにおいて 40px欠ける これを防ぐためには リキッドレイアウトなどの 対応が求められる
![Page 36: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/36.jpg)
Surface Pro 3(Touch PC)
最適化 JavaScript - Event
![Page 37: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/37.jpg)
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
![Page 38: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/38.jpg)
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' } };
![Page 39: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/39.jpg)
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 };
![Page 40: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/40.jpg)
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 }
![Page 41: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/41.jpg)
JavaScript - Event 1
Surface Pro 3 (Touch PC) 最適化
Demo http://codepen.io/sekiyaeiji/pen/dPoJyz?editors=001
![Page 42: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/42.jpg)
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だと...
![Page 43: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/43.jpg)
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だと...
![Page 44: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/44.jpg)
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だと...
![Page 45: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/45.jpg)
最後に
![Page 46: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/46.jpg)
2014年7月に発売以来、
売れ行きは爆発的とはいかず
じわじわと売れているらしい
Surface Pro 3
![Page 47: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/47.jpg)
PCコンテンツをそのまま
表示するだけでも十分
![Page 48: WebサービスにおけるSurface Pro 3 対応とは](https://reader034.fdocuments.net/reader034/viewer/2022051112/55a05b571a28ab09688b4775/html5/thumbnails/48.jpg)
ただし
Touch操作可能でPC的なデバイスが
さらに普及することになると
前述のようなケアが
より重要になることでしょう