Asial Blog

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

Onsen UI を使用して、HTML5ハイブリッドアプリを作ってみよう

カテゴリ :
フロントエンド(HTML5)
タグ :
Monaca
HTML5
JavaScript
Onsen UI
今回の記事は、Onsen UI blogで2月に公開した"Developing hybrid mobile applications with Onsen UI"の翻訳記事です。

ハイブリッドアプリ開発のお話を、最近はあちらこちらで耳にするようになりました。プログラム知識が乏しい初心者マークの方、手っ取り早くアプリを開発したい方には、ネイティブアプリ開発のハードルは、高いのが現状です。ネイティブアプリを開発するためには、各プラットフォーム専用のプログラム言語を学び、かつ、開発対象の端末側の機能も学ぶ必要があります。
もちろん、パフォーマンスが良い、端末側のリソースが利用できるなど、ネイティブアプリの開発にも、利点はたくさんあります。



一方、ハイブリッドアプリで使用するテクノロジーは、Web アプリで使用するもの ( HTML、CSS、JavaScript ) と同様であり、プラットフォームには依存しません。Web アプリのテクノロジーに関するノウハウは、膨大で、かつ、簡単に、インターネットから入手できます。
また、ハイブリッドアプリの開発時には、Web 開発で使用していたツールやフレームワークを、そのまま流用できます。jQuery や AngularJS が良い例です。よって、Web アプリ開発者も、ハイブリッドアプリ開発に転向しやすいのではないでしょうか。
ハイブリッドアプリは、ネイティブアプリよりも性能が劣ると、一般的に思われていますが、以前よりもパワフルになった、現在の端末では、ユーザーがその差に気付くことはありません。

ここでは、ハイブリッドアプリのサンプルとして、メモ帳アプリを構築し、併せて、Onsen UIの使用方法も学びます。Onsen UI を使用すれば、洗練されたユーザーインターフェイス ( UI ) を簡単に構築できます。また、アプリの開発には、Monaca クラウド IDEを使用します。Monaca クラウド IDE は、Onsen UI をサポートし、かつ、デバッガーも実装されています ( 機能制限なしの無料アカウントを、こちらで作成できます )。Monaca クラウド IDE 上では、アプリの確認・修正を行え、実機上では、アプリの確認を行えます。こちらから、無料で、端末用のデバッガーを入手できます。また、アプリ開発に不慣れな方でも、アプリへのプラグインのインポート、デバッグ、ビルドは、Monaca 側で行ってくれるので安心です。他の IDE を使用する場合には、必要なプラグインを手動で組み込んでください。

Onsen UI と AngularJS



Onsen UI は、HTML5 フレームワークです。Onsen UI を使用すれば、モダンで、見栄えのするユーザーインターフェイスを作成できます。これにより、UI 開発に費やしていた時間を縮小でき、
その分、アプリ本体の性能・機能の充実に、時間を充てることができます。Onsen UI は、AngularJS の使用を前提に設計されていますが、jQuery や他のフレームワークとも併用できます。ここでは、AngularJS を使用しますが、Onsen UI に焦点を当てるため、AngularJS に関しては、込み入った箇所のみ、解説します。

ここで作成するアプリは、メモ帳アプリです。このアプリでは、作業の一覧の保存、作業カテゴリー別のソート、作業詳細の編集・削除を行います。以下の Onsen UI コンポーネントを使用して、アプリを構築します。


  • ons-navigator

  • ons-toolbar

  • ons-sliding-menu

  • ons-list

  • ons-carousel

  • ons-template

  • ons-popover



これらのコンポーネント ( 要素 ) の使用方法も、順次、解説します。スライディングメニュー表示を行うページを指定したり、または、カルーセルを使用して、複数ある表示用コンテンツをまとめるなど、表示機能のオプションも充実しています。Onsen UI コンポーネントのドキュメントは、こちらでご確認ください。また、こちらも併せてご確認ください。

ここでは、Onsen UI 1.2.1 を使用します。Monacaをご利用の方は、ダッシュボードに表示されている 「 Onsen UI 最小限のテンプレート 」 を開いてください。このテンプレートでは、AngularJS は、ライブラリーとして、デフォルトで組み込まれています。Monaca を利用しない場合には、Onsen UI のドキュメントを確認して、必要なライブラリーを組み込んでください。

最初に、このアプリにおける、AngularJS の取り扱い方法を解説します。AngularJS では、アプリを構成する各ページまたはメインとなる各要素 ( <ons-XXX> ) に、それぞれ、1 個のコントローラーを紐付けます。コントローラーでは、紐付けされたページで使用するスコープ ( Scope ) の定義、および、必要な変数と関数の定義を行います。
たとえば、登録した作業の一覧をメインページに表示する場合、メインページ用のコントローラーを作成して、スコープを定義して、作業データを格納した配列を、そのスコープに代入する処理を行います。また、このコントローラー内に、配列データの編集・削除用の関数なども置けます。しかし、作業別にコントローラーを作成して、処理を行った方が良い場合もあります。このサンプルアプリでは、使用しているページの役割がそれぞれ異なるため、処理を分け、データのみ、コントローラー間で共有します ( 作業の 「 登録 」 ページ、「 詳細表示 」 ページなど、処理は異なりますが、いずれも作業詳細のデータを共有します )。



よって、データ共有の際には、コントローラー間の交信が必要となります。このアプリでは、serviceを 1 個使用して、登録済み作業の保存、および、コントーラー間で共通する処理の制御を行います。このようにすることで、各コントローラーから、必要に応じて、この service を呼び出せます。
登録された作業と作業一覧は、オブジェクトであり、models/Memo.js 内で定義されています。各作業のオブジェクトには、必要な情報 ( 名前、カテゴリー、説明、作成日、進捗状態 ) が格納されます。このような設計 ( model ディレクトリーの設置とオブジェクトの定義 ) になっていますが、これは、Onsen UI 使用時のお手本ではなく、一例ですので、設計は、開発者が自由に行ってください。サンプルコードは、GitHub から入手できます。

前置きが長くなりました。ここからは、実際にコードを確認してみましょう。

メモ帳アプリのコード

このアプリのコードは、GitHubから入手できます。不明確な点がある場合には、コードの中をご確認ください。また、コードを確認する前に、以下で、アプリを実際に操作してみましょう。



スタイルとデザインは、自由に、カスタマイズできます。

デザインとコード

Onsen UI 要素と起動時のページ

Onsen UI では、メインとなる要素は、1 つに絞ることを推奨します。このメインの要素は、アプリの 「 型 ( pattern ) 」となり、ページ制御に適用・使用されます。
たとえば、ページ遷移の制御を行うなら、スライディングメニュー型、タブバー型などがあります。ここでは、最も頻繁に使用されるナビゲーション型を使用します。この型を使用すると、親子関係がページ間に設定されます ( つまり、スタック内にページが置かれ、それぞれを行き来します )。
よって、ここでは、ons-navigator を、メインの要素として、index.html に置きます。

  1. <ons-navigator var="myNavigator">
  2.   <ons-page>
  3.     <ons-toolbar fixed-style>
  4.       <div class="center">Memo Onsen UI App Example</div>
  5.     </ons-toolbar>
  6.         <div style="margin: auto; width: 95%;">
  7.           <div class="margins">
  8.             <span style="color:#666"><ons-icon icon="fa-check-square-o" size="22em"></ons-icon></span>
  9.           </div>
  10.         </div>
  11.     <ons-button modifier="large--cta" onclick="myNavigator.resetToPage('slidingmenu.html')">Start</ons-button>
  12.   </ons-page>
  13. </ons-navigator>

var=”myNavigator” を指定して、ナビゲーター ( ons-navigator ) の名前を宣言します。これにより、グローバル変数として、後々、名前で参照できます。ナビゲーター内では、ons-page を使用して、起動時のページを指定します。このページ上では、ons-toolbar を使用して、アプリのタイトルを表示します。

Tip 1 : class=”center” を使用して、タイトルを設定しても、アプリを実行する OS 側が、スタイルを決定します。iOS では、中央揃えとなり、Android では、左揃えとなります。タイトルを中央に固定する場合には、ons-toolbar 内で、fixed-style を設定します。

表示イメージは自由に設定できますが、ここでは、ons-icon を使用して、アイコンを表示します。Onsen UI では、IoniconsFontawesomeのアイコンも使用でき、どの端末上でも支障なく表示できます。アプリ起動時のページで使用する最後の要素は、スタートボタンです。スタートボタンをクリックすると、アプリのメインページに遷移します。ここでは、ボタンに関しては、ons-button を使用して、また、アプリの外見の選択に関しては、modifierを使用します。ボタンのクリック時、ナビゲーターが、ページを遷移させます。ここでは、pushPage( … ) の代わりに、resetToPage( … ) を使用して、前のページをスタックからすべて削除して、slidingmenu.html 内で指定されているページを表示します ( 0 から開始 )。このような処理をすることで、メインページに遷移した後、戻るボタンを押しても、起動時のページに戻ることはありません。

メニュー

メインページを解説します。こちらのメインページ上で、アプリに登録された作業の一覧が表示されます。スライディングメニューをこのページ上に置くので、メインページの親として、このメニューの要素を設定します。slidingmenu.html を作成して、このページ上に、スライディングメニュー本体を設定します。Onsen UI では、テンプレート ( ons-template ) を使用すれば、index.html 内に、別の HTML ページを作成して、配置でき、通常の HTML と同様に動作します。各 HTML のページがコンパクトであれば、1 ページ上にすべてのページが収まります。

  1. <!-- SLIDING MENU -->
  2. <ons-template id="slidingmenu.html">
  3.   <ons-page>
  4.     <ons-sliding-menu var="slidingMenu" swipeable="false" menu-page="menu.html" main-page="memo.html"  side="left" type="overlay" max-slide-distance="200px">
  5.     </ons-sliding-menu>
  6.   </ons-page>
  7. </ons-template>
ons-sliding-menu を使用して、menu-page=”menu.html” から、メニュー用コンテンツを取得します。また、スライディングメニューは、main-page=”memo.html” 上に表示されます。ここでは、作業一覧に設定されているカルーセルの誤作動を避けるため、swipeable=”false” にします。

menu.html の内容を見てみましょう。

  1. <!-- MENU -->
  2. <ons-template id="menu.html">
  3.   <ons-page fixed-style style="background-color: white">
  4.     <ons-toolbar fixed-style>
  5.       <div class="center">Categories</div>
  6.       <div class="right" style="margin-top:5px"><ons-button modifier="quiet" ng-click="slidingMenu.closeMenu()"><ons-icon icon="fa-chevron-left" size="25px" fixed-width="false" style="color: #5087c3"></ons-icon></ons-back-button></div>
  7.     </ons-toolbar>
  8.  
  9.         <!-- List of items -->
  10.     <ons-list id="categoryList" ng-controller="categoryController">

こちらは、ons-list-item の静的な部分です。

  1. <ons-list-item
  2.     modifier="tappable" class="list__item__line-height"
  3.     ng-click="setViewRefresh('*'); slidingMenu.closeMenu();">
  4.     <i class="ion-home fa-lg" style="color: #666"></i>
  5.     &nbsp; All
  6.     <span class="item-label">{{countAll}}</span>
  7.   </ons-list-item>
  8.   <ons-list-item
  9.     modifier="tappable" class="list__item__line-height"
  10.     ng-click="setViewRefresh('~'); slidingMenu.closeMenu();">
  11.     <i class="ion-checkmark" style="color: #666"></i>
  12.     &nbsp; Completed
  13.     <span class="item-label">{{completedCount ? completedCount : 0}}</span>
  14.   </ons-list-item>
  15.   <ons-list-header>
  16.     <div style="text-align: center;"><ons-icon icon="ion-minus-round"></ons-icon></div>
  17.   </ons-list-header>
  18.   <ons-list-item
  19.     modifier="tappable" class="list__item__line-height"
  20.     ng-click="setViewRefresh('=', ' '); slidingMenu.closeMenu();">
  21.     <i class="ion-qr-scanner fa-lg" style="color: #666"></i>
  22.     &nbsp; No category
  23.     <span class="item-label">{{countCategories[' '] ? (countCategories[' '].total - countCategories[' '].completed) : 0}} ({{countCategories[' '] ? countCategories[' '].total : 0}})</span>
  24.   </ons-list-item>

こちらは、ons-list-item の動的な部分です ( AngularJS の ng-repeat を使用 )。

  1. <ons-list-item
  2.         modifier="tappable" class="list__item__line-height"
  3.         ng-click="setViewRefresh('=', item); slidingMenu.closeMenu();" ng-repeat="item in categoryList">
  4.         <i class="ion-folder fa-lg" style="color: #666"></i>
  5.         &nbsp; {{item}}
  6.         <span class="item-label">{{countCategories[item].total - countCategories[item].completed}} ({{countCategories[item].total}})</span>
  7.       </ons-list-item>
  8.     </ons-list>
  9.   </ons-page>
  10. </ons-template>

ons-template を使用しているので、こちらも index.html 内に置けます。また、ons-toolbar を使用して、メニューのタイトルと閉じるボタンを設定しています。このメニューでは、作業に紐付けされたカテゴリーに応じて、該当する作業を一覧化します。
カテゴリー一覧の内容は、ng-controller="categoryController" から取得します。静的な部分には、3 つの固定メニューがあります ( すべて表示、完了した作業を表示、未カテゴリーの作業の表示 )。こちらは、メニューの例なので、自由に編集してください。

固定メニューの表示後に、AngularJS の ng-repeat を使用して ( 最後の ons-list-item を参照 )、ons-list-item を繰り返します。この設定で、すべてのカテゴリーを、メニュー上に表示できます。また、ここでは、各カテゴリーに該当する作業数を表示するため、categoryController から、その情報を取得します。このサンプルでは、countAll と呼ぶカウンター変数を使用して、メモ帳アプリ内に登録されている作業の総数を取得します。この変数は、service ( memoService ) 内に置かれ、コントローラー経由で変更 ( 作業の登録・削除時 ) できます。また、ここでは、categoryController 内に、この変数に対して、リスナーを設定します。これにより、作業数に変更があれば、AngularJS 側で、自動的に値を更新してくれます ( View の更新 )。

  1. $scope.$watch(function() {
  2.   return memoService.countRawMemo();
  3. }, function(newValue) {
  4.   $scope.countAll = newValue;
  5. }, true);

categoryController の setViewRefresh(...) メソッドを使用して、表示内容を変更します ( View の更新 )。

メインページ

メインページ ( memo.html ) の内容を確認しましょう。ここで、登録済み作業が一覧化されます。

  1. <ons-page ng-controller="memoController">
  2.   <ons-toolbar fixed-style ng-controller="slidingMenuController">
  3.     <div class="left"><ons-toolbar-button ng-click="slidingMenu.openMenu(); checkSlidingMenuStatus();"><ons-icon icon="bars"></ons-icon></ons-toolbar-button></div>
  4.     <div class="center">My tasks</div>
  5.     <div class="right">
  6.       <ons-button modifier="quiet" onclick="myNavigator.pushPage('additem.html')">
  7.           New <ons-icon icon="fa-plus-circle "></ons-icon>
  8.       </ons-button>
  9.     </div>
  10.   </ons-toolbar>

作業を一覧化します。カルーセル表示 ( 各作業の表示時 ) を使用します。

  1. <ons-carousel-item class="list-action-menu">
  2.           <!-- ACTIONS -->
  3.           <div class="main-container">
  4.             <div class="fixer-container">
  5.               <div class="blockInline">
  6.                 <ons-button ng-click="deleteItem($index); carousel['id'+$index].setActiveCarouselItemIndex(1);">
  7.                   Delete
  8.                   <ons-icon icon="ion-trash-a"></ons-icon>
  9.                 </ons-button>
  10.               </div>
  11.               <div class="blockInline">
  12.                 <ons-button ng-click="carousel['id'+$index].setActiveCarouselItemIndex(1); completeItem($index);" ng-hide="item.completed">
  13.                   Complete
  14.                   <ons-icon icon="ion-checkmark-round"></ons-icon>
  15.                 </ons-button>
  16.               </div>
  17.               <div class="blockInline">
  18.                 <ons-button ng-click="setSelected($index); myNavigator.pushPage('itemdetails.html');">
  19.                   Details
  20.                   <ons-icon icon="ion-clipboard"></ons-icon>
  21.                 </ons-button>
  22.               </div>
  23.             </div>
  24.           </div>
  25.         </ons-carousel-item>

カルーセルのインデックス番号 0 には、3 つの処理 ( 3 つのボタン ) を設定します。

  1. <ons-carousel-item class="list-action-item" ng-click="setSelected($index); myNavigator.pushPage('itemdetails.html');">
  2.           <div class="name">
  3.             {{item.name}} <span class="desc"><ons-icon icon="ion-checkmark-round" ng-show="item.completed"></ons-icon></span>
  4.           </div>
  5.           <div class="desc">
  6.             {{item.date.getFullYear() + "/" + (item.date.getMonth() + 1) + "/" + item.date.getDate()}}
  7.           </div>
  8.         </ons-carousel-item>
  9.       </ons-carousel>
  10.     </ons-list-item>
  11.     </ons-list>
  12. </ons-page>

カルーセルのインデックス番号 1 には、作業詳細の表示設定をします。


このページは、重要で、大きいため、ons-template を使用して、index.html 内に置くのではなく、別個のページを用意します。index.html 内に、まとめて置く場合には、上述したスライディングメニューなど、比較的、短い記述に限定します。いずれの場合でも、ons-toolbar を使用して、
タイトル、新規のページへのリンク ( additems.html の説明は後ほど )、スライディングメニューの表示ボタンを設定します。

Tip 2 : スライディングメニューに設定してある、ちょっとした作り込みをご紹介します。スライディングメニューは、表示されているときだけ、スワイプでき、非表示のときは、スワイプ不可になっています。これにより、作業一覧に組み込まれたカルーセルと衝突しません。ここでは、スライディングメニューの動作を変更するため、以下のように、2 つのイベントを用意します。

  1. myApp.controller('slidingMenuController', function($scope){
  2.    $scope.slidingMenu.on('postclose', function(){ $scope.slidingMenu.setSwipeable(false); });
  3.    $scope.slidingMenu.on('postopen', function(){ $scope.slidingMenu.setSwipeable(true); });
  4. });

また、表示する作業がない場合には、ng-hide を使用して、メッセージを表示します。また、ons-list を動的に使用して、かつ、ons-list 内の item ( ons-list-item ) 毎に、ons-carousel 設定を行って、作業の一覧を表示します。ここでは、ng-repeat を使用して、memoController 側から受け取った、作業を一覧表示します。また、各作業 ( ons-list-item ) には、ons-carousel が設定されています。カルーセルには、インデックス番号 ( 0、1 ) があり、1 には作業詳細、0 には処理ボタン ( ons-carousel-item ) を設定しています。作業一覧の表示時には、インデックス番号 1 の内容が表示され、右方向へスワイプすると、0 の内容が表示されます。

Tip 3 : インデックス番号 0 のボタンの縦位置・横位置は、その数に関わらず、中央揃えになります。



CSS の記述を、以下に記します。

  1. .main-container {
  2.     float: left;
  3.     position: relative;
  4.     left: 50%;
  5. }
  6.  
  7. .fixer-container{
  8.     float: left;
  9.     position: relative;
  10.     left: -50%;
  11. }
  12.  
  13. .blockInline{
  14.     margin-left: 3px;
  15.     margin-right: 3px;
  16.     display: inline;
  17.     position: relative;
  18.     top: 50%;
  19.     transform: translateY(-50%);
  20. }

作業一覧から、作業を削除する場合は、memoController 内に記述された、削除用の関数を実行します。また、作業内容の変更や作業完了のマーク付けも、対応する関数を実行して行います。作業完了の処理を行う関数では、作業一覧の再表示時に、完了作業の横に、チェックマークアイコンを表示するように、かつ、インデックス番号 1 の内容を表示するように、「 対応する 」 カルーセルを更新しています。

Tip 4 : カルーセルを更新して、表示を元に戻すには、一覧上のカルーセル毎に、一意の名前を、動的に割り振ります。これにより、後から、その名前を参照でき、また、インデックス番号も更新できます ( よって、上述の 「 対応する 」 カルーセルを更新できます )。ここでは、var="{{'carousel.id' + $index}}" を使用して、carousel.idX 形式で、カルーセルに名前を割り振ります。この X は、ons-list 内の item ( ons-list-item ) のインデックス番号です。静的な方法 ( 例 : var=”myCarousel” ) で、item ( ons-list-item ) の名前を振った場合、ng-repeat 下では、旧 item ( ons-list-item ) の名前がすべて上書きされ、よって、myCarousel を使用して呼び出せるのは、最後の item だけになってしまいます。また、setActiveCarouselItemIndex(1) 関数を呼び出す際には、carousel['id'+$index].setActiveCarouselItemIndex(1); のように、ドット記法ではなく、ブラケット記法を使用します。

作業詳細の表示と変更

