ちょっと話題の記事

Flex-Layout と Angular Material でグッバイCSS – 検索フォームを作る

2018.10.05

Flex-Layout と Angular Material でこれを作りました。

angular_material_form.gif

この画面、CSSファイルには何も書いていません。 いい時代になりましたね。ごめんなさい、嘘です。 全体のパディングだけ1行設定しています。それ以外はすべて Flex-Layout と Angular Material の仕組みで完結しています。

※ Twitter等で「CSSがなくなるわけではないよね」というご指摘をいただき確かにそのとおりですので全体的に誤解を与えぬよう修正しています。ありがとうございました。

自分で書くCSSをなるべく少なくしたい

可能な限りフレームワークやライブラリの仕組みに乗り、CSSファイルの記述量は少なくしたいところです。単純にメンテするコードの量が減りますし、どこに何のCSSが適用されているのか気にしなくてよくなります。

画面を構成していくための道具を選定するにあたり、以下2要素考慮します:

  • レイアウトを調整する手段
  • 見た目がキレイなコンポーネント

代表格はやはり Bootstrap です。これらどちらも提供してくれており、テーマ・テンプレートも多数ある、候補としてまっさきにあがるすぐれものです。そんな素敵なCSSフレームワークではあるのですが、1点だけ気になるポイントが。jQuery 連携が前提になっているという点です。Angular でも組み合わせられないことはないのですが、やはりAngularのエコシステムで完結させたいところです。そこで今回、

これらを使ってみることにしました。

この記事で述べる内容

  • Flex-Layout で画面レイアウトを調整する
  • Angular Material のコンポーネントをいくつか紹介し、実際に画面に埋め込んでみる

この記事で言及しない内容

  • Flex-Layout で 画面サイズを考慮したレスポンシブな レイアウト調整を行う部分
  • Angular Material とデータのバインディング

準備

ng new ですでに Angular プロジェクトがある前提で進めます。

Flex-Laytout

npm install --save @angular/flex-layout

あとは Angular のapp.module.ts の imports に FlexLayoutModule を加えればOKです。

Angular Material

上記ページの、 Alternative 2: Angular Devkit 6+ に従いました。

ng add @angular/material
npm install --save hammerjs

これで必要なものは揃いました。あとは実際に画面で利用する Material コンポーネントを、随時 app.module.ts に追加していくことになります。

Flex-Layout でレイアウト調整

検索フォームを作るにあたって、ざっくり、以下のような配置を実現したいと思います。

note-layout-mock.png

fxLayout="column" で縦方向に要素を並べる

このようなコードを書くと...

<div fxLayout="column">
  <div fxFlex="50px" style="background-color: blue; color: white" fxLayoutAlign="center center">ヘッダ置きたい</div>
  <div fxFlex="50px" style="background-color: bisque" fxLayoutAlign="center center">ここに検索フォーム</div>
  <div fxFlex="50px" style="background-color: darkseagreen" fxLayoutAlign="center center">結果</div>
</div>

このように、要素が縦に並びます。

note-flex-layout-column.png

fxLayout="column" によって、親要素が column となり、子要素を縦に並べていく…ということになります。子要素は、fxFlex を宣言することによって、自分は親要素の Flex-Layout に属するものであることを示します。ここで、fxFlex にはオプションで数値を指定することもでき、ドキュメントによると px | % | vw | vh いずれかが指定できます。上記の例は px で絶対値を指定していますね。

fxLayout="row" で横方向に要素を並べる

このようなコードを書くと…

<div fxLayout="row" style="height: 200px">
  <div fxFlex style="background-color: bisque" fxLayoutAlign="center center">ここに検索フォーム</div>
  <div fxFlex="20%" style="background-color: darkgoldenrod" fxLayoutAlign="center center">検索ボタンとか</div>
</div>

このように、要素が並びます。

note-flex-layout-row.png

fxLayout が指定されている点などは column の場合と同じですが、子要素の 検索ボタン側に、fxFlex=20% が指定されています。これで、fxLayoutが設定されている親コンポーネントに対して、20%の横幅を確保するという意味になります。相対値を指定しているので、画面サイズの変更に追随します。

入れ子にできる

Bootstrap の Grid system と同様、Flex-Layout のcolumnやrowも入れ子にできます。つまり、縦に並ぶ要素の中で横並びのレイアウトを構築したり、その逆です。

<div fxLayout="column" highlight="4-9">
  <div fxFlex="50px" style="background-color: blue; color: white" fxLayoutAlign="center center">column1</div>
  <div fxFlex="75px">
    <div fxLayout="row" style="height: 75px">
      <div fxFlex fxFlexFill style="background-color: bisque" fxLayoutAlign="center center">column2, row1</div>
      <div fxFlex="20%" fxFlexFill style="background-color: darkgoldenrod" fxLayoutAlign="center center">column2, row2</div>
    </div>
  </div>
</div>

これで、

note-layout-nest.png

このような結果になります。column と row をうまく組み合わせていけば、任意の場所にコンポーネントを配置できそうです。

ここまでで、Flex-Layout の基本的な機能を使ってみました。このあたり、どのような指定をするとどんな配置になるかは、公式デモサイトがわかりやすいです。参考にしてみてください。

Flex-Layout を駆使すれば、コンポーネントの配置はできそうです。次は実際に並べるコンポーネントを見ていきましょう。

Angular Material で マテリアルデザイン部品

Components | Angular Material

こちらのサイトをみると、Input や Table など、HTMLの要素に相当する部品を用意してくれているようです。代表的なものをいくつかピックアップします。

Datepicker

mat-calendar.png

Webアプリケーションを組むとほぼ必須といっていいレベルで必要になるコンポーネントです。Angular Material では カレンダーUI用の Javascript や CSS を開発者が入れ込むことなく、 要素を書くだけで使えます。しかも、ロケールに対応しており、「Material Component のロケールとして何を使うか」という設定に対して 'ja-JP' を指定すればカレンダーUIが日本語になります。さらに、material-moment-adapter を使うことで、カレンダーからの入力値を Moment として扱えます。日付情報は、画面に表示する形式、外部APIと通信する際に渡す形式がまちまちなことが多いので、一度 Moment で受けて任意の形式にフォーマットできるというのは強みですね。

Button

mat-button.png

見た目の選択肢が多いところが嬉しいですね。「枠線のみ」や「浮き上がり」を表現するために、わざわざCSSを書かなくても良いのは嬉しいです。もちろん、クリックなどのイベントに対して function を割り当てることができます。Material Icons と組み合わせれば、シーンに合わせたアイコンボタンを簡単につくれます。

Material Icons

mat-icon.png

アイコン名 によりマテリアルデザインで定義されているアイコンを利用することができます。入力フォームの目印として使うもよし、Buttonと組み合わせてアイコンボタンにするもよし。汎用性が高いです。

Table

mat-table.png

素のテーブルを扱う場合、ヘッダに表示する項目の順番を調整したり、要素分だけ を繰り返すというのは、なかなか面倒です。Angular Material のテーブルでは、テーブル用のデータを定義して、それを

にわたすことでテーブルを表示してくれます。また、ヘッダ情報は定義だけ行い、表示是非や順序は

参考