1. はじめに
マテリアル コンポーネント（MDC）は、デベロッパーがマテリアル デザインを実装する際に役立ちます。Google のエンジニアと UX デザイナーのチームが作成した MDC には、美しく機能的な UI コンポーネントが多数含まれており、Android、iOS、ウェブ、Flutter.material.io/develop に利用可能です。 |
Codelab MDC-101 では、2 つのマテリアル コンポーネント（MDC）を使用して、ログインページ UI（テキスト フィールドとボタン）を作成しました。次に、ナビゲーション、構造、データを追加して、これを拡張しましょう。
作成するアプリの概要
この Codelab では、衣類や家庭用品を販売する e コマースアプリ Shrine というアプリのホームページを作成します。これには次のものが含まれます。
- ナビゲーション ドロワー
- 商品が並んだ画像リスト
この Codelab の MDC ウェブ コンポーネント
- ドロワー
- 画像リスト
必要なもの
- 最新バージョンの Node.js（JavaScript パッケージ マネージャーである npm がバンドルされています）。
- サンプルコード（次の手順でダウンロード）
- HTML、CSS、JavaScript の基本知識
ウェブ開発の経験についてお答えください。
2. 開発環境を設定する
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 のログインページが表示されます。
ログインページが正常に表示されたので、アプリに商品を追加してみましょう。有効なユーザー名とパスワードを入力し、[次へ] ボタンをクリックしてホームページに移動します。
3. ナビゲーション ドロワーを追加する
ユーザーがログインすると、ホームページが表示されて「これで完了です」というメッセージが表示されます。ここまでは問題ないのですが、今のところユーザーは何もできず、アプリ内のどこにいるのかわからない状態です。そこで、ナビゲーションを追加します。
マテリアル デザインのナビゲーション パターンは、高度なユーザビリティを実現します。マテリアル ナビゲーション ドロワーは、ナビゲーションと他のアクションへのクイック アクセスを提供します。期間を追加しましょう
MDC のドロワーとリストをインストールする
引き出しコンポーネントのパッケージをインストールするには、次のコマンドを実行します。
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 でページを更新します。ホームページは次のようになります。
これで、ホームページにはさまざまなナビゲーション アイテムを表示する固定的なナビゲーション ドロワーが用意され、最初のアイテムがアクティブになります。
4. テキストラベル付きの画像を追加する
アプリの構造がある程度できたので、コンテンツを画像リストに入れて整理しましょう。
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>
このリストには、追加のクラス product-list が含まれています。このクラスは、このチュートリアルと MDC-103 の両方でカスタム スタイルを適用します。
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 で生成されるため、気にする必要はありません。
更新します。ホームページは次のようになります。
画像リストには行ごとに 4 つの画像が表示され、利用可能な画面スペースに合わせて画像のサイズが自動的に調整されます。
5. まとめ
サイトに、ログイン画面からホーム画面に移動して商品を表示する基本的なフローができました。わずか数行のコードで、コンテンツを表示するためのドロワーと画像リストを追加しました。ホームページに基本的な構造とコンテンツが追加されました。
次のステップ
ドロワーと画像リストにより、MDC ウェブ ライブラリのマテリアル デザインのコア コンポーネントが 2 つ追加されました。MDC ウェブカタログにアクセスすると、さらに多くのコンポーネントを探究できます。
ホームページは完全に機能しますが、まだ特定のブランドや視点を表現していません。MDC-103: 色、形状、高度、タイプによるマテリアル デザインのテーマ設定では、これらのコンポーネントのスタイルをカスタマイズして、鮮やかでモダンなブランドを表現します。