Life-LOG OtherSide

2015年4月22日追記：Xcode6でアイコンを取り扱うための記事をまとめました。

現在、iOS開発の記録は、あしたさぬきから離れ「Swiftで遊ぼう! on Hatena」で続けています。よろしく！

-----
アプリ開発となると、純粋にプログラムだけ勉強していても駄目なんですよね。特に売れるアプリを作るためには絵心も必要なんです。デザインセンスがいるっていうことですよね。

取りあえずSwiftプログラミング全く無しで、初心者から古典的に取り組んでいる「Hello World!」をXcode6だけで作りました。そしてこのアプリが私のiPhone 6 Plusに表示されているんです。じゃあホームボタンを押してホームに戻ってみると...


壁紙には私の娘が写っているだけなので無視してください。左上部に白紙のアイコンに「My First Project」があるよね。どう見ても味気ない。というか白紙のアプリはApp Storeにも登録できない。登録できるアプリを開発するためにアイコンを用意しないといけない。デザインワークって時間もかかるし私には余り才能が無いので困ってしまうが、避けては通れない道なので、iOSアプリにどういうアイコンを用意しなければならないのか勉強していこう。

まず、アイコンに使う画像のフォーマットは「.png」でポータブル・ネットワーク・グラフィックの頭文字を取っている。まあこれを扱えるアプリがあればいいんでしょうね。iPhone 6 Plus以外のiOSをターゲットにして開発をするのであれば最低限5つのサイズを用意しなければならいない。

180 × 180 pixels
120 × 120 pixels
87 × 87 pixels
80 × 80 pixels
58 × 58 pixels

iPhone 6 Plusには後3つのサイズを加えるし、非レチナディスプレイを持つ旧式のiOSデバイスまで開発ターゲットにするならばまだ更に小さなサイズを用意しなければならない。まあ、こういう事は後で考えるとして、取りあえず、上記5つのサイズを作ればいいんでしょうね。

何はともあれ、「command + 1」をしてみよう。ちゃんと覚えているかな？　ナビゲーションエリアのプロジェクトナビゲーションが開く。そこに「Images.xcassets」ってのがある。これは「asset catalog(アセットカタログ)」と呼ばれるもので、プロジェクトで使用されるイメージを管理しているところだ。アセットカタログって何のことでしょうね？今の私には分からない(^_^;)

取りあえず、ここを選択すると、ここに登録してあるAppIconが出現する。それを選択するとエディターエリアに以下のような情報が出てくるだろう。


スロットは6つあるけど、重なっているサイズがあるので5つのサイズのアイコンを用意すればいいということが分かるよね。次は、それぞれのアイコンサイズに合ったpngイメージをドラッグ&ドロップしてやるといい。

とうとう今日の勉強は、SwiftもXcodeも関係ない話になってしまう。アプリ開発には色々な知識が必要だっていうことですよね。アプリケーション開発にデザイナーがいれば助かるのもこういうことですよね。さて、自分の作ったアプリのアイコンを実際作るのにどうしたものかと考えてしまった。

アイコンを作るために新たにグラフィック関連のツールを購入するのも馬鹿馬鹿しいのでフリーで使えるアプリを利用する。ちょっと使ったことがあるGIMPでどうにかなりそうなのでGIMPを使ったアイコン作成をしてみる。GIMPはバージョン2.8.14(2014年12月8日現在)がここから手に入るのでダウンロードして使用してください。

アプリで扱うアイコンサイズは、昨日話したように5つのサイズではあるが、アイコンをデザインするときはどんなサイズですればいいのか少し考えてみた。ヒントは、Appleの公式サイトのここをみればいい-> Human Interface Guidlines
これを見れば明らかですよね。App Storeにアップしたければ最低1024 x 1024pixelsサイズが必要になる。

Gimpの使い方をここで説明し始めると趣旨がズレるため、簡単に説明しよう。Gimpで新規のイメージを作ろう。必ずサイズを1024 × 1024ピクセルを作成する。ここから先のアイコンの作成は皆さん頑張って作ってください。私は以下のようなアイコンにしました。嬉しいことにアイコンの角を自分でラウンドにする必要がないので四角い形のままにしていてください。Xcode6が勝手にラウンドにしてくれます。1番大きいサイズ1つだけ作ればいいのです。それからもう1つ重要なことがあります。必ずpngファイルでエキスポートしましょう。


さあ、5つのサイズをどうやって作るのかって？　これが滅茶簡単です。できたpngファイルをダブルクリックしましょう。アップル標準のプレビューで開いてください。次に複製を作って、ツール > サイズを調整...　を選んでやればいいんです。5つのサイズをすべて用意しましょう。これでできあがり。

昨日空白だったAppIconの該当するサイズにドラッグ&ドロップしよう。


そして再びランすると...


そしてスポットライト検索で使われている1番小さいサイズのアイコンもちゃんと表示されてますね。


プログラミングは何もしていないけど、なんかアプリが自分のiPhoneにあると嬉しいね。

-----
My Second Projectも最後の課題に入るつもりでしたが、その前に見栄えをよくするためにアイコンを用意しましょう。

アイコン作成は前回と同様でGimpを使用した。アイコンの作り方を含めここで復習してください。
Swiftで遊ぼう！ - 150 - Xcode6 - 8 Gimpでアイコン開発
しかし、アイコンの作成でも前回と異なるところがあります。実は今回のターゲットデバイスをユニバーサル(iPadも含む)にしているので、用意するサイズが増えました。

180 × 180 pixels
152 × 152 pixels
120 × 120 pixels
87 × 87 pixels
80 × 80 pixels
76 × 76 pixels
58 × 58 pixels
40 × 40 pixels
29 × 29 pixels



iPhoneだけの開発なら上記のボールドで示したサイズ以外を用意すればいいのですが、iPadも開発するとなるとボールドの4種類が増えます。ちょっと問題なのが一番小さいサイズだろう。元イメージを1024 × 1024 pixelsで開発するので、29 × 29 pixelsに縮小させるとデザインが崩れてしまうんです。時間があるようなら小さいサイズ用にイメージを最適化した方がいいかもしれませんね。