作業詳細の表示と変更に関して、解説します。itemdetails.html の内容を見てみましょう。ここでは、コントローラーを 1 つ設定しています。

  1. <ons-page ng-controller="detailsController">
  2.   <ons-toolbar fixed-style>
  3.     <div class="left"><ons-back-button>Back</ons-back-button></div>
  4.     <div class="center"> Task details </div>
  5.         <div class="right">
  6.       <ons-button modifier="quiet" ng-click="modifyItem();">
  7.       Save <ons-icon icon="ion-checkmark"></ons-icon>
  8.       </ons-button>
  9.         </div>
  10.   </ons-toolbar>
  11.   <div style="text-align: center">
  12.     <br />
  13.     <ons-list id="itemList">
  14.       <ons-list-item class="item">
  15.         <ons-row>
  16.           <ons-col width="60px">
  17.             <div class="item-thum"></div>
  18.           </ons-col>
  19.           <ons-col>
  20.             <header>
  21.               <span id="item-name" class="item-name"><input type="text" ng-model="item_name" placeholder="Name" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;"></span>
  22.               <span id="item-category" class="item-name"><input type="text" ng-model="item_category" placeholder="Category" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;"></span>
  23.               <span id="item-description" class="item-name"><textarea type="text" ng-model="item_description" placeholder="Description"  class="textarea textarea--transparent" style="margin-top:8px; width: 100%;"></span>
  24.             </header>
  25.           </ons-col>
  26.         </ons-row>
  27.       </ons-list-item>
  28.     </ons-list>
  29.   </div>
  30. </ons-page>

このページは、myNavigator.pushPage( … ) を使用して、メインページから呼び出されます。myNavigator.pushPage( … ) が行う処理は、ons-navigator 内のスタックへ、新たなページを追加することです。追加後は、myNavigator.popPage() または ons-back-button を使用すれば、スタックに置かれている、前のページに戻れます。

このページ上では、指定された作業の内容を、HTML の input 内に表示します。HTML の input を使用することにより、表示と同時に、変更も行えます。また、各 input には、ng-model を設定 ( 紐付け ) して、コントローラーから新しい値を参照できるようにします。たとえば、ここでは、作業名と ng-model=”item_name” を紐付けして、detailsController 内から、$scope.item_name を使用して、作業名を参照しています。

新規作業の追加とポップアップ表示



新規作業の追加処理は、additem.html で行います。非常に簡単な処理です。前述のように、HTML の input と ng-model の紐付けを行い、addItemController 内で、入力値を確認した後、memoService の作業一覧へ新規作業を追加します。
また、ここでは、名前用の input が未入力の場合、警告を出し、新規作業の作成を行えないようにします。この処理を行う場合、最初に、index.html 内に、ポップアップ ( ons-popover ) を、以下のように追加します。

  1. <!-- POPOVER -->
  2. <ons-template id="popover.html">
  3.   <ons-popover direction="up down" cancelable>
  4.     <div style="text-align: center; opacity: 0.5;">
  5.       <p>Name input is empty!</p>
  6.       <p><small>Enter a name for your task to create or modify it.</small></p>
  7.     </div>
  8.   </ons-popover>
  9. </ons-template>

次に、addItemController と detailsController のコントローラーから、変更の保存時に、ポップアップを呼び出せるように処理します。

  1. ons.createPopover('popover.html').then(function(popover) {
  2.   $scope.popover = popover;
  3. });
  4. $scope.popover.show('#item-name');

最後の行では、HTML 要素 の '#item-name' 上に、ポップアップを表示します。ここでは、input が未入力の場合に、ポップアップを表示しますが、表示のタイミングは、制御する必要があります。

備考

ここで使用したサンプルアプリでは、Onsen UI と AngularJS に焦点を当てたため、window.localStorage、Web SQL、IndexedDB などを使用した、データの保存方法に関しては、触れていません。もちろん、実装できますが、ここでは、固定のサンプルデータを使用して、アプリの動作を即検証できるようにしています。

結論

ここでは、Onsen UI が提供してくれる、使えるユーザーインターフェイスを使用して、簡単なハイブリッドアプリを開発しました。また、開発に役立つ Tip も併記しました。AngularJS の使用は、必須ではありませんが、Onsen UI と相性が良いため、使用した方が効率が良くなります。前述のように、ここで使用したコードは、GitHub上に置いてありますので、自由に、触ってみてください。

以上ですが、開発を簡単にしてくれる、Onsen UI のようなツールがあれば、ハイブリッドアプリの開発も難しくはありません。質問がある方は、このブログにコメントを残すか、スタックオーバーフロー ( onsen-ui タグ下 )に寄稿してください。Onsen UI の使用例に関しては、今後もブログにアップしていく予定です。