Asial Blog

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

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

カテゴリ :
バックエンド(プログラミング)
タグ :
Monaca
HTML5
onsenui
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」を選択してプロジェクトを作成してください。

雛形としてプロジェクトには以下のファイルが用意されています。
  1. * index.html
  2. * home_navigator.html
  3. * page1.html
  4. * page2.html

追加で、プログラムを記述する「app.js」を作成しておいてください。
app.jsの先頭で、OnsenUIのモジュールを利用するmyAppモジュールを定義しています。
  1. // app.js
  2. angular.module('myApp', ['onsen.directives']);

index.htmlで、app.jsを読み込むようにします。多少整理して以下のようになりました。
  1. <!doctype html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6.   <link rel="stylesheet" href="plugins/plugin-loader.css">     
  7.   <script type="text/javascript" src="plugins/plugin-loader.js"></script>
  8.   <script type="text/javascript" src="app.js"></script>
  9. </head>
  10. <body>
  11.   <ons-screen page="home_navigator.html"></ons-screen>
  12. </body>
  13. </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()」を設定します。
  1. <!-- home_navigator.html -->
  2. <div class="page" ng-controller="NavCtrl">
  3.   <ons-navigator title="MEMO" page="page1.html"
  4.     right-button-icon="fa fa-plus" on-right-button-click="add()">
  5.   </ons-navigator>
  6. </div>
その他の設定や詳細につきましては、OnsenUIマニュアルも参照してみてください。

ナビゲーション部分を管理するためにng-controllerで指定している「NavCtrl」はapp.jsで以下のように定義しています。
  1. function NavCtrl($scope, MemoService) {
  2.   $scope.add = function() {
  3.     MemoService.index = null;
  4.     $scope.ons.screen.presentPage('page2.html', '');
  5.   };
  6. }

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

一覧画面の作成



それでは次に、ons-navigatorのpage属性で指定されたpage1.htmlが初期画面となります。
page1.htmlではメモの一覧を表示します。
  1. <!-- page1.html -->
  2. <div class="page center" ng-controller="Page1Ctrl">
  3.   <ons-list>
  4.     <ons-list-item ng-repeat="memo in memos" ng-click="show($index);">
  5.       {{memo.text}}
  6.     </ons-list-item>
  7.   </ons-list>    
  8. </div>

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

memosリストやshow関数は、Page1Ctrlで管理します。
app.jsに定義を追加します。
  1. function Page1Ctrl($scope, MemoService) {
  2.   $scope.memos = MemoService.data;
  3.   
  4.   $scope.show = function(index) {
  5.     MemoService.index = index;
  6.     $scope.ons.screen.presentPage('page2.html', '');
  7.   };
  8. }
各メモがクリックされたときに、メモ番号を引数に$scope.showが呼び出されます。
MemoService.indexに番号を保持して、page2.htmlに遷移させています。

編集画面の作成



  1. <!-- page2.html -->
  2. <div class="page center" ng-controller="Page2Ctrl">
  3.   <p style="margin:20px 0;">
  4.     <ons-text-input ng-model="memo.text"></ons-text-input>
  5.   </p>
  6.   <ons-button ng-click="save(memo)">Save</ons-button>
  7.   <ons-button type="cta" ng-click="remove()">Delete</ons-button>
  8. </div>
ons-text-inputでメモの入力欄、ons-buttonを使って保存、削除ボタンを作成しています。

Page2Ctrlをapp.jsに作成します。
  1. function Page2Ctrl($scope, MemoService) {
  2.   $scope.memo = MemoService.data[MemoService.index];
  3.   if (!$scope.memo) {
  4.     $scope.memo = MemoService.add();
  5.   }
  6.   
  7.   $scope.save = function(memo) {
  8.     MemoService.save();
  9.     $scope.ons.screen.dismissPage();
  10.   };
  11.   
  12.   $scope.remove = function() {
  13.     MemoService.remove(MemoService.index);
  14.     $scope.ons.screen.dismissPage();
  15.   };
  16. }
初期化時にMemoServiceからデータを取得or追加して、$scope.memoに保持します。
また、HTML側から呼び出される、save, remove関数を定義しています。

おわりに


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

project.zip (39KB)

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

コメント

  • snc

    この記事だけでは何をやっているのかよくわからないので、以前のangularJSの記事もリンクしてあげて、
    まずそれを読むように促してあげると、本記事もさらに理解度が高まると思います。
    ところで、onsenUIのドキュメントを拝見しましたが、onsenUIには、チェックボックスやラジオボタンのような
    ものはないのでしょうか??

  • yoshiki

    sncさん、コメントありがとうございます。

    AngularJSについては、最近は日本語でも記事が出てきたので色々と参考にしていただければと思います。
    アシアルブログであれば以下の記事も参考になるかと思います。
    AngularJSに触れてみる その1 ( http://blog.asial.co.jp/1197 )
    AngularJSに触れてみる その2 ( http://blog.asial.co.jp/1208 )

    Onsen UIの、チェックボックスとラジオボタンにつきましては、
    今月末あたりにリリース予定の次期バージョンで実装される予定です。

  • snc

    yoshikiさん
    ご回答どうもありがとうございます。次期バージョン楽しみにしています。

  • snc

    本記事のソースをダッシュボードからインポートしてmonacaデバッガーで実行すると画面が何も表示されませんでした。
    タイトルに{{navigationitem.title}}と表示され、ログには「illegal access www/plugins/plugin-loader.js:22524 PANASONIC(101P)」と
    表示されています。
    記事にかいてあるようにダシュボードからインポートしただけなのですが、使用できないのでしょうか??

  • Monacaチーム

    snc様

    Monacaをお使いいただき、ありがとうございます。
    Monacaチームでございます。

    弊社でインポートして以下の環境で確認したところ正常に動作することが確認できました。

    インポートアドレス:http://blog.asial.co.jp/sample/1239/project.zip
    Android Nexus 7 (Android 4.2.2) Monacaデバッガー 2.0.6
    iPhone5S (iOS 7) Monacaデバッガー 2.1.1

    大変お手数をおかけして、申し訳ございませんが
    Monacaにログインしていただき、お問い合わせからsnc様の端末名とOSのバージョン
    Monacaデバッガーのバージョンを教えていただけますと幸いでございます。

    何卒よろしく御願い申し上げます。

  • snc

    MONACAチーム様

    別途問い合わせフォームより問い合わせさせていただきましたので、解決方法をご教示頂きたく、
    何卒よろしくお願い申し上げます。

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事