読者です 読者をやめる 読者になる 読者になる

F@N Ad-Tech Blog

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

RPGツクールMVに力技でnendのインタースティシャル広告を実装した(iOS編)

iOS JavaScript Objective-C

こんにちは、nend SDK担当のt_kinamiです。

本日発売されたRPGツクールMVが、スマホ用にアプリを作成できる! ということで、早速nendを組み込んでみました。

どうせならと思い、ゲームと相性の良いインタースティシャル広告を出してみました。

広告を表示するまでに、大きく分けて3つの処理が必要となります。

  1. ゲーム内イベントで特定のURLスキームにアクセス
  2. cordovaでURLをフック
  3. SDKを使ってインタースティシャルを表示

1.ゲーム内イベントで特定のURLスキームにアクセス

RPGツクールMV上で広告を表示するイベントを作ります。 今回は適当に人を配置して、接触したら広告を表示するイベントを作ります。

・イベントを作って スクリーンショット 2015-12-17 16.28.16

・"上級"の"スクリプト"を選んで スクリーンショット 2015-12-17 16.28.34

スクリプトを書きます

[java] window.location.href = 'nendShowInterstitial://'; [/java]

(このURLスキームは、広告を出す為のダミーのURLスキームです。) スクリーンショット 2015-12-17 15.47.34

2.cordovaでURLをフック

イベントを受け取るための仕込みを行います。 RPGツクールMV のヘルプから、 iOSアプリへの変換 の手順にしたがってガンガン進めていきます。

4-1-5 config.xmlファイルの編集 ここで一旦ストップします。ヘルプ上では、

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

とありますが、ここを削除してしまうと広告が正常に表示されなくなってしまうので、削除しないでください。

3.SDKを使ってインタースティシャルを表示

ゲームからイベントを受け取り、広告を表示する処理を実装します。 Cordovaで生成されたxcodeprojファイルをXcodeで開きます。 手順通りに進めていれば、以下の画像の辺りに作成されています。 スクリーンショット 2015-12-17 17.30.26

3−1.プロジェクトにnend SDKを追加

まず、以下のURLを参考に、nend SDKをプロジェクトに追加します。

https://github.com/fan-ADN/nendSDK-iOS/wiki/SDKを手動で追加する この手順の 3.リンカフラグの追加 まで行い、nend SDKを追加します。

3−2.広告のロード

次にAppDelegate.m に、広告の読み込み処理を追加します。

ヘッダーファイルのインポート文を追記します。

[java]

import "NADInterstitial.h"

[/java]

スクリーンショット 2015-12-17 17.55.35

[java] - (BOOL)application:(UIApplication)application didFinishLaunchingWithOptions:(NSDictionary)launchOptions [/java]

メソッド

[java] [[NADInterstitial sharedInstance] loadAdWithApiKey:@"308c2499c75c4a192f03c02b2fcebd16dcb45cc9" spotId:@"213208"]; [/java]

を追加します。 スクリーンショット 2015-12-17 17.55.56

上記で使用しているApiKeyとSpotIDはテスト用です。実際に組み込むときはご自身のコードに書き換えてください。

3−3.cordovaライブラリの編集

次に、nend SDKを読み込ませるための設定を行います。

まず、 CordovaLib.xcodeproj の Target > Build Phases > Headers に、nendのHeaderを追加します

以下の順に選択します addHeader1

"add other"をクリックし、NendAdのヘッダーファイルをすべて追加します。 addHeader2

以下のように追加できればOKです。 addHeader3

3−4.広告の表示

最後に、 CDVWebViewDelegate.m に、インタースティシャルを表示する処理を追加します。

ヘッダーファイルのインポート文を追記します。

[java]

import "NADInterstitial.h"

[/java]

スクリーンショット 2015-12-17 18.03.29

[java] - (BOOL)webView:(UIWebView)webView shouldStartLoadWithRequest:(NSURLRequest)request navigationType:(UIWebViewNavigationType)navigationType [/java]

メソッド内に、

[java] NSString *urlStr = request.URL.absoluteString; if ([urlStr hasPrefix:@"nendshowinterstitial://"]) { [[NADInterstitial sharedInstance] showAd]; return NO; } [/java]

を追加します。 スクリーンショット 2015-12-17 18.04.01

以上で準備は完了です。

実際にゲームを起動して確認してみます。

配置した人に重なると スクリーンショット 2015-12-17 17.18.54

広告が表示されました。 スクリーンショット 2015-12-17 17.18.59

今回は、WebViewのURLの遷移をiOSのネイティブコードへの通知に使うというやや強引な手法での実装となっております。 処理の衝突等が発生しないよう、同様の処理を組み込む場合は、URLスキームを変更するなどで対応してください。

※環境設定やコマンド操作でMacに起きたいかなる不具合も保証いたしません。 ※実装は自己責任でお願いします。