この Codelab について
1. はじめに
マテリアル コンポーネント(MDC)は、デベロッパーがマテリアル デザインを実装する際に役立ちます。Google のエンジニアと UX デザイナーのチームが作成した MDC には、美しく機能的な UI コンポーネントが多数含まれており、Android、iOS、ウェブ、Flutter.material.io/develop に利用可能です。 |
Codelab MDC-101 および MDC-102 では、マテリアル コンポーネント(MDC)を使用して、Shrine というアプリの土台を構築しました。Shrine は、衣服と生活雑貨を販売する e コマースアプリです。このアプリのユーザーフローはログイン画面から始まり、ログイン画面から商品が表示されるホーム画面に移動します。
マテリアル デザインは最近拡張され、デザイナーやデベロッパーが商品のブランドを表現するための柔軟性が向上しました。この Codelab では、MDC を使用して Shrine アプリをカスタマイズし、これまで以上にブランドのユニークなスタイルを反映させます。
作成するアプリの概要
この Codelab では、以下を使用して Shrine をカスタマイズして、ブランドを反映させます。
- 色
- タイポグラフィ
- 高度
- シェイプ
- レイアウト
この Codelab で使用する MDC ウェブ コンポーネントとサブシステム
- テーマ
- タイポグラフィ
- 高度
- 画像リスト
必要なもの
- Node.js の最新バージョン(JavaScript パッケージ マネージャーである npm にバンドルされています)。
- サンプルコード(次のステップでダウンロード)
- HTML、CSS、JavaScript の基本的な知識
ウェブ開発の経験についてお答えください。
2. 開発環境を設定する
MDC-102 から続行する場合
MDC-102 が完了済みであれば、コードはこの Codelab を進められる状態になっています。ステップ 3: 色を変更するに進みます。
Codelab のスターター アプリをダウンロードする
スターター アプリは material-components-web-codelabs-master/mdc-103/starter
ディレクトリ内にあります。開始する前に、そのディレクトリへの cd
を行ってください。
GitHub からクローンを作成する
GitHub からこの Codelab のクローンを作成するには、次のコマンドを実行します。
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-103/starter
プロジェクトの依存関係をインストールする
スターター ディレクトリ material-components-web-codelabs/mdc-103/starter
(上記の手順を行った場合は現在のディレクトリ)から、次のコマンドを実行します。
npm install
多くのアクティビティが表示され、最終的に、正常にインストールされたことを示すメッセージがターミナルに表示されます。
スターター アプリを実行する
同じディレクトリで次のコマンドを実行します。
npm start
webpack-dev-server
が起動します。ブラウザで http://localhost:8080/ にアクセスしてページを表示します。
完了しました。ブラウザで Shrine のログインページが表示されます。[Username] フィールドと [Password] フィールドに入力し、[Next] をクリックします。ボタンをクリックすると、ホームページに移動します。左側に、商品画像のグリッドの横にナビゲーション ドロワーが表示されます。
ナビゲーション ドロワーは機能しますが、色、高度、タイポグラフィを変更して、Shrine ブランドに合わせてみましょう。
3. 色を変更する
このカラーテーマは、デザイナーがカスタムカラーを使って作成したものです(下記の画像を参照)。これには Shrine のブランドから選択されたカラーが含まれており、Material Theme Editor に適用されています。Material Theme Editor では、それらのカラーが拡張され、より完全なパレットが作成されています(これらのカラーは、2014 マテリアル カラーパレットのものではありません)。
Shrine アプリのナビゲーション ドロワーの色を変更して、このカラーパターンを反映しましょう。
テーマカラーをオーバーライドする
次の内容を含む、_variables.scss
という名前の新しいファイルを作成します。
$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;
次に、_common.scss
の最上部でインポートします。
@import "./variables";
ナビゲーション ドロワーに CSS スタイルを追加する
home.scss で、既存の import の後に次の import ステートメントを追加します。
@import "@material/ripple/mixins";
次に、以下のスタイルを追加して .shrine-drawer
クラスを作成します。
.shrine-drawer {
@include mdc-drawer-fill-color-accessible(primary);
// Drawer defaults to a higher z-index, but we aren't overlaying it over anything
@include mdc-drawer-z-index(0);
text-transform: uppercase;
.mdc-list {
margin: 70px 5px auto 5px;
}
.mdc-list-item {
border-radius: 6px;
justify-content: center;
}
// This needs 3-class specificity to override MDC Drawer styles
.mdc-list .mdc-list-item {
@include mdc-states-activated(#fff);
}
}
http://localhost:8080/home.html のページを更新します。ホーム画面は次のようになります。
ログイン画面の色を、このカラーパターンに合わせて変更しましょう。
ログインページに CSS スタイルを追加する
login.scss
に、次の行を追加します。
.shrine-login {
background-color: $mdc-theme-background;
color: $mdc-theme-on-background;
}
.cancel {
@include mdc-button-ink-color(on-primary);
}
また、.username, .password
CSS セレクタ内に次のミックスイン呼び出しを追加します。
.username,
.password {
&:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
&.mdc-text-field--focused:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
...
}
http://localhost:8080/ のページを更新します。ログイン画面は次のようになります。
4. タイポグラフィとラベルのスタイルを変更する
デザイナーは、色の変更に加えて、サイトで使用する特定のタイポグラフィも提供しています。これをナビゲーション ドロワーにも追加しましょう。
タイポグラフィのパッケージをインストールするには、次のコマンドを実行します。
npm install @material/typography
タイポグラフィ用の CSS を追加する
home.scss
で、既存の import の後に次の import ステートメントを追加します。
@import "@material/typography/mdc-typography";
次に、次の Mixin 呼び出しを shrine-title
クラスに追加します。
.shrine-title {
@include mdc-typography(headline6);
...
}
次に、ドロワー アイテムのスタイルを設定します。
行区切り文字を追加する
home.html
で、<a ...>Featured</a>
要素の直後に次のコードを追加します。
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>
home.scss
に次のスタイルを追加します。
.shrine-select-item-divider {
display: block;
border-bottom-color: #EAA4A4;
border-bottom-width: 2px;
width: 50px;
position: relative;
top: -8px;
}
// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
margin: 0 auto;
}
画像のアイテムとラベルを調整する
アイテムとラベルを調整するには、.product-list
セレクタ内の home.scss
に次のスタイルを追加します。
.product-list {
...
.mdc-image-list__supporting {
justify-content: center;
}
.mdc-image-list__item {
padding: 10px;
}
.mdc-image-list__label {
@include mdc-typography(subtitle2);
}
}
ページを更新すると、ホーム画面は次のようになります。
5. 高度を調整する
これで、Shrine 固有の色とタイポグラフィを使用してページのスタイルを設定できました。次は、Shrine の商品を示す画像リストを見てみましょう。商品をより強調して注目を集めましょう。
Elevation のパッケージをインストールするには、次のコマンドを実行します。
npm install @material/elevation
import ステートメントを追加する
home.scss
で、最後の import ステートメントの後に次の行を追加します。
@import "@material/elevation/mdc-elevation";
新しい div で画像リストをラップする
home.html
で、<ul>
要素の周囲に次のマークアップを追加します。
<div class="shrine-body">
<ul...>
</div>
Sass ミックスインを使用して高度を変更する
home.scss
に以下を追加します。
.shrine-body {
@include mdc-elevation(4);
display: block;
overflow: auto;
z-index: 0; // Elevate over the drawer
}
すごい!画像リストアイテムの背後にある白いサーフェスの左端にシャドウを追加して、ナビゲーションの上に少し浮いているように見えるようにしました。
6. レイアウトを変更する
次に、レイアウトを変更して、異なるアスペクト比とサイズの画像を表示して、各画像が他の画像と異なって見えるようにします。
HTML を変更する
home.html
で、mdc-image-list
要素を更新して mdc-image-list--masonry
クラスを含めます。
<ul class="mdc-image-list mdc-image-list--masonry product-list">
画像を追加する
home.html
で、assets
フォルダにある画像と一致するように各 img
要素の src
属性を変更します。次に、各画像のラベルテキストを更新します。完了すると、次のようになります。
<ul class="mdc-image-list mdc-image-list--masonry product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Ginger scarf</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Blue stone mug</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Cerise scallop tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Chambray napkins</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/fine-lines.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Fine lines tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/garden-strand.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Garden strand</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gatsby hat</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gilt desk trio</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Kitchen quattro</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Seabreeze sweater</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Shrug bag</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Stella sunglasses</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Surf and perf shirt</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Vagabond sack</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/walter-henley.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Walter henley (white)</span>
</div>
</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>
CSS を更新する
home.scss
で、mdc-image-list-standard-columns(4)
ミックスインを削除し、次のミックスインに置き換えます。
@include mdc-image-list-masonry-columns(4);
次に、次の padding
値を home.scss
の product-list
クラスに追加します。
.product-list {
...
padding: 80px 100px 0;
}
コードが complete/
フォルダに含まれているコードと一致するはずです。
7. 別のテーマを試す
色はブランドを表現するための強力な手段です。色を少し変えるだけで、ユーザー エクスペリエンスに大きく影響します。これを試すために、ブランドのカラーパターンが完全に異なると Shrine がどのように見えるかを見てみましょう。
CSS を変更する
_variables.scss
で、プライマリ テーマに対して宣言した変数を次のように置き換えます。
$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;
login.scss
で、.username, .password
セレクタの Mixin を削除します。次のようになります。
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}
さらに、.cancel
クラスの mdc-button-ink-color
ミックスイン オーバーライドを削除します。
home.scss
で、次のルールを .home
クラスに追加します。
background-color: $mdc-theme-background;
.shrine-logo-drawer
セレクタ内で、fill
プロパティを on-primary 色に置き換えます。
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}
同様に、.shrine-title
セレクタ内で、color
プロパティを on-primary 色に設定します。
.shrine-title {
...
color: $mdc-theme-on-primary;
}
最後に、.shrine-body
セレクタで前に使用した mdc-elevation
ミックスインを削除します。
ビルドして実行します。新しいテーマがブラウザに表示されます。
次に http://localhost:8080/home.html に移動して、home.html
ページに対する変更を確認します。
8. 内容のまとめ
これで、デザイナーの仕様に近いアプリが作成されました。
次のステップ
この Codelab では、MDC コンポーネントとして、テーマ、タイポグラフィ、高度、シェイプを使用しました。その他のコンポーネントとサブシステムについては、MDC ウェブカタログをご覧ください。