Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Grabacr07

July 06, 2013
Tweet

More Decks by Grabacr07

Other Decks in Technology

Transcript

  1. Subject • まだまだデスクトップ、そして WPF アプリ • DPI-aware application のために (今回、ほとんど

    DPI 関係のお話になってしまいました) • DPI についてちょっと深く知る的な • Windows 8.1 Preview 新機能 • タッチ エクスペリエンス
  2. Self Introduction • 亀谷 学人 (かめやまなと) • 某メーカー系 SIer 勤務

    • C# + WPF Windows Client Application 開発 • Twitter: ぐらばく (@Grabacr07) • Blog: http://grabacr.net/ 最近目が死んでる
  3. Interactive Whiteboard • コンピューター ディスプレイ • 大型 (40 型 ~

    80 型) プラズマディスプレイ、プロジェクター、etc… • ペンや指による入力 デジタル感圧式、赤外線、影、超音波、etc… • 対応ソフトウェア開発
  4. for the Tablet PC…? • Windows 8 と様々なタブレット PC の登場

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

    例のアプリ、 Windows 8 でも動くよね? 既に動作確認は取れております タブレット PC で表示が狂う件 大変申し訳ございません早急に 調査し対応致しますので今暫く お待ち頂きますよう宜しくお願 高 DPI 環境で表示不良
  6. 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 ドット サイズ
  7. 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
  8. 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 %
  9. 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
  10. 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
  11. 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 % ?
  12. High DPI Issues • UI 要素やテキストが切れる • フォント サイズ /

    レイアウトが不適切になる • UI 要素がぼやける • 座標空間の位置調整が不適切で、入力に影響する 狙った場所にドラッグ&ドロップできなくなったり • 全画面表示のアプリケーションが部分的にしかレンダリングされない 全画面表示のゲームなどで見られる • etc...
  13. DPI-aware application • Win32 application • マニフェストで <dpiAware>True</dpiAware> 宣言 •

    GetDeviceCaps 関数 GetSystemMetrics 関数 SystemParametersInfo 関数 • Windows Forms application • AutoScaleMode プロパティを Dpi に • 開発環境の DPI を記憶
  14. DPI-aware application 96 dpi 環境 (100 %) 144 dpi 環境

    (150 %) • DPI を考慮すると スケーリングされて意図した外観に スケーリングされて サイズが変わってる
  15. DPI Virtualization and Scaling • DPI 仮想化機能 • DPI-unaware applications

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

    (100 %) 144 dpi 環境 (150 %) 拡大しただけなので サイズは変わってない
  17. Device Independent Pixel • DIP (デバイス非依存ピクセル) • Direct2D, WPF など

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

    %) 144 dpi 環境 (150 % のサイズで描画) DIP なので サイズ変わってない
  19. High DPI in WPF • WPF で DPI を意識するケース(1) •

    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 とか
  20. High DPI in WPF • WPF で DPI を意識するケース(2) •

    ラスター画像がぼやける (もしくはジャギる) • ベクター画像を用意する? • 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
  21. High DPI in WPF • Path を使え、Path を。 96 dpi

    (100 %) 144 dpi (150 %) http://grabacr.net/archives/795 Demo XAML で描いたクラウディアさん ベクター形式なので DPI 対応 (拡大してもぼやけない)
  22. Per-Monitor DPI • モニターごとにスケーリング Primary: 10.6” Tablet (1920 x 1080)

    Secondary: 24” Display (1920 x 1200) 144 dpi (150 %) 96 dpi (100 %) Demo
  23. 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 版ですし)
  24. 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%
  25. 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 のディスプレイに移動しても表示できる
  26. 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 アプリ非対応?
  27. Touch Experience • デスクトップ アプリで意識すべきなのは? • コントロールの大きさ 指 (爪でなく) でタッチできるサイズになっている?

    • MouseEnter, MosuseMove に頼った動き マウスを乗せてメニューを表示させたり、Tooltip に頼ったりしてない? 例えば、NumericUpDown コントロール 上下ボタンは既定で 16 x 8 pixel、指で押せるわけがない Surface Pro + 144 dpi で 物理サイズ約 3 x 1.5 mm Hoge ボタン 処理 XXX_YYY を実行します ? マウスを乗せると Tooltip でヘルプが出たり
  28. 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 でも使えるよね…?)
  29. 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 ピクセル前後 ちょうど、リボンの大きいボタンと同じくらい
  30. Office 2013 • マウス モード • 従来と同じ • 指で押しづらい •

    タッチ モード • タッチ向け • 余白が広い = 指で押しやすい
  31. DPI-aware application • 高精細モニター搭載デバイスが主流に • 主力タブレット PC 製品は軒並み 160 ~

    200 ppi • 既定の DPI は 120 ~ 144 dpi、もしくはそれ以上が主流に • DPI-aware application はむしろ「当然」の域に • DPI 仮想化機能 • あくまで非対応アプリへの救済措置 • WPF を使いましょう (デバイス非依存ピクセル)
  32. Per-Monitor DPI • Windows 8.1 Preview 新機能 • モニターごとに適切な DPI

    を自動設定 • ウィンドウがモニター間を移動すると自動的にスケーリング • Per-Monitor DPI-aware • モニター間移動でスケーリングするにはアプリ側で対応が必要 • 現状、WPF などは対応できない? (正式版に期待)
  33. Touch Experience • デスクトップで意識すべき点 • コントロールの大きさが十分か • マウス固有の動きに依存していないか • UX

    Guidelines 読もう • タッチ対応を含め、デスクトップ アプリの開発を支援 • Office などの UI を例にしてみてもよいかも
  34. 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
  35. 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