【iOS】React Nativeのアプリにアイコンを設定する方法

アプリの大事な顔であるアイコン。

今回はReact Nativeで開発しているアプリにアイコンを設定する方法と、複数サイズのアイコンを自動してくれる便利な「App Iconizer」をご紹介します!

MEMO
今回説明していくXcodeのバージョンは9.4.1です。

React Nativeで作ったアプリにアイコンを設定する方法

アプリのアイコンはXcodeから設定することができます。

今回は「goalapp」という名前のアプリのアイコンを設定していきます。
まずはXcodeで「goalapp.xcworkspace」を開きましょう。

$ cd goalapp
$ cd ios && open goalapp.xcworkspace

 

Xcodeが起動したら「TARGETS」を選択し、
「General」タブの中にある「App Icons and Launch Images > App Icons Source」の右側にある矢印ボタンをクリックします。

そうするとアプリのアイコンを設定する画面に遷移します。

あとはこの点線の四角の枠内に画像をドロップすると、アイコンが設定できます。

アプリのアイコン画像のサイズについて

iOSのアプリでは、用途に合わせて様々なサイズのアイコンを用意する必要があります。

アプリのアイコンを設定する画面には、

  • 実際にiOS端末で表示される画像サイズ
  • 設定する画像のサイズ(表示される画像サイズの「2X」か「3X」)

が表示されています。

下記に用意しなければいけない画像サイズをまとめてみました。

合っていないサイズのアイコンを設定すると、以下のように警告マークが出ます。
サイズも教えてくれるのでわかりやすいですね!

各サイズのアイコン画像を「App Iconizer」で一括生成する

とはいえこんなたくさんのサイズのアイコンを1つ1つ作るなんて面倒ですよね…。
そこで便利なのが、iOS・Androidアプリのアイコン画像を一括生成してくれるサイト「App Iconizer」です!

「App Iconizer」は、1024px * 1024pxのアイコン画像をアップロードするだけで、複数サイズのアイコンを自動で生成してくれます。

それでは使い方を見てみましょう!

画像をアップロードする

App Iconizerにアクセスすると、アイコン画像をアップロードする画面が出てきます。
1024px * 1024pxのアイコン画像をドラッグ&ドロップするか、「BROWSE IMAGE」から選択しましょう。

アップロードが終わると、iOSとAndroid端末上での見え方を確認することができます。
確認してOKだったら「iOS」を選択してアイコン画像をダウンロードします。

ダウンロードしたzipファイルを展開してみると、自動生成された複数サイズのアイコン画像が入っています。

あとはこのアイコンを先程のXcodeの画面から設定していくだけでアイコンの設定は終わりです!

アプリアイコンを作成する手間が大幅に省けて、とても便利ですよね!

まとめ

React Nativeで作ったアプリにアイコン画像を設定する方法をまとめてみました。

最初は「こんなにたくさんのサイズのアイコン画像を用意しなければいけないのか…」と思ったのですが、App Iconizerに助けられました。ぜひアプリのアイコンを生成する際は利用してみてください!