新作壁紙・最新iOSの基本情報(壁紙専門)は本店にて
 New アプデ速報


2014年11月14日金曜日

埋まってるから掘るんです - iPhone 6/6 Plus壁紙テンプレシリーズ第2弾

ここまでiPhoneの壁紙の謎をだいぶ解いてきた気がします。果たしてまだ把握もしていない秘密があるのでしょうか?


iPhone 6/6 Plus用壁紙のもう一つの標準サイズ用に画面解像度ジャストの壁紙テンプレートを作りました。フォーマットは白バックのPNGとフレーム以外を透明にした透過PNGの2種類です。6用は750×1334、6Plus用は1242×2208となっています。
途中計算は小数点第15位まで出しています。戯れです。設定は制作上小数点第1位まで見ています。

なお、今回用意したテンプレは拡大表示設定には対応していません。拡大表示用には6の場合iPhone 5と同じ640×1136、6 Plusの場合1125×2001で作る必要があります。

「視差効果を減らすを」オンにしたときはディスプレイ解像度=壁紙サイズ=表示範囲ですから何もややこしいことはありません。以下は全て視差効果有りを前提とした記述です。


壁紙サイズの二重標準をおさらい

壁紙サイズの二重標準の記事で検証した通りiOS 8では2種類の標準サイズがあると考えられます。

一つは壁紙制作上、中央のディスプレイ解像度と同じ範囲が原寸で表示される正規のサイズ1398×2592 (iPhone 6 Plus) と854×1590 (iPhone 6) です。ここでは便宜上第1の正規サイズと呼びます。

もう一つがディスプレイ解像度そのままのサイズ1242×2208 (iPhone 6 Plus) と750×1334 (iPhone 6) 。これを第2の正規サイズとします。

ディスプレイと同じアスペクトでサイズだけを拡大、または縮小した場合にセンターがずれることは二重標準の記事で検証しました。改めてずれ方を見ますと、小さい場合は中心が左に、大きい場合は右にずれています (第1正規サイズのテンプレで画面サイズが規定より小さくなるほどフレームが左寄りになることにも通じるかもしれません)。

左から縮小、ジャストサイズ、拡大の壁紙を設定したもの

小さいときは気持ち広範囲の絵を拾い、大きいときは気持ち切り捨て、ジャストサイズが調度その中間にあると見ることもできます。

しかしジャストといっても表示は拡大されています。第1の正規サイズとは高さも幅もアスペクトも違いますから、偶然でも必然でもなく意図的な二重標準だと思われます。何か統一的な計算法があるのかもしれませんが、いずれにしろここで扱う範囲では単に二重標準と考えて不都合はないでしょう。

重要なのは画面解像度のアスペクトではジャストサイズでなければセンターは合わないということです。繰り返しになりますが第1の正規サイズと同じ高さに拡大した壁紙を使っても右側がカットされることになります。

iPhone 6/6 Plusの新しいディスプレイはこれまでの端末とは違って少しくらい小さなサイズの壁紙を使っても画質が劣化しないので、アイコンの位置などを多少特定しづらいということの他には第2の正規サイズでも何ら劣るところはなさそうです。

2015 12/9 iOS9.2で変則サイズの壁紙の扱いに変更が加えられました。横長の壁紙は常に左右中央が表示されます。


1242×2208と750×1334からの拡大率

ではいよいよ第2の正規サイズで壁紙がどう扱われるのかを見ていきます。

既に画面サイズと第1の正規サイズが分かっているので拡大率から探るとして、ここまで来たら本当は計算だけでも充分なのですが、一応ビジュアル的にも確認していきましょう。

まずスクリーンショットを撮り、それをそのまま壁紙にします。
小さい方のアイコンは本物、大きい方のアイコンは拡大されたスクショ壁紙のものです。


この1枚を二重に取り込んで重ねます (同じ1枚を重ねるのが肝です。始めからこれをやっていれば6 Plusの壁紙サイズも一発だったはずなのにチクショウ)。同じショットなのでサイズを見る分には視差効果でアイコンがずれていても問題ありません。上に重なった方を半透明にして、小さい方のアイコンと文字が、大きい方のアイコンと文字にぴったり重なるまで一方を拡大すると拡大率が解るという理屈になります。
下に残る原寸側をスクショA、拡大する半透明の方をスクショBとします。

