Angularマテリアルを使用して最新のWebアプリを構築する

公開: 2022-03-11

2014年のGoogleI/ O会議で、Googleは新しいデザイン言語であるマテリアルデザインを発表しました。その後、一貫したエクスペリエンスを提供するために、人気のあるアプリケーションの多くをこの新しい仕様に準拠するように変換しました。今、彼らはあなたにも従うように説得しようとしています。

マテリアルデザインとは何ですか？

公式のマテリアルデザイン仕様にアクセスすると、すぐに超近代的なミニマリズムを感じることができます。ここでは基本的な形とフラットな色がテーマです。ドキュメントを読むのはかなりの経験です。自分で見てみることをお勧めしますが、ここで要約します。

ゴール

目的は、優れたデザインの古典的な原則と、テクノロジーと科学の革新と可能性を統合する視覚言語を作成することです。また、さまざまなプラットフォームやデバイスサイズで統一されたエクスペリエンスを可能にする単一の基盤となるシステムを開発します。

原則

マテリアルデザインは、3つの原則に基づいています。

材料はメタファーです

紙とインクの研究に触発された素材は、3D空間に存在し、触覚の現実に基づいています。リアルな影を使って空間の錯覚を与えます。紙の素材は物理法則に従わなければなりません（つまり、2枚の紙が互いに移動できない）が、物理的な世界に取って代わる可能性があります（つまり、紙が伸びたり縮んだりする可能性があります）。

太字、グラフィック、意図的

慎重な色の選択、端から端までの画像、大規模なタイポグラフィ、および意図的な空白により、ユーザーをエクスペリエンスに没頭させる大胆でグラフィックなインターフェイスが作成されます。フローティングアクションボタン（FAB）は、この原則の代表的な例です。 Google Inboxアプリに「プラス」の記号が付いた小さな円が浮かんでいることに気づきましたか？マテリアルデザインは、これが重要なボタンであることを非常に明確にしています。

モーションは意味を提供します

動きは意味があり適切であり、注意を集中させ、継続性を維持するのに役立ちます。フィードバックは微妙ですが明確です。移行は効率的でありながら一貫性があります。ここでの主なポイントは、目的がある場合にのみアニメートすることであり、やりすぎないことです。

AngularJSはマテリアルデザインにどのように適合しますか？

Googleの「スーパーヒーローJavaScriptMVWフレームワーク」であるAngularJSは、シングルページアプリケーション（SPA）の開発で遭遇する多くの課題に対処します。 APIに接続し、ページを更新する必要がない最新のWebアプリケーションを作成するために必要なフレームワークを提供します。

AngularJS：新しいアプローチ

Angularは、アプリケーション用に設計されていた場合のHTMLでした。 HTMLは静的ドキュメントの優れた宣言型言語ですが、動的アプリケーションの作成はそれほど多くありません。

HTMLを使用して動的なアプリケーションを作成することは、ブラウザーをだまして意図しないことを実行させるための演習でした。これを行うには、いくつかのアプローチがあります。

ライブラリ-関数のコレクション。（jQuery）
フレームワーク-コードは、必要に応じて静的要素を動的に入力します。（デュランダル、エンバー）

Angularは、この問題を解決するために別のアプローチを採用しています。与えられたHTMLに苦労する代わりに、新しいHTML構造を作成します。 Angularは、「ディレクティブ」と呼ばれる構造を通じてブラウザーに新しいHTML構文を教えます。 Angularには、これらのディレクティブのセットが組み込まれていますが、カスタムディレクティブを作成することもできるため、独自のHTML要素を作成できます。

グーグルがマテリアルデザインの原則に基づいて一連の指令を作成したとしたら、それは素晴らしいことではないでしょうか。

AngularMaterialの紹介

