まとめ ２４日目 モバイルアプリ作成の手順：GooglePlayのための作業①
さて、ここまででAndroid端末へのインストールは完了しました。
とは言え、多くのひとに使ってもらおうと思う場合、GooglePlayにアプリを掲載したくなると思います。
Google Play で Android アプリを公開するには、Google Play デベロッパー アカウントを作成する必要がありますが、その部分は割愛します。
興味のある方は、筆者の経験を下記のリンクに載せてありますので、そちらをご参照ください。
(約2500円と写真付き証明書(運転免許所やマイナンバーカード)の写真等が必要です)
『Google Play で Android アプリを公開(続きます。まだ終了してません。)』と言う名前のページ
https://ncode.syosetu.com/n5283hn/69/
最終的にアップできたGooglePlayアドレス
https://play.google.com/store/apps/details?id=start.gamebook.sample0000
※リンク最後の"start.gamebook.sample0000"がアプリIDです。
アプリIDとアプリ名称の設定は、AndroidStudioでの作業を行う前に必ず完了してください。
名前とIDを決めるファイルは、プロジェクト直下の"capacitor.config.ts"です。
中身は10行しかないのですぐ判ると思いますが4行目と5行目です。
------------------------------------------
appId: 'io.ionic.starter', ← ionicが作成のデフォルトのID
appName: 'test_mobile', ← 作った時のプロジェクト名
------------------------------------------
閑話休題
さて、AndroidStudio側でもGooglePlay用のいくつかの作業が必要ですので、ここではそれをまとめます。
・ダークモードへの対応
・アイコンの設定
・バージョンの設定
・ビルドタイプの設定
・”難読化解除ファイル”作成
・キーストア作成
・署名付きアプリの作成
===== ダークモードへの対応 =====
VisualStudioCodeでの作業です。
(ソースコードの編集はAndroidStudioでも出来ますが一元化した方が間違いが起きにくいかと思います。)
細かい事は抜きにします。(作者の理解も足りていないので)
実機テストでダークモードになったのは"src\theme\variables.scss"の最後の部分で”Material Design Dark Theme”として定義されていて、ioniicの作法に則っていないデザインの場合、こちらが優先されるためです。
以下が、背景色とテキスト色を変更する書き方です。
"src\app\home\home.page.scss"
------------------------------------------
/* 背景色・テキスト色の設定 */
ion-content{
--ion-background-color:#13b6a0; ← 背景色
--ion-text-color: #e4f0e4; ← 文字の色
--ion-item-background: #3d0fe2; ← 例えばion-radio等の背景
}
------------------------------------------
通常のCSSのプロパティ名ではなく、"--ion-"が頭についている点にご注意ください。
この書き方であれば、Android端末でも意図通りに表示されます。
===== アイコンの設定 =====
ここからはAndroidStudioでの作業になります。
AndroidStudio左側のエクスプローラから
・一番上の"app"を右クリック
・New → Image Asset
で、Configure Image Assetと言う画面が表示されます。
左下の？ボタンを押下すれば、下記の公式のサイトが表示されます。
Image Asset Studio を使用してアプリアイコンを作成する｜Androidデベロッパー
https://developer.android.com/studio/write/image-asset-studio?utm_source=android-studio
ただし、ionicで作成したアプリを変換してモバイルアプリにするという制約上、色々制限があります。
補記④ionic使用の場合のアイコンの制限
https://ncode.syosetu.com/n5283hn/91/
ですので、注意点(作業順序は基本的に上から)守り、アイコンの設定を行ってください。
・[Icon Type] フィールドで、[Launcher Icons (Adaptive & Legacy)] を選択
・Nameは入力しない(上記リンクを参照のこと)
・逆に・[Foreground Layer]と・[Background Layer]の名前は必ず変更する
(変更しないとエラーになります)
※名前については、小文字の英字と数字、アンダースコアのみが許容されます。
・[Foreground Layer] タブで [Asset Type] を選択。
画像、クリップアート、テキストから選びます。絵心が無ければテキストも有りだと思います。
・テキスト以外ならば、元ファイルのパス(PC上の場所)を選択します。
PATH:の右端のフォルダボタンを押下すると"Select Path"画面が表示されます。
※Ctrl+2でプロジェクトフォルダに移動するのが便利だと思います。
・ファイルを選択すると右側のPreviewにイメージが表示されます。
サイズの調整等は下のScaling ＞ Resizeで行えます。
・必要であればBackGroundLayerも設定できます。(Colorとイメージ)
設定の有無にかかわらず、名前は変更してください
※名前については、小文字の英字と数字、アンダースコアのみが許容されます。
設定が終わったら、Nextを押下してください。
次の画面"Confirm Icon Path"で作られたアイコンの場所を確認してきます。
"main"、"debug"、"release"の3つのバージョンを選べます。
特に問題が無ければ"main"でデバッグとリリースの両方に対応できます。
"main"を選んで、Finishを押下で終了です。
(gitに登録するかと聞かれますが不要でOKです)
終わりましたら、実機でテストしてみましょう。
アプリ一覧でアイコンが変更されていれば成功です。
長くなりましたので、ここで投稿
