ハイブリッド モバイル アプリ開発フレームワークである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はフリーのオープンソースソフトウェアです。
登録も必要なく、簡単に使い始めることができますので、
ぜひ試していただき、色々とフィードバックをいただければと思います。