Googleは、AngularJSのマテリアルデザインの実装であるAngularMaterialを積極的に開発しています。 Angular Materialは、マテリアルデザインシステムに基づいた再利用可能なUIコンポーネントのセットを提供します。 AngularMaterialはいくつかのピースで構成されています。タイポグラフィやその他の要素用のCSSライブラリがあり、テーマ設定に興味深いJavaScriptアプローチを提供し、レスポンシブレイアウトはフレックスグリッドを使用します。しかし、Angular Materialの最も魅力的な機能は、その驚くべきディレクティブのコレクションです。

入門

次のAngularMaterialプロジェクトをすぐに開始できるように、オープンソースプロジェクトを作成しました。このプロジェクトの目的は、AngularMaterialが提供するすべてのものの例をすべて1つの屋根の下に示すことです。ナビゲーション、ページング、テーマ設定、およびディレクティブのコレクション全体の準備が整いました。データをフィードしてHTMLにバインドするだけです。

こちらのデモをご覧になるか、GitHubでコードをフォークしてください。

指令

ディレクティブはAngularのコア機能です。 Angularには、ng-modelやng-repeatなど、常に使用するいくつかのディレクティブが付属しています。これらは、フレームワークを正常に機能させる非常に重要なAngularです。

AngularMaterialDirectiveの使用方法

Angular Materialは、このディレクティブライブラリを、マテリアルデザインにインスパイアされた美しいディレクティブのセットで拡張します。 Angular Materialディレクティブは、「md」で始まるHTMLタグです。マテリアルデザインの略。それらははるかに使いやすいものではありませんでした。たとえば、古き良きボタンを見てみましょう。

標準のHTMLボタンは次のようになります。

 <button>Click Me</button>

AngularMaterialボタンは次のようになります。

 <md-button>Click Me</md-button>

そして、これがマテリアルボタンを作成するために必要なすべてです。現在、このディレクティブで使用できるオプションは他にもいくつかあります。たとえば、テーマを設定したり、重要性を示すために表面から持ち上げたりすることができます。

 <md-button class="md-raised md-primary md-hue-1">Click Me</md-button>

サービス

サービスはAngular機能の中核でもあります。これらは、アプリケーション間でコードを共有するために使用されます。 $ httpのような一般的なコアサービスは、Angularアプリケーションのデータ呼び出しに使用および再利用されます。

Angularサービスは次のとおりです。

遅延インスタンス化– Angularは、アプリケーションコンポーネントがサービスに依存している場合にのみサービスをインスタンス化します。
シングルトン–サービスに依存する各コンポーネントは、サービスファクトリによって生成された単一インスタンスへの参照を取得します。

AngularMaterialServiceの使用方法

Angular Materialには、アプリケーションにいくつかの追加機能を提供するいくつかのサービスがパッケージ化されています。また、一部のディレクティブのパフォーマンスにも貢献します。サービスの良い例は「トースト」です。

トーストは、画面の上部からスライドして数秒後に消える小さな通知です。このサービスの利用は簡単です。

JavaScriptでは、

 $mdToast.show( $mdToast.simple('Simple Toast!') .position('left bottom') .hideDelay(3000) );

この例は、画面の左下にポップアップし、3秒後に後退する単純なトーストを示しています。

一部のサービスは、カスタムテンプレートを使用してパーソナライズできます。この場合、$ mdToastサービスは、md-toastディレクティブを使用してカスタムHTMLテンプレートを使用できます。

テーマ

マテリアルデザインは、テーマが色、色調、コントラストを通じて意味を伝える視覚言語です。これらのテーマは、アプリケーション全体のコンポーネント全体で表現され、より統一された感覚を提供します。

マテリアルデザインのガイドラインによると、「プライマリパレットから3つの色相を選択し、セカンダリパレットから1つのアクセントカラーを選択して、色の選択を制限する」必要があります。 Angular Materialは、JavaScriptを使用してテーマを構成することにより、このガイドラインに従うことを簡単にします。しかし、最初に、パレットと色相とは何ですか？

色相：色相はパレット内の単一の色です。
パレット：パレットは色相のコレクションです。

