Ionic5+AngularJSでスマホアプリ開発 【アイコン設定編】

プログラミング
プログラミング

前回、作成したアプリをエミュレーターを使って実行する方法を説明しました。

Ionic5+Angularでスマホアプリ開発 【Android Studioでエミュレート編】
前回は、Ionicを使ってAndroidアプリをビルドするための環境を構築しました。 今回は、Capacitorを使って、作成したアプリをAndroidエミュレーター上で実行する方法について説明します。 ソースコードは、以下のページで...

ここからは、いよいよアプリを公開する準備に入ります。

まずは、アプリの顔ともなるアイコンと、起動時に表示されるスプラッシュ画像の設定方法です。

手順

用意する画像

用意する画像は以下の2つです。

  • アプリアイコン画像: 1024px X 1024px以上のPNG
  • スプラッシュ画像: 2732px X 2732px以上のPNG

PhotoShopやGIMP、PowerPintなど、自分が扱い慣れているツールを使って画像を作成しましょう。

Power Pointで作る場合、アイコンは縦横28cm、スプラッシュ画像は縦横73cmで作成すればOKでした。

画像の配置

作成した画像を、それぞれ以下に配置します。

  • アプリアイコン画像: resources/icon.png
  • スプラッシュ画像: resources/splash.png

すでに画像が存在する場合は上書きします。

画像の生成

プロジェクトフォルダで以下のコマンドを使って、画像を作成できます。

ionic cordovaを使ってアプリをビルドする人は以下

$ ionic cordova resources

capacitorを使ってAndroid Studioからビルドするような人は以下

$ npm install capacitor-resources -g
$ capacitor-resources -p android

ios、android用のアプリアイコン、スプラッシュ画像が、ionicデフォルトのものから、自分の用意した画像ファイルに置き換わっています。

エラーが出る場合、作成した画像のサイズが誤っている場合があるので、確認してみましょう。

以上です。

まとめ

今回は、ionic5でAndroidアプリのアイコンとスプラッシュ画像を設定する方法を説明しました。

次回は、いよいよAndroidストアへアップロードするための、リリース用アプリの作成方法について説明します。

参考

capacitor-resources

capacitor-resources
Generates icon & splash screen for capacitor projects using javascript only.. Latest version: 2.0.5, last published: ...

ionic cordova-resources

ionic cordova resources | Ionic Documentation
Automatically create icon and splash screen resources

コメント

タイトルとURLをコピーしました