エンジニアブログ担当の近藤です。
Apple Watch発売以来いつもWatch OSについて紹介していましたが、今回はWEBのお話です。
最近WEBサイトを閲覧していると、Twitter社が公開しているBootstrapというCSSとJSのライブラリを使っている画面が作られているWEBサイトが多く見かけます。
Bootstrapを使うととっても手軽にレスポンシブデザインでWEBサイトを作れちゃうというあれですね。
これと似た仕組みで、昨年Googleが公開した「Material Design Lite」というライブラリがあります。
Android 5.0から対応しているマテリアルデザインをWEBでも手軽に実装できるようにするためのものです。
今回はMaterial Design Lite（以下MDL）の導入と簡単に使い方を紹介します。
htmlファイルを作成
テキストエディタで.htmlファイルを作りましょう。
CSSとJSのインクルード
jQueryなどのように必要なCSSとJSファイルはCDNで提供されています。
headタグの中に下記のように記述します。
これだけでMDLが使える環境が整います。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> </body> </html>
マテリアルデザインなボタンを作ってみる
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <!--ボタン--> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Button</button> </body> </html>
buttonタグにclassがいろいろ指定されていますが、「mdl-xxx」というがMDLで定義されているボタンのスタイルです。
定義されているclassを用途に応じて適用してボタンのスタイルを決めます。
定義は種類がいくつかあり、アイコンタイプやアニメーションしないタイプなど、classの組み合わせ次第でいろんなタイプのボタンを作ることが出来ます。
詳細は公式のドキュメントを参照してください。
スクリーンショットのためアニメーションしませんが、Androidアプリで見覚えのあるデザインのボタンが表示され、クリックすると波紋のようなアニメーションが表示されます。
他にもいろいろあるコンポーネント
公式サイトの「COMPONENT」ページに、サンプルコードが公開されているので、詳しい使い方はそちらを参照してください。ボタン以外にもマテリアルデザインが適用できる部品が色々あります。
これらのコンポーネントを使ってモバイルサイトを作れば、ぱっと見Androidアプリのようなモバイルサイトを作ることが出来ます。
| Badges | アイコンにつけるバッチです。 |
|---|---|
| Buttons | ボタンです。 |
| Cards | 一覧性のある情報はカード形式で表示しましょうっていうマテリアルデザインで提唱されているあれです。 |
| Layout | Bootstrapライクな画面を12分割してレスポンシブなレイアウトを表現するグリッドシステムやナビゲーションレイアウトです。 |
| Loading | ローディング中のくるくる回るヤツや、プログレスバーです。 |
| Menus | プルダウンタイプのメニュー表示です。 |
| Sliders | HTML5で追加されたスライダー用のスタイルです。 |
| Toggles | チェックボックスやラジオボタン用のスタイルです。 |
| Tables | テーブルタグ用のスタイルです。 |
| Text Fields | テキストボックス用のスタイルです。 |
| Tooltips | マウスカーソルを乗せた時に表示する吹き出しの様なものです。 |
ちょっとしたアプリっぽいレイアウト
MDLのサイトのドキュメントやサンプルコードを参考にちょっとしたBMI計算機アプリっぽい画面を作ってみました。（BMI計算は出来ません）
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <!-- Title --> <span class="mdl-layout-title">BMI計算機</span> <div class="mdl-layout-spacer"></div> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">メニュー</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">グラフ</a> <a class="mdl-navigation__link" href="">最小BMI値</a> <a class="mdl-navigation__link" href="">最大BMI値</a> <a class="mdl-navigation__link" href="">平均BMI値</a> </nav> </div> <main class="mdl-layout__content"> <!--ローディング--> <div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div> <!--コンテンツ--> <div class="page-content"> <div class="mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid"> <!--テキストボックス--> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="textbox1"> <label class="mdl-textfield__label" for="textbox1">身長(cm)</label> <span class="mdl-textfield__error">半角数字で入力してね</span> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="textbox2"> <label class="mdl-textfield__label" for="textbox2">体重(kg)</label> <span class="mdl-textfield__error">半角数字で入力してね</span> </div> <!--ラジオボタン--> <div> <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1"> <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked> <span class="mdl-radio__label">男性</span> </label> <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2"> <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2"> <span class="mdl-radio__label">女性</span> </label> </div> <!--ボタン--> <div class="mdl-card__actions"> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">BMI計算</button> </div> </div> <!--計算結果--> <div class="mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" disabled> <label class="mdl-textfield__label" for="sample3">計算結果</label> </div> </div> </div> </main> </div> </body> </html>
・左上のボタンを押すとメニュー画面が左側から飛び出てきます。
・計算中はナビゲーションの下部にローディングのアニメーションが動きます。
（BMI計算ごときでローディングが必要なほどの遅いアプリはどうかと思うが・・・あくまでも例として）
・テキストボックスもフォーカスするとアニメーションします。
・テキストボックスに異常な値を入力するとエラー表示もできます。
・ラジオボタンもクリック時にアニメーションします。
スクリーンショットではアニメーションする様子がわかりにくいので、実際にHTMLを書いて動かしてみてください。
各部品がヌルヌルとアニメーションしてスマホアプリっぽい動きを見せてくれます。
使ってみた感想
Bootstrapと比べると機能的にはまだまだ少ないなぁという印象です。例えば、BootstrapにはモーダルダイアログがあるけどMDLには無いとか。
サンプルコードからも読み取れますが、MDLの機能だけでは足りない部分は自分で作りこんで行く必要がBootstrapに比べて多いんじゃないかな？と思います。
しかし見た目は圧倒的にMDLのほうが見た目や動きは今風でかっこいいし、jQueryで非同期処理を駆使すればヌルサクでインタラクティブな表現がWEBでもできちゃいます。
見た目重視で足りない部分は自分で作っちゃうド根性派なら「Material Design Lite」
予め用意されている機能だけを使って楽ちんしたい派なら「Bootstrap」
レスポンシブデザインのCSSを自分で組むのはものすごく大変ですが、MDLにしてもBootstrapにしても、これらのライブラリを使うことで手軽にレスポンシブな画面を作ることが出来ます。
WEBの仕事を始めたのはもう十数年前のことだったんですが、あの頃ってtableタグでレイアウトやってたんですよね。
<table width="640" border="0"> <tr> <td width="100"><!--サイドメニュー--></td> <td width="540"><!--コンテンツ--></td> </tr> </table>
こんな風に無茶なことをやっていた頃を懐かしむ今日このごろ。
あの時代にMDLやBootstrapがあればあんなにも苦労しなかったのに・・・。
アプリの世界もWEBの世界も日々進化しているので、置いてきぼりにされないように頑張って追いかけ続けようと思います。