Webフロントエンド
AngularMaterialを使用して最新のWebアプリを構築する
2014年のGoogleI / O会議で、Googleは新しいデザイン言語であるマテリアルデザインを発表しました。それ以来、一貫したエクスペリエンスを提供するために、人気のあるアプリケーションの多くをこの新しい仕様に準拠するように変換しています。今、彼らはあなたにも従うように説得しようとしています。
マテリアルデザインとは何ですか？
公式のマテリアルデザイン仕様にアクセスすると、すぐに超近代的なミニマリズムを感じることができます。ここでは基本的な形とフラットな色がテーマです。ドキュメントを読むのはかなりの経験です。自分で見てみることをお勧めしますが、ここで要約します。
ゴール
目的は、優れたデザインの古典的な原則と、テクノロジーと科学の革新と可能性を統合する視覚言語を作成することです。また、さまざまなプラットフォームやデバイスサイズで統一されたエクスペリエンスを可能にする単一の基盤となるシステムを開発すること。
原則
マテリアルデザイン 3つの原則に基づいています。
材料はメタファーです
紙とインクの研究に触発された素材は、3D空間に存在し、触覚の現実に基づいています。リアルな影を使って空間の錯覚を与えます。紙の素材は物理法則に従わなければなりませんが（つまり、2枚の紙が互いに通過してはいけません）、物理的な世界に取って代わることができます（つまり、紙が伸びたり縮んだりする可能性があります）。
大胆、グラフィック、意図的
慎重な色の選択、端から端までの画像、大規模なタイポグラフィ、および意図的な空白により、ユーザーをエクスペリエンスに没頭させる大胆でグラフィックなインターフェイスが作成されます。フローティングアクションボタン（FAB）は、この原則の代表的な例です。 Google Inboxアプリで「プラス」記号が浮かんでいる小さな円に気づきましたか？マテリアルデザインは、これが重要なボタンであることを非常に明確にしています。
動きは意味を提供します
動きは意味があり適切であり、注意を集中させ、継続性を維持するのに役立ちます。フィードバックは微妙ですが明確です。移行は効率的でありながら一貫性があります。ここでの要点は、目的がある場合にのみアニメーション化し、やりすぎないことです。
AngularJSはマテリアルデザインにどのように適合しますか？
Googleの「スーパーヒーローJavaScriptMVWフレームワーク」であるAngularJSは、シングルページアプリケーション（SPA）の開発で直面する多くの課題に対処します。 APIに接続し、ページを更新する必要がない最新のWebアプリケーションを作成するために必要なフレームワークを提供します。
Windowsはどの言語で書かれていますか
AngularJS：新しいアプローチ
Angularは、アプリケーション用に設計されていた場合のHTMLでした。 HTMLは静的ドキュメントの優れた宣言型言語ですが、動的アプリケーションの作成はそれほど多くありません。
HTMLを使用して動的なアプリケーションを作成することは、ブラウザをだまして意図しないことを実行させるための演習でした。これを行うには、いくつかのアプローチがあります。
- ライブラリ-関数のコレクション。 （jQuery）
- フレームワーク-コードは必要に応じて静的要素を動的に入力します。 （デュランダル、エンバー）
Angular この問題を解決するために別のアプローチを取ります。与えられたHTMLに苦労する代わりに、新しいHTML構造を作成します。 Angularは、「ディレクティブ」と呼ばれる構造を通じてブラウザに新しいHTML構文を教えます。 Angularには、これらのディレクティブのセットが組み込まれていますが、カスタムディレクティブを作成することもできるため、独自のHTML要素を作成できます。
Googleがマテリアルデザインの原則に基づいて一連の指令を作成したとしたら、それは素晴らしいことではないでしょうか。
AngularMaterialの紹介
Googleは、AngularJSのマテリアルデザインの実装であるAngularMaterialを積極的に開発しています。 Angular Materialは、マテリアルデザインシステムに基づいた再利用可能なUIコンポーネントのセットを提供します。 AngularMaterialはいくつかのピースで構成されています。タイポグラフィやその他の要素用のCSSライブラリがあり、テーマ設定に興味深いJavaScriptアプローチを提供し、レスポンシブレイアウトはフレックスグリッドを使用します。しかし、Angular Materialの最も魅力的な機能は、その驚くべきディレクティブのコレクションです。
入門
次のAngularMaterialプロジェクトをすぐに開始できるように、オープンソースプロジェクトを作成しました。このプロジェクトの目的は、AngularMaterialが提供するすべてのものの例をすべて1つの屋根の下に示すことです。ナビゲーション、ページング、テーマ設定、およびディレクティブのコレクション全体の準備が整いました。データをフィードしてHTMLにバインドするだけです。
デモを見てください ここに またはフォーク GitHubのコード 。
指令
ディレクティブはAngularのコア機能です。 Angularには、ng-modelやng-repeatなど、常に使用するいくつかのディレクティブが付属しています。これらは、フレームワークを正常に機能させる非常に重要なAngularです。
Angular MaterialDirectiveの使用方法
Angular Materialは、このディレクティブライブラリを、マテリアルデザインにインスパイアされた美しいディレクティブのセットで拡張します。 Angular Materialディレクティブは、「md」で始まるHTMLタグです。マテリアルデザインの略。はるかに使いやすくなっています。たとえば、古き良きボタンを見てみましょう。
標準のHTMLボタンは次のようになります。
Click Me AngularMaterialボタンは次のようになります。
Click Me そして、これがマテリアルボタンを作成するために必要なすべてです。現在、このディレクティブで使用できる他のいくつかのオプションがあります。たとえば、テーマを設定したり、重要性を示唆するために表面から引き上げたりします。
Click Me サービス
サービスはAngular機能の中核でもあります。これらは、アプリケーション間でコードを共有するために使用されます。 $ httpのような一般的なコアサービスは、Angularアプリケーションのデータ呼び出しに使用および再利用されます。
Angularサービスは次のとおりです。
- 遅延インスタンス化– Angularは、アプリケーションコンポーネントがサービスに依存している場合にのみサービスをインスタンス化します。
- シングルトン–サービスに依存する各コンポーネントは、サービスファクトリによって生成された単一のインスタンスへの参照を取得します。
Angular MaterialServiceの使用方法
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'); }); テーマの使用
テーマをコンポーネントに適用するには、要素のクラスを目的のパレットと色相に設定します。
Click me Click me Click me or maybe me Careful レイアウト
Flexboxはレスポンシブデザインへの最新かつ最高の追加であり、AngularMaterialが同梱されています。 Bootstrapグリッドシステムに精通している場合は、すぐに理解できるはずです。実際、Bootstrapは次のリリースでFlexboxに切り替えています。慣れ親しんだ行と列のレイアウトがありますが、それだけではありません。 Flexboxをで使用する方法を学ぶ このチュートリアル または研究する 公式ドキュメント 。
トップ9の最高のAngularMaterialディレクティブ
Angular Materialディレクティブが多すぎてすべてをリストできないので、私のお気に入りをあなたと共有したいと思います。
9.プログレスリニア
多くの場合、SPAでは、ページはサーバーからデータをロードするのに時間がかかります。この間にアプリケーションに空白のページが表示された場合、ユーザーはアプリケーションが壊れていると考えて終了する可能性があります。データが読み込まれていることをユーザーに知らせます プログレスリニアディレクティブ 。ユーザーは、何かが起こっていることを示すアニメーションのプログレスバーが表示されたら待つことを知っています。または、ラウンドインジケーターにProgressCircularディレクティブを使用します。
8.日付ピッカー
ザ・ 日付ピッカー ディレクティブは、日付の選択をユーザーにとってクリーンでシンプルなエクスペリエンスにし、真のワンライナーで記述します。 md-datepickerを使用し、オプションでmd-min-dateとmd-max-dateを使用して範囲を制限するだけです。
7.オートコンプリート
オートコンプリート ユーザーがオプションを選択できるようにすることで、快適なユーザーエクスペリエンスを提供します。それがGoogleの検索エンジンを最高にするものです。オートコンプリートディレクティブは、ユーザーが入力するときにユーザーの単語を補完することにより、この機能をアプリケーションに追加します。しかし、このディレクティブの最良の部分はカスタマイズです。オートコンプリートにmd-item-templateを入力することで、提案により多くの意味を与えることができます。たとえば、ユーザーが会社で名前を検索している場合、オートコンプリートは一致する名前を写真と会社の役割とともに表示して、より堅牢なユーザーエクスペリエンスを提供できます。
6.ボトムシート
ザ・ ボトムシート 画面の下から上にスライドして、コンテンツをカバーし、焦点を合わせる小さなメニューです。もともとはモバイルデバイス専用でしたが、ボトムシートは大画面で人気を集めています。これを使用するには、グリッドレイアウトまたはリストレイアウト用にそれぞれmd-gridまたはmd-listを含むmd-bottom-sheetを使用してテンプレートを作成します。次に、BottomSheetサービス$ mdBottomSheet.show（）を使用して呼び出します。
5.入力
入力フォームは退屈で、インターネットが始まって以来ずっと続いています。しかし、そうである必要はありません！あなたを与える 入力 Inputディレクティブのいくつかの才能。入力タグをmd-input-containerでラップし、それが実現するのを確認します。プレースホルダーがフローティングラベルにアニメーション化されるのを確認してください。瞬時に、しかし微妙な色の変化と警告メッセージを使用して、入力を簡単に検証します。 inputディレクティブは、退屈であると予想される要素を取り、嬉しい驚きをもたらします。
4.トースト
最も悪化するユーザーエクスペリエンスは、アプリケーションが何をしているのかを知らないことです。トースター、または目立たない通知を使用して、この悪化を緩和します。昔は、サーバーにリクエストを送信すると、そのページでレスポンスが返ってくるのを待ってから先に進みました。それ以来、ユーザーの注意力は大幅に低下しています。今日のSPAでは、ボタンをクリックするとすぐに移動し、サーバーの応答が発生したときに処理することを期待しています。ザ・ トースト ディレクティブはこれを簡単なものにします。トースターは、トーストサービス$ mdToast.show（）を使用し、テキスト、期間、および表示するコーナーを設定するだけで呼び出されます。md-toastを使用して独自のカスタムトースターを作成します。
3.グリッドリスト
あなたのリストはピザズを欠いていますか？ グリッドリスト 標準のリストビューの代替です。グリッドリストは画像の表示に最適であり、視覚的な理解のために最適化されています。さまざまなサイズのタイルをグリッド上に配置することで機能し、散在した折衷的な雰囲気を与えます。タイルのサイズとレイアウトは、画面サイズに対応します。このディレクティブは、アプリケーションにエキサイティングで楽しい外観を与えることは間違いありません。
2.ホワイトフレーム
空間の概念は、マテリアルデザインとその紙の比喩の中核です。同じz位置（または深さ）にある2枚の紙は、継ぎ目を形成し、一緒に移動する必要があります。 z位置が異なる2枚の重なり合う紙がステップを形成します。それらは互いに独立して動きます。設計に従うには、要素をz軸に沿ってシフトできる必要があります。 Angular Materialは、これを行う簡単な方法を提供します。を使用して ホワイトフレーム ディレクティブで、クラスをmd-whiteframe-z {x}に設定します。ここで、xは背景からの深さの単位です。数字が大きいほど、紙の影が大きくなります。
ページ1
サイドナビゲーションメニューの作成がこれまでになく簡単になりました。 Sidenavディレクティブは、画面の左側または右側にナビゲーションメニューを配置します。モバイルを念頭に置いて、期待どおりに、またはプログラムでボタンをクリックするだけでスワイプインおよびスワイプアウトします。素晴らしい追加は、ロックオープン機能です。画面が特定のサイズに達したときにサイドナビゲーションをロックして開くように設定できます。パラメータmd-is-locked-open =” $ mdMedia（ ‘gt-sm’）”を設定すると、メニューは電話に隠れますが、タブレット以上では開いたままになります。
結論
Googleは、最も人気のあるアプリケーションをマテリアルデザインに変換しています。現在、彼らはAngularJSで記述されたマテリアルデザインの実装であるAngularMaterialの開発を率いています。マテリアルデザインは、紙の比喩、大胆な意図、意味のある動きを使用しています。 AngularJSは シングルページアプリケーション 。 Angular Materialは、マテリアルデザインの原則をAngularJSアプリケーションに適用します。
マテリアルデザインはこちらです。AngularMaterialは、マテリアルデザインの仕様をシングルページアプリケーションに適用するための素晴らしい方法です。独自のAngularMaterialアプリケーションを作成する場合は、最初から時間を無駄にしないでください。むしろ、ディレクティブのデモ、テーマの設定、ナビゲーションとルーティングの準備が整った、完全に機能するアプリから始めます。デモを見てください ここに またはフォーク GitHubのコード 。もちろん、Angular Materialについては、 公式ドキュメント 。
最高のAngularMaterialディレクティブの私の選択についてどう思いますか？私はそれらを正しく理解しましたか？あなたのお気に入りは何ですか？
関連： Angular 6チュートリアル：新しいパワーを備えた新機能
