アイコン(面倒ならテキストと背景色の設定だけでも悪くないかも？)
背景色動的変更については、componentの利用とかも考えたのですが、初めてのモバイルアプリ制作としては、この辺りが適当かなと思い妥協します。
さて、アイコン。
本家AndroidDeveloper
Image Asset Studio を使用してアプリアイコンを作成する
https://developer.android.com/studio/write/image-asset-studio?hl=ja
[Android] アイコンを簡単作成できる Image Asset
https://akira-watson.com/android/adaptive-icons.html
公式を読んでから、二番目の方のサイトを読むととても分かりやすいかと思います。
背景色をどうにかしようと、使い物にならないくらいソースコードが汚れたGameBook003の最後の出番です。
(練習用)
コマンドプロンプトから
cd c:\MyTest\GameBook003
ionic cap open android
で、開きます。
左側のエクスプローラから
・一番上の"app"を右クリック
・New → Image Asset
で、Configure Image Assetと言う画面が表示されます。
最初に出ているのはAndroidStudioに最初から入っている画像ですね。
ForeGroundLayerとBackGroundLayerの2つを設定します。
ForeGroundLayerは、AssetTypeをImageではなくTextにするのも、有りかもしれません。
自作の画像を使うには、Source AssetのPathで画像ファイルのパスを指定してください。
BackGroundLayerはColorとImageが選べます。透明にしたいと言うのでなければColorもお手ごろ？
右横に、選択に応じて表示イメージを見ることが出来ます。
ForeGroundLayerとBackGroundLayerの2つを設定したら(ここ重要！！)、Next押下
なにか、mainとdebug、releaseと選べるようです。
デフォルトでmain選択のまま、メッセージも出てますが気にせずfinish！
エラー！！！
いや、ネタとしては良いのですがなにやらリソースのリンクに失敗した！と二か所で言っているようです。
XMLファイルの定義の場所で、どちらも短いのでコピーしますね。
android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@mipmap/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>
------------------------------------------------------------
android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@mipmap/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>
------------------------------------------------------------
どちらも二番目のic_launcher_foregroundで見つからないと言っている模様。
ちょっといじったら、今度はic_launcher_backgroundが！と言い出す。
これはちょっとわからないので、004を飛ばしてGameBook005を試します。
------------------------------------------------------------
0.前のプロジェクト名の末尾に"_x"を付加（削除しても良い）
コマンドプロンプトから"cd c:\MyTest"
①コマンド "ionic start GameBook005 blank --type=angular"
FreeAcount作成は"N"で構わない
②”GameBook002_コピーデータ構造”の中身をGameBook005フォルダーの中にコピー
6個のファイルが置換されると言えば正常。
③コマンド"cd c:\MyTest\GameBook005"
④コマンド"ionic build --prod" ←ionicでのビルド（ソースコード変更後は必ず流す）
⑤"npm install @capacitor/android@latest" ←初回のみ（capacitor最新版）
⑥"ionic cap add android" ←初回のみ（Androidフォルダ等を作る）
⑦"npx cap sync android" ←一応流しておく（ソースコード変更後は必ず流す）
⑧"ionic cap open android" ←AndroidStudioを開く
------------------------------------------------------------
作業中にいくつか可能性は浮かびましたが、まず、何もせずにForeGroundLayerとBackGroundLayerの2つを設定します。（Path以外は変更せず)
同じエラーが出ました。
その状態で、ForeGroundLayerをテキスト、BackGroundLayerをカラーにすると問題なくビルド実行でき、実機に設定したアイコン表示されました。
ですので、これで逃げる手もあるのですが、以前にテストしたバージョンではアイコン設定成功しているので、一寸悔しいです。
さて、賢明なる諸兄諸姉に置かれましては、画像に関係する処理で、最近飛ばしていた項目がある事にお気づきでしょうか？
https://ncode.syosetu.com/n5283hn/32/ 参照
------------------------------------------------------------
２．アイコンとスプラッシュ画像の準備
モバイルアプリを作る時に必要な画像との事です。
プロジェクトフォルダ直下に "\resources" と言うフォルダを作成。
ここに
・icon.png 1024ピクセル×1024ピクセル
・splash.png 2732ピクセル×2732ピクセル
の２つの画像ファイルを置き、コマンド "cordova-res" を走らせます。
画像の中身はダミーで構わないと思います。
"\resources"直下に"android" と "ios" の2つのフォルダが作られ解像度別に
画像ファイルが作られます。
------------------------------------------------------------
これを行って、この時出来た画像をアイコンとして選ぶと、無事にビルド実行できました。
そこで、この方法を踏襲して
名前をicon.pngにした1024ピクセル×1024ピクセルの画像ファイルを "c:\MyTestGameBook005\resources"に入れて、コマンド "cordova-res" を走らせました。
そして、ForeGroundLayer、BackGroundLayerともに"C:\MyTest\GameBook005\resources\android\icon"の中の画像を選ぶと、とりあえずアイコン表示成功。
ただ背景を透明画像に！とかは、うまく行っていないです。元々、コマンド "cordova-res" の時は、ForeGroundLayerとBackGroundLayerが無かった可能性もありますが・・・
時間があれば調査という事で、いったんアイコン設定は解決とします。
という事で
新規プロジェクトにコピーすれば、最新のキレイなソースに戻る
フォルダとファイルセットの中身を増やします。
---------------------------------------------------------------
\root---"capacitor.config.ts"
"tsconfig.json"
\root\src\app\MyData---"Page.json"
\root\src\app\home\MyWork---"tool.ts"
\root\src\app\home\---"home.page.html"
"home.page.scss"
"home.page.ts"
\root\src\assets\---"cube1.gif", "cube2.gif", "cube3.gif",
"cube4.gif", "cube5.gif", "cube6.gif",
\root\src\theme\---"variables.scss"
\root\resources---"icon.png", "splash.png"
---------------------------------------------------------------
また、手順もコマンド "cordova-res"が増えます。
------------------------------------------------------------
0.前のプロジェクト名の末尾に"_x"を付加（削除しても良い）
コマンドプロンプトから"cd c:\MyTest"
①コマンド "ionic start GameBook005 blank --type=angular"
FreeAcount作成は"N"で構わない
②”GameBook002_コピーデータ構造”の中身をGameBook005フォルダーの中にコピー
6個のファイルが置換されると言えば正常。
③コマンド"cd c:\MyTest\GameBook005"
④コマンド "cordova-res"
⑤コマンド"ionic build --prod" ←ionicでのビルド（ソースコード変更後は必ず流す）
⑥"npm install @capacitor/android@latest" ←初回のみ（capacitor最新版）
⑦"ionic cap add android" ←初回のみ（Androidフォルダ等を作る）
⑧"npx cap sync android" ←一応流しておく（ソースコード変更後は必ず流す）
⑨"ionic cap open android" ←AndroidStudioを開く
------------------------------------------------------------
AndroidStudioで行う項目も書いておきます。(設定済みならあまり無いですが)
------------------------------------------------------------
左側のエクスプローラから
・一番上の"app"を右クリック
・New → Image Asset
で、Configure Image Assetと言う画面が表示されます。
ここでForeGroundLayerとBackGroundLayerの画像パスを設定して
Next、そしてFinish
(自信がないならForeGroundLayerはテキスト、BackGroundLayerはColorにするのもお勧め)
実機をつないで一番上の実機の機種名横のPlayボタンをクリック
エラーが無ければ実機にインストールされアプリが立ち上がります。
（アプリ一覧にも表示されます）
------------------------------------------------------------
AndroidStudioで一点ありました。GitHubに追加しますか？としつこく聞いてくるかもしれませんが全部無視で問題なしです。
