2012 年 10 月 27 日に技術ひろば.net でセッションさせていただいた内容です。

1. Windows 8 の UX

2. 自己紹介
池原 大然（いけはら だいぜん）
インフラジスティックス・ジャパン株式会社
マーケティング & デベロッパー エバンジェリスト（何でも屋）
最近は毎日 Expression Web とかFireworks とかで
作業してます。VS もね!
Microsoft MVP for Development Platforms
Client App Dev 2010/04 – 2013/03
新米パパ
Blog

3. INFRAGISTICS 【名】
ɪnfrəˈdʒɪstɪks ： インフラジスティックス
1. ニュージャージーに本社を置く UI コントロールを中心としたソフ
トウェア製品を開発・販売するグローバルカンパニー
2. Infrastructure（基礎構造）+ logistics（後方支援）
3. バイク乗りが社長の東京・原宿の会社【日本】
4. インフラさん【俗称】

4. NETADVANTAGE

6. Presented
by
@kenazuma
（シャチョー）

7. http://bit.ly/S1vnEs

8. Windows 8 の
Windows ストア アプリ

15. Mac iOS Android Windows

17. http://msdn.microsoft.com/ja-jp/jj556277

18. http://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/hh694083.aspx

19. Windows 8 の UX
の
さわり

20. タッチ ファースト

21. 長押しして学ぶ まずはタップしてみる スライドしてドラッグ スワイプして選択
ピンチしてズーム 縁からスワイプ ローテートして回転
してUIを呼び出し

22. Low consequence
High consequence

25. タッチ ファースト
≠
タッチ オンリー

26. インタラクション タッチ マウス 物理キーボード
選択 スクロールと逆方向への 右クリック スペースキー
スワイプ
アプリバーの表示 上端／下端からのスワ 右クリック Windows + Z
イプ
コンテクストメニュー タップ アンド ホールド 右クリック コンテクストメニューキー
起動 タップ 左クリック Enterキー
短い距離のスクロール スライド スクロールバーのサム、矢印ボタン、 矢印キー
スクロールホイール
長い距離のスクロール スライド＋慣性運動 スクロールバーの領域内クリック、 Page up 及び
サムの移動、スクロールホイール down

27. インタラクション タッチ マウス 物理キーボード
再配置／ 開始点を超えるまで マウスダウンと移動 カット＆ペースト
ドラッグアンドドロップ スクロールと逆方向に
スワイプ
ズーム ピンチ Scroll wheel (2D canvas) Ctrl & +/-
スクロールホイールあるいはCtrl
＋スクロールホイール
ロテート ロテート shift+ctrl+スクロールホイール Ctrl & ,/.
キャレットを置く／テキスト タップ／タップしてキャ クリック／ダブルクリック／ダウンと 矢印キー／Shift+矢印
を選択する レットをドラッグする 移動 キー／ctrl + 矢印キー
より多くの情報を表示／ ホールド ホバーして開始時間が過ぎる状 フォーカスを移動させて開
学ぶ 態を待つ 始時間が過ぎる状態を待
つ
インタラクションフィード タッチビジュアライゼー カーソル動作と変化 フォーカスレクタングル
バック ション
フォーカス移動 N/A N/A 矢印キー／タブ

28. アクション キーコマンド
戻る 戻るボタン／テキストふーるどにいない状態でバックスペース／Alt+左
進む Alt+右
上がる Alt+上
キャンセル／あるモードから抜ける Esc
リストアイテムのブラウジング 矢印キー
リストアイテム中の次のグループへ移動する Control + 矢印キー
セマンティックズーム Control と + / -
コレクションの中で名前を持つ項目にジャンプする 名前をタイピング
遠くへジャンプ Page Up / Down （水平方向でも動作するべき）

