【iOS版】Admobプラグインの追加と動作確認【Cordova】

ここではbanner型広告表示のための実装のみ。
現段階ではリリース前のテスト用広告を表示しているだけ。
リリース後には、Admobにアカウントを登録して、広告を作成する。
その作成時に与えられた広告IDをbannerの値に置き換える必要がある。
admobidの中にinterstitialキーがあるが、今回は使用していない。
interstitialは画面全体に表示される広告のこと。
今回のアプリへの導入は考えていない。

/*
 リリース前のテスト用に値を書き換えているため
 Admobに登録して、広告を作成した段階で書き換える必要がある
*/
var admobid = {};
if( /(android)/i.test(navigator.userAgent) ) {
    admobid = { // for Android
        banner: 'ca-app-pub-3940256099942544/6300978111',
        interstitial: 'ca-app-pub-6869992474017983/1657046752'
    };
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
    admobid = { // for iOS
        banner: 'ca-app-pub-3940256099942544/6300978111',
        interstitial: 'ca-app-pub-6869992474017983/7563979554'
    };
} else {
    admobid = { // for Windows Phone
        banner: 'ca-app-pub-3940256099942544/6300978111',
        interstitial: 'ca-app-pub-6869992474017983/1355127956'
    };
}

function initApp() {
    if (AdMob) {
        // banner広告の表示
        AdMob.createBanner({
            adId:admobid.banner,
            position:AdMob.AD_POSITION.BOTTOM_CENTER,
            overlap: false,
            autoShow:true
        });
    }
}

document.addEventListener('deviceready', initApp, false);

index.htmlの編集

index.htmlでやることは
・cordova.jsの読み込み
・admob.jsの読み込み
・metaタグの変更

■cordova.jsの読み込み
index.htmlに追加。
cordova.jsは存在しないように見えるが、裏側で自動生成されている。
wwwディレクトリの直下にあるはず。

<script src="cordova.js"></script>

■admob.jsの読み込み
index.htmlのcordova.jsを読み込んだ箇所の後ろに追加。
先ほど新規作成したjsファイル。

<!-- 上記で追加したもの -->
<script src="cordova.js"></script>
<!-- cordova.jsよりも後ろで読み込む -->
<script src="js/admob/admob.js"></script>

■metaタグの変更
このままだとエラーが出ることがあるので、index.htmlのmetaタグを修正する。
修正内容は、「content="default-src * ; "」の「default-src *」の後ろに「gap://ready file:」を追加する。具体的には以下の通り。
人によって、内容が異なる場合があるので注意。

・変更前

<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

・変更後

<meta http-equiv="Content-Security-Policy" content="default-src * data: gap://ready file:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

iosシミュレータでの動作確認

ここまでで正しく広告が表示されるはず。

Cordovaプロジェクト(testProject)に移動

$ cd testProject

ビルド

$ cordova build ios

シミュレータ起動

$ cordova emulate ios

画像

今回は、画面のtabbar下に表示しているが、表示箇所を変えたい場合は、admob.jsのAdMob.createBannerのoptionにある、「position」の値を変更すればいい。ちなみに、前回の記事にも書いたがハイブリッドアプリの場合はtabbarの上に広告を出すのは難しい。

www.sky-limit-future.com

  position:AdMob.AD_POSITION.BOTTOM_CENTER

上記の「BOTTOM_CENTER」の箇所を置き換える。
選択肢が多いので、ご自分で試してください。

NO_CHANGE
TOP_LEFT
TOP_CENTER
TOP_RIGHT
LEFT
CENTER
RIGHT
BOTTOM_LEFT
BOTTOM_CENTER
BOTTOM_RIGHT
POS_XY

以上でiOS版の移行完了。
次回からはAndroid版について。
移行は問題ないので、Admobの設定が何かしら必要になると思う。

Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

【iOS版】Admobプラグインの追加と動作確認（広告表示確認） - 完結編 - 【Cordova・Monaca】MonacaのプロジェクトをCordovaのローカルプロジェクトに移行して、Admob導入【Admob・plugin】 PART4

【iOS版】Admobプラグインの追加と動作確認（広告表示確認） - 完結編 - 【Cordova・Monaca】MonacaのプロジェクトをCordovaのローカルプロジェクトに移行して、Admob導入【Admob・plugin】 PART4

その4 【iOS版】Admobプラグインの追加と動作確認（広告表示確認） - 完結編 -

Cordovaプラグインの導入【cordova-admobpro】

admob.jsの追加

index.htmlの編集

iosシミュレータでの動作確認