マテリアル コンポーネント（MDC）は、デベロッパーがマテリアル デザインを実装する際に役立ちます。Google のエンジニアと UX デザイナーのチームが作成した MDC には、美しく機能的な UI コンポーネントが多数含まれており、Android、iOS、ウェブ、Flutter に利用可能です。 material.io/develop |
マテリアル デザインとウェブ用のマテリアル コンポーネントとは
マテリアル デザインは、人の目に留まる美しいデジタル プロダクトを作成するためのシステムです。一貫した一連の基本原則とコンポーネントに基づいてスタイル、ブランディング、インタラクション、モーションの統一を行うことにより、プロダクト チームは、デザインの可能性を最大限に発揮できます。
パソコンとモバイルウェブでは、マテリアル コンポーネント ウェブ（MDC ウェブ）が、アプリやウェブサイト間で一貫性を実現するコンポーネントのライブラリと設計とエンジニアリングを統合します。MDC Web コンポーネントはそれぞれ独自のノード モジュールに存在するため、マテリアル デザイン システムが進化するにつれて、これらのコンポーネントを簡単に更新して、Google のフロントエンド開発標準に沿った一貫性のあるピクセル パーフェクト実装を確保できます。MDC は Android、iOS、Flutter でも利用できます。
この Codelab では、MDC Web のコンポーネントを複数使用してログインページを作成します。
作成するアプリの概要
この Codelab は、衣類や生活雑貨を販売する e コマース ウェブサイト Shrine の作成手順を説明する 3 つの Codelab のうちの最初の Codelab です。MDC Web を使用して、ブランドやスタイルを反映するようにコンポーネントをカスタマイズする方法について説明します。
この Codelab では、次のもの含む Shrine 用ログインページを作成します。
- テキスト フィールド 2 つ（ユーザー名用とパスワード用）
- [キャンセル] と [次へ] の 2 つのボタン
- ウェブサイト名「Shrine」
- Shrine のロゴ画像
この Codelab の MDC Web コンポーネント
- テキスト フィールド
- ボタン
- リップル
必要なもの
- Node.js の最新バージョン（JavaScript パッケージ マネージャーである npm がバンドルされています）。
- サンプルコード（次の手順でダウンロード）
- HTML、CSS、JavaScript に関する基礎的な知識
Google は常にチュートリアルの改善に努めています。ウェブ開発の経験についてお答えください。
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
プロジェクトの依存関係をインストールする
スターター ディレクトリから、次のコマンドを実行します。
npm install
アクティビティが多数表示され、最後にターミナルにインストールが成功したことが表示されます。
バージョンが 8 以降でない場合は、npm audit fix を実行してください。
スターター アプリを実行する
同じディレクトリで、次のコマンドを実行します。
npm start
webpack-dev-server が開始されます。ブラウザで http://localhost:8080/ にアクセスして、ページを表示します。
完了しました。Shrine のログインページのスターター コードがブラウザで動作するはずです。「Shrine」という名前と、その真下に Shrine ロゴが表示されます。
コードを確認する
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>ここでは、<link> タグを使用して webpack で生成された bundle-login.css ファイルを読み込み、<script> タグに bundle-login.js ファイルが含まれています。また、ブラウザ間で一貫したレンダリングを行うための normalize.css と、Google Fonts の Roboto フォントも含まれています。
login.scss のカスタム スタイル
MDC Web コンポーネントは、mdc-text-field クラスなどの mdc-* CSS クラスを使用してスタイル設定されます。（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;
}スターター コードに慣れてきたところで、最初のコンポーネントを実装してみましょう。
まず、ログインページにテキスト フィールドを 2 つ追加して、ユーザーがユーザー名とパスワードを入力できるようにします。フローティング ラベルを表示してタッチリップルをアクティブにする機能が組み込まれている、MDC テキスト フィールド コンポーネントを使用します。
MDC テキスト フィールドをインストールする
MDC Web コンポーネントは NPM パッケージで公開されています。テキスト フィールド コンポーネントのパッケージをインストールするには、次のコマンドを実行します。
npm install @material/textfield
HTML を追加する
index.html で、本文の <form> 要素内に以下を追加します。
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username">
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>MDC テキスト フィールドの DOM 構造は、複数の部分で構成されています。
- メイン要素、
mdc-text-field - サブ要素
mdc-text-field__input、mdc-floating-label、mdc-line-ripple
CSS を追加する
login.scss で、既存のインポートの後に次の import ステートメントを追加します。
@import "@material/textfield/mdc-text-field";同じファイルに、テキスト フィールドを配置して中央揃えにする次のスタイルを追加します。
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}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属性を追加します。 - パスワード テキスト フィールドの
mdc-text-field__input要素のminlength属性を"8"に設定します。
2 つの <div class="mdc-text-field"> 要素を次のように調整します。
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>http://localhost:8080/ でページを更新します。これで、「Username」と「Password」という 2 つのテキスト フィールドを備えたページが表示されます。
テキスト フィールドをクリックして、フローティング ラベルのアニメーションとラインリップル アニメーション（外側に波打つ下部の境界線）を確認します。
次に、ログインページに「Cancel」と「Next」という 2 つのボタンを追加します。MDC ボタン コンポーネントと MDC リップル コンポーネントを使用して、マテリアル デザインの象徴的なインク リップル効果を完成させます。
MDC ボタンをインストールする
ボタン コンポーネントのパッケージをインストールするには、次のコマンドを実行します。
npm install @material/button
HTML を追加する
index.html で、<div class="mdc-text-field 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>[キャンセル] ボタンには、デフォルトのボタン スタイルを使用しています。ただし、[次へ] ボタンは raised スタイル バリアントを使用しており、これは mdc-button--raised クラスで示されています。
後で簡単に配置できるように、2 つの mdc-button 要素を <div> 要素でラップします。
CSS を追加する
login.scss で、既存のインポートの後に次の 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
login.js の先頭に次の import ステートメントを追加します。
import {MDCRipple} from '@material/ripple';リップルをインスタンス化するには、次のコードを login.js に追加します。
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));リップル インスタンスへの参照を保持する必要がないため、変数に割り当てる必要はありません。
これで、ページを更新します。各ボタンをクリックすると、インクの波紋が表示されます。
テキスト フィールドに有効な値を入力し、[次へ] ボタンを押します。やりました！このページでの作業は MDC-102 で続行します。
Material Components for the web ライブラリは、基本的な HTML マークアップと数行の CSS および JavaScript を使用して、マテリアル デザインのガイドラインに準拠した美しいログインページを作成する作業を支援します。また、すべてのデバイスで一貫した外観と動作を実現します。
次のステップ
テキスト フィールド、ボタン、リップルは MDC Web ライブラリの 3 つのコア コンポーネントですが、他にもたくさんあります。MDC Web の他のコンポーネントも確認してください。
MDC-102: マテリアル デザインの構造とレイアウトで、ナビゲーション ドロワーと画像リストについて学習できます。マテリアル コンポーネントをお試しいただきありがとうございます。この Codelab がお役に立ちましたら幸いです。