CordovaアプリにAdmob広告を表示するよ

スマートフォンアプリ開発Cordova

どうも、最近研究に殺されそうになっている私です。研究なんてやってられないのでCordovaアプリ開発やってます。アプリ開発といえば、以前にTRPGサイコロアプリクイズ番組のSEアプリなんかを作りました。よかったら使ってみてください。

さて本題です。以前のアプリからAdMobさんの広告を表示させてもらっています。ですが、今回Cordovaでの広告掲載方法を忘れてしまい、調べ直す羽目になりました。そんなわけで、今回はCordovaアプリでのAdMobバナー広告の掲載方法を備忘録的にまとめようと思います。

今回の記事ではすでにCordovaの環境が整っている方向けに書かせてもらいます。そのため、まだ環境が整っていない方は、以前の作業記事なんかを参考に整えてからご覧ください。



Cordova : 6.4.0
OS : MacOS Sierra


1. AdMobに登録

さて、まずは広告を配信してもらうためにAdMobさんにアプリを登録します。AdMobさんでのアプリ登録方法は細かい箇所が度々更新されるため今回は省略させていただきます。とりあえず欲しいのは”ca-app-pub-3940256099942544/6300978111″こんな感じの広告コードです。

アプリはGoogle Playなどのストアに公開していなくても登録することができますが、アプリを公開したら該当広告と接続するのを忘れないようにしましょう。

2. プラグインのインストール

では次にアプリ内で広告を表示するのに便利なプラグインをインストールします。インストール方法は通常のプラグインと同様にcordovaコマンドから行うことができます。というわけで、以下のコマンドで該当プラグインをインストールしてください。

もしかしたら追加しているプラットフォームによって、入れ直す必要が出るかもしれませんが、その時はコマンドに出力されているコマンド通り(“cordova plugin save”とか”cordova platform rm xxx”)に対応すれば大丈夫です。

一応本プラグインのGitHubページのリンクを掲載しておきます。

3. 表示部分のコードを追記

では、今入れたプラグインを使って実際に広告を表示するコードを書いていきます。コードを書くファイルは、JavaScriptのファイルでHTMLから読み出していたらなんでもいいと思いますが、今回はCordovaプロジェクト生成時に自動的に作成されるindex.jsに追記しました。というわけでご自身の環境に合わせたファイルに以下のコードを記述してください。

今回はindex.jsに書いたため、ちゃんと動作するよう”onDeviceReady”の関数内に書きました。ご自身のファイルなんかに記述する際は、ページロード完了時などを狙って動作するようにするのが吉だと思います(未検証)。

ちなみに、上記のコード内に書かれている広告コードはAdMobさん側で用意しているテストコードです。動作確認時はご自身のコードではなくこちらを使う方が安全だと思います。下手にクリックでもしようものなら、最悪アカウント停止になることもあるようなので……。

参考までに、本プラグインの開発者さんのサンプルコードへのリンクも掲載しておきます。

あとは実機に繋いで、動作確認をしてみてください。

おわりに

さて、今回は簡単にAdMobの広告を掲載する方法を書いてきました。ちょっと前はWeb開発熱がすごかったですが、現在はアプリ開発熱が自分の中で一番熱いです。もう少しで、新作のアプリを公開できると思うので、公開したら改めて紹介させてもらいます。


CordovaアプリにAdmob広告を表示する方法