マテリアル コンポーネント（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 Drawer と List をインストールする
ドロワー コンポーネントのパッケージをインストールするには、次のコマンドを実行します。
npm install @material/drawer @material/list
HTML を追加する
home.html で、「You did it!」を次のマークアップに置き換えます。このマークアップは、引き出しとそのアイテムを表します。
<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 の後に次の import ステートメントを追加します。
@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 を追加する
まず、ナビゲーション ドロワーの横に画像リストを追加しましょう。リストの作成は、画像とテキストラベルで構成される単一のアイテムを追加することから始めます。
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 Web ライブラリの 2 つのマテリアル デザイン コア コンポーネントを使用しました。MDC Web カタログには、さらに多くのコンポーネントがあります。
ホームページは完全に機能しますが、まだ特定のブランドや視点を表現していません。MDC-103: 色、形状、高度、タイプによるマテリアル デザインのテーマ設定では、これらのコンポーネントのスタイルをカスタマイズして、鮮やかでモダンなブランドを表現します。