Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

次世代Webアプリケーションフレームワーク「Angular」の活用 第21回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、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の公式ページ(https://material.angular.io/)
図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)
図2:Angular Materialのツールバーを表示するサンプル(p001-basic)

 最初に、リスト1のコマンドを実行して、Angular CLIでAngularのプロジェクトを生成し、Angular Materialを導入します。

[リスト1]プロジェクト生成と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のモジュールは機能ごとに分かれているので、必要な機能のモジュールをインポートします。

[リスト2]ツールバーのモジュールをインポートする設定(p001-basic/src/app/app.module.ts)
import { MatToolbarModule } from '@angular/material'; // 参照 ...(1)
(略)
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule // インポート ...(2)
  ],
(略)
})
export class AppModule { }

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

[リスト3]ツールバーの記述(p001-basic/src/app/app.component.html)
<mat-toolbar color="primary">
  <span>はじめてのAngular Material</span>
</mat-toolbar>

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:次世代Webアプリケーションフレームワーク「Angular」の活用

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5