CordovaやPhoneGapを使ったHTML5ハイブリッドアプリを開発するためのUIフレームワーク、Onsen UIのバージョン1.2.0がとうとうリリースされました。このリリースには、アラートダイアログ(ons-alert-dialog)、ダイアログ(ons-dialog)、ポップオーバー(ons-popover)、カルーセル(ons-carousel)等の新しく追加されたUIコンポーネントが含まれています。

この記事では、今回新しく追加された機能や変更について紹介していきます。

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

 

アラートダイアログを表示するためのons-alert-dialog要素が追加されました。ユーザーにちょっとした確認やYES/NOを問いかけることができます。アラートダイアログの中には、開発者は自由にHTMLを記述することもできます。また、JavaScriptで標準で用意されているalert(), confirm(), prompt() 関数を置き換えることができる ons.notifaction.alert(), ons.notification.confirm(), ons.notification.prompt() メソッドが追加されました。

ダイアログ ons-dialog要素

 

アラートダイアログに加えて、通常のコンテンツや画面を表示するダイアログコンポーネントを表現するons-dialog要素 も追加されました。ダイアログの中には、ons-navigatorやons-pageなどを表示できます。タブレットアプリなどでよく見かけるモーダルダイアログを表現できます。

ポップオーバー ons-popover要素

 

指定した要素に対して吹き出しのような形のポップオーバーを表示するためのons-popover要素が追加されました。ポップオーバーは、ある要素の詳細な情報を表示したい時や、オプション選択やアクションメニューを開くUIとしてよく利用されます。

カルーセル ons-carousel要素

 

ユーザからの要望が多かった、カルーセルを表現するons-carousel要素が追加されました。カルーセルの領域は、画面全体に広げたり画面の一部に設定したりなど自由に大きさを設定できます。また、横方向と縦方向両方のスクロールに対応しています。

コマンドラインインターフェイスの追加

 

Onsen UIとは微妙に違うのですが、v1.2のリリースに合わせて、コマンドライン上で利用できるmonacaコマンドがリリースされました。cordovaコマンドと互換のコマンドを持ちながら、簡単にOnsen UIのプロジェクトテンプレートを含んだCordovaプロジェクトを作成することが出来ます。

その他の主な変更

その他、新しく追加されたUIの他に以下のような変更が加わっています。

・CSSのテーマのデフォルトのカラースキーマの変更
・ons-screen要素や、その他非推奨になっていたメソッドやプロパティの削除
・ソフトウェアキーボードの開閉を検知するons-keyboard-active, ons-keyboard-inactive属性の追加
・同梱しているAngularJSを1.3.0にアップデート
・各種バグの修正

全ての変更の詳細はCHANGELOGを参照して下さい。

終わりに

Onsen UIはHTML5ハイブリッドアプリを開発するためのフレームワークとして、これからも継続的に開発が続けられていきます。CordovaやPhoneGapなどを使っている開発者の方は是非このOnsen UIを試してみてください。Onsen UIは公式ウェブサイトのonsen.ioでドキュメントやサンプルコードと共に配布されています。バグを見つけた場合はGitHubリポジトリのissuesまで報告お願いします。