2014年
仕事納めで、今年ももうすぐ終わります。
毎年思う事ですが、本当に1年過ぎるのが年々早くなる気がします。
ブログを始めて、書くペースは少なくなりましたが、
何とか年を越せそうです。
ブログも含めて、今年は新しい事を始めた年になりましたが、
来年は続けて身になるようにして行きたいと思います。
それでは。皆様よいお年を。
onsenUIでnend広告表示
monacaのドキュメントにやり方が載ってますが、
nend ( 日本のアドネットワーク ) - Monacaドキュメント
このままでは、うまく表示されない場合があります。
OnsenUIなどはページを重ねている為に、広告が隠れてしまうようです。
コミュニティフォーラム、
Onsen UI を使ったアプリへの広告掲載について | MonacaでHTML5モバイルアプリ開発
や、こちらを参考にさせて頂きました。
MonacaでOnsenUIを使用したアプリにnend広告を表示する方法 - おいしい技術
今回は、タブバーを使っていたので、
こんな風にタブバーの上に広告を表示する事にしました。
まずは、index.htmlに広告表示させるスクリプトを書きます。
: </ons-tabbar> <div id="nend_wrapper"> <script src="http://js1.nend.net/js/nendAdLoader.js"></script> </div>
実際表示させたいページには以下のように、「ons-bottom-toolbar」で、
下のツールバーを表示して、その中に広告を表示する為のdivを書きます。
<ons-page ng-controller="ItemListController" id="itemListPage"> : </ons-list> <ons-bottom-toolbar modifier="nend"> <div class="new_nend_wrapper"></div> </ons-bottom-toolbar> </ons-page>
スクリプトでは、ページ初期化のイベント「pageinit」で、
index.htmlに出力された広告を退避させ、
退避させた広告を実際に表示させたい要素にコピーします。
document.addEventListener("pageinit", function(e) { if (e.target.id == "itemListPage") { setNend(); } }, false); // nend広告表示用 var nend_params = {"media":??,"site":?????,"spot":??????,"type":1,"oriented":1}; //←実際の値に変える var $nend = null; function setNend() { setTimeout(function() { // 広告を退避する if (!$nend) { $nend = angular.element(nend_wrapper); } angular.element(document.querySelectorAll('.new_nend_wrapper')).append($nend); var nend_links = document.querySelectorAll('.new_nend_wrapper a'); for(var i = 0; i < nend_links.length; i+=1){ (function() { var href = nend_links[i].href; nend_links[i].href = "#"; nend_links[i].onclick = function(){window.open(href, '_system', 'location=yes'); return false;} })(); } }, 1000); }
リンクをwinsow.openで開くようにしているのは、
monacaのドキュメントに載っている方法ですが、androidでは不要？かも
「ons-bottom-toolbar」で「modifier="nend"」指定して、
スタイルシートを指定して、色と高さの調整をしています。
.bottom-bar--nend{ background-color: white; height: 50px; }
monacaの場合はこれで動いたはずですが、
広告をクリックしても、全然動かず試行錯誤していたところ、
inAppBrowserプラグインが必要だと分かり、
cordova plugin add org.apache.cordova.inappbrowser
でインストール。無事表示されました。
あと、「jQuery Mobile」を読み込んでいたら、nendが表示されなくなってしまいました。
「jQuery Mobile」とOnsenUIは同時に使うべきではないんでしょうね。
jQuery自体も、AngularJSの「jqLite」で代用出来たので、
jQueryは使わないようにしました。
アプリ公開
やっと完了しました。
nend広告を表示するのに、手間どってしまいました。
手順はまた、別でまとめようと思います。
初心者が作ったアプリですが、開発のやり方の勉強になりました。
一応公開しておきます。
機会があればGitHubでソース公開したいと思います。
GitHub。。使った事ないんですが。
お買いものリスト - Google Play の Android アプリ
次は、Javaでネイティブアプリを作るつもりです。
monacaでダイアログ表示
OnsenUIでダイアログ表示が出来るようなので、
やってみたところ表示されず、エラーとなっていました。
どうも、monaca版のOnsenUIには入ってない。。
ダイアログを使わない事も考えたのですが、
やっぱり、ダイアログを使いたいので、
monacaでの開発は断念して、Cordova+OnsenUIでの開発に移行しました。
環境の構築方法等は、また整理していきますが、
広告を載せる為nendに登録したので、配信が開始され次第、
作ったアプリの公開をするつもりです。
アプリの内容は、何のひねりもないですが、
主婦目線ｗで作った、お買いものリストです。
Onsen UIのリストの行タップでのイベント処理
タップすると編集画面に移動する機能に加え、
リスト右にゴミ箱アイコンを表示させて削除の機能を付ける場合、
普通、こんな感じに書きます。
<ons-list> <ons-list-item ng-repeat="shop in shops"> <ons-row ng-click="showDetaiShop($index)"> <ons-col> <span class="list-text">{{shop.SHOP_NAME}}</span> </ons-col> <ons-col> <span class="right-icon" ng-click="deleteShop($index)"> <ons-icon icon="ion-trash-a"></ons-icon> </span> </ons-col> </ons-row> </ons-list-item> </ons-list>
しかし、このままだとゴミ箱のアイコンをクリックした場合に、
上の「ng-click="showDetaiShop($index)"」まで呼び出されます。
そこで、アイコンクリックのイベントで呼び出す関数の引数にイベントを追加し、
ng-click="deleteShop($index,$event)"
呼び出す関数（deleteShop）で、以下のようにして上のイベントへの伝搬を停止させます。
event.stopPropagation();
これで、上のイベントは呼び出されないのですが、
例えば、バインドされた配列の要素を削除しても、
リスト自体の更新がされなくなってしまいます。
そこで、以下のように「$scope.$apply()」を呼び出しリストを更新します。
ShopList.shops.splice(index, 1); $scope.$apply();
