Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@miyoshi_613

cordova-plugin-admob-freeの導入作業

少し面倒だったので忘れないようにメモしておきます。
admobで「ca-app-pub-」から始まるapp idを取得していることが前提です。

ビルド環境の設定

  • monacaクラウドIDEでビルド→ビルド環境の設定→iOS5.1.1を選択して保存する。
  • monacaクラウドIDEで設定→JS/CSSコンポーネントの追加と削除→Monaca Core Utilityのバージョンを2.1.0以上に上げる。
  • monacaクラウドIDEで設定→iOSアプリ設定→WebViewエンジンにWKWebViewを指定して保存。

プラグインを用意する

cordova-admob-sdk

以下のサイトからv0.24.1のzipをダウンロードしました。
cordova-admob-sdk

cordova-plugin-admob-free

以下のサイトからv0.27.0のzipをダウンロードしました。
cordova-plugin-admob-free

WKWebViewの対応

ダウンロードしたcordova-admob-sdkは内部でGoogle Mobile Ads SDKの7.42.1を使用していました。
このバージョンはUIWebView廃止に未対応のようなので、手作業でSDKを更新します。

  1. Google Mobile Ads SDKにアクセスしてgooglemobileadssdkios.zipをダウンロードします。ここでは7.60.0をダウンロードしました。
  2. cordova-admob-sdk-master.zipを解凍します。
  3. ./src/ios/GoogleMobileAds.framework をフォルダごと削除します。
  4. googlemobileadssdkios.zipを解凍して./GoogleMobileAdsSdkiOS-7.60.0/GoogleMobileAds.frameworkを先程削除したフォルダがあった場所(cordova-admob-sdk-master/src/ios/)にコピーします。
  5. cordova-admob-sdk-masterをzipで圧縮します。

次に、cordova-plugin-admob-freeですが、www/admob.jsが無くてビルドエラーになるので作成します。

1. cordova-plugin-admob-free-master.zipを解凍します。
2. コンソールを起動して解凍したフォルダへ移動します。
3. npm install を実行
4. npm run build を実行(wwwフォルダが作成されます)
5. node_modulesフォルダを削除
6. cordova-plugin-admob-free-masterをzipで圧縮します。

これでプラグインの準備はできました。

プラグインをインポート

次に、プロジェクトへプラグインを適用します。
1. monacaのクラウドIDEで設定→cordovaプラグインの管理 を選択します。
2. cordovaプラグインのインポートでcordova-admob-sdk-master.zipを指定してインポートします。
3. cordovaプラグインのインポートでcordova-plugin-admob-free.zipを指定してインポートします。
4. 設定を追加します。
image.png

設定
ADMOB_APP_ID=ca-app-pub-348...

config.xml修正

5. config.xmlを開きます。
6. <platform name="ios"タグ内に以下を追加します。

config.xml
    <preference name="WKWebViewOnly" value="true"/>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
    <feature name="CDVWKWebViewEngine">
      <param name="ios-package" value="CDVWKWebViewEngine"/>
    </feature>

※デプロイ時にITMS-90683がでた場合は以下も追加。

config.xml
    <edit-config target="NSBluetoothAlwaysUsageDescription" file="*-Info.plist" mode="merge">
      <string>適当な説明</string>
    </edit-config>

※カスタムビルドデバッガーでビルドして起動したときにスプラッシュで落ちる場合は以下を追加。

config.xml
    <edit-config file="*-Info.plist" mode="merge" target="GADApplicationIdentifier">
      <string>ca-app-pub-348...</string>
    </edit-config>
    <edit-config file="*-Info.plist" mode="merge" target="GADIsAdManagerApp">
      <true/>
    </edit-config>

※上記を追加してもITMS-90809でrejectになる場合、以下を追加するといいかも。

config.xml
    <edit-config file="*-Info.plist" mode="merge">
      <key>gad_preferred_webview</key>
      <string>wkwebview</string>
    </edit-config>

広告表示用のスクリプト

とりあえずons.readyのタイミングに表示処理を書いた。

index.html
    ons.ready(function() {    
      // console.log(admob);
        var admobid = {
          banner: 'ca-app-pub-... ※バナー広告のid'
        }
        // Banner
        admob.banner.config({
          id: admobid.banner,
          isTesting: true,
          autoShow: false,
          size: 'LARGE_BANNER',
        })
        admob.banner.prepare()
          .then (() => {
            console.log('banner prepare success!')
          })
          .catch (err => {
            console.log('banner prepare error!', err)
          })
    });

カスタムデバッグビルドして広告が表示できていればOK。

can't find variable admob というエラーが出る場合。
最初プロジェクト作った時に選択したプロジェクトテンプレートがまずいんだと思う。
フレームワークテンプレートの中のminimumをベースに再構築すればいいかもしれません。

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
miyoshi_613
勉強した事を自分の言葉に置き換えてテキストにすると記憶が定着するらしい。 それをするのにqiitaでブログ書くのがよさそうという事で始めました。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?