29. アクション キーコマンド
次のタブ Control + Tab
前のタブ Control + Shift + Tab
N個めのタブ Control + N (数字の 1-9)
アプリバーを開く Win + Z
コンテキストメニュー コンテクストメニューキー
フライアウトを開く Enter
ナビゲート／起動 Enter
選択 スペース
複数選択 Shift + 矢印キー

30. アクション キーコマンド
ピン止め Control + Shift + !
コマンドラベルの表示 N/A
バスケットのクリアー N/A
コンテクストメニューの起動 コマンドボタン
保存 Control + S
検索 Control + F
印刷 Control + P (ShowPrintUIAsync APIを呼び出す)
コピー Control + C
カット Control + X
新規アイテム Control + N
ペースト Control + V
アドレスを開く Control-L or Alt-D
ロテート Control ,/.

31. Action Key Command
再生 / 一時停止 Control + P
(Only in media focused apps. If app
supports print, Control + P should
always print instead)
次のアイテム Control + F (Conflicts with Find)
前のアイテム Control + B
巻き戻し Control + Shift + B
早送り Control + Shift + F
停止 N/A

32. コマンド

34. チャーム
アプリバー

38. ワイド (2x1) 正方形(1x1)

44. Contoso Travel
Featured destinations Last minute deals My Trips City Guide
Featured Destinations Last Minute Deals My Trips
Top Destinations for 2012
Barcelona, Spain
7 night Alaska Cruise
Featured destinations Last Minute Deals My Trips
Barcelona, Spain 7 Night Alaska Cruise Chicago (3/11 – 3/19) Weather Attractions
7 days
Today
54/43
Mostly Sunny
Today
54/43
Mostly Sunny
Today
54/43
Mostly Sunny
Ocean View Cabins Suites Today
54/43
Mostly Sunny
Upgrade from an inside cabin and save Upgrade from an inside cabin and save
$43/night/person! $43/night/person!
Picture windows with ocean and port views Picture windows with ocean and port view
From $2,099 — only $150/night/person based on double
occupancy
From $2,099 — only $150/night/person do Today
54/43
Mostly Sunny

46. エンタープライズ利用
を
考えてみる

47. 向き、不向き
&
デプロイ

48. コンテンツを参照するアプリケーションは
マッチしやすい - タッチ対応しやすい

49. 入力系アプリ
キーボード、マウスを前提とした機能が多い
• 入力ではなく、選択させる
• 入力補助を検討する - 地図で選んだ座標から住所を取得
• タブレットではすっぱりあきらめる?

50. UI の面積が相対的に大きくなりがち
1 画面あたりのオブジェクト量が制限
• 1画面あたりの情報量を制限する
• 別の「見せ方」を検討する - アプリ内タイル表示など

51. 制約から
解き放つ!

52. 審査を通さずにデプロイするため、
認定要件をスルーできる
→ 自由度が高まる

53. 原則を無視すると他にも影響がでてしまう
ユーザーの混乱を招くおそれもある
誰が幸せになるんだろう？

54. インフラジスティックスが
得意なこと

55. NetAdvantage for Windows UI
XAML & HTML コントロール
• Grid
• Chart
特にデータ視覚化パターンを実装した UI に
注力

56. コードの共通化

57. •
•
•
•
API共通化に
よる学習・開発
コストの削減
単独 APIセット共有
共通部分 Silverlight Windows Phone WPF jQuery

58. Windows
Phone
jQuery iOS
WPF WinRT(XAML)
WinRT(HTML)
Silverlight
Core Data
Visualization
API
Cross Platform Shared Code Strategy

59. ロードマップ
2012 Q4 2013 H1 2013 H2
ベータ版公開 v1 リリース v2 リリース

60. まとめ

61. まとめ
•
•
•
•
•

62. リソース


http://bit.ly/w8rec1

http://bit.ly/w8rec2



http://t.co/zD2C8DGq

http://www.ustream.tv/recorded/25924087


http://samples.jp.infragistics.com/

http://blogs.jp.infragistics.com/blogs/