RPGツクールMVでAdMob広告を表示

この記事ではCordovaでAdMob広告を表示する方法を解説し、更に踏み込んでRPGツクールMV（私は英語版なので厳密にはRPG Maker MV）で表示させる方法も解説していますよ！

広告ユニットIDの入手

AdMob広告を表示するのですから、まずはAdMobのアカウントを作らないと話になりません。

公式に親切なヘルプがあるので、これを読みながら作業すれば広告ユニットIDを入手できます（手抜き

AdMob アカウントの開設 – AdMob ヘルプ
support.google.comの関連ページを見に行く

アカウント作成まわりは公式ヘルプに任せて、AdMobにログインしたところから解説します。

「新しいアプリの収益化」から広告ユニットIDを入手する為の手続きを進めます。
　↓
アプリを手動で追加タグを選択してアプリを追加

任意のアプリ名を入力
プラッットフォームを指定

　↓
（つづく）

スポンサードリンク

↓　記事の続きはこちらから

　↓
（つづき）
広告の種類が選べます。
ここではバナータイプを選びます。

Androidアプリは、Activityという仕組みで画面表示をしています。

その為、裏ワザ的な趣のあるCordovaでは、思い通りにいかない場面に遭遇する事も覚悟しないといけません。（実際にBrBrPONを作った時は、広告表示起因のバグでかなりハマッた。）

そういう関係から、インタースティシャル広告は、試す前からCordovaとの相性が悪い予感しかしないので試していません。
無事に使えたら私にも教えて下さい（何

　↓
広告の詳細を決定します。
自分のアプリでどのような広告を出すつもりなのか考えながら、微調整してください（後から変える事もできます）
広告ユニット名は必須で、これを入力しておかないと保存できません。
　↓
保存する事で新しいアプリと広告ユニットIDが登録されました。

完了を押して登録画面を抜けてください。

新規登録した広告ユニットIDが、アプリで実際に使えるようになるまで、ちょっと時間がかかる事もあるようです。

どうにもうまくいかない時は、次の日にやりなおす等、がっつり時間をあけて再試行してみるのも手かもしれません。

AdMobプラグインの追加

さっそく自分のCordovaプロジェクトにAdmobプラグインを導入します。

プロジェクトの作り方はこちら
Cordova開発環境の構築-PART2 を見に行く

Cordova公式のプラグイン検索で探すと、「こんなにあるのー！？」って数のAdMobプラグインが出てきます。

cordova.apache.orgでadmobプラグインを探す

それだけ俺の考えた最強のAdMobプラグインが乱立しているという事です。
色々と試して、自分が使いやすいと思った物を使ってください。

ここではcordova-plugin-admobproを試してみます。
他のプラグインも同じようなノリで使えるはずです。

検索結果一覧から名前をクリックするとnpmjs.comの解説ページに飛びます。

プラグイン毎に作者のページに飛ぶのかと思っていましたが、複数のプラグインがnpmjs.comに使い方を記載しているので、どうもそういう物と割りきって良いようです。
npmjs.comの関連ページを見に行く

わざわざここに書かなくても、Quick startに全部書いてあるのですが一応書きます・３・

まずはコマンドラインでCordovaプラグインを導入します。
この作業はプロジェクト毎に必要です。
（コマンド実行もCordovaプロジェクト内で行う）

<!-- プラグインを追加 -->
cordova plugin add cordova-plugin-admobpro

<!-- おまけ：導入中のプラグインを確認 -->
cordova plugin ls

cordova plugin add cordova-plugin-admobpro

cordova plugin ls

導入中のプラグインを確認すると、今回のプラグインを導入する前（まっさらな状態）はcordova-plugin-whitelistしかありませんでしたが、導入後は、

cordova-plugin-admobpro
cordova-plugin-extension

が新しく加わっている事がわかります。

解説ページに画像付きで、「必須データを全部入れてね」と書いてあるのでAndroid StudioのSDKマネージャーから全部入れます。うまくいかない理由の大半はこれの見落としです。（ソース私）

赤い矢印のものを導入してください。
チェックボックスは、たまたまこの画像を撮った時に「アップデートしろ！」と言われただけなので紛らわしいですが無関係です。

制御スクリプトの作成

解説ページのUsageに従って、使用の準備を進めます。

