Asial Blog

Recruit! Asialで一緒に働きませんか?

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

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

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

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



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

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

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



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

■Onsen UIの設置



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

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

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

その他、今回使うファイルを以下のような構成で作成します。
  1. www/
  2. ├── css
  3. │   └── style.css
  4. ├── index.html
  5. ├── js
  6. │   └── app.js
  7. ├── page1.html
  8. ├── page2.html
  9. └── vendors
  10.     └── onsen

■画面作成



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

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <link rel="stylesheet" href="vendors/onsen/css/onsenui.css">
  7.         <link rel="stylesheet" href="vendors/onsen/css/topcoat-mobile-onsen-ios7.css">
  8.         <link rel="stylesheet" href="css/style.css" />
  9.         <script src="cordova.js"></script>
  10.         <script src="vendors/onsen/js/angular/angular.js"></script>
  11.         <script src="vendors/onsen/js/angular/angular-touch.js"></script>
  12.         <script src="vendors/onsen/js/onsenui.js"></script>
  13.         <script src="js/app.js"></script>
  14.     </head>
  15.     <body>
  16.         <ons-navigator page="page1.html" title="Page 1">
  17.         </ons-navigator>
  18.     </body>
  19. </html>

page1.htmlでは、ons-list を使ってitemsをリスト表示しています。
www/page1.html
  1. <ons-page class="center">
  2.     <div ng-controller="Page1Ctrl">
  3.         <ons-list>
  4.             <ons-list-item ng-repeat="item in items" ng-click="next($index)">
  5.                 {{item}}
  6.             </ons-list-item>
  7.         </ons-list>
  8.     </div>
  9. </ons-page>

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

www/js/app.js
  1. (function() {
  2.     var app = angular.module('myApp', ['onsen.directives', 'ngTouch']);
  3.  
  4.     app.factory('Data', function() {
  5.         var Data = {};
  6.         Data.items = ['aa', 'bb', 'cc'];
  7.         return Data;
  8.     });
  9.  
  10.     app.controller('Page1Ctrl', function($scope, Data) {
  11.         $scope.items = Data.items;
  12.  
  13.         $scope.next = function(index) {
  14.             Data.index = index;
  15.             var item = Data.items[index];
  16.             $scope.ons.navigator.pushPage('page2.html', {title: item});
  17.         };
  18.     });
  19.  
  20.     app.controller('Page2Ctrl', function($scope, Data) {
  21.         $scope.item = Data.items[Data.index];
  22.  
  23.         $scope.save = function() {
  24.             Data.items[Data.index] = $scope.item;
  25.             $scope.ons.navigator.popPage();
  26.         };
  27.     });
  28. })();

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

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

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

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

■AngularJSのPhoneGap対応


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

まず、www/index.htmlのng-app属性を削除してAngularJSが自動起動しないようにします。
  1. 変更前:  lang="en" ng-app="myApp">
  2. 変更後:  lang="en">

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

www/js/app.js
  1. var app = angular.module('myApp', ['onsen.directives', 'ngTouch']);
  2.  
  3. document.addEventListener('deviceready', function() {
  4.     angular.bootstrap(document, ['myApp']);
  5. }, false);

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

■完成



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

  1. $ cordova run ios



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

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

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