一致すればスクショABの重なったアイコンと、取り残されたスクショAの小さい方のアイコン、更に大きくなったスクショBの大きい方のアイコンが見えるので、中間サイズのものが濃い、サイズの異なる同じアイコンが3つになります。


6 PlusではこのときのスクショBの高さは第1の正規サイズと同じ2592。倍率にすると117.3913043478261%。この倍率だと幅は計算上1458.000000000000162相当となります。原寸表示の正規サイズより広いです。

iPhone 6では1334が1590扱いとなりますから、倍率は119.1904047976012%、このときの幅は計算上893.928035982009相当です。

これで第2の正規サイズがiPhone 6 Plusでは117.3913043478261%、iPhone 6では119.1904047976012%で表示されることが分かりました。


使える数値は

ここから逆を見る必要があります。拡大率が分かったところでその通り大きくした壁紙に意味はありません。求めるべきはディスプレイ解像度ジャストの壁紙を作ったときにどの範囲が表示されるかです。

ということでiPhone 6 Plusならディスプレイの1/1.173913043478261、iPhone 6なら1/1.191904047976012を求めます。

大小のアイコンが重なった時に第1の正規サイズと数値が一致するのは高さの方ですから、iOSはまずディスプレイから高さを定めてそこから幅を決めているという考え方で進めます。
つまり第1の正規サイズの幅は考慮せずに縦横共高さの比率で算出すればいいはずです。

計算していきます。

iPhone 6 Plus
幅 1242/1.173913043478261=1057.999999999999882で1057
高さ 2208/1.173913043478261=1880.88888888888868で1880.9

iPhone 6
幅 750/1.191904047976012=629.245283018867921で629.2
高さ 1334/1.191904047976012=1119.217610062893076で1119.2

ドックの高さも求めます。
6 Plusのドックの高さは288ピクセル、6は192 (第1の正規サイズでの余白同様ドックの高さもiPhone 5と同じです!) ピクセルですから

iPhone 6 Plusのドックの高さは288/1.173913043478261=245.333333333333306で245.3

iPhone 6のドックの高さは192/1.191904047976012=161.086792452830188で161.1

となります。

仕上がりはこんな感じ。


ランドスケープが計算通りいかなかったのでまた重ねてみないといけません。

こうして


こう


ばっちりです。


しかし計算が合わないということは第1の正規サイズとはまた違う扱いのはず。高さを2208に縮小した第1正規サイズのテンプレを重ねてみました。濃く見える方が第1正規サイズの縮小です。フレームは一致していますがランドスケープ表示範囲は違います。


第2の正規サイズでは拡大率がより大きくなることに慮ってのことでしょうか。第1正規サイズより相対的にほんの少し広い範囲が使われています。
ランドスケープフレームの制作上のサイズは中央の1150×647、うち150.2がドックです。(少なくともiOS 8.1の時点で) 6Plusで正方形の壁紙がどう扱われるかはこちらの記事をご覧ください。

視差効果がありますから実際にはフレームの範囲から動きます。表示位置がリセットされた瞬間の基準位置を示す目安としてご利用ください。需要としては……ディスプレイと同じバランスでの作画にこだわりたいとか、ランドスケープ表示範囲のあるかないかの僅かな広さの違いを生かしたいとか……ですかね。

別に私が計算してみたかっただけとかいうわけではあります。

それにしてもiPhoneは壁紙一つで何でこんなややこしいことになってるんですか? 今回の視差効果対応の壁紙サイズの二重標準とランドスケープのあれやこれや、白字になると暗くなる、iPad壁紙のサイズ変更と新旧のばらつき……etc. きりがないです。私に遊ばせてあげるためですか? こんなに埋めて何したいんですか?

それから前回の、平均明度から計算すると消えないはずのドックが消えている謎ももう解けていますから次回はその話を。

0 件のコメント :

コメントを投稿

時間的な問題により技術的な質問及び壁紙のリクエストについては原則として返信致しません。ご要望を今後の制作の参考とさせていただくことはございます。
Due to time constraints, I will not reply to technical questions and wallpaper requests in principle. It might be a reference for the future wallpaper.