2013年5月26日日曜日

Store App の 画面サイズと解像度の関係

もしfuta8をタブレット…Surfaceや、Atomものの様な「10インチタブレット」でお使い頂いている場合、「ほぼ」以下のような画面が表示されているはずです。


ただ、10インチタブといっても、2560x1440, 1920x1080, 1366x768...と様々な解像度の液晶パネルがあります。が、Store Appでは、解像度が異なっていても、モニタの大きさが同じならば、レイアウトは「ほぼ」同じになります。


上の例は左から2560x1440, 1920x1080, 1366x768 の、10.6インチモニタです。
詳しい説明はMSの説明を読んでいただくのが正しいですが、雰囲気としては「レイアウト論理単位を維持する方向で、DPIをAdaptiveに変更する」感じです。

Scaling to different screens
http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx

今までのWindowsとWindows 8のDesktopでは、コントロールパネルで「DPI設定」を変更することが出来ました。
Store Appの場合、基本、OSが選択したDPIを使う形になるようです。

(WindowsのDPI関係のお話は歴史から語りだすとキリが無いのでここでは避けます。
が、下で触れるようにDPI非依存アプリが本質的に存在しないStore Appでは正常進化だろうと思っています。)

レイアウトが同じなら、高精細モニタは意味無いの?というとそんなことは全く無く、基本的にベクタベース+ラスタイメージは高品質スケーリングが行われるStore Appでは、UI部品が綺麗に描かれることになります。


…上の例、例が悪くて利点が伝わりにくいですね。すみません。
(また、カタログのサムネイルについては…元画像がある程度大きい場合はスケーリングが綺麗に決まるのですが、futa8の場合元々200pixelくらいのカタログサムネイルを描画しているだけなので、ここが綺麗になるわけでは無いです。)

次に、「同じ解像度でサイズが違う」モニタだとどうなるか、という例を示します。


左から、「27インチ・2560x1440」、「24インチ・1920x1200」、「10.6インチ・2560x1440」、「10.6インチ・1366x768」です。
左から1番目と3番目が、同じ解像度「2560x1440」でサイズが異なるモニタになります。
物理的な描画サイズは「だいたい」同じで、表示アイテムの数が増えているのが分かります。

上の10インチモニタの例で、「レイアウト論理単位を維持する方向で、DPIをAdaptiveに変更する」と述べました。
ここがWindows 8 / RT の少し新しい所で、論理単位を維持したまま、レイアウトをサイズに合わせて可変させる、というUIが大変作りやすくなっています。

ここまで沢山のfuta8のスクリーンキャプチャをお見せしましたが、futa8 自体はディスプレイのサイズ・解像度変更に合わせて特別な処理をしている訳ではなく、全て一つのコードで動いています。
WinRTのXAMLでGridViewを使って普通にアプリを書くと、基本的に皆この動作になります。
(例外もありますが)

Win32…Desktop Appの場合、DPI 非依存のアプリを作る事は出来ましたが、レイアウトをAdaptiveに変えるのはそれなりに手間だった事を思うと、隔世の感があります。また、横持ち・縦持ち・スナップ/Fillとアプリケーションの表示エリアが目まぐるしく変わる今回のUIでは、こうせざるを得なかったのかなという感もあります。

0 件のコメント:

コメントを投稿