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

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 W38.1 inch174 mm x 109 mm

WXGA (1280 x 800)186 ppi0.136 mm

Acer ICONIA W711.6 inch257 mm x 146 mm

Full-HD (1920 x 1080)190 ppi0.134 mm

Surface Pro10.6 inch235 mm x 132 mm

Full-HD (1920 x 1080)208 ppi0.122 mm

MacBook Pro (Retina)13.3 inch287 mm x 179 mm

WQXGA (2560 x 1600)227 ppi0.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 SIZERESOLUTION(NATIVE)

PPI FITTING DPIRESOLUTION(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 SIZERESOLUTION(NATIVE)

PPI FITTING DPIRESOLUTION(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 Guidelineshttp://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 Experiencehttp://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