F@N Ad-Tech Blog

株式会社ファンコミュニケーションズ nend・nex8・viidleのエンジニア・技術ブログ

RPGツクールMVでnendの広告を出すプラグイン(非公式)を作ってみた ※副産物でcordova プラグイン(非公式)も作った

こんにちは。
nendSDK担当のt_kinamiです。

以前に 力技でインタースティシャル広告を出す記事を書きましたが、
今回改めて、広告を出すプラグインを作ってみました。
今度はAndroidでも使えます!
バナーも出せます!!


非公式です!!
ファンコミュニケーションズおよびnend公式ではなく個人アカウントなのでフォロー、サポートはできません。

処理の流れとしては、以下のように実現しています

  • RPGツクールMVのプラグインコマンドをイベントから実行
  • RPGツクールMVのプラグインからcordovaプラグインを実行
  • cordovaプラグインで、iOS, Android それぞれのnendSDKの処理を実行

実装は以下の手順で行います。

  1. 広告を出すプラグイン(RPGツクールMV用)をプロジェクトに組み込む
  2. 広告関連のイベントを作成する
  3. cordovaテンプレートにプラグイン(cordova用)を組み込む
  4. ビルドする

1. 広告を出すプラグイン(RPGツクールMV用)をプロジェクトに組み込む

プラグインのダウンロード

ここからプラグインをダウンロードします。
RPG-tkool-plugin

plugins 配下の.jsファイルがプラグインとなります。

  • NendBanner.js
  • NendInterstitial.js

プラグインをプロジェクトに追加

RPGツクールMV ヘルプ の、
RPGツクールMV > 資料集 > プラグインを有効にする方法 に従って、プラグインを追加します。


f:id:fan_t_kinami:20161007134408p:plain
ファイルをコピーして


f:id:fan_t_kinami:20161007134619p:plain
プラグイン追加!

パラメーター設定

プラグインが追加できたら組み込んだプラグインにパラメーターを設定します。

NendBannerで設定するパラメーター
  • iOSApiKey : iOSのバナー広告枠の apiKey
  • iOSSpotID : iOSのバナー広告枠の spotID
  • androidApiKey : androidのバナー広告枠の apiKey
  • androidSpotID : androidのバナー広告枠の spotID
  • isAdjust : 広告サイズの自動調整 をするかどうか

デフォルトでは、320 x 50 のサイズのサンプルバナーが表示するようになっています。

f:id:fan_t_kinami:20161007135148p:plain

NendInterstitialで設定するパラメーター
  • iOSApiKey : iOSのインタースティシャル広告枠の apiKey
  • iOSSpotID : iOSのインタースティシャル広告枠の spotID
  • androidApiKey : androidのインタースティシャル広告枠の apiKey
  • androidSpotID : androidのインタースティシャル広告枠の spotID

デフォルトでは、サンプルの広告を表示するようになっています。

f:id:fan_t_kinami:20161007135202p:plain

広告関連のイベントを作成する

広告を表示するには、以下の2つのコマンドを実行する必要があります。

  1. 広告を読み込む
  2. 広告を表示する

プラグインコマンドを実行するには、イベントを作成し、プラグインコマンドで実行します。

広告を読み込むイベントを作成する

広告を表示する前に事前に読み込みする必要があります。

広告を読み込むには、 load コマンドを実行します。

バナー広告の読み込み

NendBanner load

インタースティシャル広告の読み込み

NendInterstitial load

以下のイベントは、バナー広告とインタースティシャル広告の読み込みを行った後に消去されるようなサンプルです。
ゲーム起動時に1度だけ実行すればOKです。

f:id:fan_t_kinami:20161007135842p:plain

広告を表示するイベントを作成する

次に、任意のタイミングで広告を表示するイベントを作成します。
例ではキャラクターに話しかけたタイミングでプラグインコマンドを実行しています。

バナー広告を上に表示

NendBanner show

バナー広告を下に表示

NendBanner show bottom

f:id:fan_t_kinami:20161007140453p:plain
下に広告を表示する例

f:id:fan_t_kinami:20161007140552p:plain

バナー広告を非表示

NendBanner hide

f:id:fan_t_kinami:20161007140614p:plain

インタースティシャル広告表示

NendInterstitial show

f:id:fan_t_kinami:20161007140722p:plain
f:id:fan_t_kinami:20161007140808p:plain
インタースティシャル広告の例


以下は必要に応じて実装してください。

バナー広告の自動リロード停止

NendBanner pause

f:id:fan_t_kinami:20161007141006p:plain

バナー広告の自動リロード再開

NendBanner resume

f:id:fan_t_kinami:20161007141059p:plain

バナー広告の完全消去 (消去した広告は再度読み込みしないと表示できません)

NendBanner release

f:id:fan_t_kinami:20161007141116p:plain

3. cordovaテンプレートにプラグイン(cordova用)を組み込む

iOS, Android共に、cordovaでの提供となります。

RPGツクールMV ヘルプ の
RPGツクールMV > 資料集 > iOSアプリへの変換<ipaファイルの作成> に従って、
cordova用のパッケージングを進めます。

androidプラットフォームの追加

途中、 4-1-2 iOSプラットフォームの追加 で、androidプラットフォームの追加も行ってください。

$ cordova platform add android

HTMLアクセス可能にする

また、 4-1-5 config.xmlファイルの編集 で、

また、〈access origin="*"〉という行がありますが、ゲームのHTMLから外部のHTMLにアクセス可能にする設定です。 必要ありませんので、この行は削除しておきましょう。

とありますが、ここを削除してしまうと広告が正常に表示されなくなってしまうので、削除しないでください。
すでに削除している場合は、この行を復活させてください。

cordovaプラグインを追加する

4-1-6 ビルド を行う前に、以下のコマンドを実行して cordovaテンプレートにnendの広告を表示させるcordovaプラグインを追加します。

$ cordova plugin add https://github.com/TakeshiKinami/cordova-plugin-nend.git


あとは手順通りにビルドして広告が表示されたら組み込み完了です!


今回のプラグインはシンプルに実装してもらえるようにと、
バナー、インタースティシャル共に広告枠1つのみの対応としています。
複数の広告枠で使い分けたい場合は、cordovaプラグインを直接実行することもできますので、そちらに挑戦するのも良いかと思います。