「マテリアルデザイン」に対応 Onsen UI 2.0 !!

Android向けのハイブリッドアプリを開発されている皆さんに嬉しいニュースがあります。なんとOnsenUI2.0では、マテリアルデザインを追加中です！

OnsenUIはiOSとAndroid両方のアプリ開発に使われるため、それらのプラットフォームに向けたネイティブ様のUIコンポーネントを提供することは理にかなっています。そのため現在のiOSベースのコンポーネントに加えて、マテリアルデザインを開発中というわけです。

これまでたくさんのユーザー様がマテリアルデザインをサポートするようリクエストされてきました。私たちはそういった声に耳を傾け、なるべく早くそれを利用できるように開発にいそしんできました。マテリアルデザインはOnsenUI2.0と並行して開発されており、次の大きなバージョンアップの時にネイティブ様のAndroidコンポーネントが利用できる様になります。

この度、α版は完成しました。まだ重要なタスクがいくつかのこっていますが、大部分はすでに完了しています。

私たちはという、2カラムテーブルレイアウトからなるドラッグ可能なスライドメニューを結びつける新しいコンポーネントを完成させました。このコンポーネントを使えば、一つのコードベースでタブレットでも携帯端末でも見栄えの良いアプリの開発することが容易にできます。近日このコンポーネントの概要と、その他の新しい特徴をブログでお知らせする予定です。

新しいコンポーネント

デザインやレイアウトに加えて、Material Design spec(英語版)ではUIコンポーネント一覧を紹介しています。そのうちいくつかはすでにOnsenUIで利用可能ですが、このサイトにもある新しいスタイルをさらに提供する予定です。現在OnsenUIで利用できないコンポーネントにつきましてはカスタムエレメントとして追加予定です。

マテリアルデザインコンポーネントのブランチはすでに作成されており、マスターブランチにマージされています。気軽にテスト利用してください！以下の例は全て現在のOnsenUIコードベースで動いています。全てインタラクティブなので、ぜひクリックして遊んでみてください。

Floating action button

私たちはという新しいコンポーネントを追加しました。これは「Floating action button」と呼ばれる、押された際にアプリ内で重要な動作を行う丸いボタンを表示します。

クリックまたはタップすると独立した要素が実行する「ripple」エフェクトを示します。Androidのアプリではこのボタンの位置はfixedとして用いられることが多いですが、このブログではinlineとして表示されています。

使い方はとても簡単で、とてもシンプルなマークアップで記述することができます。

<ons-fab>
  <ons-ripple></ons-ripple>
  <ons-icon icon="fa-twitter"></ons-icon>
</ons-fab>

コンポーネントはどんな要素にも用いることができ、その要素に対してrippleエフェクトを生み出します。

Speed dial

コンポーネントを用いれば、押された際に関連する動作のメニューを表示するフローティングアクションボタンが利用できます。アプリにおいていくつかの重要な動作がある際に便利です

これもアプリに組み込むのは簡単で、属性をつけることでその挙動をカスタマイズすることができます。

<ons-speed-dial direction="right">
  <ons-ripple></ons-ripple>
  <ons-icon icon="fa-share"></ons-icon>
  <ons-speed-dial-item>
    <ons-ripple></ons-ripple>
    <ons-icon icon="fa-twitter"></ons-icon>
  </ons-speed-dial-item>
  <ons-speed-dial-item>
    <ons-ripple></ons-ripple>
    <ons-icon icon="fa-facebook"></ons-icon>
  </ons-speed-dial-item>
</ons-speed-dial>

Toggle switch

はiOSネイティブアプリのものに似たスイッチを表示する際に使われます。私たちはコンポーネントのスタイルを変えられる「material」というmodifier属性を追加しました。機能はとちょうど同じものとなっています。

<ons-switch modifier="material"></ons-switch>
<ons-switch modifier="material" disabled></ons-switch>

現在のバージョンではクリック、またはタップされた際にスイッチするようになっています。私たちはさらにネイティブに近いエクスペリエンスを提供するために、ドラッグ操作による切り替えも可能にする予定です。

Progress indicator

これはOnsenUIに存在していなかったもう一つの新しいコンポーネントです。という新しいエレメントは、プログレスインディケーターを表示します。

このエレメントには二種類あります。一つは水平のプログレスバーで、もう一つは円形のものです。両方同じカスタムエレメントを用いて表示することができます。そしてまた両方が「indeterminate」モードを持ち、それが指定されると、進行状況がわからない時に用いることのできる無限ループのアニメーションを表示することができます。

この動作はカスタム属性を使って自由に変更することができます。

<ons-progress value="34" secondary-value="74"></ons-progress>
<ons-progress indeterminate></ons-progress>
<ons-progress type="circular" value="75" secondary-value="0"></ons-progress>
<ons-progress type="circular" value="32" secondary-value="55"></ons-progress>
<ons-progress type="circular" indeterminate></ons-progress>

Form element

私たちはまた、チェックボックスやラジオボタン、そしてレンジスライダーといったフォーム要素も提供します。

さらなるコンポーネント

いくつかのコンポーネントはすでにマスターブランチにマージされていますが、input要素やトースト通知、ダイアログ通知、そしてアイコンといった新しいコンポーネントをどんどん追加していく予定です。
OnsenUIに追加してほしいコンポーネントがあれば、下にコメントしていただくか、GitHubでissueを作成していただけると幸いです。私たちはいつでも皆様からのご意見を歓迎しています。

あなたの協力が必要です！

Onsen UIはオープンソースプロジェクトであり、コミュニティの支援で成り立っています。コミュニティの皆さんに助けていただけるととてもありがたいです。
その一番の場所はGithub issuesページです。もしなにか解決したい問題があれば、ここに行ってレポジトリをフォークし、プルリクエストを送ってください。新しい機能も歓迎します。プルリクエストを受け取るとできるだけ早くレビューさせていただきます。
また、GitterやStack Overflowで他のユーザー様の手助けをしていただけるとありがたく思います。