アプリにアイコンを付けると一気に『アプリらしく』なります。
今回はアイコンを設定する方法と、画像ファイルのキホン、Xcode のアセットカタログについて説明します。
画像作りに利用可能な macOS 標準アプリの機能も紹介します。

毎月札幌でiOSアプリ作りをアシストするセミナーをやっています。1時間にわたるセミナーの全内容を、物理的に参加できない方のためにnote上で公開します。ぜひアプリ作りにチャレンジしてください。

おしらせ
iOSアプリ作りをアシストするセミナーは今後も月一回のペースで続ける予定です。
詳細は connpass.com の 札幌Swiftでご確認ください。そして機会があればぜひ参加してください。
アプリ作りやプログラミング教育に関連する話題は 札幌Swift のfacebookページで発信しています。

・画像クリックで拡大表示できます
・画像を拡大表示中は画像の左右をクリックで画像だけを順に表示できます
Xcode は 10.3 を使っています。

1　アプリのアイコン

アプリのアイコンは、アプリ固有の画像データです。
アプリの開発者が自由に設定できます。ただし AppStore にアップするには審査があります。
何も設定しないとこのようなアイコンになります。

iPhoneではアイコンはアプリをタップする目標でもあるので、このような画像でアプリの存在だけを表示します。
今回はこの表示を独自のアイコン画像に変更する方法を解説します。

1-1　アイコンを付けるのはむずかしくはない

アプリ用のアイコンの設定は手順が決まっているので、初めてでもそれほど難しくはないと思います。

難しいのはアイコンのデザインです。ほかのアプリと似た印象にならないようにするべきですが、すでに数万ものアプリがあります。
独自で美しくはなかなか難しいですね。これはプログラミングとはまた別の課題です。
この問題もHIG（Human Interface Guidelines）で解説されていますので参照してください。
Human Interface Guidelines　App Icon（英語）

まずは手順を確認しましょう。

1-2　画像を用意

アイコンにする画像が必要です。
アイコン画像は正方形で、サイズが決まっています。詳しくはあとで説明しますが数種類必要です。
縦横180ピクセルの画像を用意してください。
アイコンに設定できる画像ファイルはPNGフォーマット（拡張子.png）だけです。このフォーマットで保存した画像ファイルが必要です。

アイコン画像は正方形で設定しますが、ホームに表示は自動で角丸表示されます。
今回用意したアイコン用の画像（ファイル名 180.png）。（画面では大きく表示されていますが縦横180ピクセルです）

1-3　Xcode にドラッグ＆ドロップ

アプリのプロジェクトファイルを Xcode で開き、プロジェクトナビゲーターで一番上のプロジェクトファイルをクリックしてください。
General を表示し下にスクロールすると▼App Icons and Launch Images があります。
App Icons Source は（テンプレートを保存したプロジェクトでは） AppIcon になっているはずです。右端の小さな右向き矢印をクリックしてください。

アセットカタログの表示に切り替わります。

ここの点線で表示されている正方形に画像をドラッグ&ドロップで設定します。
画像のサイズ別にドロップする枠が決まっています。

違ったサイズの画像を設定すると警告バッジを表示します。

拡大すると次のように iPhone App 60pt とあります。

iPhoneのアプリアイコンは標準解像度60ptで二倍と三倍の枠があります。
60*3=180で今回用意した画像は 3x の枠にドロップしてください。

1-4　実行して確認

シミュレータで実行してみましょう。

シミュレータのホーム画面に上記のような画像が表示されました。
アプリアイコンの設定成功です。

AppStore に提出するにはほかのサイズのアイコンも設定しなければなりません。
アイコンについて詳しくは後半で説明しますが、先に画像データについて確認しましょう。

2　画像データ

コンピュータで写真など画像は色のついた点（画素・ピクセル）を規則正しく並べて表示する方法が主流です。

iPhoneなどデバイスの画面も画素を並べて表示しています。

iPhoneなどの画面はRGB三原色の組み合わせで色を決めます。
一つの画素はRGBそれぞれの値を1バイトで表します。
1バイトは256段階を表現できるので、色数は256*256*256で1677万以上になります。
画面に表示する色データはRGBの値に加えて透明度（アルファ）も持ち、内部ではRGBAの4バイト（32ビット）でひとつの画素の色を表します。

歴史的にはメモリが高価だったため、画像の色情報は白黒1ビットからスタートし現在に至っています。
規格には様々な色データの方式が残っていますが、iOSの場合は1画素あたり24bitまたは32bitが基本です。

2-2　画像サイズの単位

画像のサイズは縦横の画素数で表します。
最も重要なデータです。画素数（ピクセル）の単位は『px』と書く場合があります。
画像の縦横のピクセル数が大きいほど情報量は多くなります。

画素数だけでは実際の大きさの情報がありません。
実際の大きさとの関係は解像度を使ってあらわします。
解像度は幅1インチ（約2.54cm）を何個の画素に対応するかを表すDPI（ドット・パー・インチ）を単位とする場合が多いです。（PPIピクセルパーインチも同じ意味です）
解像度は実際の大きさを単位長さあたりの画素数で表しています。
このため解像度と画素数がわかれば長さを計算できます。

2-3　画像ファイルフォーマット

画像ファイルには多くの種類があります。
アイコン画像に使うのはPNGです。写真などはJPEGを使う場合が多いです。
ほかにもありますが、今回はこの二つを紹介します。

