ゲレの工房

ゲーム好きの中の人が、自分が作りたいアプリを作る記録です

CordovaでiOS版とAndroid版で実行するソースコードを切り替え、nend広告を出すメモ

現在、Cordovaでアプリを開発しています。iOS版とAndroid版でソースコードを統一しておきたいのですが、nendで広告を出すためにはiOS版とAndroid版で実行するコードを切り替える必要があります。nendでの広告以外でも使う可能性があるのでメモとして残しておきたいと思います。


前提知識

nendとは

iOSアプリやAndroidアプリに広告を出すためのサービスです。nendではiOS用やAndroid用のモジュールを組み込んで広告を出す方法と、HTML/JavaScriptの広告コードを入れる方法があります。

Cordovaでnendによる広告を出すためには

CordovaではJavaScriptが実行できるので、HTML/JavaScriptによる広告表示を採用しました。
HTML/JavaScriptコードはnend管理画面の「広告コード」を参照します。
f:id:gelehrtecrest:20180426174433p:plain

この記事を参考にしました。
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でデバイス情報(つまり、iOSAndroidか)を判定するためには、デバイス情報を読み込める状態になっている必要があります。そこで、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>

終わりに

上記コードでひとまず一つのコードでiOS版とAndroid版にnend広告を出し分けることができるようになりました。iOS版とAndroid版で切り替える部分は他の場所でも出てきそうなので、今回の経験が活かせるかなと思っています。
今回はここまで
それではー


広告