たとえば、パレットは「緑」で、色相は特定の緑の色合いです。 Angular Materialには、MaterialDesign仕様の有効なパレットがすべてパッケージ化されています。有効なカラーパレットについて詳しくは、こちらをご覧ください。

テーマの構成

プロジェクトのテーマは簡単です。 app.jsファイルで、テーマプロバイダーサービスを使用して目的のパレットと色相を設定します。

 angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('cyan', { 'default': '400', 'hue-1': '100', 'hue-2': '600', 'hue-3': 'A100' }) .accentPalette('amber') .warnPalette('red') .backgroundPalette('grey'); });

テーマの使用

テーマをコンポーネントに適用するには、要素のクラスを目的のパレットと色相に設定します。

 <md-button class="md-primary">Click me</md-button> <md-button class="md-primary md-hue-1">Click me</md-button> <md-button class="md-primary md-hue-2">Click me</md-button> <md-button class="md-accent">or maybe me</md-button> <md-button class="md-warn">Careful</md-button>

レイアウト

Flexboxは、レスポンシブデザインへの最新かつ最高の追加機能であり、AngularMaterialがパッケージ化されています。 Bootstrapグリッドシステムに精通している場合は、すぐに理解できるはずです。実際、Bootstrapは次のリリースでFlexboxに切り替えています。慣れ親しんだ行と列のレイアウトがありますが、それ以上のものがあります。このチュートリアルでFlexboxを使用する方法を学ぶか、公式ドキュメントを調べてください。

トップ9の最高のAngularMaterialディレクティブ

Angular Materialディレクティブが多すぎてすべてをリストできないので、私のお気に入りを共有したいと思います。

9.プログレスリニア

多くの場合、SPAでは、ページがサーバーからデータをロードするのに時間がかかります。この間にアプリケーションに空白のページが表示された場合、ユーザーはアプリケーションが壊れていると考えて終了する可能性があります。 ProgressLinearディレクティブでデータがロードされていることをユーザーに知らせます。ユーザーは、何かが起こっていることを示すアニメーションのプログレスバーが表示されるのを待つことを知っています。または、ラウンドインジケーターにProgressCircularディレクティブを使用します。

8.日付ピッカー

日付ピッカーディレクティブを使用すると、日付の選択がユーザーにとってクリーンでシンプルなエクスペリエンスになり、真のワンライナーで作成できます。 md-datepickerを使用し、オプションでmd-min-dateとmd-max-dateを使用して範囲を制限するだけです。

7.オートコンプリート

オートコンプリートは、ユーザーがオプションを選択できるようにすることで、快適なユーザーエクスペリエンスを提供します。それがGoogleの検索エンジンを最高にするものです。オートコンプリートディレクティブは、ユーザーが入力するときにユーザーの単語を補完することにより、この機能をアプリケーションに追加します。しかし、このディレクティブの最良の部分はカスタマイズです。オートコンプリートにmd-item-templateを入力することで、提案により多くの意味を与えることができます。たとえば、ユーザーが会社で名前を検索している場合、オートコンプリートは一致する名前を写真や会社の役割と表示して、より堅牢なユーザーエクスペリエンスを提供できます。

6.ボトムシート

一番下のシートは、画面の下から上にスライドする小さなメニューで、コンテンツをカバーし、焦点を合わせます。もともとはモバイルデバイス専用でしたが、ボトムシートは大画面で人気を集めています。これを使用するには、グリッドレイアウトまたはリストレイアウト用にそれぞれmd-gridまたはmd-listを含むmd-bottom-sheetを使用してテンプレートを作成します。次に、ボトムシートサービス$ mdBottomSheet.show（）を使用して呼び出します。

5.入力

入力フォームは退屈で、インターネットが始まって以来ずっと続いています。しかし、そうである必要はありません！ Inputディレクティブを使用して、入力にフレアを与えます。入力タグをmd-input-containerでラップし、それが実現するのを確認します。プレースホルダーがフローティングラベルにアニメーション化されるのを確認してください。瞬時に、しかし微妙な色の変化と警告メッセージで入力を簡単に検証します。入力ディレクティブは、退屈であると予想される要素を取り、嬉しい驚きをもたらします。

