狠狠撸

狠狠撸Share a Scribd company logo

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

?
?
Manato KAMEYA
Manato KAMEYA

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

1 of 51
Downloaded 46 times
デスクトップがこの 先生きのこるには 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 ? マニフェストで <dpiAware>True</dpiAware> 宣言 ? 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 に対応してることを宣言 <dpiAware>Per-Monitor</dpiAware> または <dpiAware>True/PM</dpiAware> ? 自分が描画されているモニターの 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

More Related Content

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

  • 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 ? プレビュー版に関する話題が含まれます ? 正式リリース時には変更される可能性があります
  • 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 ドット サイズ
  • 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
  • 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 対応 (拡大してもぼやけない)
  • 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 アプリ非対応？
  • 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 ? マウス モード ? 従来と同じ ? 指で押しづらい ? タッチ モード ? タッチ向け ? 余白が広い = 指で押しやすい
  • 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