Help us understand the problem. What is going on with this article?

UWP(Windows10)アプリの単位・スケーリング・リソース素材の仕組み

More than 3 years have passed since last update.

UWPの単位とかリソースとかわかりやすい資料ないのかよ

と思ってめちゃくちゃ探したら、hololens開発のページにリンク貼ってあったBUILD2015の資料を見つけることができました。これめっちゃ詳しい。これむしろなんでもっと広く公開しないの…。

ということで、エッセンスを和訳してメモしておきます。
詳細は下記パワポをご覧ください。
>パワポ:http://video.ch9.ms/sessions/build/2015/2-63_Build_2015_Windows_Scaling.pptx

先にネタばれしとくと、正直Androidの考え方とそんなに変わらないみたいです。

UWPアプリのスケーリング

UWPアプリのスケーリングで配慮すべきこと

・有効ピクセル(Effective Pixel=epx)への対応
・各スケールファクタごとのリソース素材の準備

対応すべきスケール

Windows10(UWP)のスケール一覧及びiOS/Androidとの対応は下記表のとおり。

OS スケール
Windows 100 125 150 200 250 300 400
Android 100 150 200 300 400
iOS 100 200 300

上記表に準じてiOS/Androidの素材をそのまま流用可能。
つまり、
 ・Windowsのスケールファクタが100%~125% ⇒ Androidだとmdpi、iOSだと@1xに相当
 ・Windowsのスケールファクタが150% ⇒ Androidだとhdpi、iOSだと@1xに相当
 ・Windowsのスケールファクタが200%~250% ⇒ Androidだとxhdpi、iOSだと@2xに相当
 ・Windowsのスケールファクタが300% ⇒ Androidだとxxhdpi、iOSだと@3xに相当
 ・Windowsのスケールファクタが400% ⇒ Androidだとxxxhdpi(ある?)、iOSだと@3xに相当
になるので、それぞれ対応するiOS/Androidの素材を持ってくればいい。

※Windows10のスケールファクタの調べ方
たぶん、システム>ディスプレイ>ディスプレイのカスタマイズ>「テキスト、アプリ、その他のサイズを変更する」のところの値を採用している模様。
↓ これ ↓

4889506a-9018-2c46-b61a-2e9339e82d6c.jpeg

プログラムからの調べ方はこっちに書いてありますが、DisplayInformation.GetForCurrentView().RawPixelsPerViewPixelで求められます。

提供すべき素材

Windowsのスケールは100~400まで7種類もあり、全てのスケール分の素材を準備すると容量が肥大化するので、基本的提供するのは100、200、400の3種類でよい。(ストアからDLしてくるときに端末側に合わせたスケールファクタの素材のみをDLしてくれるしくみ)
ぴったりのスケールがなかった場合の素材の割り当てルールは下記の通り。

 ・Windowsの表示設定が100% ⇒ 100%(mdpi)スケールの素材を利用
 ・Windowsの表示設定が125%~200% ⇒ 200%(xhdpi)スケールの素材を縮小して利用
 ・Windowsの表示設定が200%~ ⇒ 400%スケールの素材を拡大縮小して利用

表にするとこう。400%以上になった場合は400%の素材が拡大されるらしいですが、基本はきれいに見えるよう縮小する方針のようです。

スケール 100 125 150 200 250 300 400
素材 100% 200%を縮小 200% 400%を縮小 400%

素材提供の優先順位

100、200、400%の素材のうち、どれを優先して提供すべきかは下記表のとおり。

優先度 スケールファクタ 理由
1 100% デスクトップがほぼこれを採用、ローエンドのタブレットもここに属すため(ただしここに属するPhoneはほぼもうない)
2 200% 高解像度のデスクトップはこれを使う、大半のPhoneもここ。
3 400% 将来的に4KのPC/タブレットに対応するために用意。もしくは200%以上の端末できれいに見せる用に準備する。

デザインレイアウトの方法

デザインは有効ピクセル(epx)単位で行うこと。

有効ピクセルの求め方は、なんていうかもうdpと一緒なんですけど(参考)、ピクセル(物理サイズ)の値をスケールファクタで除算した値でいいみたいです。
300epx*300epxの画像を表示したい場合、スケールファクタが100%の端末では300px*300px、200%の端末では600px*600px、400%の端末では1200px*1200pxの画像を用意すればよいとのこと。うん…そうね…Androidだねこれ…。

まとめ

Xamarin(やつはMicrosoftに買われそうなプラットフォーム四天王の中でも最弱…)買収の動きにも現れていますが、後続OSだけあってやはり先行するiOSやAndroidのアプリや開発者を取り込みたい!というMicrosoftの思惑がこういうスケーリング周りでもチラ見えしている印象です。
こんだけiOS/Androidのリソース素材を使い回せればねえ…。

他のOSを知っている人間からすると、ここまでわかれば結構とっつきやすいんですけど、ここまでわかるためのドキュメントがあまりに少ないです。特に日本語。つらい…つらい…。

参考URL

http://video.ch9.ms/sessions/build/2015/2-63_Build_2015_Windows_Scaling.pptx

https://msdn.microsoft.com/library/windows/apps/dn894631.aspx#device_families

http://blogs.msdn.com/b/visualstudio_jpn/archive/2015/10/29/make-your-app-look-great-on-any-size-screen-or-window-windows-10-by-10.aspx

https://dev.windows.com/en-us/holographic/updating_your_existing_universal_app_for_hololens

flat-8-kiki
Python/AWS/機械学習(CNN)/Javascript/Obj-C/Swift/Android Java/C#/UWP/PHPらへんを覗くとき、上記(略)もまたお前を覗いているのだ… ※記載内容は個人に帰属し、所属組織を代表するものではありません。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした