【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を使用しています。

d3js.org
 
D3.js - Data-Driven Documents
https://d3js.org
D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.

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

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

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

www.createjs.com
 
CreateJS | A suite of JavaScript libraries and tools designed for working wit...
https://www.createjs.com/easeljs

もとになったネタはStackOverflowのCreate Eraser in EaselJs – what nextで、eraseの機能を使えばスクラッチぽい動きになるかと思いました。
Stack Overflow
Create Eraser in EaselJs - what next
https://stackoverflow.com/questions/31853911/create-eraser-in-easeljs-what-next/31924384
I want to write Bitmap eraser on easelJS. I think, i'm on half of my road to do this.... Here is demo:http://jsfiddle.net/bordeux/g2Lwvsuv/2/and my code:var example = function() { this.

Continue reading

【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

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

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

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

Continue reading

【Monaca】Onsen UI V2 + Angular JS V1 最新バージョンのプロジェクト作成方法

Monacaの「Onsen UI and Angular 1」のテンプレートは、Onsen UI V2のバージョンが古いため、Onsen UIの不具合と気がつかずに開発・検証を進め、必要以上の時間がかかる場合がある。
今回は、テンプレートを使用せずに、Onsen UI V2 + Angular JS V1 最新バージョンのプロジェクト作成方法を紹介する。
Continue reading