デスクトップ アプリがこの先生きのこるには

2013/07/06 Room metro Tokyo #1 で発表したスライドです。
Windows における DPI システムの解説が多め。

Transcript

1. デスクトップがこの 先生きのこるには 2013/07/06 Room metro Tokyo #1 Manato KAMEYA (@Grabacr07) アプリ
2. Subject • まだまだデスクトップ、そして WPF アプリ • DPI-aware application のために (今回、ほとんど DPI 関係のお話になってしまいました) • DPI についてちょっと深く知る的な • Windows 8.1 Preview 新機能 • タッチ エクスペリエンス
3. Agenda デスクトップ アプリがこの先 生きのこるには Introduction Touch Experience Windows DPI Conclusion デスクトップ アプリがこの先 生きのこるには
4. • 内容は個人に帰属します 所属する組織を代表するものではありません • Windows 8.1 Preview • プレビュー版に関する話題が含まれます • 正式リリース時には変更される可能性があります
5. Introduction
6. Self Introduction • 亀谷 学人 (かめやまなと) • 某メーカー系 SIer 勤務 • C# + WPF Windows Client Application 開発 • Twitter: ぐらばく (@Grabacr07) • Blog: http://grabacr.net/ 最近目が死んでる
7. Interactive Whiteboard • コンピューター ディスプレイ • 大型 (40 型 ～ 80 型) プラズマディスプレイ、プロジェクター、etc… • ペンや指による入力 デジタル感圧式、赤外線、影、超音波、etc… • 対応ソフトウェア開発
8. for the Tablet PC…? • Windows 8 と様々なタブレット PC の登場 例のソフトウェア、 Windows 8 でも動くよね？ 既に動作確認は取れております タブレット PC で表示が狂う件 大変申し訳ございません早急に 調査し対応致しますので今暫く お待ち頂きますよう宜しくお願
9. for the Tablet PC…? • Windows 8 と様々なタブレット PC の登場 例のアプリ、 Windows 8 でも動くよね？ 既に動作確認は取れております タブレット PC で表示が狂う件 大変申し訳ございません早急に 調査し対応致しますので今暫く お待ち頂きますよう宜しくお願 高 DPI 環境で表示不良
10. for the Tablet PC…? • Windows 8 と様々なタブレット PC の登場 • ディスプレイの小型化 + 高精細化 TABLET / PC SIZE RESOLUTION PPI Acer ICONIA W3 8.1 inch 174 mm x 109 mm WXGA (1280 x 800) 186 ppi 0.136 mm Acer ICONIA W7 11.6 inch 257 mm x 146 mm Full-HD (1920 x 1080) 190 ppi 0.134 mm Surface Pro 10.6 inch 235 mm x 132 mm Full-HD (1920 x 1080) 208 ppi 0.122 mm MacBook Pro (Retina) 13.3 inch 287 mm x 179 mm WQXGA (2560 x 1600) 227 ppi 0.112 mm 高 DPI 環境の標準化 物理的な 1 ドット サイズ
11. 新旧 DPI システム解説 Windows DPI
12. What is DPI? • 今更ですが… • Dots Per Inch • 1 インチの幅でどれだけのドットを表現できるか • Windows では 1 インチ = 96 pixel • 100 % (96 dpi)、125 % (120 dpi)、150 % (144 dpi) などの設定 [コントロール パネル] -> [デスクトップのカスタマイズ] -> [テキストやその他の項目の大きさの変更] 96 dpi 100 x 50 px 144 dpi 150 x 75 px 96 dpi 100 x 50 px 144 dpi 150 x 75 px
13. DPI Settings (Windows 8)
14. 96 DPI (100 %) 1920 x 1080
15. 120 DPI (125 %) 1536 x 864
16. 144 DPI (150 %) 1280 x 720
17. DPI of the major Tablet PCs • 既定の DPI 設定 • デバイスによって異なる • ArrowsTab 100 % • VAIO Pro 11 125 % • VAIO Pro 13 125 % • ICONIA W7 150 % • Surface RT 100 % • Surface Pro 150 %
18. DPI of the major Tablet PCs • 適切な設定とは？ (まぁ好みなんですが) • ppi (画素密度) – 30 ～ 40 くらいに近いと見やすい？ TABLET / PC SIZE RESOLUTION (NATIVE) PPI FITTING DPI RESOLUTION (LOGICAL) Surface RT 10.6” 1366 x 768 148 ppi 96 dpi (100 %) 1366 x 768 VAIO Pro 13 13.6” 1920 x 1080 166 ppi 128 dpi (125 %) 1536 x 864 ICONIA W7 11.6” 1920 x 1080 190 ppi 144 dpi (150 %) 1280 x 720 Surface Pro 10.6” 1920 x 1080 208 ppi 144 dpi (150 %) 1280 x 720 MacBook Pro (Retina) 13.3” 2560 x 1600 227 ppi 192 dpi (200 %) 1280 x 800
19. DPI of the major Tablet PCs • 適切な設定とは？ (まぁ好みなんですが) • ppi (画素密度) – 30 ～ 40 くらいに近いと見やすい？ TABLET / PC SIZE RESOLUTION (NATIVE) PPI FITTING DPI RESOLUTION (LOGICAL) Surface RT 10.6” 1366 x 768 148 ppi 96 dpi (100 %) 1366 x 768 VAIO Pro 13 13.6” 1920 x 1080 166 ppi 128 dpi (125 %) 1536 x 864 ICONIA W7 11.6” 1920 x 1080 190 ppi 144 dpi (150 %) 1280 x 720 Surface Pro 10.6” 1920 x 1080 208 ppi 144 dpi (150 %) 1280 x 720 MacBook Pro (Retina) 13.3” 2560 x 1600 227 ppi 192 dpi (200 %) 1280 x 800 Q. どうして 200 % 設定が適正でないの？ A. Windows 8 で使うには小さすぎるから Surface Pro 10.6” 1920 x 1080 208 ppi 192 dpi (200 %) 960 x 540
20. Windows Store apps • スケーリングの UX ガイドライン • 100 % -> 通常 • 140 % -> 174 ppi 以上、Full-HD (1920 x 1080) デバイスで自動的に • 180 % -> 240 ppi 以上、WQHD (2560 x 1440) デバイスで自動的に TABLET / PC SIZE RESOLUTION PPI SCALING ICONIA W7 11.6” 1920 x 1080 190 ppi 140 % ? Surface Pro 10.6” 1920 x 1080 208 ppi 140 % ?
21. High DPI Issues • UI 要素やテキストが切れる • フォント サイズ / レイアウトが不適切になる • UI 要素がぼやける • 座標空間の位置調整が不適切で、入力に影響する 狙った場所にドラッグ＆ドロップできなくなったり • 全画面表示のアプリケーションが部分的にしかレンダリングされない 全画面表示のゲームなどで見られる • etc...
22. DPI-unaware application • 文字が切れる、レイアウトが崩れる、etc… (悪意のある例ですが) 本当に何も対策しないとこうなる 96 dpi 環境 (100 %) 120 dpi 環境 (125 %) 144 dpi 環境 (150 %)
23. DPI-aware application • Win32 application • マニフェストで <dpiAware>True</dpiAware> 宣言 • GetDeviceCaps 関数 GetSystemMetrics 関数 SystemParametersInfo 関数 • Windows Forms application • AutoScaleMode プロパティを Dpi に • 開発環境の DPI を記憶
24. DPI-aware application 96 dpi 環境 (100 %) 144 dpi 環境 (150 %) • DPI を考慮すると スケーリングされて意図した外観に スケーリングされて サイズが変わってる
25. DPI Virtualization and Scaling • DPI 仮想化機能 • DPI-unaware applications のための救済措置 • Windows Vista で導入 • DPI 設定に合わせて自動的に拡大 96 dpi で画面表示領域外にレンダリングされ、 DWM が拡大して表示 • ぼやける (重要) このチェックを 外した状態
26. DPI Virtualization and Scaling • ぼやける ただ拡大しているだけなので… 96 dpi 環境 (100 %) 144 dpi 環境 (150 %) 拡大しただけなので サイズは変わってない
27. Device Independent Pixel • DIP (デバイス非依存ピクセル) • Direct2D, WPF など • 環境の DPI 設定に関わらず 1 dip = 1/96 inch とする • コントロールやフォントのサイズは全て DIP で指定する 開発者が DPI を意識して座標やサイズの計算をする必要がない！ • DPI 仮想化が効かない (仮想化する必要がない) • WPF ->「解像度およびデバイスに依存しないグラフィックス」
28. Device Independent Pixel • ぼやけない そのための特別なコードも必要なし 96 dpi 環境 (100 %) 144 dpi 環境 (150 % のサイズで描画) DIP なので サイズ変わってない
29. High DPI in WPF • WPF で DPI を意識するケース（１） • P/Invoke -> Win32 API … WPF の外から座標を取得してくる場合など • DIP (デバイス非依存ピクセル) でないものは計算が必要 WPF で DPI 算出 var source = PresentationSource.FromVisual(this); if (source != null && source.CompositionTarget != null) { var dpiX = 96.0 * source.CompositionTarget.TransformToDevice.M11; var dpiY = 96.0 * source.CompositionTarget.TransformToDevice.M22; } 1.25 とか 1.5 とか
30. High DPI in WPF • WPF で DPI を意識するケース（２） • ラスター画像がぼやける (もしくはジャギる) • ベクター画像を用意する？ • DPI ごとに異なる画像を用意する？ • Windows Store apps では有効な手段 96 dpi 100% 144 dpi 150% ¥scale-100¥test.jpg ¥scale-140¥test.jpg ¥scale-180¥test.jpg ¥scale-100¥test.jpg ¥scale-140¥test.jpg ¥scale-180¥test.jpg
31. High DPI in WPF • Path を使え、Path を。 96 dpi (100 %) 144 dpi (150 %) http://grabacr.net/archives/795 Demo XAML で描いたクラウディアさん ベクター形式なので DPI 対応 (拡大してもぼやけない)
32. DPI Settings (Windows 8)
33. DPI Settings (Windows 8.1 Preview) モニターごとの スケーリング (新機能)
34. DPI Settings (Windows 8.1 Preview) 従来方式も可能
35. Per-Monitor DPI • モニターごとにスケーリング Primary: 10.6” Tablet (1920 x 1080) Secondary: 24” Display (1920 x 1200) 144 dpi (150 %) 96 dpi (100 %) Demo
36. Per-Monitor DPI Primary: 10.6” Tablet (1920 x 1080) Secondary: 24” Display (1920 x 1200) 144 dpi (150 %) 96 dpi (100 %) Demo • モニターごとにスケーリング • ログオン時にそれぞれのモニターに最適な DPI を選択 • ウィンドウがモニター間を移動したときスケーリング • Dynamic scaling • アプリ側で、動的な DPI スケーリングに対応する必要がある！ • 非対応アプリは、DPI 仮想化によってスケーリングされる 現状、explorer.exe や WPF アプリも DPI 仮想化されてしまう (まぁ、Preview 版ですし）
37. Optimal Configuration Display size Resolution (pixels) Panel PPI OS DPI Scale level 10.6” Full-HD 1920 x 1080 208 144 150% 10.6” HD 1366 x 768 148 96 100% 11.6” WUXGA 1920 x 1200 195 144 150% 11.6” HD 1366 x 768 135 96 100% 13.3” WUXGA 1920 x 1200 170 144 150% 13.3” QHD 2560 x 1440 221 192 200% 13.3” HD 1366 x 768 118 96 100% 15.4” Full-HD 1920 x 1080 143 120 125% 17” Full-HD 1920 x 1080 130 120 125% 23” QFHD (4K) 3840 x 2160 192 192 200% 24” QHD 2560 x 1440 122 120 125%
38. DPI Awareness Level • DPI-unaware applications • 高 DPI 環境非対応、スケーリングなし • 一応 DPI 仮想化は効くけど、品質はお察しレベル • System DPI-aware applications • スケーリングされるので、高 DPI 環境でも表示できる • Windows 8.1 Preview で異なる DPI のディスプレイに移動すると仮想化されてしまう • Per-Monitor DPI-aware ← New! • Windows 8 までの環境で、高 DPI 環境でも表示できる • Windows 8.1 Preview で異なる DPI のディスプレイに移動しても表示できる
39. Per-Monitor DPI-aware • 現時点でカスタム Win32 アプリのみ対応可能？ • マニフェストで Per-Monitor DPI に対応してることを宣言 <dpiAware>Per-Monitor</dpiAware> または <dpiAware>True/PM</dpiAware> • 自分が描画されているモニターの DPI を調べる • WM_DPICHANGED メッセージを処理 • DPI に合わせてスケーリングし再描画 • Windows 標準アプリ (explorer, mspaint, etc…) 非対応？ • WPF アプリ非対応？
40. デスクトップでもタッチしたい！ Touch Experience
41. Touch Experience • デスクトップ アプリで意識すべきなのは？ • コントロールの大きさ 指 (爪でなく) でタッチできるサイズになっている？ • MouseEnter, MosuseMove に頼った動き マウスを乗せてメニューを表示させたり、Tooltip に頼ったりしてない？ 例えば、NumericUpDown コントロール 上下ボタンは既定で 16 x 8 pixel、指で押せるわけがない Surface Pro + 144 dpi で 物理サイズ約 3 x 1.5 mm Hoge ボタン 処理 XXX_YYY を実行します ? マウスを乗せると Tooltip でヘルプが出たり
42. UX Guidelines • Windows User Experience Interaction Guidelines http://msdn.microsoft.com/ja-JP/windows/desktop/aa511258 › すべての Windows デスクトップ アプリ向けに、高品質で一貫性のある UX および UI の基準を確立する。 › UX と UI に関する一般的な質問を予想し、一般的な使用パターンについてガイダンスを提供する。 › Windows で快適に使うことができる、機能的で美しいデスクトップ アプリの開発を支援する。 • 読んだことあります？ • 900 ページ弱の PDF ファイルがあります！ 簡易版もあるよ -> http://msdn.microsoft.com/ja-jp/windows/ee340680.aspx • Windows 7 の頃に作られたもの (だけど、Windows 8 でも使えるよね…？)
43. UX Guidelines • Interaction -> Touch Experience http://msdn.microsoft.com/ja-jp/library/windows/desktop/cc872774.aspx • コントロールの大きさ タッチできる最小サイズ -> 物理サイズ 6 x 6 mm 速度や正確さが向上 / 快適に感じる -> 物理サイズ 10 x 10 mm • コントロールのレイアウト、感覚など ICONIA W7 (11.6”) + 120 dpi で 60 ピクセル前後 ちょうど、リボンの大きいボタンと同じくらい
44. Office 2013 • マウス モード • 従来と同じ • 指で押しづらい • タッチ モード • タッチ向け • 余白が広い = 指で押しやすい
45. Office 2013 タッチ操作で メニューを出した場合 マウス操作で メニューを出した場合
46. Conclusion
47. DPI-aware application • 高精細モニター搭載デバイスが主流に • 主力タブレット PC 製品は軒並み 160 ～ 200 ppi • 既定の DPI は 120 ～ 144 dpi、もしくはそれ以上が主流に • DPI-aware application はむしろ「当然」の域に • DPI 仮想化機能 • あくまで非対応アプリへの救済措置 • WPF を使いましょう (デバイス非依存ピクセル)
48. Per-Monitor DPI • Windows 8.1 Preview 新機能 • モニターごとに適切な DPI を自動設定 • ウィンドウがモニター間を移動すると自動的にスケーリング • Per-Monitor DPI-aware • モニター間移動でスケーリングするにはアプリ側で対応が必要 • 現状、WPF などは対応できない？ (正式版に期待)
49. Touch Experience • デスクトップで意識すべき点 • コントロールの大きさが十分か • マウス固有の動きに依存していないか • UX Guidelines 読もう • タッチ対応を含め、デスクトップ アプリの開発を支援 • Office などの UI を例にしてみてもよいかも
50. Reference • DPI and Device-Independent Pixels http://msdn.microsoft.com/en-us/library/windows/desktop/ff684173(v=vs.85).aspx • Guidelines for scaling to pixel density (Windows Store apps) http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx • Writing DPI-Aware Desktop Applications in Windows 8.1 Preview http://go.microsoft.com/fwlink/p/?LinkID=307061 • DPI Tutorial sample http://code.msdn.microsoft.com/DPI-Tutorial-sample-64134744/description
51. Reference • Getting system DPI in WPF app.. - MSDN Blogs http://blogs.msdn.com/b/jaimer/archive/2007/03/07/getting-system-dpi-in-wpf-app.aspx • Scaling to different screens - Building Windows 8 - MSDN Blogs http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx • Windows User Experience Interaction Guidelines http://msdn.microsoft.com/en-us/library/windows/desktop/aa511258.aspx