MDC-101 Web: Material Components（MDC）Basics（ウェブ）

1. はじめに

logo_components_color_2x_web_96dp.png

マテリアル コンポーネント（MDC）は、デベロッパーがマテリアル デザインを実装する際に役立ちます。Google のエンジニアと UX デザイナーのチームが作成した MDC には、美しく機能的な UI コンポーネントが多数含まれており、Android、iOS、ウェブ、Flutter.material.io/develop に利用可能です。

ウェブ用のマテリアル デザインとマテリアル コンポーネントとは

マテリアル デザインは、人の目に留まる美しいデジタル プロダクトを作成するためのシステムです。一貫した一連の基本原則とコンポーネントに基づいてスタイル、ブランディング、インタラクション、モーションの統一を行うことにより、プロダクト チームは、デザインの可能性を最大限に発揮できます。

デスクトップとモバイルウェブについては、マテリアル コンポーネント ウェブ （MDC Web）です。デザインとエンジニアリングをコンポーネントのライブラリと統合することで、アプリやウェブサイト間の一貫性を確保します。MDC ウェブ コンポーネントは、それぞれ独自のノード モジュールに格納されています。そのため、マテリアル デザイン システムの進化に合わせてコンポーネントを簡単に更新し、一貫したピクセルパーフェクトな実装と Google のフロントエンド開発基準の遵守を保証できます。MDC は、Android、iOS、Flutter でも使用できます。

この Codelab では、MDC Web の複数のコンポーネントを使用してログインページを作成します。

作成するアプリの概要

この Codelab は、衣類や家庭用品を販売する e コマース ウェブサイトである Shrine というアプリの作成手順を説明する 3 つの Codelab のうちの 1 番目の Codelab です。MDC Web を使用して、あらゆるブランドやスタイルを反映するようにコンポーネントをカスタマイズする方法を紹介します。

この Codelab では、次のもの含む Shrine 用ログインページを作成します。

  • テキスト フィールド 2 つ（ユーザー名用とパスワード用）
  • 2 つのボタン（1 つは [キャンセル]）もう 1 つは「次へ」です
  • ウェブサイトの名前（Shrine）
  • Shrine のロゴ画像

674d1ca8cfa98c9.png

この Codelab の MDC ウェブ コンポーネント

  • テキスト フィールド
  • ボタン
  • リップル

必要なもの

  • Node.js の最新バージョン（JavaScript パッケージ マネージャーである npm にバンドルされています）。
  • サンプルコード（次のステップでダウンロード）
  • HTML、CSS、JavaScript の基本的な知識

Google では常にチュートリアルの改善に努めています。ウェブ開発の経験についてお答えください。

<ph type="x-smartling-placeholder"></ph> 初心者 中級 上達 をご覧ください。

2. 開発環境を設定する

Codelab のスターター アプリをダウンロードする

スターター アプリは material-components-web-codelabs-master/mdc-101/starter ディレクトリ内にあります。開始する前に、そのディレクトリへの cd を行ってください。

GitHub からクローンを作成する

GitHub からこの Codelab のクローンを作成するには、次のコマンドを実行します。

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-101/starter

プロジェクトの依存関係をインストールする

starter ディレクトリから、次のコマンドを実行します。

npm install

多くのアクティビティが表示され、最終的に、正常にインストールされたことを示すメッセージがターミナルに表示されます。

204c063d8fd78f94.png

実行されていない場合は、npm audit fix を実行します。

スターター アプリを実行する

同じディレクトリで次のコマンドを実行します。

npm start

webpack-dev-server が起動します。ブラウザで http://localhost:8080/ にアクセスしてページを表示します。

17c139dc5a9bebaf.png

完了しました。Shrine のログインページのスターター コードがブラウザで実行されているはずです。「Shrine」という名前が表示されます。そのすぐ下に Shrine ロゴが表示されます。

f7e3f354df8d84b8.png

コードを確認します。

index.html のメタデータ

スターター ディレクトリで、任意のコードエディタで index.html を開きます。以下が含まれているはずです。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Shrine (MDC Web Example App)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
  <link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">

  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
  <section class="header">
    <svg class="shrine-logo" ...>
      ...
    </svg>
    <h1>SHRINE</h1>
  </section>

  <form action="home.html">
  </form>

  <script src="bundle-login.js" async></script>
</body>
</html>

ここでは、webpack によって生成された bundle-login.css ファイルの読み込みに <link> タグが使用され、bundle-login.js ファイルが含まれている <script> タグが使用されています。さらに、ブラウザ間での一貫したレンダリングを実現する normalize.css と、Google Fonts の Roboto フォントが含まれています。

login.scss のカスタム スタイル

MDC ウェブ コンポーネントは、mdc-* CSS クラス（mdc-text-field クラスなど）を使用してスタイルが設定されます。（MDC Web は DOM 構造を公開 API の一部として扱います）。

通常は、独自のクラスを使用してコンポーネントにカスタム スタイル変更を加えることをおすすめします。上記の HTML には、shrine-logo などのカスタム CSS クラスがあることにお気づきでしょうか。これらのスタイルは、ページに基本的なスタイルを追加するために login.scss で定義します。

login.scss を開くと、ログインページが次のスタイルで表示されます。

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

スターター コードについて理解できたところで、最初のコンポーネントを実装してみましょう。

3. テキスト フィールドを追加する

まず、ログインページに 2 つのテキスト フィールドを追加します。ユーザーはそこでユーザー名とパスワードを入力できます。ここでは MDC Text Field コンポーネントを使用します。このコンポーネントには、フローティング ラベルを表示し、タップリップルを有効にする機能が組み込まれています。

