現在、Cordovaでアプリを開発しています。iOS版とAndroid版でソースコードを統一しておきたいのですが、nendで広告を出すためにはiOS版とAndroid版で実行するコードを切り替える必要があります。nendでの広告以外でも使う可能性があるのでメモとして残しておきたいと思います。
前提知識
nendとは
iOSアプリやAndroidアプリに広告を出すためのサービスです。nendではiOS用やAndroid用のモジュールを組み込んで広告を出す方法と、HTML/JavaScriptの広告コードを入れる方法があります。
Cordovaでnendによる広告を出すためには
CordovaではJavaScriptが実行できるので、HTML/JavaScriptによる広告表示を採用しました。
HTML/JavaScriptコードはnend管理画面の「広告コード」を参照します。
この記事を参考にしました。
AndroidアプリでnendSDKが使えなくてもnend広告を表示する方法 | ADN LAB's Blog
やったこと
device情報を判断する
今回はプラグインcordova-plugin-deviceを採用しました。
github.com
インストールは以下の通りです。
cordova plugin add cordova-plugin-device
このプラグインを使うと、デバイス情報が読み込める状態の時に、次の変数にデバイス情報が入ります。
device.platform
devicereadyで発火してコードを実行する
プラグインcordova-plugin-deviceでデバイス情報(つまり、iOSかAndroidか)を判定するためには、デバイス情報を読み込める状態になっている必要があります。そこで、devicereadyをリスナーにセットして、発火後判定することとします。以下のようなソースコードとなります。
if(typeof device === 'undefined'){ document.addEventListener("deviceready", onDeviceReady, false); }else{ onDeviceReady(); } function onDeviceReady() { //ここにnendの広告に関するコードを書く } </script>
iOSでdevicereadyが発火しないことへの対処
iOS10以降だとContent-Security-Policyの設定をいじらないとdevicereadyが発火しない様子です。以下のサイトを参考にしました。
Cordova - Monaca Cordova7.1へのアップデートに伴うdeviceready状態へ移行しないエラー(115191)|teratail
ソースコードはそのまま引用して使いました
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-eval' 'unsafe-inline' gap://ready file:; style-src 'self' 'unsafe-inline'; media-src *; img-src * 'self' filesystem: data: blob:;" />
gap://ready file: あたりが重要なようです。
nendAdLoader.jsをいじる
nendAdLoader_android.jsを作る
nendAdLoader.jsをダウンロードし、www/js/以下に保存しました。そのあと少し改造しました。具体的にはファイル名をnendAdLoader_android.jsと変え、nend_paramsに関する部分をandroid_nend_paramsに置換しました。これにより、Android版ではnendAdLoader_android.jsを読み込めば良いこととなります。
なお、iOS版ではそのままnendAdLoader.jsのファイル名をnendAdLoader_ios.jsと変えただけで、ファイルの中身は変えませんでした。
JavaScriptコード内でnendAdLoader_android.jsやnendAdLoader_ios.jsを読み込む
今回はjQueryを使いました。コードとしては簡単で、以下のように書くだけでnendAdLoader_android.jsファイルを読み込めます。
$.getScript("./js/nendAdLoader_android.js");
最終的なコード
上記をまとめると、以下のようなコードとなります。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-eval' 'unsafe-inline' gap://ready file:; style-src 'self' 'unsafe-inline'; media-src *; img-src * 'self' filesystem: data: blob:;" /> ・・中略・・ </head> <body> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/libs/jquery-3.3.1.min.js"></script> <div id="footer"> <script type="text/javascript"> var android_nend_params = {"media":*****,"site":******,"spot":******,"type":*,"oriented":*}; var nend_params = {"media":*****,"site":******,"spot":******,"type":*,"oriented":*}; if(typeof device === 'undefined'){ document.addEventListener("deviceready", onDeviceReady, false ); } else { onDeviceReady(); } function onDeviceReady(){ if("Android" == device.platform){ $.getScript("./js/nendAdLoader_android.js"); } else { $.getScript("./js/nendAdLoader_ios.js"); } } </script> </div> </body> </html>