2015年12月25日金曜日

マテリアルデザインに挑戦


皆様、お疲れ様です。
入社4ヶ月目の佐藤範幸と申します。

アドベントカレンダー2015のトリでありクリスマスである25日の記事をかかせて頂きます。
私はまだ研修生ということで、皆様に比べ経験も知識もありませんが、温かい目で読んでいただけると幸いです。


Webページデザイン

さて、最近私はCSSとjQueryについて触れる機会が多くあります。
CSSの魅力は、なんといっても目に見えて変化がわかること。
綺麗に配置できたとき、見栄えをかっこ良くできたときは感動します。
そして、jQueryを使うことでページに動きをつけることができます。
たとえば、ボタンをクリックするとクリックしたところから波紋が広がる、ボタンにカーソルをのせるとスライドしてメニューが出てくる、などです。

そんなWebページのデザインについて熱中している私がみつけてしまったもの。
それがこちらのサイト

https://events.google.com/io2015/

Google I/Oのページです。
ページを開いた人はすでにお気付きでしょうが、かっこいい。
ボタンを押すたび、動かすたび、かっこいい。
すぐにその魅力にとりつかれました。
そして、このデザインを"マテリアルデザイン"と呼ぶことを知りました。


 マテリアルデザイン

"マテリアルデザイン"とはGoogleが発表したWebページのデザインのことです。
詳しくはこちらへ。

https://www.google.com/design/spec/material-design/introduction.html#

よくわからないので、私なりに解釈してみました。
・それぞれが独立した紙のようなパーツ
・楽しく直感的なアニメーション
先ほどのGoogle I/Oのページを見ると、どのページにおいても、背景と紙のようなパーツ、ボタンで構成されています。
また、メニューのScheduleをクリックすると波紋が広がり下の線がニュルッと動きます。楽しいですね。


CSS・JSフレームワーク

私は、こんなWebページを作ってみたいと思いました。
ですが、最近CSSとjQueryを始めた私には、一から実装するのはあまりにも難しく感じました。
そこで、調べているうちに"CSS・JSフレームワーク"なるものがある事を知りました。
CSS・JSフレームワークとは、一から構成すると手間がかかり難しい配置やアニメーションなどを、予め用意してあるCSSやJavascriptを組み合わせるだけで簡単にじっそうできるようにしたものです。
たとえば以下の様なものがあります。

・bootstrap   http://getbootstrap.com/
・Materialize   http://materializecss.com/
・Material Design Lite   http://www.getmdl.io/

私は Material Design Liteを使ってマテリアルデザインを実装しようと試みました。


Material Design Liteの使い方

では、簡単な使い方を説明いたします。
まず、先ほどのMaterial Design Liteのページから、TEMPLATESの欄を開いて好みのテンプレートをダウンロードしてください。
そして、好みのテンプレートのフォルダの中のindex.htmlを開き、リンク先や文字列、画像を変えたり、パーツを削除複製して、構成してみてください。
基本的にはこれだけです。
ですが、これだけではオリジナル感が出ません。
そこで、先ほどのMaterial Design Liteのページから、COMPONENTSの欄を開いてみてください。
様々なパーツが有りますね。ここからソースをコピペすることで好きなパーツを組み込むことができます。
以上です。

一からCSSとJSを記述するの方法に比べたら、断然こちらのほうが簡単に作れます。


デメリット

ここまでさんざん持ち上げてきましたが、使っていて悪い面も見えてきました。
CSSフレームワーク全てに当てはまることだと思いますが、仕様を理解しないと使えないこと、元々仕様にないものは実装できないことです。
例えば、メニュー一覧からクリックしたらもう一段メニューを出したい時。これはCOMPONENTSには載っていません。
そこで、少し手を加えて自作のCSSやJSを作ろうとしますが、既存のclassが邪魔してうまく動作してくれません。
仕様を理解しなければならないと思い、CSSやJSファイルを見ますがよくわかりません。
結局、CSSやJSの知識がなければ、自在に作るのは難しいということです。

ですので、こうしたフレームワークを使う際には、テンプレートの通り素直に作るか、仕様が理解しやすいものを使うといいでしょう。


最後に

今回はマテリアルデザインに挑戦ということで、記事を書かせていただきました。
マテリアルデザインについて知らなかった方、興味はあるけど手が出せなかった方、少しでもやってみようと思ってもらえたなら幸いです。

最後まで読んでいただきありがとうございました。 メリークリスマス。良いお年を。

https://santatracker.google.com/?hl=ja#tracker
http://www.adventar.org/calendars/911