{プロジェクトのディレクトリ}\www\js\
に、admob.jsというファイルを作り下記のコードをコピペしつつ、必要な場所を書き換えてください。
（自分がわかれば名前は何でも良いです。文字コードは念のためUTF8で作ります。）

// myAdMobWindow()関数が使う広告ユニットIDの指定
var admobid={};
if(/(android)/i.test(navigator.userAgent))
{
	admobid={banner: 'Android用広告ユニットID'};
}
else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent))
{
	admobid={banner: 'iOS用広告ユニットID'};
}
else
{
	admobid={banner: 'AndroidでもiOSでもないと判断した時の広告ユニットID'};
};

// 起動した時にmyAdMobWindow()関数を実行する設定
document.addEventListener('deviceready', myAdMobWindow, false);

// 実際に広告を表示する関数
function myAdMobWindow()
{
	AdMob.createBanner({
		adId: admobid.banner, 
		isTesting: true, // 本番の時はfalse
		overlap: true, // 広告を被せて表示するか
		offsetTopBar: false, // 違いがわからん・３・；
		position: AdMob.AD_POSITION.TOP_CENTER, // TOP_CENTERで上に広告が出る。BOTTOM_CENTERで下
		bgColor: 'black' // 余白の色。アプリの余白にあわせるとよろしいかと。
	});
}

// myAdMobWindow()関数が使う広告ユニットIDの指定

var admobid={};

if(/(android)/i.test(navigator.userAgent))

{

admobid={banner: 'Android用広告ユニットID'};

}

else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent))

{

admobid={banner: 'iOS用広告ユニットID'};

}

else

{

admobid={banner: 'AndroidでもiOSでもないと判断した時の広告ユニットID'};

};

// 起動した時にmyAdMobWindow()関数を実行する設定

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

// 実際に広告を表示する関数

function myAdMobWindow()

{

AdMob.createBanner({

adId: admobid.banner,

isTesting: true, // 本番の時はfalse

overlap: true, // 広告を被せて表示するか

offsetTopBar: false, // 違いがわからん・３・；

position: AdMob.AD_POSITION.TOP_CENTER, // TOP_CENTERで上に広告が出る。BOTTOM_CENTERで下

bgColor: 'black' // 余白の色。アプリの余白にあわせるとよろしいかと。

});

}

index.htmlにもadmob.jsを読み込む記述を追加します。

Cordovaで実行するプログラムによっては、このスクリプトを読む前にdevicereadyが完了してしまい、結果的に広告表示しない可能性もあります。
そのため、どんな順番で読み込ませるのがベターかは、Cordovaで実行するプログラムで変わる可能性が高いです。

<!-- Cordovaで実行するプログラムによって挿入位置を変える必要があるかも？ -->
<script type="text/javascript" src="js/admob.js"></script>

1 2	<!-- Cordovaで実行するプログラムによって挿入位置を変える必要があるかも？ --> <script type="text/javascript" src="js/admob.js"></script>

長話をする前に断っておきますが、自分の広告ユニットIDのバナーを自分でタッチしないでください。AdMobの規約に引っかかってアカウント停止する可能性があります。

isTesting: trueに設定しておけば良さそうな印象はあるのですが、それで違反になった話もあるっぽいので触らぬ神に祟りなしという事で。

気をとりなおしてコードの説明にはいります。
プラグインの解説ではadmobid配列代入用のelse枠はWindows phone用と記載されていますが、この記述だとAndroidでもiOSでもないと判断したらこのIDを使います。

なぜこんなまわりくどい言い方をするのかというと、このプログラムではユーザーエージェントという、使用しているOSやブラウザをユーザー（の使っているハードやソフト）が自己申告する仕組みでどのOSなのかを判別していますので、もしかしたら表向きandroidなのに機種独自の申告をしてあてはまらない可能性も起こるかもしれないからです。

こだわりがなければ「俺は○○のアプリはつくらん！」という場合も、同じIDで埋めておくとよいかもしれません。

ちなみに、例えばAndroid用につくった広告ユニットIDはiOSでまったく表示できないという事はないです。
（iOSなのにAndroid関連の広告が出る可能性はありますが。）

さらにちなみに、これを書きながら「KindleってちゃんとAndroidって答えてくれるの？」とふと心配しましたが、独自のブラウザ（silk）もAndroidと答えるようなので大丈夫みたい？

