2013年12月19日

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

Monaca では、HTML5(JavaScript)で簡単にiOS・Androidアプリが作れます。
今回は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();
  };
}