投稿者: 管理人

シンプル検品 Ver.1.0.0をリリースしました。

本日、シンプル検品 Ver.1.0.0をリリースしました。
Playストアよりダウンロードできます。

Continue reading

Bluetooth シンプル検品バーコード入荷出荷棚卸

【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

Cordova JavaScript Monaca Onsen UI

【Monaca】Riot.js + Onsen UI V2 ons-navigatorで画面遷移する

「シンプル体重管理」や「ナンバーズサーチ」など、これまでAngularJSとOnsen UIの組み合わせでアプリ開発を行ってきたが、ユーザー側から「重い」「遅い」などの声が上がってきており、以前から軽いと評判のRiot.jsというUIライブラリを使用してアプリ開発できないだろうか・・・と思いつつも時間だけが経過。
やっと重い腰を上げてみた。

riot.js.org

Riot.js — シンプルでエレガントなコンポーネントベースの UI ライブラリ · Riot.j...

https://riot.js.org/ja/

Riot.jsでは、簡単で楽しい構文を使ってカスタムタグを使ったユーザーインターフェイスを構築できます。

今回は、Onsen UIの基本的な動きであるons-navigatorで画面遷移を試みる。

MonacaクラウドIDEで、「Onsen UI V2 JS Minimum」を作成し、最新版の「riot+compiler.min.js」を[/www/lib/liotjs/]フォルダにアップロードする。
このとき「+」がスペースに置き換わる場合があるので「名前を変更」でファイル名を修正する。
[/www/tag/]フォルダに各tagファイルを作成する。
Continue reading

AngularJS Cordova Monaca Onsen UI Riot.js

シンプル体重管理簡單體重管理简单体重管理 Ver.1.8.0をリリースしました！

シンプル体重管理 Ver.1.8.0をリリースしました。
Playストアよりダウンロードできます。
※今夏、Amazon Fire版の対応を予定しております。

変更点は下記のとおりです。
Continue reading

Android BMI ウエストシンプル体重管理バストヒップリマインダー体年齢体脂肪率体重健康管理内臓脂肪レベル基礎代謝皮下脂肪率筋肉量简单体重管理簡單體重管理

【Monaca】Onsen UIでGoogleマップを表示する

iframeによる方法はこちらです。

otak-lab

2019.07.02

【Monaca】Onsen UIでGoogleマップを表示するその２

https://otak-lab.com/archives/2182

ちょうど１年ほど前に【Monaca】Onsen UIでGoogleマップを表示するという記事を書き、たくさんのアクセスをいただきました。Maps JavaScript APIを使った方法のため、APIキーの取得や有料化の問題など面倒な部分が多かったと思います。今回はiframeを使用して無料でGoogleマップを表示する方法を紹介します。まずはMonacaデバッガーの表示結果です。iOSの場合、画面操作中にiframeの領域が固定されず、多少操作に難があります。AndroidiOSOnsen UIの準備ができたら、iframeのwidthとheightをOnsen UIのコンテンツ領域(.page__content)...

Monacaで新規プロジェクト「Onsen UI V2 JS Minimum」を作成し、サンプルコードを貼り付けて実行したら、あっさり表示された。
Monacaデバッガーで動作確認済み。
※事前にMaps JavaScript APIのキーを取得すること。
※37行目のYOUR_API_KEYを取得したAPIキーに書き換えること。

Google Developers

Overview | Maps JavaScript API | Google Developers

https://developers.google.com/maps/documentation/javascript/tutorial

Get started with the Google Maps JavaScript API. View a simple example, learn the concepts, and create custom maps for your site.

Cordova Google Map Monaca Onsen UI

ナンバーズサーチ Ver.1.4.2をリリースしました！

ナンバーズサーチ Ver.1.4.2をリリースしました。
PlayストアおよびAmazon Android アプリストアよりダウンロードできます。

変更点は下記のとおりです。
Continue reading

Amazon Android NUMBERS3 NUMBERS4 ジャパンネット銀行ナンバーズ３ナンバーズ４ナンバーズサーチミニロトロト6 ロト7 宝くじ

【Monaca】Onsen UI V2でnendネイティブアド広告を一定の間隔で更新させる

※2018/06/10 実際の広告コードを記載してしまったので、その箇所を修正。
nendのネイティブアド広告を一定の間隔で更新させるサンプルコードを作成してみた。
nendの広告コードを実行した際に生成されたHTMLをすべて削除し、新たに広告コードを呼び出すことで新しい広告を取得することができる。
※削除しないと広告コードを呼び出した分だけscript・img・inputのタグが蓄積される。
あとはOnsen UI上に取得した広告HTMLを表示させるだけ。
これに少し手を加えて、アプリに実装する予定。