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

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

その2 Cordovaプラグインの追加【Admob】と動作確認（広告表示確認） - 試行錯誤編 -

前回はMonacaのプロジェクトをCordovaのローカルプロジェクトへ移行し、iosシミュレータでの動作確認まで行なった。

www.sky-limit-future.com

今回はios版でAdmob広告の表示までやる予定。
前回はかなりすんなりいったけど、ここからはそうは行かないと思っている。
現段階では、試行錯誤した内容は記載しておくけど、上手くいく手順がわかり次第、余分な内容をみることのないように編集するつもり。<目次>
Cordovaプラグインの導入【cordova-admobpro】
Admob広告表示のための実装
iosシミュレータでの動作確認

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

■移行先のCordovaプロジェクトで、プラグインを追加。
Admob関連のプラグインはいくつかあるみたいだけど、今回はadmobproを使う。似た名前のpluginがあるので気をつけて。

github.com

プロジェクトへ移動。

$ cd testProject

プラグイン追加

$ cordova plugin add cordova-plugin-admobpro

こんなメッセージが出てくる。

Installing "cordova-plugin-admobpro" for ios
Installing "cordova-plugin-extension" for ios
Adding cordova-plugin-admobpro to package.json
Saved plugin info for "cordova-plugin-admobpro" to config.xml

■プラグインの確認
正しくプラグインが追加できているか確認。

$ cordova plugin ls

cordova-plugin-admobpro 2.29.21 "AdMob Plugin Pro"

念のため、config.xmlをみると

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" x
mlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloCordova</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <engine name="ios" spec="^4.4.0" />
    <plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
    <plugin name="cordova-plugin-admobpro" spec="^2.29.21" />
</widget>

最後の1行に追加されているのがわかる。

<plugin name="cordova-plugin-admobpro" spec="^2.29.21" />

次は実装。

Admob広告表示のための実装

■実装
READMEにある通り、以下のコードを追加してみる。
admob.jsを作って、読み込む。

・index.html

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

・admob.js

var admobid = {};
if( /(android)/i.test(navigator.userAgent) ) {
    admobid = { // for Android
        banner: 'ca-app-pub-6869992474017983/9375997553',
        interstitial: 'ca-app-pub-6869992474017983/1657046752'
    };
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
    admobid = { // for iOS
        banner: 'ca-app-pub-6869992474017983/4806197152',
        interstitial: 'ca-app-pub-6869992474017983/7563979554'
    };
} else {
    admobid = { // for Windows Phone
        banner: 'ca-app-pub-6869992474017983/8878394753',
        interstitial: 'ca-app-pub-6869992474017983/1355127956'
    };
}

function initApp() {
    if (AdMob) {
        AdMob.createBanner({
            adId : admobid.banner,
            position : AdMob.AD_POSITION.BOTTOM_CENTER,
            autoShow : true
        });
    }
}

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

これで一旦動かしてみるが、どうだろうか。
AdMob.AD_POSITION.BOTTOM_CENTERの記載があるので、画面下部の中央に表示されるはず。

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

■ビルドして、iosシミュレータ起動

$ cordova build sim
$ cordova emulate ios

表示されなかった。

2017年8月27日時点で、問題は解決していません。
解決次第、ここに補足事項を記載する予定。
以降の内容は問題解決のための試行錯誤。いくつかの問題を解決してるので役に立つかもしれないですが、興味のない方は、解決するまでお待ちを。

• • • • • • • • • • • • • • • • • • • • • • • • • • • • -

以下、エラー解決の試行錯誤

• • • • • • • • • • • • • • • • • • • • • • • • • • • • -

safariのデバッグを使って問題がないか探してみる。
デバッグ方法はこちらから。

www.sky-limit-future.com

■デバッグ
デバッグではエラーが何も出なかった。
追っていくと、admob.jsで定義したinitApp()が呼ばれていない。おそらくpluginが正しく動いてないからかな？
cordova-admobproのAdMob.jsも読み込まれている様子もない。

でもpluginのリストにはadmobがあるので、cordova自体が正しく動いてないと予想。

その線で調査してみると、Monacaでは必要のなかったcordova.jsを読み込む必要があるとのこと。
実際に、testProjectの配下にはcordova.jsというのは存在しないが、裏で勝手に作ってくれているようだ。

■cordova.jsの追加
ということでindex.htmlにcordova.jsを追加する。
注意点。cordova.jsはwwwの直下にある。またadmob.jsよりも前に読み込む必要がある。

・index.html

<!-- 追加 -->
<script src="cordova.js"></script>
<!-- admob.jsよりも前に読み込むこと -->
<script src="js/admob/admob.js"></script>

これでもう一度、シミュレータを起動する。
今度はコンソールエラー。

エラー内容
Refused To Load Gap://Ready Because It Appears In Neither The Child-Src Directive Nor The Default-Src Directive Of The Content Security Policy.

(参考)
ufirst.jp

htmlのmetaタグを変更する必要がある。
変更内容は、「content="default-src * ; "」の「default-src *」の後ろに「gap://ready file:」を追加する。具体的には以下の通り。
※参考サイトと僕のmetaタグを比較すると若干異なる。人によって違うようなので注意。

・現在のmetaタグ

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

content="default-src * data:;となっているので、content="default-src * data: gap://ready file:;と変更。

・変更後のmetaタグ
gap://ready file:をdefault-src * data:の後ろに追加。

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

するとエラーは出なくなったが、まだ広告は表示されない。
なぜだろう。。。

次回に続く。
www.sky-limit-future.com