ここ最近、GoogleのMaterial ComponentsのGitHubページが頻繁に更新されています。

Material Componentsとは、Googleが推奨しているデザインフレームワーク*「マテリアルデザイン」(Material Design)*をさまざまなプラットフォームで簡単に取り入れることができるフレームワークです。
ゼロからマテリアルデザインのドキュメントに沿ってパーツを作らなくとも、Material Componentを組み込むだけで、簡単にマテリアルデザインのUIを取り入れたWebアプリケーションを作成することができます。

もともとはMaterial Design Light(MDL)としてリリースされていたフレームワークですが、iOS版、Android版も続々とリリースされてきました。
注目すべきは、Web版として「Material Design for the Web」(通称MDC-Web)がリリースされたことです。

今回は、Google発のUIフレームワーク*「Material Components for the Web」*の概要や簡単な使い方をご紹介します。

Material Componentsとは？

com.png

Material Componentsとは、Googleの各種Webサービスやモバイルアプリでもおなじみの「マテリアルデザイン」をiOSやAndroid、そしてWebで簡単に取り入れることができるフレームワークのことです。
普段GoogleマップやGmail、Inboxなどのアプリを触ったことのある人であれば、同じようなインターフェイスで開発することができるのだとイメージしてみてください。

Material Componentsには、「for Android」「for iOS」、そして今回リリースされた「for the Web」があります。

Material Components for Android

android.jpg

もともとAndroidはGoogleが開発したOSなので、Design Support Library for AndroidになじみのあるAndroidアプリの開発者はこのフレームワークにすぐに慣れてしまうでしょう。
開発環境を変えたり、ツールを切り替えたりすることなく、少しのコードでマテリアルデザインを実装することができます。

Material Components for iOS

ios.jpg

GoogleはMaterial ComponentsをiOSのデベロッパーにも解放することで、ますますマテリアルデザインの普及に邁進しようとしています。
こちらもiOSのデベロッパーが使いやすいように、Objective-CやSwiftのようなネイティヴなコードで開発・実装ができるようにしています。
Appleの厳格なデザインの基準に合わせられるように、Platform Adaptationというガイドラインまで用意しているところが、Googleの抜け目のないところだとも言えます。

Material Components for the Web

mdcweb.jpg

そして今回注目したいのは、Webデベロッパー向けにMaterial Componentsが解放された点です。
こちらはReactやAngularJS、Vueなどのさまざまなライブラリともシームレスに統合することができます。
また、非常に軽量で、使いやすいのもポイントです。

Material Components for the Webの使い方

MDC-Webの使い方は非常に簡単です。
下記の手順で準備を行います。

1. ライブラリのインストール

まずはnpmからインストールを行います。
npmを立ち上げ、下記のコマンドを実行します。

npm install --save material-components-web

npmの使い方については、下記の記事が参考になります。

参考：
知っておいて損はなし！新人Webデザイナーのための「npm」入門｜ferret フェレット

2. スタイルシートを読み込む

続いて、headタグ内に下記のようにMDC-Webのスタイルシートを読み込みます。

<html class="mdc-typography">
<head>
<title>Material Components for the web</title>
<link rel="stylesheet"
      href="node_modules/material-components-web/dist/material-components-web.css">
</head>

また、urlを直接読み込む場合には、下記を利用します。

https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css

3. コンポーネントを追加

bodyタグ内にコンポーネントを加えていきます。

<body>
<h2 class="mdc-typography--display2">Hello, Material Components!</h2>
<div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
<input type="text" class="mdc-textfield__input" id="demo-input">
<label for="demo-input" class="mdc-textfield__label">Tell us how you feel!</label>
</div>
</body>

Bootstrapを利用するときと同じように、要素そのものではなくCSSのクラスに依存してDOMをレンダリングしています。

4. スクリプトを読み込んで実行

次に、スクリプトを読み込みます。
スクリプトは、bodyタグの閉じタグの直前に置くのがよいとされています。

<script src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script>mdc.autoInit()</script>

5. テーマの色を変える

場合によっては、テーマの色を変えることもできます。
最も簡単な方法は、CSS Variables(カスタムプロパティ)を使う方法です。

<style>
:root {
　　--mdc-theme-primary: #0e4ead;
　　—mdc-theme-secondary: #0060e6;
}
</style>

コンポーネントの種類とデモ

component.jpg

マテリアルデザインのコンポーネントはモジュール単位で設計していきます。
AnimationやButton、Layout Gridsなど、19種類のコンポーネントが用意されており、デモをGitHubリポジトリにクローンして実行することで、コンポーネントの動きを確認することができます。
実装されているコンポーネントはMDLに比べて少ない印象ですが、これから増えてくる可能性もあります。

また、こちらのページでも簡単なデモを確認することができそうです。

まとめ

Googleはこのようなフレームワークをさまざまなプラットフォームで使えるように推進していくことで、ますますマテリアルデザインを広めていこうとしているようです。
実際に、動的なWebサイトを作る際には、マテリアルデザインで設計していったほうが使いやすい場合もあります。
というのも、実際にインターネットを活用しているユーザーのほとんどがGoogleやGoogleのサービスを使い慣れているからです。

まずはどのようなことができるのか、触ってみてみるとよいでしょう。
コンポーネントが足りないと感じたら、旧版のMaterial Design Lightの活用を考えてみてもいいでしょう。