OnsenUI 2.0βのマテリアルデザインについて
OnsenUI 2.0β の インストール
OnsenUI 2.0β のインストールは簡単です。ただし、NodeJSのnpm、gulpJSについては、事前にセットアップしておいて下さい。セットアップ済の方は、一度アップデートを行った方がよいでしょう。
任意のディレクトリに移動して、以下のコマンドを叩くだけで、サンプルコードがインストールされます。
$ git clone http://github.com/OnsenUI/onsenui2-quickstart
$ cd onsenui2-quickstart
$ npm install & & gulp serve
マテリアルデザインにつ いて
Googleからデザインガイドラインが、2014年6月に公開され、今ではAndroid端末において直感的なUI/UXで統一されたデザインを見ることができます。
「ユーザがストレスを感じないデザイン」というコンセプトで設計されたこのマテリアルデザインは、光を意識して立体的なデザインを行う事で、実際に空間の中で操作している感覚を得られます。また、アニメーションにおいては、質量（マテリアル）を感じることができる自然な動きとなるようデザインされています。
さらに詳しく確認したい方は、此方を参照してみるとよいでしょう。
OnsenUI 2.0βのマテリアルデザイン
さて、先ほどのOnsenUI2.0のQuick Startを実行してみると、早速マテリアルデザインの要素を見ることができます。
gulp serve でブラウザが立ち上がり、サイトを確認できたところで、MATEREAL DESIGN DEMO をクリックすると、クリック時のアニメーションが実行される事でしょう。
遷移先のTODO画面では、チェックボックスのクリックなどで、同様にアニメーションされるのがわかると思います。右下の「＋」Material Fabなども用意されています。
OnsenUI2.0では、ドキュメントのサンプルコードもわかりやすく、OnsenUIを利用していた方なら、迷うことなく使うことができるでしょう。
その他の マテリアルデザイン
次に、他のマテリアルデザインも見ていきましょう。代表的なものをピックアップしてみました。
Material Tabs
Material Text Input
Material Button
Material Switch
Material Checkbox
Material Radio Button
他のデザインは、CSS Componentsから参照できますのでご覧ください。
最後に
マテリアルデザインについては、Googleでガイドラインが公開されていますが、必ずしも簡単に導入できるものではありません。
OnsenUI2.0を利用する事で、新たに導入されたマテリアルデザインをベースに、Theme Rollerからカラーを変更したり、設定済のCSSを変更することで、より簡易にマテリアルデザインを利用することが可能です。
ますますマテリアルデザインが広がりを見せようとしています。導入に辺り検討しているプロジェクトがあるならば、この機会に、利用してみてはいかがでしょうか。