User Agent Strings and Detection – Amazon Silk
docs.aws.amazon.comの関連ページを見に行く

実機で動作確認する

実機で動作確認する前に念のためもう１回。
自分の広告ユニットIDのバナーを自分でタッチしないでください（２回目）

実機で動作確認する方法の詳細はこちらの記事を参照してください
Cordova開発環境の構築-PART3 を見に行く

ここまで書いておいてなんですが、「なるべく単純な状態で試せた方が良いだろ」と思って、Cordovaプロジェクトのデフォルトページに追加する話で進めていたら、実際に試した時に何故か表示しませんでした。

白い物体が本来表示されるべきものを一部隠していたので、何かが表示崩れの原因になっていたのかもしれないし、body要素のサイズ（width、height）が無さすぎると表示が崩れるのかもしれない（たぶん

サンプル用に適当なページをつくる元気が無かったので、急遽RPG Maker MVで広告を出してみる事にしました。

（もともとそのページをつくる前準備で、まずはCordovaでAdMob広告を表示するページをつくろうとしていたのですけどね・・・）

ツクールMV側の前準備

HTMLとして書きだしたツクールMV作品を、cordovaで動作させる過程については別ページでの解説に譲ります。
そちらを参照してください。

関連記事
RPGツクールMV作品をスマホアプリにする方法-1

デフォルトの正方形な画面サイズだと、スマホの画面サイズでは余白ありまくりで大変ダサいので、YEP_CoreEngineプラグインを使って画面サイズを変えてみます。

YEP_CoreEngineプラグイン紹介ページ
yanfly.moeの関連ページを見に行く

※この方のプラグインはどれも非常に強力な上に、動画の真似をするだけで使い方がわかるのでかなりイケてます。

ただし、これをやるとステータス表示関連の崩れ具合がはんぱないです。
ある程度の調整はプラグインでできますが、微調整は自分でJavaScriptを書くしかありません（少なくとも今のバージョンでは）

そういう選択肢もあるという事で無理に使う必要はありません。

AdMob表示設定のポイント

ポイントというか何というか、上で作ったadmob.jsとまったく同じ物をそのままindex.htmlのscriptタグ列の一番最後に読み込ませるだけです。（main.jsの下に書く）

<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/admob.js"></script>

1 2	<script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/admob.js"></script>

よっしゃでたー！

広告が表示している間、目に見えて描画のパフォーマンスが下がっていますがやむなしか・・・

画像では、広告を被せる設定の「overlap: true」で表示しています。

「overlap: false」に設定すると、広告とゲーム画面が分離して表示されますが、そのしわよせとしてバナーを表示する余白が十分にない時はゲーム画面が縮小表示されてしまいます。

完全な16:9にこだわるか、広告表示に都合のよい半端なサイズにするのかは思案のわかれるところです。

さいごに

広告を出す位置を配慮したゲーム内容や画面サイズ（あえて広告分の余白を残すとか）にする必要がありますので、なるべく早い段階でとりかからないと修正が厳しくなると思います。

後は好き好きでAdMob側の設定を調整したり、admob.jsのmyAdMobWindow()関数内の設定を変えながら違いを試行錯誤して、「俺の考えた最強のAdMob設定」を編み出すだけです。

もっと頑張ってコモンイベントとかから好きなタイミングで広告表示できると良さそうですけど、スクリプト書くだけで呼べるのかな？？？

個人的にはゲームオーバー時とかに表示すると良いのではと思うのですが、ゲームオーバー時に任意のコモンイベントを起こす事自体が、デフォルトではできなさそうなのでそこからはじめないとだ・３・；

気合のある時に試します。
（誰か都合の良い広告表示プラグイン作らないかなと思いながら）

PRESENT CALL

RPGツクールMVでAdMob広告を表示

広告ユニットIDの入手

AdMobプラグインの追加

制御スクリプトの作成

実機で動作確認する

ツクールMV側の前準備

AdMob表示設定のポイント

さいごに

コメントを残すコメントをキャンセル

広告ユニットIDの入手

AdMobプラグインの追加

制御スクリプトの作成

実機で動作確認する

ツクールMV側の前準備

AdMob表示設定のポイント

さいごに

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル