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

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

必要なもの

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

Onsen UI 1.2のダウンロード

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

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


$ npm install

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


$ gulp serve

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

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

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

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


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

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


module.controller('DetailController', function($scope, $data) {
  $scope.item = $data.selectedItem;
  $scope.showAlert = function(item) {
    ons.notification.confirm({
    message: item.title,
      callback: function (index) {
        switch (index) {
        case 1:
          ons.notification.alert({message: "OKボタンが押されました"});
          break;
        case 0:
          ons.notification.prompt({message: "Cancelを押した理由を教えてください",
            callback: function (text) {
              ons.notification.alert({
                message: text
              });
            }
          });
          break;
        }
      }
    });
  };
});

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

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

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

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

ダイアログ ons-dialog

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

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


<script type="text/ons-template" id="alert.html">
  <ons-alert-dialog animation="default" cancelable>
    <div class="alert-dialog-title">Warning!</div>
    <div class="alert-dialog-content">
     An error has occurred!
    </div>
    <div class="alert-dialog-footer">
      <button class="alert-dialog-button">OK</button>
    </div>
  </ons-alert-dialog>
</script>

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


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

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

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

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


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

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


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

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


module.controller('AppController', function($scope, $data) {
    :
  $scope.showPopover = function() {
    ons.createPopover('popover.html').then(function(popover) {
      popover.show('#popover');
    });
  };
});

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

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

カルーセル ons-carousel

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


<ons-page>
  :
  </ons-list>
  <!-- 追加ここから -->
  <ons-carousel swipeable overscrollable auto-scroll var="carousel" style="height: 200px;">
<ons-carousel-item style="background-color: gray;">
      <div class="item-label">GRAY</div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #085078;">
      <div class="item-label">BLUE</div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #373B44;">
      <div class="item-label">DARK</div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #D38312;">
      <div class="item-label">ORANGE</div>
    </ons-carousel-item>
    <ons-carousel-cover><div class="cover-label">Swipe left or right</div></ons-carousel-cover>
  </ons-carousel>
  <!-- 追加ここまで -->
</ons-page>

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

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

今回のコードは GitHub上にアップロードしてあります。Onsen UIの公式サイトから1.2をダウンロードした後、www以下の内容を差し替えてもらえれば（または www/index.html と js/app.js）確認できるようになっています。

今後もOnsen UIには新しい機能が追加されていきます。ぜひご利用ください！

Onsen UI - A Custom Elements-Based HTML5 UI Framework | Onsen UI