2-3-1　PNGファイル

拡張子.pngのファイルで、『ピーエヌジー』や『ピング』などと呼ばれることが多いようです。
PNGでは画像は圧縮されますが、完全に元に戻すことのできる（画像の劣化のない）可逆圧縮です。（模様や文字のないベタ塗りが最も圧縮率が高くなります）
透明度（アルファ）も持つことができiPhoneやmacOSで頻繁に使われます。
アイコンに使える画像はPNGだけです。

2-3-2　JPEG

拡張子.jpg（または.jpeg）のファイルで『ジェーペグ』と呼ばれることが多いようです。
写真（のような自然画像）をこのフォーマットで保存した場合、PNGよりも容量を小さく保存できます。ただし元の画像と比較すると画質は若干劣化します。
保存時（圧縮時）に品質を選びファイル容量と高画質のバランスを選ぶことができます。

2-4　カラースペース（色空間）

聞きなれない用語だと思います。
ある特定の色を表現するための方法です。
カメラやスキャナーで撮影した画像をモニタや印刷物に仕上げる場合に、最終的に表示される色の違いをできるだけ少なくするために使われます。
表現できる色の範囲をあらわします。
インターフェースビルダー画面では Gamut（色域）の用語が使われています。

赤緑青の3色（光の三原色）の階調により表現するRGB色空間のほかにCMYK色空間などがあります。

初級の範囲を超えますが詳しくは Human Interface Guidelines（HIG）の Color Management（英語）も参照してください。

sRGB
国際標準規格のひとつです。機種や装置による特性の違いを吸収して同じ色味を維持するための規格です。
iOSではsRGBが基本です。

P3
デジタルシネマ向けの規格です。
一般のアプリでは特に対応は必要ないと思います。

iPhone 7以降や iPad Pro などの広色域ディスプレイが対応しています。
このディスプレイを生かすには画像データも広色域対応のデータが必要になります。
P3用の画像データはピクセルあたりの情報量が多いので画像ファイルの容量は大きくなります。
P3に対応するデータ（画像や色指定）を用意する場合には、従来のsRGB向けのデータも用意するべきです。

使うことはめったにありませんが UIColor には P3 に対応した色を返すイニシャライザがあります。
init(displayP3Red:green:blue:alpha:)

2-5　ディスプレイ

画像を表示するディスプレイ（画面）についてサイズだけでなく解像度も大切です。

iPhone登場時はディスプレイのサイズは一種類でした。
現在はたくさんの種類があります。
ディスプレイのサイズでは縦横のピクセル数とともに解像度に注意が必要です。

ここでの解像度は高解像度を生かし見た目の大きさが同じになるように調整するための数値で、標準ディスプレイに対する倍率です。
画素の密度が二倍のRetinaディスプレイ登場と同時にディスプレイのパラメータにScale Factor（倍率）が導入されました。
現在のScale Factorは2倍（@2x）と3倍（@3x）があります。

@2x と @3x はファイル名の末尾に付けて、倍率を区別する書き方もありました。
今回説明するアセットカタログの方式で管理すればその区別は不要です。

Human Interface Guidelines（HIG）の Image Size and Resolution に一覧があります。

解像度にあわせたアイコンなどの画像を表示するためには2倍の機種用と、3倍の機種用の画像を用意するのがベストです。

2倍用画像を3倍に引き伸ばしたり、逆に3倍用画像を2倍用に圧縮すると色の境界部分ににじみなどが発生します。
表示品質を確保するためそれぞれに専用画像を用意します。

現在のScale Factorはviewのプロパティでも確認できます。

// UIViewのプロパティ
var contentScaleFactor: CGFloat { get set }

通常は2倍用と3倍用の画像をそれぞれ用意しておけば自動で、各機種に最適の画像が使われます。

3　アプリのアイコン

アプリのアイコンはホーム画面でアプリを区別するための重要な画像です。
印象も左右するアプリの顔です。

3-1　アイコンフォーマット

アイコン画像は正方形と決まっています。
サイズ（縦横のピクセル数は）iPhoneとiPadでは違っています。

透明度なしのPNGファイルです。

3-2　iPhoneとiPadではサイズが違う

ホーム画面表示用は
iPhoneでは60pt（180@3x、120@2x）
iPad Pro では167@2x、iPadでは 152@2xです。

最初に確認したように180@2xのアイコンを設定すると、120@2xがなくても表示されます。ピクセル単位で調整した120@2x画像を用意すると倍率が二倍のデバイスでも意図した画像を表示できます。

App Store用の大きなアイコン画像もストアに提出する場合には必要です。
1024@1x

細かな注意点は Human Interface Guidelines（HIG）の App Icon（英語） を参照してください。

3-3　ホーム以外のアプリアイコン

さらに用途別に登録可能ですが、登録しない場合は上記アプリアイコンを縮小して表示します。

Spotlight用　iPhone 40pt（@2x,@3x）、iPad 40pt（@1x,@2x）
Settings（設定）　iPhone 29pt（@2x,@3x）、iPad29pt（@1x,@2x）
Notifications（通知）iPhone 20pt（@2x,@3x）、iPad 20pt（@1x,@2x）
これらのアイコンは縮小によるつぶれなどをピクセル単位で調整するためのものです。
基本的にホーム画面に表示するアイコンと相似にしなければなりません。