デスクトップがこの 先生きのこるには 2013/07/06 Room metro Tokyo #1 Manato KAMEYA (@Grabacr07) アプリ

Subject • まだまだデスクトップ、そして WPF アプリ • DPI-aware application のために (今回、ほとんど DPI 関係のお話になってしまいました) • DPI についてちょっと深く知る的な • Windows 8.1 Preview 新機能 • タッチ エクスペリエンス

Agenda デスクトップ アプリがこの先 生きのこるには Introduction Touch Experience Windows DPI Conclusion デスクトップ アプリがこの先 生きのこるには

• 内容は個人に帰属します 所属する組織を代表するものではありません • Windows 8.1 Preview • プレビュー版に関する話題が含まれます • 正式リリース時には変更される可能性があります

Introduction

Self Introduction • 亀谷 学人 (かめやまなと) • 某メーカー系 SIer 勤務 • C# + WPF Windows Client Application 開発 • Twitter: ぐらばく (@Grabacr07) • Blog: http://grabacr.net/ 最近目が死んでる

Interactive Whiteboard • コンピューター ディスプレイ • 大型 (40 型 ～ 80 型) プラズマディスプレイ、プロジェクター、etc… • ペンや指による入力 デジタル感圧式、赤外線、影、超音波、etc… • 対応ソフトウェア開発

for the Tablet PC…? • Windows 8 と様々なタブレット PC の登場 例のソフトウェア、 Windows 8 でも動くよね？ 既に動作確認は取れております タブレット PC で表示が狂う件 大変申し訳ございません早急に 調査し対応致しますので今暫く お待ち頂きますよう宜しくお願

for the Tablet PC…? • Windows 8 と様々なタブレット PC の登場 例のアプリ、 Windows 8 でも動くよね？ 既に動作確認は取れております タブレット PC で表示が狂う件 大変申し訳ございません早急に 調査し対応致しますので今暫く お待ち頂きますよう宜しくお願 高 DPI 環境で表示不良

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 ドット サイズ

新旧 DPI システム解説 Windows DPI

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

DPI Settings (Windows 8)

96 DPI (100 %) 1920 x 1080

120 DPI (125 %) 1536 x 864

144 DPI (150 %) 1280 x 720

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 %

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

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

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 % ?

High DPI Issues • UI 要素やテキストが切れる • フォント サイズ / レイアウトが不適切になる • UI 要素がぼやける • 座標空間の位置調整が不適切で、入力に影響する 狙った場所にドラッグ＆ドロップできなくなったり • 全画面表示のアプリケーションが部分的にしかレンダリングされない 全画面表示のゲームなどで見られる • etc...

DPI-unaware application • 文字が切れる、レイアウトが崩れる、etc… (悪意のある例ですが) 本当に何も対策しないとこうなる 96 dpi 環境 (100 %) 120 dpi 環境 (125 %) 144 dpi 環境 (150 %)

DPI-aware application • Win32 application • マニフェストで True 宣言 • GetDeviceCaps 関数 GetSystemMetrics 関数 SystemParametersInfo 関数 • Windows Forms application • AutoScaleMode プロパティを Dpi に • 開発環境の DPI を記憶

DPI-aware application 96 dpi 環境 (100 %) 144 dpi 環境 (150 %) • DPI を考慮すると スケーリングされて意図した外観に スケーリングされて サイズが変わってる

DPI Virtualization and Scaling • DPI 仮想化機能 • DPI-unaware applications のための救済措置 • Windows Vista で導入 • DPI 設定に合わせて自動的に拡大 96 dpi で画面表示領域外にレンダリングされ、 DWM が拡大して表示 • ぼやける (重要) このチェックを 外した状態

DPI Virtualization and Scaling • ぼやける ただ拡大しているだけなので… 96 dpi 環境 (100 %) 144 dpi 環境 (150 %) 拡大しただけなので サイズは変わってない

