アヤポコの雑記*2人目育児中

育児のこと、旅行のこと、仕事のこと。30代の第二子子育て中の雑記です。

【スポンサードリンク】

cordovaでのリリース準備:アイコンとスプラッシュ画面の作成

cordovaでのアプリができた、ということでリリース準備を始めることに。
リリースにはアイコンとスプラッシュ画面が必要。(スプラッシュはなくてもいいみたいだけど、一応今回は用意することにした)monacaで開発していた時には、1つの画像を入れたら勝手にmonaca上でリサイズしてくれていたのが、cordovaにはいちいち登録しなくちゃいけないのか・・と思っていたところ、なにやらプラグインで自動的にリサイズしてくれるものがあるらしい。

とりあえずインストールしてみる。

brew install imagemagick
npm install splashicon-generator -g

アプリのresourcesフォルダ配下にicon.pngという1024×1024pxのファイルとsplash.pngという2048×2048pxのファイルを置いておいてプラグインを実行。
コマンドのresourcesの部分は配置したフォルダを指定する。

splashicon-generator --imagespath=“resources"

そうするとresフォルダ配下にandroid、ios、windows、wp8のアイコンとスプラッシュ画面がそれぞれ作成される。
インストールするプラグインの詳細
splashicon-generator - npm

config.xmlというファイルがあるので、そこに生成されたファイルのパスを追記していく。プラグインの詳細にコードが書いてあるのでそれをそのままコピペ。
android、iphoneそれぞれ実機にアプリを入れた時にアイコンとスプラッシュが設定されていることを確認したらOK。
f:id:ayapc:20190223144321p:plain
参考にしたブログ
【ionic】iconとsplashとはから実装まで - Qiita

xcodeでビルドした時に以下のようなwarningが出たけど、AppleWatchのアイコンだったのでスルー。

 The file "AppIcon98x98@2x.png" for the image set "AppIcon" does not exist.

最後に、xcodeでアプリをリリースしようとした際に透過画像だと怒られてしまったので、ios配下のアイコン画像は全てアルファチャンネルを除去して再度ビルドしました。

一人でやってると細かい画像の準備が意外と面倒なんですが、ある程度一括で作ってくれるので助かりました。