「Angular Material」で、「Angular」のWebページにMaterial Designを導入しよう

CodeZine / 2019年5月13日 11時0分

 本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回は、Angularの要素を操作するディレクティブの自作方法を説明しました。今回は、Googleのデザインガイドライン「Material Design」に対応したAngularのコンポーネント(UI部品)「Angular Material」を紹介していきます。

■はじめに

 Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS(AngularJS 1)と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。

 「Material Design」は、Googleが提唱するデザインガイドラインで、Googleのスマートフォンアプリなどで利用されています。本記事で紹介する「Angular Material」は、このMaterial Designに対応したUI部品を提供する、Angular用コンポーネント集です。Angular Materialを利用すれば、AngularのWebページにMaterial Designの外観や挙動を適用できます。
図1:Angular Materialの公式ページ

 本記事では、AngularプロジェクトにAngular Materialを導入して利用する方法と、Angular MaterialのUI部品を利用する例を、サンプルとともに紹介していきます。

■対象読者

AngularのWebページに統一的なデザインを適用したい方
Googleのアプリのようなデザインを自分のWebページにも導入したい方
見栄えの良いWebページを作りたい方

■必要な環境

 Angularの開発では、一般にTypeScript(変換してJavaScriptを生成する、いわゆるAltJS言語)が利用されます。本記事のサンプルコードもTypeScriptで記述しています。

 今回は以下の環境で動作を確認しています。Angular MaterialのセレクトボックスがMicrosoft Edgeで正しく表示されない(意図せずブラウザー画面の横幅いっぱいに表示される)ため、本記事ではGoogle Chromeを動作確認に使用します。

Windows 10 64bit版  

Angular 7.2.12
Angular Material 7.3.7
Angular CLI 7.3.8
Node.js v10.15.3 64bit版
Google Chrome 73.0.3683.103

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリをダウンロード後、「ng serve」コマンドを実行して、Webブラウザーで「http://localhost:4200」を開きます。「ng serve --open」とオプション指定すると、実行時にWebブラウザーを自動で起動してページを表示できます。

■Angular Materialの導入と、基本的な利用方法

 Angular Materialを導入して利用する基本的な方法を、ツールバー(MatToolbar)を表示する図2のサンプルで説明します。
図2:Angular Materialのツールバーを表示するサンプル(p001-basic)

 最初に、リスト1のコマンドを実行して、Angular CLIでAngularのプロジェクトを生成し、Angular Materialを導入します。
ng new p001-basic #...(1) cd p001-basic #...(2) ng add @angular/material #...(3)

 (1)でプロジェクトを生成後、(2)でそのフォルダーに移動して、(3)のng addコマンドでAngular Materialを導入します。なお、Angular 7以降では、(3)のコマンド実行時に、テーマカラーなどを対話入力で指定できます。詳細はAngluar 7の紹介記事、連載18回「 フレームワークとツールの両面で完成度アップ! 「Angular」バージョン7の新機能」も参考にしてください。

 次に、Angular Materialのモジュールをインポートします。Webページのルートモジュール定義ファイル(app.module.ts)で、ツールバーのモジュール(MatToolbarModule)を、リスト2(1)で参照して、(2)でインポートします。Angular Materialのモジュールは機能ごとに分かれているので、必要な機能のモジュールをインポートします。
import { MatToolbarModule } from '@angular/material'; // 参照 ...(1) (略) @NgModule({  imports: [   BrowserModule,   BrowserAnimationsModule,   MatToolbarModule // インポート ...(2)  ], (略) }) export class AppModule { }

 最後に、Webページのルートコンポーネントで、Angular Materialのツールバーコンポーネントを表す<mat-toolbar>を、テンプレートにリスト3の通り記述します。
<mat-toolbar color="primary">  <span>はじめてのAngular Material</span> </mat-toolbar>

 <mat-toolbar>のcolor属性に指定されている「primary」は、Angular Materialのテーマカラーのうち、メインとなる色を表します。テーマカラーにはprimary以外にaccent(アクセント色)、warn(エラーを表す色)があります。

WINGSプロジェクト  吉川 英一[著]

【関連記事】
Webページ要素を操作できる「Angular」のディレクティブを自作してみよう
SEO対策やページ表示速度アップに有効!「Angular」のサーバーサイドレンダリング
ExpoではじめるReact Native開発環境の構築
JavaScriptの変数宣言はletにすべきか 『入門JavaScriptプログラミング』から解説
フレームワークとツールの両面で完成度アップ! 「Angular」バージョン7の新機能

■記事全文へ

この記事に関連するニュース

トピックスRSS

ランキング