Material Design Components(MDC) の導入

2019 / 11 / 11

前回はビルドプロセスで sass(scss)を扱えるようにしました。今回は Material Design Components の導入方法について説明します。

Material Design Components(MDC)とは

Material Design Components とは、マテリアルデザインに沿ったデザインを実現するのに役立つライブラリです。マテリアルデザインでは「ここは高さ 48dp にしましょう」といったガイドラインが提示されていますが、その実装は各プラットフォームで「がんばる」という状況でした。この「がんばる」部分を助けてくれるのがこの Material Design Components です。各プラットフォーム向けのライブラリが用意されており、もちろん Web 用もあります。Web 用のライブラリは MDC Web と呼びます。

MDC をアプリに追加する

公式ドキュメントはこちらにあります。MDC Web ではコンポーネント毎に npm パッケージが用意されています。全部まとめて追加する場合は、次のように material-components-web を追加します。

$ npm install material-components-web
(中略)

+ material-components-web@4.0.0
added 47 packages from 1 contributor and audited 1789050 packages in 18.25s

必要なものだけをインストールする場合は、次のように @material/コンポーネント名 を追加します。どの npm パッケージを追加すればよいかは各コンポーネントの解説ページに書かれています。

$ npm install @material/button
(中略)

+ @material/button@4.0.0
added 13 packages and audited 1787946 packages in 9.839s

コンポーネントの使い方

早速ライブラリを使ってみましょう。各コンポーネントの解説ページは次のような構成になっています。

どの npm パッケージを追加すればよいか（全部まとめていれた場合は不要）
どの HTML を書けばいいか
scss で何を import すればよいか
どの JavaScript コードを実行すればよいか

スタイル部分は scss の import で導入することになっています。前回の記事で scss を扱えるようにしたのはこのためです。

TopPage のボタンを MDC のボタンにしてみる

練習として、第7回で TopPage に追加したボタンを MDC のボタンにしてみましょう。ボタンの説明はこちらにあります。

ボタンを導入するには、 @material/button パッケージを追加します。

$ npm install @material/button

次に、HTML Structure にしたがってボタン部分を置き換えます。TopPage のテンプレートは index.html に書いていました。

<script id="topTemplate" type="text/plain">
  <h1>Top page</h1>
  <button class="mdc-button" on-click="toSecond">
    <span class="mdc-button__label">次の画面へ</span>
  </button>
</script>

scss で何を import すればよいかは、説明ページの Styles に書かれています。myStyle.scss に追加しましょう。

@import "@material/button/mdc-button";

body {
  background-color: antiquewhite;
}

ここまででも見た目はマテリアルデザインになるのですが、ボタンをタップしたときのリップルエフェクトがまだ実現できていません。これは JavaScript(TypeScript)側で追加します。ここまで作ってきた Web アプリは表示を Ractive.js に任せているので、TopPage が表示された後に実行されるようにします。

import Ractive from "ractive";
import page from "page";
import { MDCRipple } from "@material/ripple";

export class TopPage implements IPage {
  private ractive!: Ractive;

  onCreate(): void {
    this.ractive = new Ractive({
      el: "#container",
      template: "#topTemplate",
      on: {
        // 表示されたあとに実行される
        complete: () => {
          const buttonRipple = new MDCRipple(
            document.querySelector(".mdc-button")!
          );
        },
        toSecond: () => {
          // /second に遷移する
          page("/second");
        },
      },
    });
  }
}

実際に確認してみましょう。今回は何も指定をしていないので、フラットなボタンとして表示されました。

まとめ

MDC Web をアプリに追加する方法を説明しました。前回までの準備ができていれば、導入自体はそこまで難しくはないでしょう。