完全無料 ionic アプリのアイコンとSplashscreenを作成して設定する。（Mac）

#はじめに
・**ionic + capacitor**で作ったアプリの、アイコンとSplashscreenを設定する。
（Splashscreenとは、アプリ起動中に表示される画面の事）

・アイコンの素材は[iconfinder](https://www.iconfinder.com/search/?q=book&price=free)というサイトで、無料の物をダウンロードする。

・アイコンの作成はMac標準搭載の**keynote**を使う。

・**アプリのアイコンはたくさんのサイズの画像を用意する必要がある。**よって必要サイズの画像を自動生成してくれる[Image Gorilla](https://apetools.webprofusion.com/#/)を使う。（このwebサービスの名前はImage Gorillaであってるのかな？笑）

#iconfinderでアイコンのフリー素材を見つける


[iconfinder](https://www.iconfinder.com/search/?q=calendar&price=free)にアクセス。キーワードを検索欄に入れて、使えそうな素材をダウンロード。（リンクを開くとfreeのcalendarが検索されている状態）


どんなアイコンを作りたいかによるが、個人的には**2つ以上の素材をkeynoteで組み合わせて作る**のが1番楽かと。

<img width="918" alt="スクリーンショット 2019-10-16 13.14.05.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/c977c62f-48d1-ea1b-f537-8204d8f506fe.jpeg">


pngの方をダウンロード。

#keynoteでアイコン画像を作る
いくつかの素材を組み合わせて、アイコン画像を作る。

###スライドをカスタムサイズにする
画面右上にある`書類>スライドのサイズ`
大きさは**1024 × 1024**としておく。（正方形なら別にどんな大きさでもOKかと）

<img width="428" alt="スクリーンショット 2019-10-16 13.19.21.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/6b0deb0b-cea9-27cb-1a98-6bfbd707a672.jpeg">


###組み合わせた素材を画像として書き出す

例として、「カレンダー」と「ハート」の素材を組み合わせて、こんなアイコンを作ってみた。

<img width="723" alt="スクリーンショット 2019-10-16 13.26.10.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/8dbfb8d3-163d-53f4-d1f3-1b36ac6c419b.jpeg">

後は`ファイル>書き出す>イメージ`で書き出す。

**※背景の色でグラデーションは使わないようにしよう！！
もし背景色がグラデーションの画像でsplashscreenを作り、後記のImage Gorillaで書き出すとこんな感じになった。。**

<img width="349" alt="スクリーンショット 2019-10-15 17.39.22.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/bbe5cc34-3c8e-e436-8035-af9f0a72102d.jpeg">



#Image Gorillaで各サイズの画像を作る

[Image Gorilla](https://apetools.webprofusion.com/#/)にアクセスし、「Generate Your Icons & Splashscreens」を押す。

keynoteで書き出した画像を、iconとsplashscreenで選択。

**(ionic)がついていない方**を選択して、**Kapow**を押しダウンロード。

<img width="1072" alt="スクリーンショット 2019-10-16 13.37.45.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/b279207c-40dd-3149-a6cc-ae409f73eff1.jpeg">

zipを開けてゲット。

すると`iOSフォルダ`と`androidフォルダ`がある。

このダウンロードできた画像を、XcodeとAndroid Studioからセットする。

#iOSのアイコンとsplashscreenを設定

まずはXcodeを開く。

ionicプロジェクトフォルダで
`npx cap open ios`

Assets.xcassetsを開く。

`App>App>Assets.xcassets`
<img width="482" alt="スクリーンショット 2019-10-16 14.38.07.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/72d5abca-8445-4959-0921-06afd48161ba.jpeg">

##アイコンの設定

###各サイズの画像をドラッグ&ドロップ
ちょっと面倒だが、Image Gorillaで作成した各サイズの画像を当てはめていく。

**「Icon-20x20@2x」はXcode上の「20ptの2x」に配置**

<img width="943" alt="スクリーンショット 2019-10-16 14.45.36.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/7f46bb41-9925-9ddb-18ed-b404862c9cbc.jpeg">

###もし画像が足らなかったら
実際私が体験した話だが、Image Gorillaで作成した画像の中で１つだけ必要なサイズの画像が無かった！
必要な`Icon-40x40@1x`がなぜか無かった。

こんな場合、自分で作るしかない。

**作り方はとっても簡単！**
以下`Icon-40x40@1x`が無かった場合

①`Icon-40x40@2x`をコピー
②そのコピーを`Icon-40x40@1x`に名前を変える
③`Icon-40x40@1x`を開き（プレビューで開く）`ツール>サイズ調整`でサイズを変更
`Icon-40x40@2x`は40×2で「縦横80×80」の画像である。
ってことは`Icon-40x40@1x`だから「縦横40×40」にして保存する。
<img width="447" alt="スクリーンショット 2019-10-15 17.41.07.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/4a43d673-b727-521e-1efd-8f834a0d8a86.jpeg">

##splashscreenの設定

Image Gorillaからダウンロードしたもう１つのフォルダ`LaunchImage.launchimage`の中にある`LaunchImage.png`を、すべてのサイズに使う。





#Androidのアイコンとsplashscreenを設定
まずはAndroid Studioを開く。

ionicプロジェクトフォルダで
`npx cap open android`

##アイコンの設定
`app> resources>ダブルクリックでNew>Image Asset`を開く

<img width="673" alt="スクリーンショット 2019-10-16 15.09.47.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/b7182d85-4cf6-8e33-b2a0-dcf95b4c3421.jpeg">

`Launcher Icons`の`Adaptive and Legacy`が選択されている事を確認


<img width="1013" alt="スクリーンショット 2019-10-15 18.04.58.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/6ceb2461-87ff-5fc4-ec2d-ca81e79355c5.jpeg">

`Source Asset`の中の`Path`の右側のアイコンを押して、どの画像をアイコンとして使うか選択。
Image Gorillaでからダウンロードした**androidフォルダの中の`drawable`の中のicon.pngを使う。**

<img width="1005" alt="スクリーンショット 2019-10-15 18.06.31.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/fb710d3f-c995-9172-4e86-d7e4f9031cfe.jpeg">


`Scaling`の中の`Trim`をYesにして、`Resize`を調節する。
丸の中に入っていればOK

これでアイコンの設定はできた！

##splashscreenの設定
こいつが結構めんどくさい・・・

drawable~の中にある**screen.pngをsplash.png**にすべて名前を変えていく！

すべてのscreen.pngがsplash.pngにファイル名が変わったら、次は**Android Studio内で同じフォルダ名の中のsplash.pngをコピペしていく！**
（めんどー。もっといい方法あれば教えてください・・）

Image Gorillaからダウンロードした`android`フォルダの中にある`drawable/splash.png`を、Android Studioの`app>resources> drawable`の中に貼り付け。
<img width="641" alt="スクリーンショット 2019-10-15 18.36.07.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/e1d400ec-3408-0495-f049-deab64f0c83a.jpeg">

`Overwrite`（上書き）を選択。

これを繰り返していく。:sweat_smile:

`drawable-hdpi/splash.png'は当然Android Studio内の`drawable-hdpi`の中にコピペ。

**drawable-port-**のフォルダが、Image Gorillaからダウンロードした`android`フォルダの中は無い。
**drawable-port-**には普通の`drawable`フォルダの中にある`splash.png`を使おう。