MDC-111 ウェブ: コードベースへのマテリアル コンポーネントの組み込み（ウェブ）

1. はじめに

logo_components_color_2x_web_96dp.png

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

ウェブ用のマテリアル コンポーネント（MDC Web）は、フレームワークに依存せず、通常の JavaScript を使用して構築されています。これにより、MDC Web を開発プロセスとシームレスに連携させることができます。これらのコンポーネントは、必要に応じてインストールして、既存のアプリでアジャイルな設計の改善を行うのに役立ちます。

作成するアプリの概要

この Codelab では、フォーム内の既存のコンポーネントの一部を MDC Web が提供するコンポーネントに置き換えます。

c33f9d1388feca74.png

この Codelab の MDC Web コンポーネント

  • ボタン
  • 選択
  • テキスト フィールド

必要なもの

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

ウェブ開発の経験についてお答えください。

初心者 中級者 習熟者

2. 開発環境を設定する

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

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

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

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

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

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

スターター ディレクトリ（material-components-web-codelabs/mdc-111/starter）から、次のコマンドを実行します。

npm install

アクティビティが多数表示され、最後にターミナルにインストールが成功したことが表示されます。

bb3a822c020c9287.png

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

スターター ディレクトリで、次のコマンドを実行します。

npm start

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

aa9263b15ae4f8d8.png

完了しました。アプリの配送先住所フォームが表示されます。

8f60906e660b695e.png

3. ボタンを更新する

MDC ボタンをインストールする

Ctrl+C キーを押して、開発用サーバーを強制終了します。次に、MDC Button の NPM パッケージをインストールして、サーバーを再起動します。

npm install @material/button
npm start

CSS をインポートする

_theme.scss の先頭で、.crane-button { ... } ブロックを削除し、代わりに以下を追加します。

$mdc-theme-primary: $crane-primary-color;

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

マークアップを更新する

index.html で、<button> 要素から crane-button クラスを削除し、mdc-button クラスと mdc-button--raised クラスを追加して、mdc-button__label クラスを持つ <span> 要素内にラベルをネストします。

<button type="submit" class="mdc-button mdc-button--raised">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Save</span>
</button>

リップルを追加する

MDC ボタンは JavaScript なしで使用できます。ただし、ボタンにインタラクティブなリップルを追加すると、ユーザー エクスペリエンスが向上します。

Ctrl+C キーを押して、開発用サーバーを強制終了します。次のコマンドを実行します。

npm install @material/ripple
npm start

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

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

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

new MDCRipple(document.querySelector('.mdc-button'));

Roboto フォントをインポートする

デフォルトでは、マテリアル デザインはコンポーネントの書体に Roboto を使用します。

index.html で、<head> 要素に以下を追加して、Roboto ウェブフォントをインポートします。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

ページを再読み込みすると、次のように表示されます。

9be8eb813b02eada.gif

ボタンを押すと、視覚的なフィードバックとしてかすかなリップル効果が表示されるようになりました。

4. select 要素を更新します。

MDC Select コンポーネントは、ネイティブ HTML の <select> 要素をラップします。通常 <select> を使用する場所で使用します。[State] フィールドを更新しましょう。

MDC Node モジュールをインストールする

Ctrl+C キーを押して、開発用サーバーを強制終了します。次のコマンドを実行します。

npm install @material/select
npm start

CSS をインポートする

ボタンのインポートの直後に、次の内容を _theme.scss に追加します。

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

マークアップを更新する

index.html で <select> 要素を探します。crane-input クラスを mdc-select__native-control に置き換えます。

<select class="mdc-select__native-control" id="crane-state-input" required>

<select> タグのすぐ上に、MDC Select コンポーネントのプルダウン矢印のマークアップを追加します。

<i class="mdc-select__dropdown-icon"></i>

終了 </select> タグの直下で、crane-label クラスを mdc-floating-label に置き換えます。

<label class="mdc-floating-label" for="crane-state-input">

ラベルの直後に次のマークアップを追加します。

<div class="mdc-line-ripple"></div>

最後に、<select> 要素の周り（ただし crane-field 要素内）に次のタグを追加します。

<div class="mdc-select">
  ...
</div>

結果のマークアップは次のようになります。

<div class="crane-field">
  <div class="mdc-select">
    <i class="mdc-select__dropdown-icon"></i>
    <select class="mdc-select__native-control" id="crane-state-input" required>
      <option value="" selected></option>
      <option value="AL">Alabama</option>
      ...
      <option value="WI">Wisconsin</option>
      <option value="WY">Wyoming</option>
    </select>
    <label class="mdc-floating-label" for="crane-state-input">
      State
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

JS をインポートする

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

import {MDCSelect} from '@material/select';

選択をインスタンス化するには、app.js の末尾に以下を追加します。

new MDCSelect(document.querySelector('.mdc-select'));

ページを再読み込みします。ページは次のようになります。

20fa4104564f8195.gif

MDC Select コンポーネントは、ユーザーにオプションのリストを使い慣れた形式で表示しますが、モダンなスタイルになっています。

5. テキスト フィールドを更新する

マテリアル デザインのテキスト フィールドは、プレーンな <input> 要素よりもユーザビリティが大幅に向上しています。複雑なコンテンツ内でも簡単に識別できるように設計されており、ユーザーが操作すると微妙な視覚的フィードバックが表示されます。

MDC Node モジュールをインストールする

Ctrl+C キーを押して、開発用サーバーを強制終了します。次のコマンドを実行します。

npm install @material/textfield
npm start

CSS を追加する

_theme.scss の select インポートの直後に、以下を追加します。

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

マークアップを更新する

index.html で、[名前] フィールドの <input> 要素を見つけます。crane-input クラスを mdc-text-field__input に置き換えます。

<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>

次に、crane-label クラスを mdc-floating-label に置き換えます。

<label class="mdc-floating-label" for="crane-name-input">

ラベルの直後に次のマークアップを追加します。

<div class="mdc-line-ripple"></div>

最後に、次のコードで 3 つの要素をすべてラップします。

<div class="mdc-text-field">
  ...
</div>

結果のマークアップは次のようになります。

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-name-input"
           type="text" required autofocus>
    <label class="mdc-floating-label" for="crane-name-input">
      Name
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

ページ上の他のすべての <input> 要素についても同じ手順を繰り返します。

[住所]、[市区町村]、[郵便番号] の各フィールドのマークアップは次のようになります。

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-address-input" type="text" required>
    <label class="mdc-floating-label" for="crane-address-input">
      Address
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-city-input" type="text" required>
    <label class="mdc-floating-label" for="crane-city-input">
      City
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-zip-code-input"
            type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
    <label class="mdc-floating-label" for="crane-zip-code-input">
      ZIP Code
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

使用されなくなった _theme.scss から .crane-label スタイルと .crane-input スタイルを削除できるようになりました。

JS をインポートする

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

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

テキスト フィールドをインスタンス化するには、app.js の末尾に次のコードを追加します。

const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
  new MDCTextField(textFieldEl);
});

ページを再読み込みします。ページは次のようになります。

c33f9d1388feca74.png

テキスト フィールドがすべて更新され、マテリアル テーマ設定が使用されるようになりました。

6. まとめ

アプリを完全に再設計することなく、一般的なコンポーネント（テキスト フィールド、選択、ボタン）を置き換えました。よくできました。

トップ アプリバーやナビゲーション ドロワーも、大きな違いを生み出すコンポーネントです。

次のステップ

MDC Web カタログには、さらに多くの MDC Web のコンポーネントがあります。

特定のフレームワークで MDC Web を使用する場合は、MDC-112: MDC とウェブ フレームワークの統合をご覧ください。

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

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

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

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