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

デスクトップがこの
先生きのこるには
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
• プレビュー版に関する話題が含まれます
• 正式リリース時には変更される可能性があります

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 で表示が狂う件
大変申し訳ございません早急に
調査し対応致しますので今暫く
お待ち頂きますよう宜しくお願

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

• ディスプレイの小型化 + 高精細化
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 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 %

• 適切な設定とは？ (まぁ好みなんですが)
• 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

• 適切な設定とは？ (まぁ好みなんですが)
• 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
MacBook Pro
(Retina)
13.3” 2560 x 1600 227 ppi 192 dpi (200 %) 1280 x 800
Q. どうして 200 % 設定が適正でないの？ A. Windows 8 で使うには小さすぎるから

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 を記憶

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

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

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
タッチ操作で
メニューを出した場合
マウス操作で
メニューを出した場合

• 高精細モニター搭載デバイスが主流に
• 主力タブレット 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

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (13)

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

Similaire à デスクトップアプリがこの先生きのこるには (20)