Webシステムを開発する場合、業務系であれば標準機能を利用して開発していけばいいのですが、例えばコンシューマー向けのWebシステムの場合、PCブラウザ上での表示の他にスマホ画面での表示もチェックしておく必要があります。
機会損失とか小難しい話は置いておきますが、ユーザがどんなデバイスからでもアクセスして快適に閲覧できた方がいいよね、というコトです。
Angularで開発するシステムをスマホだけに対応させるのであれば『Ionic』といったフレームワークも有効なのですが「PCブラウザでも」となるといわゆるレスポンシブ対応を行うことになります。
Ionic is the app development platform for web developers. Build amazing cross platform mobile, web, and desktop apps all with one shared code base and open web standards
今回はAngularのレスポンシブ対応に有用な『Angular Flex-Layout』のインストールと簡単な使い方をご紹介します。
- OS：Windows10 Pro
- Node.js：v12.16.3
- npm：6.14.4
- Angular CLI：9.1.4
- Angular Material：9.2.4
- Angular Flex-Layout：9.0.0-beta.31
レスポンシブとは
レスポンシブとは、画面サイズの大きさなどによって最適なデザインをとることを指します。
極端な例だと、PCブラウザの解像度は基本的に横長ですが、スマホは縦長です。
なので普段PCブラウザで見ているサイトなどをそのままスマホで表示しようとすると、幅が見切れている状態になります。
ガラケー世代の方が想像つきやすいかもしれませんね。
これがレスポンシブ対応を行っているサイトだと、（簡単に言えば）幅が見切れることは無く、見切れていた部分に表示されていたであろう箇所が縦に表示されるような感じになります。
当ブログはAngularで作っているわけではありませんが、レスポンシブ対応のデザインを使用しているため、PC版とスマホ版では見え方が異なります。
確認してみたい方はChromeならF12押して開発者ウィンドウを開き、「Ctrl+Shift+M」を押してみてください。
なお、よく見かける「スマホサイトはこちら」みたいな奴はレスポンシブ対応ではなく、PCブラウザ用とスマホブラウザ用を用意しているだけです。開発頑張りましたね。
『Angular Flex-Layout』とは
冒頭でも述べた通り、Angularでシステム開発を行う際のレスポンシブ対応に有用なパッケージです。
Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API - angular/flex-layout
ただし、注意しなければならないのは基本的なレスポンシブ対応（CSSを分ける、など）に通ずる思考が必要である事。
「パッケージが提供しているコンポーネント使えばそれで終わり」というモノではありません。
CSSの拡張パッケージといった認識が適当かもしれませんね。
『Angular Flex-Layout』のインストール
インストールはGitHubのREADME記載の通り、下記コマンド一発です。
npm i -s @angular/flex-layout @angular/cdk
『Angular Flex-Layout』の使い方
※今回は簡単な使い方のみで、レスポンシブ対応に関しては深く触れません。
前回作成したプロジェクトをそのまま使っていきます。
ここ最近仕事でもプライベートでも使っているAngularですが、さすが新しい技術だけあってある程度の要素（例え…
モジュールインポート
『Angular Material』同様にインポートが必要となります。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { FlexLayoutModule } from '@angular/flex-layout'; ★追加
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatTableModule,
FlexLayoutModule ★追加
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ただし、こちらは1個だけインポートしておけば全ての機能を利用することが出来ます。
前回作成したTableにFlex-Layoutを適用する
前回作成したAngular MaterialのTableコンポーネントにFlex-Layoutを適用してみます。
前回はSCSSに以下のような設定を入れました。
table {
width: 100%;
}
今回は上記を削除します。
そのうえで、app.component.htmlを以下のように変更します。
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" fxFlexFill> ★属性「fxFlexFill」を追加
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
Tableタグ内に属性を1個追加しました。
表示結果がこちらです。
上記をSCSSのみで実現しようとすると、数行書かなければなりませんが、Flex-Layoutであれば属性一つ。
CSSの適用よりも楽ちんですね。
最後に
今回はFlex-Layoutのインストールと簡単な使い方をご紹介しました。
次はレスポンシブ対応の実装などもご紹介していければ、と思っています。（いつになるか分かりませんけど）
以上です。
スポンサーリンク
