こんにちは。開発担当の金内です。
みなさん、新しい iPad をもう触ってみましたか？話題は何といっても Retina ディスプレイ。4倍のピクセル数になって、まるで印刷物のような美しさです。
Sleipnir Mobile for iPhone / iPad も iPad の Retina ディスプレイ対応版を App Store に申請しています。どうやらいつもより審査に時間がかかっているようなのですが、もう少々お待ちください。
今回は iPhone / iPad 両対応のユニバーサルアプリを Retina ディスプレイに対応させるにあたってのポイントと、下手をするとハマってしまう落とし穴を紹介します。さらに、iPhone / iPad アプリの期間限定セールのお知らせもあるので最後までお読みください。
ファイル命名規則と UIImage への読み込み
“image.png” というイメージファイルについて、iPhone 用、iPad 用、Retina ディスプレイ用、非 Retina ディスプレイ用があるとすると、次の4つのファイルを作ることになります。
・image~iphone.png
・image@2x~iphone.png
・image~ipad.png
・image@2x~ipad.png
“@2x”は Retina ディスプレイ対応であること（縦横2倍サイズ）、”~iphone” は iPhone / iPod touch 用であること、”~ipad” は iPad 用であることを意味しています。この規則に従ってファイル名をつけておけば、ソースコードで UIImage として読み込むとき次のように書けば、デバイスに応じて適切に読み替えてくれます。
[UIImage imageNamed:@"image"]
「じゃあけっきょく image.png というファイルはいらないの？」と思われるでしょうが、Apple のドキュメント上では ~iphone や ~ipad がついていないものは「iPhone / iPad 対応」として扱われることになっています。
ファイル名の解決順序
Retina ディスプレイ対応デバイスでは、ファイル名は次の優先順位で解決されます。
● iPhone / iPod touch (Retina)
1. image@2x~iphone.png
2. image@2x.png
3. image~iphone.png
4. image.png
● iPad (Retina)
1. image@2x~ipad.png
2. image@2x.png
3. image~ipad.png
4. image.png
“~ipad” よりも “@2x” が優先されることに注意してください。iPad では “image@2x.png” よりも “image~ipad.png” を優先してほしい気もするのですが、これは先ほど書いた「”~iphone” や “~ipad” がついていないものは両対応」というルールが適用されているということで納得するしかありません。
落とし穴
「なるほどねー、まぁ、iPad の Retina 対応はそのうちやるかー」と思っていると足すくわれかねない落とし穴があります。
これまで、iOS デバイス進化に合わせて、最初は1つだけだったイメージファイルが増えてきました。順を追うと次のような流れになります。
● iPhone 登場「iPhone アプリ作るぞー」
・image.png
● iPad 登場「iPad 用に image~ipad.png 追加だー」
・image.png (iPhone用)
・image~ipad.png (iPad用)
● iPhone Retina ディスプレイ登場「Retina 用に image@2x.png 追加だー」
・image.png (iPhone用)
・image@2x.png (iPhone Retina ディスプレイ用)
・image~ipad.png (iPad用)
● iPad Retina ディスプレイ登場（←イマココ）
ここで image@2x~ipad.png を追加しないでいると、新型 iPad ではさきほどのルールにしたがって “image~ipad.png” よりも “image@2x.png” が優先されて、iPad なのに iPhone 用のイメージが表示されてしまうというような悲劇が起こりえます（しかもその悲劇を間近に見た気がします…）。
iPhone 専用の image.png / image@2x.png を image~iphone.png / image@2x~iphone.png にしていれば OK なわけですが、歴史的経緯からすると image.png のままになっていても無理はありませんし、これまでは何の問題もなかったわけですからね。
ともあれ、これからはこの命名規則をちゃんと理解してファイル名をつけていったほうが良さそうです。
「えっ？ボク／ワタシのアプリもヤバいんじゃ？」
ここまで読んで「前にリリースしてるボク／ワタシのアプリも ~iphone とかつけてないからヤバいんじゃ？」と思った方もいるでしょう。
iPad の Retina ディスプレイ対応にはもう少し続きがあります。
幸か不幸か、iPad の Retina ディスプレイ対応は、アプリを現在の最新版 Xcode 4.3.1 / iOS SDK 5.1 以降でビルドした場合にのみ実現します。つまり、それ以前の Xcode / iOS SDK でビルドしたものは、新型 iPad でも “@2x” が優先されないので、image~ipad.png が読み込まれて、これまでと同様の動作になります。
なので、よほど最近、最新の Xcode でビルドしたのでなければ、これまでと同様のファイル名で問題ないはず…です。あー、よかったよかった（マジで）。
期間限定キャンペーンセール（3/31まで）
さてさて、新しい iPad の Retina ディスプレイがあまりにも美しいので、フェンリルの iPhone / iPad アプリを期間限定でどどーんと値下げしてしまいます！
・Sleipnir Mobile Black Edition for iPhone / iPad 600円→250円
・FlickAddress 170円→85円
・Inkiness for iPad 350円→85円
・Inkiness 250円→85円
いずれも半額以下!! この機会にぜひどうぞ。セール期間は 3/31 までです!
iPad の Retina 対応でさらにリッチになる Sleipnir Mobile for iPhone / iPad も楽しみに待っていてくださいね。
関連記事
