はじめに

Ionicで簡単なアプリを作っていて、
アプリアイコンを設定してみたので設定方法を記録しておきます。

前提

  • Ionic CLIが使える状態
  • Ionicプロジェクトが作成済み



手順

1.Ionicにアカウントを作成する

dashboard.ionicframework.com
Ionic Hub
https://dashboard.ionicframework.com/login
Ionic is an advanced mobile app development framework that makes it easy to build performant, beautiful apps for the app store and the web using open web technologies.

にアクセスし、サインアップします。

なお、ターミナル上で ionic signup を実行しても同じURLに案内されます。

2.ターミナルで、ionic login を実行する

$ ionic login
[INFO] Log into your Ionic account!

       If you don't have one yet, create yours by running: ionic signup

? Email: （メールアドレス）
? Password: *********
[OK] You are logged in!

3. ionicプロジェクト配下の resources にicon.pngというファイル名でアプリアイコンを配置する

配置するアイコンは下記です。

  • 拡張子：png
  • サイズ：1024px*1024px

4. ターミナルで ionic-resをインストールする

$ npm i -g cordova-res
/usr/local/bin/cordova-res -> /usr/local/lib/node_modules/cordova-res/bin/cordova-res

> sharp@0.22.1 install /usr/local/lib/node_modules/cordova-res/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.7.4/libvips-8.7.4-darwin-x64.tar.gz
+ cordova-res@0.6.0
added 96 packages from 114 contributors in 40.639s



5. ionic cordova resources --icon を実行する

$ ionic cordova resources --icon
> cordova-res --type icon
[cordova-res] Generated 6 resources for android
[cordova-res] Generated 30 resources for ios
[cordova-res] Wrote to config.xml

後ろに ios や android をつけると、指定したOSのみアイコンを作成できます。

6. resources配下のios/やandroid/にアイコンが作成される

できました！

7. ionic cordova build ios などでビルドする

通常と同じようにビルドすると、作成したアイコンを使用できます。

$ionic cordova build ios
$ionic cordova build android

終わりに

IonicCLIを利用して、iOS/Androidの両OSで必要な様々なサイズのアイコンを作成しました。
コマンドだけで作成可能で簡単なので、是非試してみてください。

スポンサーリンク