4.トースト

最も厄介なユーザーエクスペリエンスは、アプリケーションが何をしているのかを知らないことです。トースター、または目立たない通知を使用して、この悪化を緩和します。昔は、サーバーにリクエストを送信すると、応答が返ってくるまでそのページで待機してから次に進みました。それ以来、ユーザーの注目度は大幅に低下しています。今日のSPAでは、ボタンをクリックしてすぐに移動し、サーバーの応答が発生したときに処理することを期待しています。 Toastディレクティブは、これを簡単なものにします。トースターは、トーストサービス$ mdToast.show（）を使用し、テキスト、期間、および表示するコーナーを設定するだけで呼び出されます。md-toastを使用して独自のカスタムトースターを作成します。

3.グリッドリスト

あなたのリストにはピザズが欠けていますか？グリッドリストは、標準のリストビューの代わりになります。グリッドリストは画像の表示に最適であり、視覚的な理解のために最適化されています。さまざまなサイズのタイルをグリッド上に配置することで機能し、散らばった折衷的な雰囲気を与えます。タイルのサイズとレイアウトは、画面サイズに対応します。このディレクティブは、アプリケーションにエキサイティングで楽しい外観を与えることを確実にします。

2.ホワイトフレーム

空間の概念は、マテリアルデザインとその紙の比喩の中核です。同じz位置（または深さ）にある2枚の紙は、継ぎ目を形成し、一緒に移動する必要があります。 z位置が異なる2枚の重なり合う紙がステップを形成します。それらは互いに独立して動きます。設計に従うには、要素をz軸に沿ってシフトできる必要があります。 Angular Materialは、これを行う簡単な方法を提供します。 Whiteframeディレクティブを使用して、クラスをmd-whiteframe-z {x}に設定します。ここで、xは背景からの深さの単位です。数字が大きいほど、紙の影が大きくなります。

1. Sidenav

サイドナビゲーションメニューの作成がこれまでになく簡単になりました。 Sidenavディレクティブは、画面の左側または右側にナビゲーションメニューを配置します。モバイルを念頭に置いて、期待どおりにスワイプインおよびスワイプアウトするか、ボタンをクリックするだけでプログラムでスワイプします。素晴らしい追加は、ロックオープン機能です。画面が特定のサイズに達したときにサイドナビゲーションをロックして開くように設定できます。パラメータmd-is-locked-open=” $ mdMedia（'gt-sm'）”を設定すると、メニューは携帯電話では隠れますが、タブレット以上ではロックされて開きます。

結論

Googleは、最も人気のあるアプリケーションをマテリアルデザインに変換しています。現在、彼らはAngularJSで記述されたマテリアルデザインの実装であるAngularMaterialの開発を率いています。マテリアルデザインは、紙の比喩、大胆な意図、意味のある動きを使用しています。 AngularJSはシングルページアプリケーションを整理します。 Angular Materialは、マテリアルデザインの原則をAngularJSアプリケーションに適用します。

マテリアルデザインはここにあり、Angular Materialは、マテリアルデザイン仕様をシングルページアプリケーションに適用するための素晴らしい方法です。独自のAngularMaterialアプリケーションを作成する場合は、最初から時間を無駄にしないでください。むしろ、ディレクティブのデモ、テーマ設定がすでに設定されており、ナビゲーションとルーティングの準備が整った、完全に機能するアプリから始めます。こちらのデモをご覧になるか、GitHubでコードをフォークしてください。もちろん、公式ドキュメントにアクセスして、AngularMaterialのすべてを学ぶこともできます。

最高のAngularMaterialディレクティブの私の選択についてどう思いますか？私はそれらを正しく理解しましたか？あなたのお気に入りは何ですか？

関連： Angular 6チュートリアル：新しいパワーを備えた新機能