9ad8a7db0b50f07d.png

MDC テキスト フィールド を インストールします

MDC ウェブ コンポーネントは NPM パッケージを介して公開されます。テキスト フィールド コンポーネントのパッケージをインストールするには、次のコマンドを実行します。

npm install @material/textfield@^6.0.0

HTML を追加する

index.html で、本文の <form> 要素内に以下を追加します。

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

MDC テキスト フィールドの DOM 構造は、以下の複数の要素で構成されています。

  • メイン要素 mdc-text-field
  • サブ要素 mdc-text-field__ripple, mdc-text-field__input、mdc-floating-label、mdc-line-ripple

CSS を追加する

login.scss で、既存の import の後に次の import ステートメントを追加します。

@import "@material/textfield/mdc-text-field";

同じファイルで、次のスタイルを追加して、テキスト フィールドの配置と中央揃えを行います。

.username,
.password {
  display: flex;
  margin: 20px auto;
  width: 300px;
}

JavaScript を追加する

現在空の login.js を開きます。次のコードを追加して、テキスト フィールドをインポートしてインスタンス化します。

import {MDCTextField} from '@material/textfield';

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

HTML5 検証を追加する

テキスト フィールドは、HTML5 のフォーム検証 API が提供する属性を使用して、フィールド入力が有効かエラーかを表します。

このセッションを修了すると、次のことができるようになります。

  • [Username] と [Password] の両方のテキスト フィールドの mdc-text-field__input 要素に required 属性を追加します。
  • [Password] テキスト フィールドの mdc-text-field__input 要素の minlength 属性を "8" に設定します。

2 つの <label class="mdc-text-field mdc-text-field--filled"> 要素を次のように調整します。

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

http://localhost:8080/ のページを更新します。[Username] と [Password] の 2 つのテキスト フィールドを含むページが表示されます。

テキスト フィールドをクリックして、フローティング ラベル アニメーションとラインのリップル アニメーション（下端の枠線が外側に波紋状に伸びている）を確認します。

c0b341e9949a6183.gif

4. ボタンを追加する

次に、ログインページに「Cancel」と「Next」という 2 つのボタンを追加します。MDC ボタン コンポーネントと MDC リップル コンポーネントを使用して、マテリアル デザインの象徴的なインク リップル効果を完成させます。

674d1ca8cfa98c9.png

[MDC をインストール] ボタン

ボタン コンポーネントのパッケージをインストールするには、次のコマンドを実行します。

npm install @material/button@^6.0.0

HTML を追加する

index.html で、<label class="mdc-text-field mdc-text-field--filled password"> 要素の終了タグの下に次のコードを追加します。

<div class="button-container">
  <button type="button" class="mdc-button cancel">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Cancel
    </span>
  </button>
  <button class="mdc-button mdc-button--raised next">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Next
    </span>
  </button>
</div>

[キャンセル] の場合デフォルトのボタンスタイルを使用していますただし、「Next」はボタンは、mdc-button--raised クラスによって示される、浮き上がったスタイル バリアントを使用します。

後で簡単に位置揃えできるように、2 つの mdc-button 要素を <div> 要素でラップします。

CSS を追加する

login.scss で、既存の import の後に次の import ステートメントを追加します。

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

ボタンを配置し、ボタンの周囲にマージンを追加するには、login.scss に次のスタイルを追加します。

.button-container {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  margin: auto;
}

.button-container button {
  margin: 3px;
}

ボタンにインクのさざ波を追加する

ユーザーがボタンをタップまたはクリックしたときに、インクのさざ波形式でフィードバックを表示する必要があります。インク リップル コンポーネントには JavaScript が必要なため、これをページに追加します。

リップル コンポーネントのパッケージをインストールするには、次のコマンドを実行します。

npm install @material/ripple@^6.0.0

login.js の先頭に、次の import ステートメントを追加します。

import {MDCRipple} from '@material/ripple';

リップルをインスタンス化するには、login.js に以下を追加します。

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

リップル インスタンスへの参照を保持する必要はないため、変数に代入する必要はありません。

これで、ページを更新します。各ボタンをクリックすると、インクの波紋が表示されます。

bb19b0a567977bde.gif

テキスト フィールドに有効な値を入力し、[NEXT] をクリックします。] ボタンを離します。これで完了です。MDC-102 で引き続きこのページを使用します。

5. まとめ

基本的な HTML マークアップと、わずか数行の CSS と JavaScript を使用するウェブ ライブラリのマテリアル コンポーネントにより、マテリアル デザイン ガイドラインを遵守し、すべてのデバイスで一貫した外観と動作の美しいログインページを作成できます。

次のステップ

テキスト フィールド、ボタン、リップルの 3 つは MDC ウェブ ライブラリのコア コンポーネントですが、他にも多くのコンポーネントがあります。MDC ウェブのその他のコンポーネントもご覧ください。

ナビゲーション ドロワーと画像リストについて詳しくは、MDC-102: マテリアル デザインの構造とレイアウトをご覧ください。マテリアル コンポーネントをお試しいただきありがとうございます。この Codelab がお役に立ちましたら幸いです。

この Codelab を完了するためにそれなりの時間と労力を必要とした

非常にそう思う そう思う どちらとも言えない そう思わない まったくそう思わない

今後もマテリアル コンポーネントを使用したい

<ph type="x-smartling-placeholder"></ph> 非常にそう思う そう思う どちらとも言えない そう思わない まったくそう思わない をご覧ください。