【Cordova】Onsen UI Ver.2.11.1でAngularJS(Ver.1.X)を使用する方法

Onsen UI Ver.2.11.0より、AngularJS(Ver.1.X)の関連ファイルangular-onsenui.js(angular-onsenui.min.js)が同梱されなくなりました。

以下の文章は、Ver.2.10.10においてコンソールに表示されるメッセージです。

From Onsen UI 2.11.0, the AngularJS binding will no longer be part of the core package. You will need to install the new angularjs-onsenui package. See https://onsen.io/v2/guide/angular1/#migrating-to-angularjs-onsenui-package for more details.

Ver.2.11.0以前のバージョンからアップデートすると、アプリが正常に動作しません。
今回は、Onsen UI Ver.2.11.1でAngularJSを使用する方法について説明します。
Continue reading

【Monaca】Onsen UI pushPageでパラメーターを渡す

最近、Onsen UIが動かないということで、当ブログのOnsen UI関連の記事にアクセスしてくださる方が多く見られます。
おそらくOnsen UI V1の時代のブログ記事を読んで、そのサンプルコードがうまく動作せず躓いているように思いました。
最新版のOnsen UI V2は、V1と互換性のない箇所がいくつかあります。
今回は何件か検索履歴にありました、Onsen UI V2のpushPageでパラメーターを渡す方法を紹介します。
※AngularJSを使用します。
Continue reading

【Monaca】D3.jsを使用して円グラフを表示する

D3.jsは、JavaScriptを使用して折れ線グラフや棒グラフ、円グラフなど、データを可視化するツールとして知られています。
私が開発したアプリの折れ線グラフも、D3.jsを使用しています。

今回は、AngularJS + Onsen UIの構成で円グラフを表示する方法を紹介します。
Continue reading

【Monaca】EaselJSを使用してスクラッチアプリを作成する

EaselJSを使用してスクラッチアプリを作成してみました。


もとになったネタはStackOverflowCreate Eraser in EaselJs – what nextで、eraseの機能を使えばスクラッチぽい動きになるかと思いました。

Continue reading

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


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

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

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

【Monaca】Onsen UI V2でnendバナー広告を表示する

以前書いた記事のOnsen UI V2版。

Monacaで新規プロジェクト「Onsen UI V2 Angular 1 Minimum」を作成し、Monacaデバッガーで動作確認済み。
下記サンプルコードでは、スクロール領域とバナー広告が重ならないようにするため、スクロール領域からバナーの高さ50px分を減らしている。
また変数nend_paramsは、iOSかAndroidか区別して指定する必要がある。
※テストコードなので同じ内容。

Android

iOS

Continue reading

【Monaca】checkbox「パスワードを表示する」を実装する

ユーザー名とパスワードを入力する画面で、「パスワードを表示する」チェックボックスを実装するには、チェックが入ったときにinputタグのtype属性を「password」から「text」に変更することにより実現できる。

今回は、JavaScriptAngular JSの2パターンについてコードを記載する。

Continue reading