GoogleがCSS、HTML、JavaScriptにマテリアルデザインを導入

Google マテリアルデザインライト (MDL) は、ウェブサイトでマテリアルデザインのルック&フィールを利用できるようにするものだ。マテリアルデザインは、Android標準のビジュアル言語であり、Googleによるとクロスプラットフォームでの利用が可能だ。

MDLは「ライト」であるために必要な3つの条件を満たしているとGoogleは言う。

• 依存が少なく、簡単にインストールして使える
• フレームワークを認識する必要がなく、利用可能なフロントエンドのツールチェーンに開発者が統合できる
• コードのサイズが比較的小さい
• マテリアルデザインのガイドラインに沿って、限られた範囲にフォーカスしている。総合的なフレームワークではない。

基本的な浮いたように見えるリプルボタンは次のように記述する。

<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"> Button </button> 

MDLは、マテリアルデザインの最初のHTML/CSS/JS実装ではなく、Materialize や Material Bootstrap も利用できる。Googleによると、MDLがこのようなコミュニティ活動よりも優れているのは、マテリアルデザインとChrome UXチームが密接に連携して開発したものであり、仕様に準拠するために定期的なレビューを受けていることだ。

MDLの前は、PolymerがCSS/JSのマテリアルデザインの標準的な実装だった。MDLと比べて、Polymerは、マテリアルデザインではないコンポーネントと同様に、データコミュニケーションのコンポーネントを含み、ビジュアルドメインよりも広い範囲をサポートする。

今のところ、MDLは、ボタン等の個々のコンポーネントを利用できるようにしたり、最適化したりしていない。それでも、MDLコンポーネントを一部だけ利用したい開発者は、material-design-lite.cssの不要なコンポーネントや、Gulpfileの不要なスクリプトをコメントアウトしてgulpを動かすことで、カスタムMDLのディストリビューションを調整できる。

MDLは、クラス名を一致させたり、ユニークなものにしたり、表現的なものにしたりするBEMの決まりに従う。Googleは、MDLにBEMを適用させるために従ったガイドラインがどんなものか詳しく説明している。 (https://github.com/google/material-design-lite/wiki/Understanding-BEM) 不都合な点は、BEMはたくさんのクラス名を使う点だ。最初のフィードバックによると、MDLは、マテリアルデザインの基本コンセプトであるシンプルなカードに、17の異なるクラス名が必要になるようだ。

Googleが言うには、MDLは全ての最新ブラウザ (Chrome、Firefox、Opera、Microsoft Edge) とSafariで動作する。しかし、IE9のようなブラウザではかなり表示がくずれる。また、ウェブサイトにMDLを入れるために、CDNを参照するように提案しているが、MDLはダウンロードしたり、npm/Bowerでインポートしたりできる。