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

1. はじめに

logo_components_color_2x_web_96dp.png

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

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

作成するアプリの概要

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

c33f9d1388feca74.png

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

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

必要なもの

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

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

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

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

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

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

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 Web フォントをインポートします。

<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 ノード モジュールをインストールする

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 ノード モジュールをインストールする

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 をインポートする

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

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 を完了するためにそれなりの時間と労力を必要とした

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

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

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