Device Independent Pixel • DIP (デバイス非依存ピクセル) • Direct2D, WPF など • 環境の DPI 設定に関わらず 1 dip = 1/96 inch とする • コントロールやフォントのサイズは全て DIP で指定する 開発者が DPI を意識して座標やサイズの計算をする必要がない！ • DPI 仮想化が効かない (仮想化する必要がない) • WPF ->「解像度およびデバイスに依存しないグラフィックス」

Device Independent Pixel • ぼやけない そのための特別なコードも必要なし 96 dpi 環境 (100 %) 144 dpi 環境 (150 % のサイズで描画) DIP なので サイズ変わってない

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 とか

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

High DPI in WPF • Path を使え、Path を。 96 dpi (100 %) 144 dpi (150 %) http://grabacr.net/archives/795 Demo XAML で描いたクラウディアさん ベクター形式なので DPI 対応 (拡大してもぼやけない)

DPI Settings (Windows 8)

DPI Settings (Windows 8.1 Preview) モニターごとの スケーリング (新機能)

DPI Settings (Windows 8.1 Preview) 従来方式も可能

Per-Monitor DPI • モニターごとにスケーリング Primary: 10.6” Tablet (1920 x 1080) Secondary: 24” Display (1920 x 1200) 144 dpi (150 %) 96 dpi (100 %) Demo

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 版ですし）

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%

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 のディスプレイに移動しても表示できる

Per-Monitor DPI-aware • 現時点でカスタム Win32 アプリのみ対応可能？ • マニフェストで Per-Monitor DPI に対応してることを宣言 Per-Monitor または True/PM • 自分が描画されているモニターの DPI を調べる • WM_DPICHANGED メッセージを処理 • DPI に合わせてスケーリングし再描画 • Windows 標準アプリ (explorer, mspaint, etc…) 非対応？ • WPF アプリ非対応？

デスクトップでもタッチしたい！ Touch Experience

Touch Experience • デスクトップ アプリで意識すべきなのは？ • コントロールの大きさ 指 (爪でなく) でタッチできるサイズになっている？ • MouseEnter, MosuseMove に頼った動き マウスを乗せてメニューを表示させたり、Tooltip に頼ったりしてない？ 例えば、NumericUpDown コントロール 上下ボタンは既定で 16 x 8 pixel、指で押せるわけがない Surface Pro + 144 dpi で 物理サイズ約 3 x 1.5 mm Hoge ボタン 処理 XXX_YYY を実行します ? マウスを乗せると Tooltip でヘルプが出たり

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 でも使えるよね…？)

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 ピクセル前後 ちょうど、リボンの大きいボタンと同じくらい

Office 2013 • マウス モード • 従来と同じ • 指で押しづらい • タッチ モード • タッチ向け • 余白が広い = 指で押しやすい

Office 2013 タッチ操作で メニューを出した場合 マウス操作で メニューを出した場合

Conclusion

DPI-aware application • 高精細モニター搭載デバイスが主流に • 主力タブレット PC 製品は軒並み 160 ～ 200 ppi • 既定の DPI は 120 ～ 144 dpi、もしくはそれ以上が主流に • DPI-aware application はむしろ「当然」の域に • DPI 仮想化機能 • あくまで非対応アプリへの救済措置 • WPF を使いましょう (デバイス非依存ピクセル)

Per-Monitor DPI • Windows 8.1 Preview 新機能 • モニターごとに適切な DPI を自動設定 • ウィンドウがモニター間を移動すると自動的にスケーリング • Per-Monitor DPI-aware • モニター間移動でスケーリングするにはアプリ側で対応が必要 • 現状、WPF などは対応できない？ (正式版に期待)

Touch Experience • デスクトップで意識すべき点 • コントロールの大きさが十分か • マウス固有の動きに依存していないか • UX Guidelines 読もう • タッチ対応を含め、デスクトップ アプリの開発を支援 • Office などの UI を例にしてみてもよいかも

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

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