【Monaca】cordova-plugin-admob-freeを使用してAdmob広告を表示する

この記事の概要

Monaca(Cordova)でAdmob広告を表示するためのプラグインはcordova-admob-proが有名ですが、このプラグインを使用しないほうが良い理由を説明します。

そして代替案として、cordova-plugin-admob-freeを紹介し、その導入方法を躓いた点と共に紹介します。

cordova-admob-proを安易に使用してしまうのは罠！！

MonacaでAdmobの広告を表示するために使用するプラグインは、cordova-admob-proが有名のようです。

Monacaの運営会社であるアシアル株式会社のブログにもこのプラグインが紹介されています。

blog.asial.co.jp

ただし！何も考えずに安易に入れてしまうと罠が仕込まれています！！！

このプラグインは、密かに広告トラフィックを抜かれる有料プラグインです。

（ただし、20ドル払えば回避できるらしいです。どのみち有料ですが。）

20ドルくらいであれば支払っても良いかとも思いますが、このプラグインはソースが公開されておらず、その他のプラグインと競合してしまった場合に解決が不可能になる、というクリティカルな罠も含まれております。

そのため、筆者としてはcordova-admob-proは使用しないことを強くお勧めします。

cordova-plugin-admob-freeを使いましょう

代替案として、完全無料のcordova-plugin-admob-freeを使用しましょう！ 

ソースコードも公開されているため、何か問題が発生しても解決しやすいですね。

ただし！このプラグインも素直に使用させてはくれません（泣）

Monacaでそのままインポートして使用しても上手く広告が表示されませんでした。

広告表示の確認には実機を使用する必要があり、このプラグインをインポートしたのちにカスタムビルドデバッガーをビルドして、インストールする必要がありますが、ビルド時にさりげなく以下のようなエラーが出ていたのです・・・

Failed to install 'cordova-plugin-admob-free': Error: Uh oh!
ENOENT: no such file or directory, open '/private/tmp/monaca/5b70c5a0e78885936cb2780d/project/plugins/cordova-plugin-admob-free/www/admob.js'
at Object.fs.openSync (fs.js:646:18)
at Object.fs.readFileSync (fs.js:551:33)
at install (/private/tmp/monaca/5b70c5a0e78885936cb2780d/project/platforms/android/cordova/lib/pluginHandlers.js:173:36)
at ActionStack.process (/private/tmp/monaca/5b70c5a0e78885936cb2780d/project/platforms/android/cordova/node_modules/cordova-common/src/ActionStack.js:56:25)
at PluginManager.doOperation (/private/tmp/monaca/5b70c5a0e78885936cb2780d/project/platforms/android/cordova/node_modules/cordova-common/src/PluginManager.js:114:20)
at PluginManager.addPlugin (/private/tmp/monaca/5b70c5a0e78885936cb2780d/project/platforms/android/cordova/node_modules/cordova-common/src/PluginManager.js:144:17)
at /private/tmp/monaca/5b70c5a0e78885936cb2780d/project/platforms/android/cordova/Api.js:243:74
at _fulfilled (/private/tmp/monaca/5b70c5a0e78885936cb2780d/project/platforms/android/cordova/node_modules/q/q.js:854:54)
at self.promiseDispatch.done (/private/tmp/monaca/5b70c5a0e78885936cb2780d/project/platforms/android/cordova/node_modules/q/q.js:883:30)
at Promise.promise.promiseDispatch (/private/tmp/monaca/5b70c5a0e78885936cb2780d/project/platforms/android/cordova/node_modules/q/q.js:816:13)
Failed to restore plugin "cordova-plugin-admob-free" from config.xml. You might need to try adding it again. Error: Error: Uh oh!

しかも！

このエラーはビルドの進行を止めず、そのままビルド成功となってしまいます。

つまり、このエラーが出ていることに気づかないのです。

カスタムビルドしたアプリを立ち上げた時に以下のようなメッセージが画面下部に表示されるため、そこで上手く組み込めなかったことに気づきました。

デバッガーに含まれていないプラグインがあります
cordova-plugin-admob-free

cordova-plugin-admob-freeの導入手順

以下の手順で導入します。

1. クローン等でcordova-plugin-admob-freeのソースを取得
2. npm install
3. npm run build
4. node_module を除いて、zipファイルを作成
5. Cordovaプラグインとして、作成したzipファイルをインポート
6. 導入先のプロジェクトでコーディング

1. クローン等でcordova-plugin-admob-freeのソースを取得

cordova-plugin-admob-freeをクローンして、ソースコード一式を取得します。

zipでダウンロードしても良いです。

2. npm install

取得したソースコード一式のディレクトリに移動し、以下のコマンドを実行します。 

> npm install

3. npm run build

package.jsonのscriptsの記載を見ると、buildを実行すれば www/admob.jsが作成されそうな感じなので実行します。

> npm run build

実行すると、予想どおりwww/admob.jsが作成されます。

4. node_module を除いて、zipファイルを作成

node_moduleディレクトリはあっても差し支えないと思いますが、ファイル数が多く、サイズが大きいので削除します。

筆者の場合は、cordova-plugin-admob-freeディレクトリごと別の場所にコピーした後、node_moduleディレクトリを削除し、zipファイルを作成しました。

5. Cordovaプラグインとして、作成したzipファイルをインポート

 作成したzipファイルをインポートします。

※カスタムプラグインのインポートになりますので、MonacaはPro版（有料）を使用する必要があります。

6. 導入先のプロジェクトでコーディング

以下のような感じで、 コーディングを行います。

// 広告のIDを設定する。（以下のIDはテスト用のIDです。）
var admobid = {};
if (/(android)/i.test(navigator.userAgent)) { // Android
  admobid = {
    banner: "ca-app-pub-3940256099942544/6300978111"
  };
}
else if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)) { // ios
  admobid = {
    banner: "ca-app-pub-3940256099942544/2934735716"
  };
}

document.addEventListener('deviceready', function () {
  // バナー広告表示を表示する。
  admob.banner.config({
    id: admobid.banner,
    isTesting: true, // テスト広告を表示する場合にtrueを指定する。
    autoShow: true,
  });
  admob.banner.prepare();
}, false);

まとめ

cordova-plugin-admob-freeとその導入方法を紹介しました。

同じように罠にはまっている方々の参考になれば幸いです！