表示調整
閉じる
挿絵表示切替ボタン
▼配色
▼行間
▼文字サイズ
▼メニューバー
×閉じる

ブックマークに追加しました

設定
0/400
設定を保存しました
エラーが発生しました
※文字以内
ブックマークを解除しました。

エラーが発生しました。

エラーの原因がわからない場合はヘルプセンターをご確認ください。

104/210

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のテンプレートがあった記憶があるので、次はそちらで実験をして見ます。

評価をするにはログインしてください。
この作品をシェア
Twitter LINEで送る
ブックマークに追加
ブックマーク機能を使うにはログインしてください。
― 新着の感想 ―
このエピソードに感想はまだ書かれていません。
感想一覧
+注意+

特に記載なき場合、掲載されている作品はすべてフィクションであり実在の人物・団体等とは一切関係ありません。
特に記載なき場合、掲載されている作品の著作権は作者にあります(一部作品除く)。
作者以外の方による作品の引用を超える無断転載は禁止しており、行った場合、著作権法の違反となります。

この作品はリンクフリーです。ご自由にリンク(紹介)してください。
この作品はスマートフォン対応です。スマートフォンかパソコンかを自動で判別し、適切なページを表示します。

↑ページトップへ