LocalStorageの利用とGoogleAdMob利用の場合の設定
ionic info
Ionic:
Ionic CLI : 6.19.0 (C:\Users\*****\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 6.1.7
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0
Capacitor:
Capacitor CLI : 3.5.1
@capacitor/android : 3.5.1
@capacitor/core : 3.5.1
@capacitor/ios : not installed
Utility:
cordova-res : 0.15.4
native-run : 1.6.0
System:
NodeJS : v16.14.0 (C:\Program Files\nodejs\node.exe)
npm : 8.3.1
OS : Windows 10
アプリを作るとGooglePlayで公開を考えたくなるかもしれません。
その場合、広告をつけたくなるかもしれません。
(種類によりますがバナーでしたら邪魔にはならない程度かも)
広告を組み込みたいと考える場合、一番の注意点としては、ionicのプロジェクトを作る時にテンプレートをTabs(デフォルトで3つのタブ画面が追加されるタイプ)にする事です。
（Tabsの実装時に同時に広告を表示する感じです。Javaならばもう少し融通が利くと思いますが苦肉の策と言う感じを受けました。)
なおTabsの選択ボタン自体は表示させない事が可能で、その場合でも広告は表示されます。
いじるファイル名が、"home.page.ts"から"tab1.page.ts"になった程度と思っても大きな間違いでは無いと思います。
以下、両方を組み込んだ場合の手順です。(ソースコードは次ページに分けます)
プロジェクトは"c:\Mytest"直下の"adSql"と言う名前にします。
手順
===== コマンドプロンプト =====
・cd c:\MyTest
・ionic start adSql tabs --type=angular
プロジェクト作成後
・cd c:\MyTest\adSql
・ionic serve で一応確認
・ctrl+Cでionic serveを終了
===== VisualStudioCodeで作業 =====
・appID appNameの変更(プロジェクト直下"capacitor.config.ts")
遅くともAndroid(あるいはiOS)用のプラットフォームを作る前に変更してください。
例：
appId: 'sample.ad.sql.v0001',
appName: '広告とローカルストレージサンプルアプリ',
※重要な注意※
appNameは割と融通が利きますが、appIDは
2 つ以上のセグメント（1 つ以上のドット）が必要
各セグメントは文字で始まる必要がある
使用できる文字は英数字とアンダースコアのみ（a～z、A～Z、0～9、_）
と言う制限があります。英大文字も許可されていますが、別の命名でで小文字しか許さないケースもあるので小文字にして置いた方が無難かも？
文字で始まるは重要です。上の例の"v0001"を"0001"にしてハマりました。
※重要な注意 終了※
===== コマンドプロンプト =====
プラグインインストール
・npm install @capacitor/android@latest
・npm install --save @capacitor-community/admob
(GoogleAdMob用)
・"npm i cordova-sqlite-storage"
・"npm install @ionic/storage-angular"
（どちらもLocalStorage用)
ビルドとAndroidプラットフォームの用意
・ionic build --prod
・ionic cap add android
・npx cap sync android
===== VisualStudioCodeで作業 =====
・プラグインのための諸設定と"tab1.page.ts"の実装コード
変更内容は次ページ参照。
===== コマンドプロンプト =====
ビルドとAndroidStudioのオープン
・ionic build --prod
・npx cap sync android
・ionic cap open android (AndorodStudioの起動)
===== 必要なら =====
・splash.pngの変更
・アイコンの変更
スプラッシュ画面の変更は良い方法が見つかっていませんが、大して手間でも無いので、プロジェクト直下"\android"フォルダから"splash.png"を検索して全て入れ替えています。
アイコンの変更は、AndroidStudioで行います。
理解不足のせいと思いますが色々問題が起きましたが、以下のやりかたで安定して設定できています。
より良い方法があるならば、そちらをお試しください。
AndroidStudio左側"app"フォルダを右クリック
→newをクリック
→ImageAssetをクリック
IconTypeおよびNameは変更せず、その下のForegroundLayerとBackGroundLayerを設定する。
各々のLayer Nameを変更する。※英大文字は使用してはいけない
Imageを使用するならPath設定から、使いたいイメージを選択(プロジェクトフォルダ外にあっても問題ない)
Next → finish で作成されます。
===== AndroidStudioで実機でテスト =====
エミュレータもありますが実機をお勧めします。
注意点としては、GoogleUSBドライバをWindowsにインストールする事。
そしてAndroid携帯を開発者モードにすることです。
PCとAndroidの実機を接続して、上に機種名が表示されたら隣のプレイボタンを押下してください。
実機テストは予想外に簡単
https://ncode.syosetu.com/n5283hn/33/
なお広告の年齢レーティングは、かなりうるさいと思います。
以下は私なりのまとめです。
アプリやアカウントの広告レーティングの上限を設定する｜GoogleAdMob
https://ncode.syosetu.com/n5283hn/108/
