[:en]Monaca | How to view Ad of Nend - No.4/5[:ja]Monaca | モナカでNendの広告を表示する方法その④

すると、案内メッセージが表示されます。
この案内は今後もIDEを表示するたびに表示されます。
もう表示させたくない場合は左下のチェックを付けます。

“閉じる”ボタンで案内を閉じます。

プロジェクト作成直後は下のような感じになっていると思います。
index.htmlがアプリの起動時に表示される画面を設定しているファイルです。

ここで、“プレビュー”ボタンを押してみましょう。

Webブラウザ上でアプリの実行画面がシミュレーションされて表示されます。
既にボタンなどが表示されていますが、これはテンプレートが予め設定しているボタンです。
今回はこのUI部分に関しては説明を行いません。またの機会に説明します。

Monacaでの開発では主にこのプレビュー画面と、
実機を使ったデバッグの２通りでテストを行います。

実機でしか動作しない機能（例：カメラなど）もありますので、
プレビュー画面だけではテストが完結しません。
また、実際に実機で見るのとプレビュー画面でみると細部が違っていたりしますので、
プレビュー画面はあまり過信しないように注意してください。

それでは、このプロジェクトにNendの広告を表示する処理を追加していきます。

まず、プロジェクトに”data.js”というファイル名でjavascriptファイルを追加します。

“wwwフォルダ”を右クリックし、“新規ファイル”をクリックします。

ファイル名を入力する画面が出てきますので、”data.js”と入力して“OK”を押します。

プロジェクトに”data.js”が追加されました。

javascriptファイルは、アプリの動作について記述するファイルです。
htmlの中に直接記述することもできますが、今後も再利用することを考えて
data.jsというファイルに分けて利用します。

data.jsに以下のコードを記述します。

data.js：

// 広告制御
var nend_params;
    
//iOS/Androidアプリそれぞれに共通のコードとする場合は下記のように処理を切り分けます。
if( monaca.isIOS ){
    nend_params = {"media":*****,"site":*****,"spot":126326,"type":*,"oriented":*};
} else if( monaca.isAndroid ){
     nend_params = {"media":*****,"site":*****,"spot":*****,"type":*,"oriented":*};
} else {
    console.log('this is not Mobile');
     nend_params = {"media":*****,"site":*****,"spot":*****,"type":*,"oriented":*};
}
               
//広告をタップするとそのままリンク先を開いてしまうことがありますので、その対策を記述します。
window.addEventListener(
    'load',
    function() {
        var nend_links = document.querySelectorAll('.nend_wrapper a');
        for(var i = 0; i < nend_links.length; i+=1)
        {
            var href = nend_links[i].href;
            nend_links[i].href = "#";
            nend_links[i].onclick = function(){monaca.invokeBrowser(href); return false;}
        }
    }
);

これは、Nendから提供される広告を指定のパラーメータで表示する処理です。
また広告クリック時の誤動作を防ぐための処理も記載しています。

javascriptについての説明は今回行いません。次の機会に説明します。
今はとりあえず、真似をしてみてください。

この中のnend_paramsというパラメータが、
Nend広告を指定するパラメータです。
Nendから広告を取得した後、今は”xxxxxx”となっている値を変更します。

次に、“index.html”ファイルにコードを追記します。

今はまだ、以下のようなコードになっていると思います。
index.html:

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="plugins/plugin-loader.css">     
  <script type="text/javascript" src="plugins/plugin-loader.js"></script>
  
  <script>
    angular.module('myApp', ['onsen.directives']);   
    
    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {
        // Now safe to use the Cordova API
    }
  </script>    
  
</head>


<body>    
  
  <ons-screen page="home_navigator.html"></ons-screen>
 
</body>
</html>

ここに、javascriptファイルを読み込むコードを追加します。
<head>と</head>の間に

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

を追記します。
javascriptファイルはプロジェクトに追加するだけでは読み込まれない（使えない）ので、
htmlのhead部分にこのファイルを利用しますよ、と教えてあげる必要があります。

また、実際に広告を表示させるコードを追加します。
<body>と</body>の間に

  <script type="text/javascript" src="http://js1.nend.net/js/nendAdLoader.js"></script>

を追記します。

変更を加えたあとのindex.htmlファイルはこんな感じになります。
index.html (変更後):

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="plugins/plugin-loader.css">     
  <script type="text/javascript" src="plugins/plugin-loader.js"></script>
  <script type="text/javascript" src="data.js"></script>
  
  <script>
    angular.module('myApp', ['onsen.directives']);   
    
    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {
        // Now safe to use the Cordova API
    }
  </script>    
  
</head>

<body>    
  <!-- 広告 -->
  <script type="text/javascript" src="http://js1.nend.net/js/nendAdLoader.js"></script> 
  
  <ons-screen page="home_navigator.html"></ons-screen>
 
</body>
</html>

ひとまずこれで、Nendの広告を利用する準備はほぼ完了です。

このあとはNendへ登録を行い、広告を作成します。
広告を作成したら、先ほどのnend_paramsの設定値を変更します。

それでは、Nendへ登録してみましょう。

Share on Tumblr