ionicで本気でAdMob① 先は長いか短いか
いや、今まで本気出さなかったわけじゃないんですが。
GoogleAdMobから広告出しましょうよ!的なメールが来ましたし、昨日の作業で方向性が見えて気もするので、頑張ろうかと思います。
さて、昨日の
ionic capacitorのAdMobプラグインを使う(capacitor-admob)
https://qiita.com/kokogento/items/99cf7ba321b68aaad298
を参考にした作業がベースになりそうと考えていますが、明らかに古くなっている部分があって、順番に解決していく予定です。
(2か月ちょっとの初心者が何言ってんだという感じですが、記事自体が数年前ですので仕方ないです。)
まず、"const { AdMob } = Plugins;"と言う部分があるのですが、これは古いバージョンのcapacitorの方法で、色々問題出てきそうです。
(なお、自力発見ではなくVsiualStudioCode様からのご注進です。)
手動で修正も出来るようではあるのですが、とりあえず新しいバージョンの"capacitor-admob"が無いかを探してみます。
"capacitor-admob"で検索すると
capacitorでadmobでアプリ広告をAndroidで表示する
https://blog.np-sys.com/capacitor-admob-on-android/
が良さそうです。
ただ、インストールの方法が書いて無いので、今更ながら"npm install"で学習しようと調べてみました。
Topに出たのが
きちんとわかる、npm install | 第1回 PCにコマンドをインストールする | CodeGrid
https://www.codegrid.net/articles/2020-npm-install-1/
うん、ちょっとすぐに咀嚼は出来ないです。
ただ、グローバルインストールは影響がデカそうなのでやめておきます。
次に"'@capacitor-community/admob'"で検索。
(きっとインストールコードがあるだろうという期待)
Ionic AdMobのプラグインをcapacitor-communityのに乗り換えた話【iOSバージョン】
https://qiita.com/kokogento/items/14f8ce0e1a3e2bca421d
プラグインのインストールと、乗り換え前のプラグインのアンイストールまで出ていて助かる気がします。
(すべてはうまく行ってからの話ですね)
"'@capacitor-community/admob'"のインストール
------------------------------------------
npm install --save @capacitor-community/admob
------------------------------------------
(※現在の環境では --save オプションは不要とのこと)
前のアンインストール
------------------------------------------
npm uninstall capacitor-admob
------------------------------------------
その上でAndroidStudio側の設定まではうまく行ったらしいバージョンのコピーと入れ替えます。
(新規のやり方はまた後程、再挑戦してみます。)
うまく行けば・・・と思ったんですが、やはり新規のプロジェクトにコピーした方が問題は少ないと判断。
(コピーに時間がかかったせいばかりではないはず)
一応、前のプロジェクトフォルダをリネームして保存の上で
・ブランクひな形のionicプロジェクト作成
・プロジェクトフォルダをカレントディレクトリに変更
・広告なし安定版をコピー(含むAndroidフォルダ)
・npm install @capacitor/android@latest
・npm install --save @capacitor-community/admob
・ionic serveで一応確認
・ionic build --prod
・npx cap sync android
・ionic cap open android
・実機で動作確認(広告は無いですが、ここまでの作業で問題ないかの確認)
・admobのSDK関係の設定
・home.page.tsの修正
の順で作業してみます。
実機で動作確認、あれ?繰り返し停止が起きる・・・
可能性はも思い浮かばないでも無いですが、SDKの設定とhome.page.tsの変更まですまして再度テストするしか無いですね。
今度は、問題なく起動。
ただし、広告は出ない・・・
作業の元となった、下記サイトの書いていない所に問題があると推測。
capacitorでadmobでアプリ広告をAndroidで表示する
https://blog.np-sys.com/capacitor-admob-on-android/
ちょっと調べてます。
気になる点は"ionic serve"で見た時、Web開発ツールで以下のメッセージが出ている事です
Capacitor WebPlugin "AdMob" config object was deprecated in v3 and will be removed in v4.
Capacitor WebPluginの「AdMob」設定オブジェクトはv3で非推奨になり、v4で削除されます。
(Google翻訳)
"ionic info"で見ると
Capacitor:
Capacitor CLI : 3.5.1
@capacitor/android : 3.5.1
@capacitor/core : 3.5.1
@capacitor/ios : not installed
だから、これでは無いと思う。
あと、サンプルの方は、別なタブを表示させるときに広告を表示しているように見えるので、その辺も見ないと判らない?
仕方ないので、"AndroidStudio"で初デバッグに挑戦。
一番下の各種アイコンの所にDebugがあったので押すとデバッグ用の表示窓が出てきます。
(consoleが初期表示)
その状態で、う一番上の実機を動かすプレイボタンの3つほど右の歯車アイコンを押すと、デバッグウィンドウ(今はコンーソルログですが)に多量の表示が出てきます。
(使い方は、今、自力で見つけたので、ちゃんと調べることを推奨)
ほとんど内容は分からないですが、どうやらadmobのプラグインは動作しているらしいという事と、
以下のメッセージにあるように広告の読み込みに失敗しているらしいことが推測できます。
I/Ads: Ad failed to load : 3
また次のエラーが気になります
I/FA-Ads: Tag Manager is not found and thus will not be used
前述になりますがサンプルコードは明らかにTabを使用していますので、これはもしかしてタブを利用して、そこに広告を表示する方法なのかも?
ちょっと新規プロジェクトでTabのテンプレートがあった記憶があるので、次はそちらで実験をして見ます。