はじめに
Ionicで簡単なアプリを作っていて、
アプリアイコンを設定してみたので設定方法を記録しておきます。
前提
- Ionic CLIが使える状態
- Ionicプロジェクトが作成済み
手順
1.Ionicにアカウントを作成する
にアクセスし、サインアップします。
なお、ターミナル上で 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で必要な様々なサイズのアイコンを作成しました。
コマンドだけで作成可能で簡単なので、是非試してみてください。
スポンサーリンク