この Codelab について
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 の「完了」をこれを、ドロワーとそのアイテムの次のマークアップに置き換えます。
<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 を追加する
まず、ナビゲーション ドロワーの横に画像リストを追加しましょう。まず、画像とテキストラベルで構成されるアイテムを 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>
このリストには、追加のクラス 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 にあります
更新します。ホームページは次のようになります。
画像リストには 1 行に 4 つの画像が表示され、利用可能な画面スペースに合わせて画像のサイズが自動的に調整されます。
5. 内容のまとめ
あなたのサイトには、ログインページから商品を表示できるホームページにユーザーを誘導する基本的なフローがあります。わずか数行のコードで、コンテンツを表示するためのドロワーと画像リストを追加しました。これで、ホームページは基本的な構造とコンテンツで構成され、
次のステップ
ドロワーと画像リストにより、MDC ウェブ ライブラリのマテリアル デザインのコア コンポーネントが 2 つ追加されました。その他のコンポーネントについては、MDC ウェブカタログをご覧ください。
ホームページは完全に機能していますが、特定のブランドや視点はまだ示されていません。MDC-103: Material Design Theming with Color、Shape、Elevation、Type では、これらのコンポーネントのスタイルをカスタマイズして、鮮やかでモダンなブランドを表現します。