マテリアル コンポーネント（MDC）は、デベロッパーがマテリアル デザインを実装する際に役立ちます。Google のエンジニアと UX デザイナーのチームが作成した MDC には、美しく機能的な UI コンポーネントが多数含まれており、Android、iOS、ウェブ、Flutter で利用できます。 material.io/develop |
Codelab MDC-101 では、2 つのマテリアル コンポーネント（MDC）を使用して、ログインページの UI（テキスト フィールドとボタン）を作成しました。次に、ナビゲーション、構造、データを追加して、この要素を拡張します。
作成するアプリの概要
この Codelab では、衣類と生活雑貨を販売する e コマースアプリ Shrine のホームページを作成します。これには次のものが含まれます。
- ナビゲーション ドロワー
- 商品が満載の画像リスト
この Codelab の MDC Web コンポーネント
- ドロワー
- 画像リスト
必要なもの
- 最新バージョンの Node.js（JavaScript パッケージ マネージャー npm にバンドルされています）。
- サンプルコード（次のステップでダウンロード）
- HTML、CSS、JavaScript の基本的な知識
ウェブ開発のご経験についてお答えください。
MDC-101 から続行する場合
MDC-101 を完了していれば、コードはこの Codelab 用に準備されています。「ステップ 3: ナビゲーション ドロワーを追加する」に進みます。
Codelab のスターター アプリをダウンロードする
スターター アプリは material-components-web-codelabs-master/mdc-102/starter ディレクトリにあります。開始する前に、必ずこのディレクトリに cd してください。
GitHub からクローンを作成する
GitHub からこの Codelab のクローンを作成するには、次のコマンドを実行します。
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-102/starter
プロジェクトの依存関係をインストールする
現在のディレクトリが material-components-web-codelabs/mdc-102/starter. になっているはずです。そこで、次のコマンドを実行します。
npm install
多くのアクティビティが表示されると、ターミナルはインストールに成功しています。
スターター アプリを実行する
同じディレクトリで、次のコマンドを実行します。
npm start
webpack-dev-server が起動します。ブラウザで http://localhost:8080/ にアクセスして、ページを表示します。
完了しました。MDC-101 Codelab で作成した Shrine のログインページが表示されます。
ログインページが正常に表示されるようになったので、アプリにいくつかの商品を追加しましょう。有効なユーザー名とパスワードを入力し、[次へ] ボタンをクリックしてホームページに移動します。
ユーザーがログインすると、「これで完了です」というホームページが表示されます。ここまでは問題ないのですしかし今必要なのは、ユーザーが何をすべきか、アプリ内のどこにいるのかを把握することです。そのために、ナビゲーションを追加します。
マテリアル デザインのナビゲーション パターンは高度なユーザビリティを備えています。マテリアル ナビゲーション ドロワーは、ナビゲーションのほか、他の操作にすばやくアクセスできます。期間を追加しましょう
MDC ドロワーとリストのインストール
ドロワー コンポーネントのパッケージをインストールするには、次のコマンドを実行します。
npm install @material/drawer @material/list
HTML を追加する
home.html で、「&you !!」を、ドロワーとそのアイテム用の次のマークアップに置き換えます。
<aside class="mdc-drawer shrine-drawer">
<div class="mdc-drawer__header">
<svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
<g>
<g>
<path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
</g>
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<h1 class="shrine-title">SHRINE</h1>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
<span class="mdc-list-item__text">Featured</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Apartment</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Accessories</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Shoes</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Tops</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Bottoms</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Dresses</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">My Account</span>
</a>
</nav>
</div>
</aside>CSS を追加する
home.scss で、既存のインポートの後に次のインポート ステートメントを追加します。
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";home.scss の下部に、次のスタイルを追加します。
.shrine-logo-drawer {
display: block;
width: 48px;
padding: 40px 0 0;
margin: 0 auto;
fill: currentColor;
}
.shrine-title {
text-align: center;
margin: 5px auto;
}JavaScript を追加する
適切なキーボード ナビゲーションを行うために、ナビゲーション ドロワー内で MDC リストをインスタンス化する必要があります。現在空である home.js を開き、次のコードを追加します。
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));http://localhost:8080/home.html でページを更新します。ホームページは次のようになります。
これで、ホームページにさまざまなナビゲーション アイテムを表示する永続的なナビゲーション ドロワーが表示され、最初のアイテムがアクティブになります。
アプリの構造がある程度できたので、コンテンツを画像リストに配置して整理しましょう。
MDC イメージリストをインストールする
画像リスト コンポーネントのパッケージをインストールするには、次のコマンドを実行します。
npm install @material/image-list
1 つの項目を含むリストの HTML を追加する
まず、ナビゲーション ドロワーの横に画像リストを追加します。まず、画像とテキストラベルで構成される 1 つのアイテムを追加します。
home.html で、<aside> 要素の末尾に次の HTML を追加します。
<ul class="mdc-image-list product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
</ul>このリストには、このチュートリアルと MDC-103 の両方でカスタム スタイルを適用する追加のクラス product-list が含まれています。
CSS を追加する
まず、home.scss で、既存のインポートの後に、画像リスト コンポーネント スタイルのインポートを追加します。
@import "@material/image-list/mdc-image-list";次に、最初のホームページ スタイルの後に次のスタイルを追加します。
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}このスタイルは、4 つの列にわたって画像を表示するように画像リストを設定し、画像リストをドロワーからスクロールできるようにします。
ページを更新すると、ホームページは次のようになります。
画像リストはコレクション内の多くの画像を表示することを目的としているため、コンポーネントの仕組みをわかりやすくするために画像を追加してみましょう。
home.html で、既存の <li> 要素をコピーします。
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>その後、既存の項目の後（終了タグ </ul> の前）に 15 回貼り付けます。画像の合計は 16 枚になります。MDC-103 の一意の画像とタイトルについては、まだ説明しません。
更新します。ホームページは次のようになります。
画像リストには 1 行に 4 画像が表示され、画像は画面スペースに合わせて自動的に調整されます。
ユーザーをログインページからホームページに誘導する基本的なフローがあり、そこで商品を表示できる。わずか数行のコードで、コンテンツを表示するためのドロワーと画像リストを追加しました。ホームページは、基本的な構造とコンテンツになりました。
次のステップ
ドロワーと画像リストがあるため、MDC ウェブ ライブラリのマテリアル デザイン コア コンポーネントが 2 つ増えました。その他のコンポーネントについては、MDC Web Catalog をご覧ください。
ホームページは完全に機能していますが、まだ特定のブランドや視点を表現していません。MDC-103: 色、形状、高度、タイプによるマテリアル デザインのテーマ設定では、これらのコンポーネントのスタイルをカスタマイズして、鮮やかでモダンなブランドを表現します。