アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

Monaca / Onsen UIの専用ブログを開設しました

マーケティング担当の塚田です。

これまでアシアルブログの一カテゴリーとして運営をしておりましたMonacaブログですが、この度新たにMonaca / Onsen UI専用ブログを立ち上げました。



今後はMonaca / Onsen UIブログにて、関連技術情報、イベント情報などをお届けしますのでよろしくお願いします。

OnsenUI 2.0βのマテリアルデザインについて



OnsenUI 2.0β の インストール



OnsenUI 2.0β のインストールは簡単です。ただし、NodeJSのnpm、gulpJSについては、事前にセットアップしておいて下さい。セットアップ済の方は、一度アップデートを行った方がよいでしょう。



任意のディレクトリに移動して、以下のコマンドを叩くだけで、サンプルコードがインストールされます。





$ git clone http://github.com/OnsenUI/onsenui2-quickstart
$ cd onsenui2-quickstart
$ npm install  & & gulp serve


マテリアルデザインについて



Googleからデザインガイドラインが、2014年6月に公開され、今ではAndroid端末において直感的なUI/UXで統一されたデザインを見ることができます。



「ユーザがストレスを感じないデザイン」というコンセプトで設計されたこのマテリアルデザインは、光を意識して立体的なデザインを行う事で、実際に空間の中で操作している感覚を得られます。また、アニメーションにおいては、質量(マテリアル)を感じることができる自然な動きとなるようデザインされています。



さらに詳しく確認したい方は、此方を参照してみるとよいでしょう。



Google マテリアルデザイン ガイドライン



OnsenUI 2.0βのマテリアルデザイン



さて、先ほどのOnsenUI2.0のQuick Startを実行してみると、早速マテリアルデザインの要素を見ることができます。



gulp serve でブラウザが立ち上がり、サイトを確認できたところで、MATEREAL DESIGN DEMO をクリックすると、クリック時のアニメーションが実行される事でしょう。





遷移先のTODO画面では、チェックボックスのクリックなどで、同様にアニメーションされるのがわかると思います。右下の「+」Material Fabなども用意されています。





OnsenUI2.0では、ドキュメントのサンプルコードもわかりやすく、OnsenUIを利用していた方なら、迷うことなく使うことができるでしょう。



その他の マテリアルデザイン



次に、他のマテリアルデザインも見ていきましょう。代表的なものをピックアップしてみました。



Material Tabs





Material Text Input





Material Button





Material Switch





Material Checkbox





Material Radio Button





他のデザインは、CSS Componentsから参照できますのでご覧ください。



最後に



マテリアルデザインについては、Googleガイドラインが公開されていますが、必ずしも簡単に導入できるものではありません。



OnsenUI2.0を利用する事で、新たに導入されたマテリアルデザインをベースに、Theme Rollerからカラーを変更したり、設定済のCSSを変更することで、より簡易にマテリアルデザインを利用することが可能です。



ますますマテリアルデザインが広がりを見せようとしています。導入に辺り検討しているプロジェクトがあるならば、この機会に、利用してみてはいかがでしょうか。

ElectronでOnsenUIを利用してみよう!

Electronはクロスプラットフォームで稼働するアプリをHTML5、CSS3、Javascriptで構築できるプラットフォームアプリケーションとなっています。しかし、まだデザインフレームワークが確立されておらず、その辺りはスクラッチで作成するか、既存のWEBテンプレートで対応するしかありません。そこで今回はOnsenUIを利用してElectron上で動かしてみたいと思います。



Electronのインストールとプロジェクトの起動方法



執筆時点でのElectronとOnsenUIのバージョンは下記の通りです。



  • Electron: v0.31.1
  • OnsenUI: 1.3.8
  • angular: 1.4.5


インストール



まずはベースとなるElectronのインストールからです。Nodeを利用してインストールします。





$ npm install -g electron-prebuilt


プロジェクト設定



プロジェクトディレクトリを作成して、package.jsonの初期設定を行います。ここでは /electron-sample を対象ディレクトリとします。





$ mkdir /electron-sample
$ cd /electron-sample
$ npm init -y


以下のようなpackage.jsonができ上がると思いますが、Electronの起動は、main.jsとなりますので、“main”の属性だけ修正しておいて下さい。





{
  "name": "electron-sample",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\"  & & exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


まずはプロジェクト作成



ディレクトリの最小構成は、下記の通りです。





.
├── ./index.html
├── ./main.js
└── ./package.json


main.js は、Electronの起動スクリプトです。





'use strict';

var app = require('app');
var BrowserWindow = require('browser-window');

require('crash-reporter').start();

var mainWindow = null;

app.on('window-all-closed', function() {
    if (process.platform != 'darwin')
        app.quit();
});

app.on('ready', function() {

    // Windowサイズの指定
    mainWindow = new BrowserWindow({width: 800, height: 600});
    // 初期ロードのファイル
    mainWindow.loadUrl('file://' + __dirname + '/index.html');

    mainWindow.on('closed', function() {
        mainWindow = null;
    });
});


index.html では、“Hello World” を表示するHTMLを作成します。





<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron at OnsenUI</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>


Electronの実行



プロジェクトルート(/electron-sample)より下記のコマンドを実行します。





$ electron .


このように起動すればOKです。





Hello Worldの表示



OnsenUIを組み込んでみる



OnsenUIのインストール



OnsenUIで用意されているbowerを利用して、OnsenUIをプロジェクトに組み込みましょう。





$ sudo npm install -g bower
$ bower install onsenui


ディレクトリ構成は以下の通りになります。





.
├── ./bower_components
│   ├── ./OnsenUI
│   └── ./angular
├── ./index.html
├── ./main.js
└── ./package.json


最初のElectronとOnsenUI



index.html を以下の通り書き換えます。まずはツールバーにメッセージを表示するだけの、簡単なサンプルです。





<!DOCTYPE html>
<html lang="ja" ng-app="app">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="bower_components/OnsenUI/build/css/onsenui.css"/>
    <link rel="stylesheet" href="bower_components/OnsenUI/build/css/onsen-css-components-blue-basic-theme.css"/>

    <!-- JavaScript -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/OnsenUI/build/js/onsenui.js"></script>

    <title>Electron de OnsenUI</title>

    <script>
        var module = ons.bootstrap('app', ['onsen']);
        module.controller('AppController', function($scope) { });
    </script>
</head>

<body ng-controller="AppController">

<ons-toolbar>
    <div class="center">Electron温泉</div>
</ons-toolbar>

</body>
</html>


書き換えたら、Electronを起動します。





$ electron .


次の通りElectronが起動すればOKです。





Electron with OnsenUI



タブを表示してみる。



index.html<body>タグの内部を、以下の通り書き換えます。





<ons-tabbar>
    <ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab>
    <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
    <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
    <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
</ons-tabbar>

<ons-template id="home.html">
    <ons-toolbar>
        <div class="center">Home</div>
    </ons-toolbar>

    <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="comments.html">
    <ons-toolbar>
        <div class="center">Comments</div>
    </ons-toolbar>

    <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="tags.html">
    <ons-toolbar>
        <div class="center">Tags</div>
    </ons-toolbar>

    <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="feed.html">
    <ons-toolbar>
        <div class="center">Feed</div>
    </ons-toolbar>

    <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="settings.html">
    <ons-toolbar>
        <div class="center">Settings</div>
    </ons-toolbar>

    <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>


同様にElectronを実行して、次の通り起動すればOKです。各タブをクリックすると、画面が遷移します。





Electron with OnsenUI(タブ表示)



ElectronとOnsenUIの相性について



今回は試した限りではスライドナビゲータや、カルーセルの動作はできませんでした。カルーセルで利用している、Hammerスクリプトとの相性の問題がありそうです。



また、OnsenUIはタッチやスワイプイベントを利用することもありますが、その辺りはElectronと相性の問題で動作が難しいケースがあるでしょう。今後変わっていくと思われますが、AngulerJSのディレクティブで対応してみる手もありそうです。拡張についてはOnsenUIが柔軟な設計になっていますので、AngulerJSに明るければ、対応は十分可能でしょう。



最後に



駆け足でElectron上でOnsenUIの可能性を見てきましたが、多少相性の問題があるものの、AngulerJSにも明るければ実用には問題ないレベルかと思います。ただ、初期のテンプレートで躓くとプロジェクトが思うように進まない状況が多々あります。また、UIをスクラッチで作るのも、コストの面から選択技としてはないでしょう。Electronをタブレットに見立て、OnsenUIを利用して開発すると良いかもしれません。



本記事が、皆さまのお役に立てれば幸いです。

2015年4月-6月におけるアシアルの活動 : スマートフォン&モバイルEXPO、Cordova勉強会、AngularU 他。

春はイベント開催時期ということもあり、アシアルでも各種展示会、勉強会、カンファレンスに参加してきました。

○ 4月20日-22日 「O'Reilly Fluent Conference 2015」出展


○ 5月12日-13日 「AppsWorld North America 2015」出展


○ 5月13日-15日 「スマートフォン&モバイルEXPO 2015春」出展


Monaca展示ブースを設置。多くのお客様にご来場いただき、ミニセミナーは通路にまで人が溢れるという大盛況ぶりでした。

また、ヘッドウォータース社より、イベント用Pepperアプリパッケージ「プロボ」に展示会支援をいただきました。


○ 5月26日-27日 「de:code 2015」講演

田中が「Visual Studio with Cordova クロス プラットフォーム開発の全貌」と題する講演を行いました。

関連記事:CodeIQ MAGAZINE
「Visual Studio+Cordova」は、なぜクロスプラットフォームでのアプリ開発に適しているのか?


○ Cordova勉強会 講演&開催協力

日本Cordovaユーザー会メンバーとして、Apache Cordova勉強会に参加、開催協力をしております。

・5月20日 第5回Apache Cordova勉強会
勉強会の模様は、アシアルブログ「第5回 日本Cordovaユーザ会レポート」でも紹介しています。

・6月19日 第6回Apache Cordova勉強会
勉強会の模様は、アシアルブログ「第6回Apache Cordova勉強会 に参加してきました」でも紹介しています。


○ 6月22日-25日 「AngularU」講演


Andreasが「Angular + Cordova + Monaca = Killer mobile app development」と題する講演を行いました。

関連動画:AngularU 主催者提供
Angular + Cordova + Monaca = Killer mobile app development


○ 6月27日 「PHPカンファレンス福岡2015」講演


久保田が「PHPで学ぶ仮想マシン正規表現エンジンの仕組み」と題する講演を行いました。



今後も積極的に活動していきますので、どこかでお会いすることがあれば、気軽にお声掛けいただけたらと思います!

レバレジーズさん主催のヒカ☆ラボPHPイベントで「今、最もイケてるPHPフレームワークLaravel4」の発表をしました。

アシアルの坂本です。
最近は生ハムの原木を買ってしまい塩分過多な生ハム生活をエンジョイしています。

さて、昨日の12月10日にレバレジーズさん主催のヒカ☆ラボPHPイベントに登壇しました。
Laravel4がなぜ熱いか、その根拠と実際の業務で使うベストプラクティス、そしてLaravelの今後についての発表を行いました。

下が実際の発表資料です。



発表後に懇親会で質問を受けましたがLaravel4の導入について不安な方が多くいました。HHVMを使うべきかPhalconに移行すべきか、はたまたパフォーマンスが劇的に改善されるという噂のPHP7を待つべきか、色々な意見がありました。

私としてはLarael4はPHPフレームワークの中で優秀なものであり、かつ使われている技術や考え方は今後、どのフレームワークを使う場合でも必要になるものであると考えています。
実業務でのフレームワーク選定は本当に覚悟のいるものであると思いますがLaravel4を前向きに検討して頂けたらと思います。

また、徐々に全貌が見えてきたLaravel5もその内リリースされると思います。
その時はまた別のイベントで発表させて頂けるかもしれません。

その時はよろしくお願いします。

AngularJS + Onsen UIで始めるPhoneGapアプリケーション

ハイブリッド モバイル アプリ開発フレームワークであるPhoneGapは、
HTML5でアプリを作るための非常に便利なフレームワークです。
カメラや位置情報などネイティブの機能を簡単にJavaScriptから利用できるようになります。

しかしPhoneGapでは、スマートフォンアプリにとってとても重要な、
UIパーツや画面遷移などのインタラクションは提供されていません。
HTML/CSS/JavaScriptでこれらのUI、アニメーションを一から作るのは非常に大変です。
ネイティブと違和感ないデザインや、なめらかな自然な動き、端末毎の差異など気にすることはたくさんあります。

今回ご紹介する、Onsen UI を使用すれば、PhoneGap/Cordovaアプリを飛躍的に改善することができます。
他のフレームワークよりも洗練された柔軟性を持ち、ハイブリッドアプリにおいても、
ネイティブ並みの外観と操作性を、すべてのプラットフォーム上で実現できます。



この記事では、AngularJSとOnsen UIを利用した
PhoneGapアプリケーションの最小構成のアプリを作っていきます。

※今回は、iOS7テーマを利用していますが、Androidテーマやその他のテーマがあります。
 詳しくはOnsen UIのサイトをご覧ください。

■PhoneGapのインストール・プロジェクト作成





$ sudo npm install -g phonegap
$ cordova create hello com.example.hello HelloWorld
$ cd hello/
$ cordova platform add ios
$ cordova run ios


■Onsen UIの設置



HelloWorldプロジェクトのwwwディレクトリの中身は、今回は利用しないので、一旦全て削除してしまいます。

http://onsenui.io/ の「Download」から一式ダウンロードします。

ダウンロードしたonsen_ui.zipを解凍して、
app/lib/onsen ディレクトリを HelloWorldプロジェクトの www/vendors にコピーします。

その他、今回使うファイルを以下のような構成で作成します。


www/
├── css
│   └── style.css
├── index.html
├── js
│   └── app.js
├── page1.html
├── page2.html
└── vendors
    └── onsen


■画面作成



それでは、www/index.htmlから作成していきましょう。
ons-navigatorタグを page1.html を初期ページとして読み込むように設置しています。



<!DOCTYPE html>
<html lang="en" ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="vendors/onsen/css/onsenui.css">
        <link rel="stylesheet" href="vendors/onsen/css/topcoat-mobile-onsen-ios7.css">
        <link rel="stylesheet" href="css/style.css" />
        <script src="cordova.js"></script>
        <script src="vendors/onsen/js/angular/angular.js"></script>
        <script src="vendors/onsen/js/angular/angular-touch.js"></script>
        <script src="vendors/onsen/js/onsenui.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body>
        <ons-navigator page="page1.html" title="Page 1">
        </ons-navigator>
    </body>
</html>


page1.htmlでは、ons-list を使ってitemsをリスト表示しています。
www/page1.html


<ons-page class="center">
    <div ng-controller="Page1Ctrl">
        <ons-list>
            <ons-list-item ng-repeat="item in items" ng-click="next($index)">
                {{item}}
            </ons-list-item>
        </ons-list>
    </div>
</ons-page>


それでは、リストを表示するために、プログラム側を記述します。
データを管理する、Dataサービスを作りましょう。

www/js/app.js


(function() {
    var app = angular.module('myApp', ['onsen.directives', 'ngTouch']);

    app.factory('Data', function() {
        var Data = {};
        Data.items = ['aa', 'bb', 'cc'];
        return Data;
    });

    app.controller('Page1Ctrl', function($scope, Data) {
        $scope.items = Data.items;

        $scope.next = function(index) {
            Data.index = index;
            var item = Data.items[index];
            $scope.ons.navigator.pushPage('page2.html', {title: item});
        };
    });

    app.controller('Page2Ctrl', function($scope, Data) {
        $scope.item = Data.items[Data.index];

        $scope.save = function() {
            Data.items[Data.index] = $scope.item;
            $scope.ons.navigator.popPage();
        };
    });
})();


Page1Ctrlでは、Dataサービスのデータを$scopeにセットしています。
また、$scope.next関数を定義して、リストのアイテムがクリックされた場合に、次の画面に遷移する処理を定義しています。

Page2Ctrlでは、ons-text-inputの値を保存する処理を定義しています。
Saveボタンをクリックされると、Dataサービスのデータを更新して、前の画面に戻ります。

page2.htmlも作成してしまいましょう。



<ons-page class="center">
    <div ng-controller="Page2Ctrl">
        <ons-text-input ng-model="item" style="margin:10px;"></ons-text-input><br>
        <ons-button ng-click="save()">Save</ons-button>
    </div>
</ons-page>


■AngularJSのPhoneGap対応


さて、ここまでで、Onsen UI(AngularJS)でのPhoneGapアプリの見た目はできました。
このままでも動作しているように見えますが、
PhoneGapの機能を使う場合には、deviereadyイベントの後に処理を記述する必要があります。

まず、www/index.htmlのng-app属性を削除してAngularJSが自動起動しないようにします。


変更前: <html lang="en" ng-app="myApp">
変更後: <html lang="en">


次に、devicereadyイベントにてAngularJSの起動を行うように変更します。

www/js/app.js


var app = angular.module('myApp', ['onsen.directives', 'ngTouch']);

document.addEventListener('deviceready', function() {
    angular.bootstrap(document, ['myApp']);
}, false);


これで、コントローラ等の処理の中でも、PhoneGapの命令が使えるようになりました。

■完成



実行して動作を確認しましょう。



$ cordova run ios




今回作成した、wwwディレクトリ一式は「www.zip」よりダウンロードできます。

このようにOnsen UIは、MonacaアプリだけでなくPhoneGapアプリでも利用でき、
簡単にHTML5でネイティブのようなUIのスマートフォンアプリを作ることができます。

Onsen UIはフリーのオープンソースソフトウェアです。
登録も必要なく、簡単に使い始めることができますので、
ぜひ試していただき、色々とフィードバックをいただければと思います。

OnsenUI(AngularJS)でMonacaアプリを作ろう

Monaca では、HTML5(JavaScript)で簡単にiOSAndroidアプリが作れます。
今回はMonacaプロジェクトの一つとして公開している、OnsenUIを使ってMonacaアプリを作ってみたいと思います。

OnsenUIは、AngularJSとTopcoatの2つのオープンソースソフトウエアをベースに、
モバイルアプリ開発に特化したナビゲーション機能とUIコンポーネントを追加したフレームワークです。

HTML5でアプリを作る場合にはjQueryを利用されることが多いかと思いますが、
jQueryだけではどうしてもDOMやCSSなどの見た目の操作をプログラムで制御するため、
煩雑なコードが多くなりがちです。また、モバイル特有のレイアウトや画面操作などを開発者が考慮する必要があります。

今回のサンプルアプリでは、OnsenUIを使った場合、
いかにシンプルにアプリが作れるかをご紹介したいと思います。

プロジェクトの作成



今回は一覧画面と編集画面がある簡単な「メモアプリ」を作成します。
アプリ内のlocalStorageを利用してデータの保存・取得を行います。



まずは、Monacaにログインしてダッシュボードから
「Onsen UI Minimum Template」を選択してプロジェクトを作成してください。

雛形としてプロジェクトには以下のファイルが用意されています。


* index.html
* home_navigator.html
* page1.html
* page2.html


追加で、プログラムを記述する「app.js」を作成しておいてください。
app.jsの先頭で、OnsenUIのモジュールを利用するmyAppモジュールを定義しています。


// app.js
angular.module('myApp', ['onsen.directives']);


index.htmlで、app.jsを読み込むようにします。多少整理して以下のようになりました。


<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="plugins/plugin-loader.css">     
  <script type="text/javascript" src="plugins/plugin-loader.js"></script>
  <script type="text/javascript" src="app.js"></script>
</head>
<body>
  <ons-screen page="home_navigator.html"></ons-screen>
</body>
</html>


index.htmlはアプリ起動時に読み込まれます。
ons-screenタグを用いてOnsenUIのレイアウトを利用します。
page属性で「home_navigator.html」を指定します。

ナビゲーションの作成



home_navigator.htmlでは、ナビゲーション用のons-navigatorタグを使用して、titleとpageを指定しています。
今回は右上にメモの「Add」ボタンを設置したいので、
「right-button-icon」でアイコンの指定をして、
「on-right-button-click」でクリック時の処理に「add()」を設定します。


<!-- home_navigator.html -->
<div class="page" ng-controller="NavCtrl">
  <ons-navigator title="MEMO" page="page1.html"
    right-button-icon="fa fa-plus" on-right-button-click="add()">
  </ons-navigator>
</div>

その他の設定や詳細につきましては、OnsenUIマニュアルも参照してみてください。

ナビゲーション部分を管理するためにng-controllerで指定している「NavCtrl」はapp.jsで以下のように定義しています。


function NavCtrl($scope, MemoService) {
  $scope.add = function() {
    MemoService.index = null;
    $scope.ons.screen.presentPage('page2.html', '');
  };
}


「$scope」のプロパティをhtml側から参照することができ、
ここでは$scope.add関数を定義して、MemoServiceを操作してから、画面遷移する処理を行なっています。
(※ MemoServiceはメモのデータを管理「取得、追加、保存、削除」するための機能をまとめたものとなっています。内容につきましてはソースをご確認ください。)

一覧画面の作成



それでは次に、ons-navigatorのpage属性で指定されたpage1.htmlが初期画面となります。
page1.htmlではメモの一覧を表示します。


<!-- page1.html -->
<div class="page center" ng-controller="Page1Ctrl">
  <ons-list>
    <ons-list-item ng-repeat="memo in memos" ng-click="show($index);">
      {{memo.text}}
    </ons-list-item>
  </ons-list>    
</div>


ons-listを使ってリスト表示を行い、ons-list-itemで各アイテムを管理します。
ons-list-itemはng-repeatでmemosの分だけ表示されます。

memosリストやshow関数は、Page1Ctrlで管理します。
app.jsに定義を追加します。


function Page1Ctrl($scope, MemoService) {
  $scope.memos = MemoService.data;
  
  $scope.show = function(index) {
    MemoService.index = index;
    $scope.ons.screen.presentPage('page2.html', '');
  };
}

各メモがクリックされたときに、メモ番号を引数に$scope.showが呼び出されます。
MemoService.indexに番号を保持して、page2.htmlに遷移させています。

編集画面の作成





<!-- page2.html -->
<div class="page center" ng-controller="Page2Ctrl">
  <p style="margin:20px 0;">
    <ons-text-input ng-model="memo.text"></ons-text-input>
  </p>
  <ons-button ng-click="save(memo)">Save</ons-button>
  <ons-button type="cta" ng-click="remove()">Delete</ons-button>
</div>

ons-text-inputでメモの入力欄、ons-buttonを使って保存、削除ボタンを作成しています。

Page2Ctrlをapp.jsに作成します。


function Page2Ctrl($scope, MemoService) {
  $scope.memo = MemoService.data[MemoService.index];
  if (!$scope.memo) {
    $scope.memo = MemoService.add();
  }
  
  $scope.save = function(memo) {
    MemoService.save();
    $scope.ons.screen.dismissPage();
  };
  
  $scope.remove = function() {
    MemoService.remove(MemoService.index);
    $scope.ons.screen.dismissPage();
  };
}

初期化時にMemoServiceからデータを取得or追加して、$scope.memoに保持します。
また、HTML側から呼び出される、save, remove関数を定義しています。

おわりに


これでひと通り実装が終わりました。
ソース一式は以下にzipでまとめてありますので、ダッシュボードからインポート機能を使って動作を試してみてください。

project.zip (39KB)

このようにOnsenUI(AngularJS)を使うと、
面倒なモバイル特有のレイアウトや画面遷移といったビューの管理などを非常に簡単に作成することができます。
jQueryだけの開発に疲れた方は、是非試してみてください。

Onsen UI Developer Preview 2リリース!

この記事は、英語版アシアルブログの翻訳記事です。
(原文はこちら

==============================

今日はOnsen UI のdeveloper preview バージョン2をリリースします!

今回のリリースの大きなポイントは
Font Awesome(フォントオーサム)をサポートしたことです。



テーマ機能



我々チームのデザイナーが6つのテーマ(Onsen UI--Blue, Green, Orange, Pink, Purple, and Yellow)を作成しました。
ここではいくつかのスクリーンショットを紹介します。


Blue



1.Blue1.Blue_controls



Orange




1.Orange1.Orange_controls



Purple




1.Purple1.Purple_controls



使い方


1. プラグイン設定を表示します


Onsen UIプロジェクトのIDEを開き、プラグイン設定を以下のように表示します。

2.go_to_plugins_ja



2. 好きなテーマを選択します


Onsen UI プラグインの場所までスクロールし、好きなテーマを選択してください。

3.plugins_settings_ja


3. テーマを確認する


あなたのプロジェクトで「プレビュー」を使って実際にご覧になってください!



Font Awesome



Onsen UIはFont Awesomeをサポートしています。ここでは簡単な使い方を紹介します。




In Navigator




<ons-navigator left-button-icon="fa fa-bars"/>

Navigaor_font_awesome


Inside Button




<ons-button>
    <i class="fa fa-thumbs-up"></i> Like
</ons-button>

Like button


まとめ


私達はみなさんからのフィードバックを必要としています。
GitHubにて忌憚のない意見をお聞かせ下さい。よろしくお願いします。

Onsen UI Developer Preview 2 Release

Today we are excited to release developer preview 2 of Onsen UI.
The main focus of this release is support for themes and Font Awesome integration.



Themes



Our designer have cooked up 6 themes specially for Onsen UI--Blue, Green, Orange, Pink, Purple, and Yellow. Here are some screenshots of how they look like.


Blue



1.Blue1.Blue_controls



Orange




1.Orange1.Orange_controls



Purple




1.Purple1.Purple_controls



How to use


1. Go to Plugins Settings


Open Onsen UI project and go to plugins setting as shown in the figure below:

2.go_to_plugins




2. Choose your favorite theme


Scroll down to Onsen UI plugin and choose a theme you like.

3.plugin_settings




3. That's it!


Preview your project and see your app shines!



Font Awesome Integration



Onsen UI supports Font Awesome out of the box. Here are examples on how to use it.




In Navigator




<ons-navigator left-button-icon="fa fa-bars"/>

Navigaor_font_awesome


Inside Button




<ons-button>
    <i class="fa fa-thumbs-up"></i> Like
</ons-button>

Like button


Conclusion


We love to hear feedback from you. Do not hesitate to drop us feedback by writing in the comment box below or raise issue on GitHub. Relax!

OnsenUIを使った一覧と詳細画面の作り方

この記事は、英語版アシアルブログの翻訳記事です。
(原文はこちら

==============================
ほとんどのモバイルアプリでは複数のページ間でデータの共有・受け渡しを必要とします。
OnsenUIはAngularJSの機能を利用しながらページ間でのデータ受け渡しを実現しています。

実際のアプリでは以下のように作ることができます。




手順1. 『OnsenUI最小限のテンプレート』からプロジェクトを作成する



1-1. monaca.mobiにログインします。


1-2. 新しいプロジェクトを作成します。


1-3. 『OnsenUI最小限のテンプレート』を選択してプロジェクトを作成します



※詳しい作成方法についてはこのチュートリアルで紹介されています


新しいプロジェクトを作成するとこのようになります:



手順2.  データを保持するためのServiceを作成する



ここでは以下のようにdata.jsというファイルを作成します:



var myApp = angular.module('myApp');
myApp.factory('Data', function(){
    var data = {};
 
    data.items = [
        { 
            title: 'Item 1',
            description: 'Item 1 Description'
        },
        { 
            title: 'Item 2',
            description: 'Item 2 Description'
        },
        { 
            title: 'Item 3',
            description: 'Item 3 Description'
        }
    ]; 
 
    return data;
});


ここでは後で参照するServiceに「Data」と名付けています。

手順3. page1.htmlでデータを表示する



3-1. page1.js



以下のようにpage1.jsというファイルを作成します:



function Page1Controller($scope, Data){ // 1
    $scope.items = Data.items;  // 2
 
    $scope.showDetail = function(index){ // 3
        var selectedItem = Data.items[index];
        Data.selectedItem = selectedItem;
        $scope.ons.navigator.pushPage('page2.html', selectedItem.title);
    }
}



  • 1 : Page1Controllerにserviceにセットした「Data」を引数として渡します

  • 2: page1.htmlでバインディングを利用するために「Data.items」を「$scope.items」に格納します

  • 3:「showDetail()」関数はユーザーが一覧を選択した際に詳細ページを表示するための関数です。 画面遷移の前に「Data」に遷移先で使用したいデータを格納します



3-2. page1.html



Replace page1.html with the following content:
以下のようにpage1.htmlを書き換えて下さい:


<div class="page center" ng-controller="Page1Controller"> <!-- 1 -->
    <ons-list>
        <ons-list-item ng-repeat="item in items" ng-click="showDetail($index)">  <!-- 2 -->
            {{item.title}}  <!-- 3 -->
        </ons-list-item>
    </ons-list>
</div>



  • 1 : 先ほど定義した「Page1Controller」をng-controllerとしてタグに記述します。

  • 2: リストを繰り返し表示させるために全てのアイテムが入った配列データ($scope.items)をng-repeatに記述します

  • 3:リストに表示されたアイテムを選択した時にshowDetail()関数が呼ばれます。$indexにはng-repeatで使われた配列の添字が入ります



3-3. index.htmlにdata.jsとpage1.jsを関連付ける



index.htmlに以下の2行を書き加えてください。



<script src="data.js"></script>
<script src="page1.js"></script>


するとindex.htmlは以下のようになります:



<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="plugins/plugin-loader.css">     
  <script type="text/javascript" src="plugins/plugin-loader.js"></script>
 
  <script>
    angular.module('myApp', ['onsen.directives']);   
 </script>    
 
  <script src="data.js"></script>
  <script src="page1.js"></script>
 
</head>
<body>    
 
  <ons-screen page="home_navigator.html"></ons-screen>
 
</body>
</html>



実際にどのように項目が表示されるか見てみましょう。
アプリを実行して以下のようになにか表示されることを確認してください:



手順4.  page2.htmlに詳細画面を作る



page1.htmlの一覧でリストが選択された時、page2.htmlに選択された項目の詳細を表示させましょう。

serviceの「Data」には page1.jsで定義したshowDetail()関数で選択したアイテムを格納していたことを思い出しましょう。
ここでは「Data」に格納した項目を使って詳細画面を表示します。

4-1. page2.jsを以下のように作成します





function Page2Controller($scope, Data){
    $scope.item = Data.selectedItem;   
}


ここではpage2.htmlでバインディングを利用するために「Data.selectedItem(選択されたリスト項目のデータ)」を「$scope.item」に格納しています。

4-2. index.htmlにpage2.jsを関連付けする



以下をindex.htmlに追記してください。


<script src="page2.js"></script>


index.htmlは以下のようになります:



<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="plugins/plugin-loader.css">     
  <script type="text/javascript" src="plugins/plugin-loader.js"></script>
 
  <script>
    angular.module('myApp', ['onsen.directives']);   
 </script>    
 
  <script src="data.js"></script>
  <script src="page1.js"></script>
  <script src="page2.js"></script>
 
</head>
<body>    
 
  <ons-screen page="home_navigator.html"></ons-screen>
 
</body>
</html>


4-3. page2.html



page2.htmlを以下のように書き換えて下さい:



<div class="page center" ng-controller="Page2Controller"> <!-- 1 -->
    <h2>{{item.title}}</h2> <!-- 2 -->
    <p>{{item.description}}</p><!-- 2 -->
</div>




  • 1 : 先ほど定義した「Page2Controller」をng-controllerとしてタグに記述します。

  • 2: 「item」に格納された項目のデータを表示させます



実際にアプリでテストしてみましょう。
page1.htmlでItem1を選択するとpage2.htmlに遷移し、以下のように表示されます:


まとめ


Onsen UIを使うと簡単に画面遷移できるだけでなはく、画面間でのデータ受け渡しも数行の実装で実現することができます。

ソースコード全文



index.html


<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="plugins/plugin-loader.css">     
  <script type="text/javascript" src="plugins/plugin-loader.js"></script>
 
  <script>
    angular.module('myApp', ['onsen.directives']);   
 </script>    
 
  <script src="data.js"></script>
  <script src="page1.js"></script>
  <script src="page2.js"></script>
 
</head>
<body>    
 
  <ons-screen page="home_navigator.html"></ons-screen>
 
</body>
</html>


data.js



var myApp = angular.module('myApp');
myApp.factory('Data', function(){
    var data = {};
 
    data.items = [
        { 
            title: 'Item 1',
            description: 'Item 1 Description'
        },
        { 
            title: 'Item 2',
            description: 'Item 2 Description'
        },
        { 
            title: 'Item 3',
            description: 'Item 3 Description'
        }
    ]; 
 
    return data;
});


page1.js


function Page1Controller($scope, Data){
    $scope.items = Data.items;
 
    $scope.showDetail = function(index){
        var selectedItem = Data.items[index];
        Data.selectedItem = selectedItem;
        $scope.ons.navigator.pushPage('page2.html', selectedItem.title);
    }
}


page1.html


<div class="page center" ng-controller="Page1Controller">
    <ons-list>
        <ons-list-item ng-repeat="item in items" ng-click="showDetail($index)">
            {{item.title}} 
        </ons-list-item>
    </ons-list>
</div>


page2.js


function Page2Controller($scope, Data){
    $scope.item = Data.selectedItem;   
}


page2.html
>>HTML

{{item.title}}


{{item.description}}