BT

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

| 作者: Sergio De Simone フォローする 18 人のフォロワー , 翻訳者 大田 緑 - (株)チェンジビジョン フォローする 1 人のフォロワー 投稿日 2015年7月28日. 推定読書時間: 2 分 |

原文(投稿日:2015/07/07)へのリンク

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実装ではなく、MaterializeMaterial 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でインポートしたりできる。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT