Angularでマテリアルデザインの画面を作成する(Angular Material利用)

「Angularでマテリアルデザインの画面をどうやって作成するのか?」
「そもそもマテリアルデザインって何??」
今回はこの辺りについて確認します。

Angularでのマテリアルデザイン画面の作成手順

今回はAngularでマテリアルデザイン画面を作成する手順について説明します。マテリアルデザイン作成のためにAngular Materialを利用します。

Material DesignとはGoogleが発表したデザインのガイドラインです。直訳すると物質デザインですが、、画面のコンポーネントが本当の物質みたいに、ボタンを押すことで凹んだり、動いたり、テキストボックスにプリセットされた文字がフォーカスインと同時に端に寄ったり・・・直感的に人が操作できます。

最近よくそんなデザインのWebサイトを見かけます。

ではAngularでそんなおしゃれなMaterial Designを導入した画面を作ってみよう!!! ということで、本記事ではUIコンポーネントライブラリのAngular Materialを導入して、Material Designの簡単なサンプル画面を作成してみます。

環境について

  • OS:OS X 10.11 El Capitan
  • node:v8.1.0
  • Angular CLI:1.6.6
  • Visual Studio Code:1.13

Angularの開発環境構築は完了している前提で説明を行います。環境構築については以下を参照ください。

>>Angular開発環境構築手順(for Windows)

>>Angular開発環境構築手順(for Mac)

Angularでサンプルプログラム作成

サンプルプログラムは以下の手順で作成します。

  1. Angular CLIでプロジェクトを新規作成する
  2. Angular Materialをインストールする

1.Angular CLIでプロジェクトを新規作成する

Visual Stuido Codeを起動し、「Shift」+「Control」+「@」で統合ターミナルを立ち上げます。

  任意のディレクトリ内で、プロジェクトを新規作成します。

command
$ ng new angularMaterialSample

以上でプロジェクト新規作成は完了です。  

2.Angular Materialをインストールする

カレントディレクトリを新規作成したプロジェクト内に移します。

command
$ cd angularMaterialSample

Angular Materialをインストールします。

command
$ npm install --save @angular/cdk
$ npm install --save @angular/material @angular/animations
$ npm install --save hammerjs

以上でインストール完了です。    

では最後にプログラムを修正していきます。

src/app/app.module.tsを以下のように修正します。

src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
//追加インポート
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import 'hammerjs';
import {MatCheckboxModule,MatRadioModule,MatCardModule,MatInputModule} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
    MatRadioModule,
    MatCardModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/style.cssを以下のように修正します。

src/style.css
/*テーマ設定*/
@import '~@angular/material/prebuilt-themes/purple-green.css';
src/app/app.component.htmlを以下のように修正します。
src/app/app.component.html
<!-- CheckBox -->
<mat-card>
  <mat-card-content>
    <h2 class="example-h2">CheckBox</h2>
    <mat-checkbox class="example-margin">Checked</mat-checkbox>
  </mat-card-content>
</mat-card>

<!-- RadioButton -->
<mat-card>
  <mat-card-content>
    <h2 class="example-h2">RadioButton</h2>    
    <label class="example-margin">RadioButton:</label>
    <mat-radio-group>
      <mat-radio-button class="example-margin" value="start">RadioA</mat-radio-button>
      <mat-radio-button class="example-margin" value="end">RadioB</mat-radio-button>
    </mat-radio-group>
  </mat-card-content>
</mat-card>

<!-- TextBox・TextArea -->
<mat-card>
  <mat-card-content>
    <h2 class="example-h2">TextBox・TextArea</h2>
    <table class="example-full-width" cellspacing="0">
      <tr>
        <mat-input-container class="example-full-width">
          <input matInput placeholder="TextBox">  
        </mat-input-container>
      </tr>
      <tr>
        <mat-input-container class="example-full-width">
          <textarea matInput placeholder="TextArea"></textarea>
        </mat-input-container>
      </tr>
    </table>
  </mat-card-content>
</mat-card>

以上で修正は完了です。 ローカルでWebサーバを立ち上げ、ブラウザを確認します。

上のようになっていればOKです。    

おわりに

Material Designで画面作成すると、たいした機能ではない画面でもリッチな画面に見える気がしますね。。。本記事では Angular Materialの導入と、実際にMaterial Designの画面作成方法を説明しました。

めちゃめちゃ導入簡単でしたね、、Angular Materialにはおしゃれなタブや、ボタンなどなどまだまだいろいろモジュールが用意されているので、試してみてください。

次は、AngularでRest APIをコールしてみましょう。現場で業務アプリを作成する際はおそらくAngularからバックエンドの処理をコールする場面は多いと思います。

>>AngularでRest APIをコールする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください