ionicで実装したWEBアプリの、Androidのホーム画面追加時に表示されるのアイコンやタイトルを設定する方法

ionicを使用すれば、Androidアプリ、iphoneアプリ、WEBアプリを単一のソースコードで実装できます。

WEBアプリは、ブラウザよりページを開き、トップページを「ホームに追加」することにより、Andoirdアプリやiphoneアプリと同じようなUIでアプリを実行できます。

しかし、スマホのホーム画面に追加した際のアイコンや、表示されるアプリ名を変更する方法はぐぐってもなかなか見つかりませんでした。

変更方法を発見しましたので、これからそれを記述します。今回は、Androidでの設定方法をご紹介します。iphoneではまた別の設定方法があるみたいですが、それはまだ分からないためはぶきます。

アイコンや、アプリ名の設定は、プロジェクトのルートディレクトリ/src/manifest.jsonを修正することで行います。

manifest.jsonのデフォルトの記述は以下のようになってます。

{
"name": "Ionic",
"short_name": "Ionic",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "assets/imgs/logo.png",
"sizes": "512x512",
"type": "image/png"
}],
"background_color": "#4e8ef7",
"theme_color": "#4e8ef7"
}

"name"は、ホーム画面に表示されるアプリ名です。ご自身のアプリ名に修正してください。

"short_name"は、"name"の長く、省略される際に表示されるアプリ名です。こちらもご自身のアプリ名に修正してください。

"src"で、指定されたパスが、ホームに表示されるアイコンになります。

プロジェクトのルートディレクトリ/src/assets/imgsに、logo.pngというファイル名で、設定したい画像を配置してください。

次に、ホームのアイコンをタップしてアプリ起動時に表示される画面の設定です。これは、"src"で指定された画像が表示されます。そして、"backgroud_color"が、この画面の背景色になります。お好きな色に変更してください。"backgroud_color"で指定した背景色の前面に、"src"で指定した画像が表示されます。

これで設定完了です。

ionic cordova build browserコマンドでビルドして、デプロイして見てください。

そして、Androidのブラウザからアプリを起動、ホーム画面に追加して見てください。