【Monaca】Onsen UIでnend広告が表示されない
最新記事はこちら。
Onsen UIを使用してnend広告を表示させようと、下記コードを設置しても表示されない。(※テスト用コード)
どうして?と悩む方も多いと思う。

1 2 3 4 |
<script type="text/javascript"> var nend_params = {"media":82,"site":58536,"spot":127513,"type":1,"oriented":1}; </script> <script type="text/javascript" src="https://js1.nend.net/js/nendAdLoader.js"></script> |
答えは簡単。
実際は広告が表示されているが、Onsen UIはCSSでz-indexを使用しているため、Onsen UIが表示した画面の裏に隠れてしまう。
広告用のコードをdivタグで囲い、z-index: 99でOnsen UIが表示した画面の上に表示させる。
既存のブラウザで表示させたい場合は、【Monaca】nend広告を既存ブラウザで表示するを参照。
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 |
<!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:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> var nend_params = { "media":82,"site":58536,"spot":127513,"type":1,"oriented":1 }; ons.bootstrap(); </script> <style> #div_nend { position: absolute; bottom: 0px; width: 100%; height: 50px; z-index: 99; } </style> </head> <body> <ons-page> <ons-toolbar fixed-style> <div class="center">nend広告テスト</div> </ons-toolbar> </ons-page> <div id="div_nend"> <script type="text/javascript" src="http://js1.nend.net/js/nendAdLoader.js"></script> </div> </body> </html> |
【Monaca】Onsen UI ons-list のズレをなくす
Onsen UIはすばらしいフレームワークだが、MonacaのAndroid用アプリで使用すると難点もある。
例えば、ons-list。
iPhoneの設定画面のようなイメージの画面が再現できる。
しかし、使い方によっては問題が発生する。
例えば、左はons-listを5回使用した場合、右はons-list-itemを5回使用した場合。
ご覧のとおり、同じ並びを期待するもズレが発生してしまう。
Continue reading
【Monaca】Nifty mBaaSのプッシュ通知を実装する
Onsen UI + AngularJS
Cordovaプラグイン:ncmb-push-monaca-plugin v2.0.1(※バージョン要注意)
Niftyのサンプルでは、document.addEventListener(“deviceready”, …..となっているが、ons.ready()はイベントの最後に実行されるので、その中にプッシュ通知の処理を記述しても問題ない。
プッシュ通知によって受け取ったJSONデータをons.notification.alert()を使ってダイアログ表示する。
JSONデータはダイアログ表示に必要な形式で作成し、新しいプッシュ通知画面のJSONの項目に設定して送信する。
type: 将来に使用
title: ダイアログのタイトル
message: ダイアログのメッセージ(HTML形式)
button1: ダイアログのボタン
button2: 将来に使用
button3: 将来に使用
JSONデータ
1 |
{"type":"1","title":"Monacaで作ったアプリ","message":"今日も暑いですね。<br>水分を補給しましょう。","button1":"OK"} |
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 |
ons.ready(function() { var appKey = "アプリケーションキー"; var clientKey = "クライアントキー"; var senderId = "12桁のプロジェクト番号"; window.NCMB.monaca.setHandler(showPushNotification); function showPushNotification(jsonData) { // JSON.parse()は不要 var data = angular.copy(jsonData); data.func = function(){}; // プッシュ通知ダイアログ表示 ons.notification.alert({ messageHTML: data.message, title: data.title, buttonLabel: data.button1, animation: "default", callback: data.func }); } window.NCMB.monaca.setDeviceToken(appKey, clientKey, senderId); window.NCMB.monaca.setReceiptStatus(true); // ID取得 var installationId = ""; var count = 0; var result = setInterval(function() { window.NCMB.monaca.getInstallationId(function(id) { if (id) { clearInterval(result); installationId = id; } }); count++; if (count > 9) { clearInterval(result); } }, 5000); } |