【Angular入門(9)】Flex Layoutでレスポンシブしてみる

はじめに

最近、Webサイトをスマホで見たり、PCで見たり、タブレットで見たりと、さまざまな画面サイズの端末からWebサイトはアクセスされます。

業務でもWebアプリのレスポンシブ対応しろ!!!とかって言われちゃうことが、、、

 

Webサイトのレスポンシブ化はGoogleでの検索結果で上位になる1つの要素でもあるみたいですね。

 

そんなWebサイトのレスポンシブ化をAngularでやるにはどうすればよいかについて、

サンプルプログラムを作成しながら説明していきます。

 

サンプルプログラムではこんな画面を作ります。

 

 

環境

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

 

前提

以下が完了している前提で説明します。

【Angular入門(7)】Angular Materialを使ってみる

 

 

Flex Layoutの導入手順

まず、レスポンシブ化のために必要なライブラリを導入しましょう。

ターミナルを開いて以下コマンドを実行します。

command
$ cd angularMaterialSample
$ npm install https://github.com/angular/flex-layout-builds.git

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

 

 

サンプル画面の作成

サンプル画面は以下の手順で作成します。

  1. app.module.tsの修正
  2. src/app/assetsフォルダに画像を配置
  3. app.componentの修正

1.app.module.tsの修正

src/app/app.module.tsでFlexLayoutをインポートします。

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 {MdCheckboxModule,MdRadioModule,MdCardModule,MdInputModule,MdButtonModule,MdGridListModule} from '@angular/material';
//追加インポート
import {FlexLayoutModule} from "@angular/flex-layout";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MdCheckboxModule,
    MdRadioModule,
    MdCardModule,
    MdInputModule,
    MdButtonModule,
    MdGridListModule,
    //追加インポート
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

2.src/assetsフォルダに画像を配置

src/assets配下に画像ファイルを配置してください。(画像はなんでもいいですが4枚ほど配置)

 

3.app.componentの修正

まず、src/app/app.component.htmlにFlexLayoutを利用したカードを追加します。

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>

<!-- FlexLayout 追加-->
<mat-card>
  <mat-card-content>
    <h2 class="example-h2">FlexLayout Cards</h2>
    <div fxLayout="row wrap" fxLayoutAlign="space-around">
      <mat-card fxFlex="32%" fxFlex.xs="100%" *ngFor="let picture of pictures" style="background-color:#dedee4">
        <mat-card-header>
          <mat-card-title>CardTitle</mat-card-title>
          <mat-card-subtitle>CartSubtitle</mat-card-subtitle>
        </mat-card-header>
        <img mat-card-image src={{picture}}>
        <mat-card-content>
          <p>CardContent</p>
        </mat-card-content>
        <mat-card-actions>
          <button mat-button>LIKE</button>
          <button mat-button>SHARE</button>
        </mat-card-actions>
      </mat-card>
    </div>
  </mat-card-content>
</mat-card>
MEMO
■fxLayoutについて

子要素(今回だとmat-card)を縦並び・横並びにするかを指定できます。

row wrapを指定することで子要素を横並びに並べ、動的に1行もしくは複数行で表示しています。

 

■fxLayoutAlignについて

子要素を右寄せ・中央寄せ・左寄せにするかを指定できます)

space-arroundを指定することで中央寄せで要素を並べています。

 

■fxFlexについて

画面に対してどれくらいの幅で表示するかを制御できます。

今回は画面に対して32%の幅で1つの要素を表示しています。(1行で3要素並べたかったので、)

また、今回はfxFlex.xsでは100%を指定しています。これは画面が599px以下の場合に適用される定義で、小さい画面では1行に1要素のみ表示できます。

fxFlex.〇〇は他にも、fxFlex.xl(1920px以上で適用)、fxFlex.md(960〜1279pxで適用)などあります。PC用の定義、モバイル用の定義、タブレット用の定義、などをそれぞれ定義することでWebアプリの画面をレスポンシブ対応にできます。

 

次に、src/app/app.component.tsに画像パスを配列変数に定義します。

src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pictures = ['/assets/img/A Little Break.jpg'
    ,'/assets/img/Angular Rest APICALL.png'
    ,'/assets/img/Material design.png'
    , '/assets/img/SpringBoot.png'];
}

以上で修正は完了です。

ローカルでサーバを立ち上げ、アクセスして動作を確認します。

 

 

おわりに

Angularでレスポンシブ対応画面を作成する方法について解説しました。

Flex Layoutはまだまだ他にも便利なレイアウト設定ができるみたいです!!

 

今後も、Flex Layoutはいろいろ試してたいと思います。

 

コメントを残す

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

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