2014年3月5日

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);