【Monaca】Onsen UI V2 ons-list-itemをドラッグ＆ドロップで並び替える

2年前の記事、「【Monaca】ons-list-itemをドラッグ＆ドロップで並び替える」および「【Monaca】ons-list-itemをドラッグ＆ドロップで並び替える・その２」で紹介した方法は、Onsen UI V1とjQueryを使用したが、今回はjQueryを使用せず、Onsen UI V2と「Sortable」を一部改造して実現してみた。

GitHub
 
GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern brow...
https://github.com/RubaXa/Sortable
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required. - GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern browsers and touch...

Continue reading

【Monaca】Onsen UI V2でi-mobileネイティブアド広告を表示する

i-mobileのネイティブアド広告は簡単に設置できる。


表示させたい場所に広告表示要素を挿入する。（サンプルコード60行目）
bodyタグの手前に広告タグを挿入（サンプルコード71～78行目）すれば、ネイティブアド広告が表示される。
※広告スポット作成直後だと表示されない場合があるので注意。
※下記サンプルコードの広告表示要素と広告タグのユーザー情報はxxxxで伏せてあるので、実際にi-mobileで取得したコードに置き換える必要がある。
Continue reading

【Monaca】JavaScript + Onsen UI V2 選択したデータを前画面に渡す

約2年前に書いた【Monaca】Onsen UI 選択したデータを前画面に渡す記事のJavaScript + Onsen UI V2版。(AngularJS未使用版)

otak-lab
2016.08.06
【Monaca】Onsen UI 選択したデータを前画面に渡す
https://otak-lab.com/archives/670
JavaScript + Onsen UI V2版はこちら。※Onsen UI + AngularJSを使用。ons-navigatorのpushPage()、popPage()を利用すれば、次画面に進み、前画面に戻ることが実現できる。しかし、次画面で選択したデータを前画面に渡す方法は記載がない。$rootScope.$broadcast()を利用して親コントローラ(page1Controller)にデータを渡し、$scope.$on()で受け取ればよい。Page1で「ここをタップ」をタップし、Page2で「1000」をタップすると、Page1に戻り「1000」と表示される。  <!DOCTYPE HTML><html><head> <meta charset...

Page1で「ここをタップ」をタップし、Page2で「100000」をタップすると、Page1に戻り「100000」と表示される。

問題は選択したデータを前画面に渡す方法。
やり方はいろいろあるが、もっとも簡単な方法はグローバル変数に選択したデータを保存する方法。
下記コードでは、独自のsetParamメソッドでグローバル変数に選択したデータを保存し、popPageメソッドで前画面に戻り、その途中で発生するons-navigatorのprepopイベントで選択したデータに書き換えている。
Continue reading