技術

Ionicアプリのアイコンやスプラッシュ画像を変更したい!

投稿日:

こんにちは。田中です。

現在Ionicを使ったアプリ開発に携わっているのですが、先日お客様からこんなご依頼がありました。

デフォルトのアプリ名やアイコンでは全然雰囲気が出ないよ!
試作版でも、もっとイケてるアイコンで売り込みしたいから変更よろしく!
(超意訳)

事前にお渡ししていたアドホック版アプリはデフォルトのアイコンだったので以下画像のような感じでした。

アプリアイコン

スプラッシュ画像

 

デフォルトのアイコンもシンプルでなんか好きですけどね。
でもまあ、いかにもプロトタイプ感が出てしまってるのは確か。

ここは一つキャッチーでインパクトのあるアイコンに変更して、お客様のご要望にお答えしたいところです。

アイコン、スプラッシュ画像の変更方法

アプリのresoueces配下に「icon.png」「splash.png」がありました。
こやつらを変更してやれば良さそうです。

推奨サイズは以下の通り。

◎ アプリアイコンサイズ
・1024px ×1024px

◎ スプラッシュ画像
・2732px ×2732px

画像を置き換えたらターミナルから「ionic cordova resources」を唱えます。
(余談ですが田中もコマンドやメソッドは心の中で叫ぶ派のエンジニアです)

この時、画像サイズが合ってないとターミナルに真っ赤な文字でエラーがでます。
怒られたらサイズが間違ってないか見直してみましょう。

実際にやってみた

元のアイコン

変更したアイコン

スプラッシュ画像

無事にアイコン、スプラッシュ画像の変更ができましたー!近い近い顔が近い。

ついさっきまで「スプラッシュ画像」が何なのかも分かっていませんでしたが、なんとかこれでお客様のご要望にも対応できそうです。よかったー。

参考サイト

https://forum.ionicframework.com/t/how-i-can-change-my-app-name/20458

https://forum.ionicframework.com/t/how-to-change-default-launch-icon-of-ionic-app/85744

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

ActiveRecord::Relationのklassメソッドでmodelを取得できる。

こんにちは。コーテッグのこやまです。 モデルに対してallやwhereメソッドを …

no image

[Angular] リアクティブフォームの値をtsファイルで設定する。

こんにちは、コーテッグの小山です。 Angularのリアクティブフォームについて …

【AWS】VMWareからAWSへサーバ移設

どうも中田です。 今回はVMWareからAWSへのマイグレーションに関するお話。 …

no image

【Rails5.2】bootstrap4を追加する

こんにちは 今回はRails5にbootstrap4を追加したいと思います。 使 …

no image

CSSで片方を固定、片方を可変のレイアウトを実装

こんばんは IE8・9ではdisplay: flex;が使えないがために片方を固 …