Asial Blog

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

1.2リリース!新しく追加されたOnsen UIコンポーネントを紹介します

カテゴリ :
Monaca
タグ :
JavaScript
Onsen UI
angularjs
HTML5

Onsen UIのバージョン1.2がリリースされました。いくつかの新機能がありますが、今回は特にUI周りで追加されたコンポーネントについて、その実装方法を含めて紹介します。



必要なもの



node.jsおよびnpmが必要です。



Onsen UI 1.2のダウンロード



まずはOnsen UI 1.2系(執筆時点で最新版は1.2.1)をダウンロードします。




Onsen UIの公式サイト

Onsen UIの公式サイト



解凍したら、npmを実行します。



  1. $ npm install

これで必要なライブラリがすべてインストールされます。そして、開発用のWebサーバを立ち上げます。



  1. $ gulp serve


サーバを立ち上げると、 http://localhost:8901/index.html をブラウザが開くと思います。これはLiveReloadが入っていますので、HTMLやJavaScriptを編集すればその場で自動リロードが実行されます。




Google Chromeでの表示

Google Chromeでの表示



アラートダイアログ ons-alert-dialog



アラートダイアログはJavaScript標準で用意されているalert/confirm/promptを置き換えるものです。よりネイティブアプリらしい、フラットなデザインのアラートが表示できます。



www/index.htmlを次のように編集します。



  1. <ons-col width="60px"> 
  2.   <div class="item-thum"></div>
  3. </ons-col>
  4. <ons-col ng-click="showAlert(item)"> <!-- ここに追加 -->
  5.   <header>
  6.     <span class="item-title">{{item.title}}</span>
  7.     <span class="item-label">{{item.label}}</span>
  8.     :

そして www/js/app.jsのDetailControllerを次のように修正します。



  1. module.controller('DetailController', function($scope, $data) {
  2.   $scope.item = $data.selectedItem;
  3.   $scope.showAlert = function(item) {
  4.     ons.notification.confirm({
  5.     message: item.title,
  6.       callback: function (index) {
  7.         switch (index) {
  8.         case 1:
  9.           ons.notification.alert({message: "OKボタンが押されました"});
  10.           break;
  11.         case 0:
  12.           ons.notification.prompt({message: "Cancelを押した理由を教えてください",
  13.             callback: function (text) {
  14.               ons.notification.alert({
  15.                 message: text
  16.               });
  17.             }
  18.           });
  19.           break;
  20.         }
  21.       }
  22.     });
  23.   };
  24. });

こうすることで詳細ページにおいて、タイトル部分をタップすると確認ダイアログが出ます。




確認ダイアログ

確認ダイアログ



OKをタップすると、OKボタンが押されたというアラートが出ます。




OKボタンを押した時のアラート

OKボタンを押した時のアラート



Cancelをタップすると理由を入力するプロンプトが表示された後、入力内容を表示するアラートが表示されるといった具合です。




Cancelをタップした時のプロンプト

Cancelをタップした時のプロンプト



メソッド含む詳細はアラートダイアログ ons-alert-dialogでご確認ください。



ダイアログ ons-dialog



アラートダイアログよりもさらにカスタマイズしたUIを実現できるのがons-dialogです。モーダルウィンドウのように使うことができます。



www/index.htmlの中にons-dialogのテンプレートを用意します。下記内容をの上に追加してください。



  1. <script type="text/ons-template" id="alert.html">
  2.   <ons-alert-dialog animation="default" cancelable>
  3.     <div class="alert-dialog-title">Warning!</div>
  4.     <div class="alert-dialog-content">
  5.      An error has occurred!
  6.     </div>
  7.     <div class="alert-dialog-footer">
  8.       <button class="alert-dialog-button">OK</button>
  9.     </div>
  10.   </ons-alert-dialog>
  11. </script>

さらに詳細画面のサムネイル画像部分に対してイベントを設定します。



  1. $scope.showDialog = function (item) {
  2.   ons.createAlertDialog('alert.html').then(function(alertDialog) {
  3.     alertDialog.show();
  4.   });
  5. };

こうすることで、詳細画面のサムネイルをタップするとカスタマイズされたダイアログが表示されます。




ダイアログ表示

ダイアログ表示



メソッド含む詳細はダイアログ ons-dialogでご確認ください。



ポップオーバー ons-popover



ポップオーバーはタップした時にその機能の説明を表示するのに便利です。こちらもまた、www/index.htmlにテンプレートを追加します(の上あたり)。



  1. <script type="text/ons-template" id="popover.html">
  2.   <ons-popover cancelable>
  3.     <p style="text-align: center; opacity: 0.5;">This popover will choose which side it's displayed on automatically.</p>
  4.   </ons-popover>
  5. </script>

さらにツールバー部分を修正します。



  1. <div class="center" id="popover" ng-click="showPopover()">Master Details</div> <!-- ng-click と id を追加します -->

www/js/app.jsのAppControllerの修正をします。



  1. module.controller('AppController', function($scope, $data) {
  2.     :
  3.   $scope.showPopover = function() {
  4.     ons.createPopover('popover.html').then(function(popover) {
  5.       popover.show('#popover');
  6.     });
  7.   };
  8. });

これで準備は完了です。Master Detailsというラベルをタップすると、ポップオーバーが表示されるようになりました。




ポップオーバーの例

ポップオーバーの例



メソッド含む詳細はポップオーバー ons-popoverでご確認ください。





最後はカルーセルです。コンテンツをスワイプ操作で左右に切り替えて表示できます。こちらはデザインのみで試せます。 www/index.htmlに以下を追加します。



  1. <ons-page>
  2.   :
  3.   </ons-list>
  4.   <!-- 追加ここから -->
  5.   <ons-carousel swipeable overscrollable auto-scroll var="carousel" style="height: 200px;">
  6.   <ons-carousel-item style="background-color: gray;">
  7.       <div class="item-label">GRAY</div>
  8.     </ons-carousel-item>
  9.     <ons-carousel-item style="background-color: #085078;">
  10.       <div class="item-label">BLUE</div>
  11.     </ons-carousel-item>
  12.     <ons-carousel-item style="background-color: #373B44;">
  13.       <div class="item-label">DARK</div>
  14.     </ons-carousel-item>
  15.     <ons-carousel-item style="background-color: #D38312;">
  16.       <div class="item-label">ORANGE</div>
  17.     </ons-carousel-item>
  18.     <ons-carousel-cover><div class="cover-label">Swipe left or right</div></ons-carousel-cover>
  19.   </ons-carousel>
  20.   <!-- 追加ここまで -->
  21. </ons-page>

このように追加すると、リストの下にカルーセルが表示されます。スワイプ操作でコンテンツが切り替わりますので、写真を見せたり、チュートリアルに使ったりできます。 next()prev()で前後のカルーセルに移動したり、first()last()で最初(または最後)のカルーセルを表示させることもできます。




カルーセル表示の例

カルーセル表示の例



メソッド含む詳細はカルーセル ons-carouselでご確認ください。






今回のコードは GitHub上にアップロード してあります。Onsen UI - A Custom Elements-Based HTML5 UI Framework | Onsen UI