※2018/06/10 実際の広告コードを記載してしまったので、その箇所を修正。
nend
のネイティブアド広告を一定の間隔で更新させるサンプルコードを作成してみた。
nendの広告コードを実行した際に生成されたHTMLをすべて削除し、新たに広告コードを呼び出すことで新しい広告を取得することができる。
※削除しないと広告コードを呼び出した分だけscript・img・inputのタグが蓄積される。
あとはOnsen UI上に取得した広告HTMLを表示させるだけ。
これに少し手を加えて、アプリに実装する予定。
まず、nendのネイティブアド広告のレイアウトを下記のように設定する。
|
1 2 3 4 5 6 |
<div id="nend_nativeadspace"> <div class="div-ntad"> <div class="div-nendnt-img"><a href="{{CLICK_URL}}" target="_blank" rel="noopener"><img src="{{SMALL_SQUARE_IMAGE}}" width="80" height="80" /></a></div> <div class="div-nendnt-text"><span class="span-nendnt-text"><strong>{{AD_DEFINE_TAG:ptn=1,deco=2}}</strong><a href="{{CLICK_URL}}" target="_blank" rel="noopener"><span>{{LONG_TEXT}}</span></a></span></div> </div> </div> |
次に、Monacaで、「Onsen UI V2 Angular 1 Minimum」プロジェクトを作成し、下記ファイルを編集する。
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 |
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/angular/angular.min.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <script src="lib/onsenui/js/angular-onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.bootstrap() .factory("$nativead", function () { var sv = { html: null // 広告html保存用 }; return sv; }) // ネイティブアド初期化 .directive("initNativeAd", ["$compile", "$interval", function ($compile, $interval) { return { restrict: "A", link: function (scope, elem, attr) { addEventListener("load", function () { refreshNativeAd(); // 60秒ごとにネイティブアド広告を更新 var timer = $interval(refreshNativeAd, 60000); function refreshNativeAd() { var i = 0; var ad = document.body.querySelector("get-native-ad"); if (ad) { // 前回取得した広告を削除 document.body.removeChild(ad); // nendがbody内に生成したscriptを削除 var njfeed = document.body.querySelectorAll("script"); if (njfeed.length > 0) { for (i = 0; i < njfeed.length; i++) { if (njfeed[i].src.indexOf("njfeed.php") != -1) { document.body.removeChild(njfeed[i]); } } } // nendがbody内に生成したimgを削除 var imp = document.body.querySelectorAll("img"); if (imp.length > 0) { for (i = 0; i < imp.length; i++) { if (imp[i].src.indexOf("impression.php") != -1) { document.body.removeChild(imp[i]); } } } // nendがbody内に生成したinputを削除 var ids = document.body.querySelector("input[id^=nend_acquired_ids_]"); if (ids) { document.body.removeChild(ids); } } // 広告コードを動的に生成 var nativead = document.createElement("get-native-ad"); nativead.style.visibility = "hidden"; var param = document.createElement("script"); param.type = "text/javascript"; // 広告コードのパラメータを設定 param.innerText = "var nend_params = {\"media\":xxxxx,\"site\":xxxxxx,\"spot\":xxxxxx,\"type\":xx,\"oriented\":x};"; nativead.appendChild(param); var loader = document.createElement("script"); loader.type = "text/javascript"; loader.src = "https://js1.nend.net/js/nendAdLoader.js"; nativead.appendChild(loader); var linkFn = $compile(nativead); var output = linkFn(scope); elem.append(output); } }, false); } }; }]) // ネイティブアド取得 .directive("getNativeAd", ["$interval", "$nativead", function ($interval, $nativead) { return { restrict: "E", link: function (scope, elem, attr) { var count = 0; var timer = $interval(function () { // nendが生成した広告htmlを取得 var space = elem[0].querySelector("div[id^=nend_nativeadspace]"); if (space) { $interval.cancel(timer); // 広告htmlを複製 $nativead.html = angular.copy(space); // 広告htmlを削除 elem[0].removeChild(space); } else { count++; if (count > 30) { $interval.cancel(timer); $nativead.html = null; } } }, 1000); } }; }]) // ネイティブアド表示 .directive("showNativeAd", ["$compile", "$interval", "$nativead", function ($compile, $interval, $nativead) { return { restrict: "A", link: function (scope, elem, attr) { // 広告html生成の監視 scope.$watch(function () { return $nativead.html; }, function (newVal, oldVal) { if (newVal) { // 前回表示した広告htmlを削除 var space = elem[0].querySelector("div[id^=nend_nativeadspace]"); if (space) { elem[0].removeChild(space); } // 新しい広告htmlを表示 var linkFn = $compile(newVal); var output = linkFn(scope); elem.append(output); } }); } }; }]) .controller('HelloController', function() { this.world = 'World'; }); ons.ready(function() { console.log("Onsen UI is ready!"); }); </script> </head> <body init-native-ad> <ons-page ng-controller="HelloController as hello"> <ons-toolbar> <div class="center">Introduction</div> </ons-toolbar> <div class="content" style="margin: 10px;"> <p>What is your name?</p> <p> <ons-input modifier="underbar" ng-model="hello.world" placeholder="Your name" float></ons-input> </p> <p> Hello, {{ hello.world || 'stranger' }}! </p> <div show-native-ad></div> </div> </ons-page> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
#nend_nativeadspace { width: 100%; height: 80px; background-color: #fff; } .div-ntad { display: table; margin: 0 auto; width: 320px; height: 80px; } .div-nendnt-img { display: table-cell; width: 80px; height: 80px; } .div-nendnt-text { display: table-cell; width: 240px; height: 80px; font-size: 13px; line-height: 1.2em; vertical-align: middle; word-wrap: break-word; } .span-nendnt-text { display: table-cell; padding-left: 5px; vertical-align: middle; } |
