中村智武のアドテク開発記

株式会社CyberZでスマホ広告ソリューションツール「Force Operation X (F.O.X)」のプロダクトマネージャーをしています。


テーマ:
iPadやiPhone4の登場で、iPhone開発者は今3パターンの解像度に対応した設計をする必要が出てきました。標準のUIKitを使えば対応は易しいですが、独自でデザインしたコンポーネントを利用している場合、デザイン工数が跳ね上がってしまいます。

過去に作ったアプリを今さら手をかけるほどではないという場合でも、せめてアイコンだけはiPadとiPhone4に対応したものを入れてみるとよいかもしれません。高解像度のアイコンが並ぶだけでも、なんとなく気分がいいものです。

というわけで、一つのアプリケーションビルドでそれぞれの解像度に対応したアイコンを用意する方法を解説します。この方法で、iPhone3GS以前の端末では従来のアイコンが表示されつつ、iPadではiPad用のアイコン、iPhone4ではiPhone4用のアイコンが表示されるようになります。

■ アイコンの作成


まずは、それぞれの端末向けにアイコンを用意する必要があります。最低限用意すべきは、iPhone3GS以前用の57x57ピクセル、iPad用の72x72ピクセル、iPhone4用の114x114ピクセルのアイコンです。わかりやすいように、それぞれのサイズを入れてアイコンを作りました。

・iPhone3GS以前用アイコン

57ピクセル × 57ピクセル
ファイル名:Icon.png
中村智武のCTO記

・iPad用アイコン

72ピクセル × 72ピクセル
ファイル名:Icon-72.png
中村智武のCTO記

・iPhone4用アイコン

114ピクセル × 114ピクセル
ファイル名:Icon@2x.png
中村智武のCTO記

また、検索結果用に小さいアイコンも用意することができます。こちらは、なければ勝手にアイコンが縮小されて表示されるのですが、もし個別に作りたい場合には用意しておきましょう。

・iPhone3GS以前用小アイコン

29ピクセル × 29ピクセル
ファイル名:Icon-Small.png
中村智武のCTO記

・iPad用小アイコン

50ピクセル × 50ピクセル
ファイル名:Icon-Small-50.png
中村智武のCTO記

・iPhone4用小アイコン

58ピクセル × 58ピクセル
ファイル名:Icon-Small-@2x.png
中村智武のCTO記

■ アイコンの設定


従来であれば、アイコンのファイル名はInfo.plistの「CFBundleIconFile」パラメータで設定していました。しかし、新たな解像度に対応するためにiPhone OS3.2以降で「CFBundleIconFiles」というパラメータが新たに追加されました。最後にsがついただけです。

CFBundleIconFileには従来の57x57ピクセルのアイコン名を記述しておきます。そして、CFBundleIconFilesはArrayパラメータとなっており、全てのアイコンを記述します。これにより、iPhone OS 3.1.3以前であればCFBundleIconFilesが無視されて、57x57ピクセルのアイコンのみが参照されます。対して、iPhone OS 3.2以降はCFBundleIconFilesに書かれているファイルを見て、その端末に対応したサイズのアイコンが読み込まれるというからくりです。

中村智武のCTO記

まずは、作成したアイコンをリソースに登録します。

中村智武のCTO記

Info.plistを編集します。

中村智武のCTO記

デフォルトではパラメータが登録されていないので、メニューの「Add Row」でパラメータを追加します。

中村智武のCTO記

CFBundleIconFilesは「Icon files」です。

中村智武のCTO記


配列型のため、Add Rowで設定を増やしていけます。

中村智武のCTO記

このように、「Icon file」には57ピクセル用のファイル、「Icon files」には全てのアイコンを登録しておきましょう。

以上で設定は完了です。

■ 実機で確認してみる


iPhone3GS、iPad、iPhone4それぞれで実際に確認してみました。

・iPhone 3GS (OS3.0)

中村智武のCTO記

中村智武のCTO記

・iPad (OS 3.2)

中村智武のCTO記

中村智武のCTO記

・iPhone4 (OS4.0)

中村智武のCTO記

中村智武のCTO記


無事にそれぞれの端末に対応したアイコンがきちんと表示されました。
いいね!した人  |  コメント(2)