プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド

Angular Materialの導入方法【日本語訳】

最終更新日:2019/03/07

Angular Materialの導入。Getting startedの和訳がなかったので、翻訳する事にしました。
Angular Material公式 Getting started

For help getting started with a new Angular app, check out the Angular CLI.
For existing apps, follow these steps to begin using Angular Material.

新たにAngularアプリを作成する場合は、まずAngular CLIをチェックしましょう。
既にアプリがある場合は、以下の手順に従ってAngular Materialを導入していきましょう。

ステップ1 Angular MaterialとAngular CDKをインストールしよう!

You can use either the npm or yarn command-line tool to install packages. Use whichever is appropriate
for your project in the examples below.

パッケージをインストールするには、npmまたはyarnコマンドラインツールを使用する事が出来ます。
プロジェクトに適したものを使用してください。

NPM


npm install --save @angular/material @angular/cdk

Yarn


yarn add @angular/material @angular/cdk

代替案: スナップショットビルド

A snapshot build with the latest changes from master is also available. Note that this snapshot build
should not be considered stable and may break between releases.

マスターからの最新の変更を含むスナップショットビルドも利用可能です。
このスナップショットビルドは安定しておらず、リリース間で壊れる可能性がある事に注意してください。

NPM


npm install --save angular/material2-builds angular/cdk-builds

Yarn


yarn add angular/material2-builds angular/cdk-builds

アニメーション

Some Material components depend on the Angular animations module in order to be able to do more advanced
transitions. If you want these animations to work in your app, you have to install the
@angular/animations module and include the BrowserAnimationsModule in your app.

マテリアルコンポーネントの中には、より高度なトランジションを実行できるように、Angular animations moduleに依存しているものもあります。
これらのアニメーションをあなたのアプリで動作させたい場合は、 @angular/animations moduleをインストールし、アプリにBrowserAnimationsModuleを含めます。

NPM


npm install --save @angular/animations

Yarn


yarn add @angular/animations

import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ ... imports: [BrowserAnimationsModule], ... }) export class PizzaPartyAppModule { }

プロジェクトに別の依存関係を追加したくない場合は、NoopAnimationsModuleを使用する事が可能です。

ステップ3component modulesをインストールする

使用したいコンポーネントに対応するNgModuleをインポートしてください。


import {MatButtonModule, MatCheckboxModule} from '@angular/material'; @NgModule({ ... imports: [MatButtonModule, MatCheckboxModule], ... }) export class PizzaPartyAppModule { }

Alternatively, you can create a separate NgModule that imports all of the Angular Material components that you will use in your application. You can then include this module wherever you’d like to use the components.

もしくは、アプリケーションで使用するすべてのAngular Materialコンポーネントをインポートする個別のNgModuleを作成することもできます。
そうした場合、コンポーネントを使用する場所にこのモジュールを含めることができるようになります。


import {MatButtonModule, MatCheckboxModule} from '@angular/material'; @NgModule({ imports: [MatButtonModule, MatCheckboxModule], exports: [MatButtonModule, MatCheckboxModule], }) export class MyOwnCustomMaterialModule { }

Whichever approach you use, be sure to import the Angular Material modules after Angular’s BrowserModule, as the import order matters for NgModules.

どちらの方法を使用する場合でも、AngularのBrowserModuleの後にAngular Materialモジュールをインポートしてください。

ステップ4 テーマをインクルードしよう!

Including a theme is required to apply all of the core and theme styles to your application.

To get started with a prebuilt theme, include one of Angular Material’s prebuilt themes globally in your application. If you’re using the Angular CLI, you can add this to your styles.css:

アプリケーションにコアスタイルとテーマスタイルをすべて適用するには、テーマをインクルードする必要があります。

あらかじめ作成されたテーマを使うには、アプリケーションの中にAngular Materialのあらかじめ作成されたテーマの1つを組み込みます。 Angular CLIを使用している場合は、これをstyles.cssに追加することができます。


@import "[email protected]/material/prebuilt-themes/indigo-pink.css";

If you are not using the Angular CLI, you can include a prebuilt theme via a element in your index.html.

Angular CLIを使用していない場合は、index.htmlの要素を使用して、あらかじめ作成されたテーマを含めることができます。

For more information on theming and instructions on how to create a custom theme, see the theming guide.

テーマに関する詳細とカスタムテーマの作成方法については、テーマガイドを参照してください。

ステップ5 ジェスチャーサポート

Some components (mat-slide-toggle, mat-slider, matTooltip) rely on HammerJS for gestures. In order to
get the full feature-set of these components, HammerJS must be loaded into the application.

You can add HammerJS to your application via npm, a CDN (such as the Google CDN), or served directly
from your app.

To install via npm, use the following command:

いくつかのコンポーネント(mat-slide-toggle, mat-slider, matTooltip)は、ジェスチャーのためにHammerJSに依存しています。 これらのコンポーネントの完全な機能セットを取得するには、アプリケーションにHammerJSをロードする必要があります。

HammerJSはnpm、CDN(Google CDNなど)を介してアプリケーションに追加したり、アプリから直接配信したりすることができます。

npm経由でインストールするには、次のコマンドを使用します。

NPM


npm install --save hammerjs

Yarn


yarn add hammerjs

After installing, import it on your app’s entry point (e.g. src/main.ts).

インストール後は、アプリのエントリポイント(src/ main.tsなど)にインポートします。


import 'hammerjs';

ステップ6(オプション)マテリアルアイコンを追加する

If you want to use the mat-icon component with the official Material Design Icons, load the icon font in your index.html.

公式マテリアルデザインアイコンを持ったmat-iconコンポーネントを使用する場合は、index.htmlでアイコンフォントをロードしてください。


<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

For more information on using Material Icons, check out the Material Icons Guide.

Note that mat-icon supports any font or svg icons; using Material Icons is one of many options.

マテリアルアイコンの使用の詳細については、マテリアルアイコンガイドを参照してください。

mat-iconは任意のフォントまたはsvgアイコンをサポートしています。マテリアルアイコンを使用することは、数あるオプションの1つです。

付録:SystemJSの設定

If your project is using SystemJS for module loading, you will need to add @angular/material and @angular/cdk to the SystemJS configuration.

The @angular/cdk package is organized of multiple entry-points. Each of these entry-points must be registered individually with SystemJS.

Here is a example configuration where @angular/material, @angular/cdk/platform and @angular/cdk/a11y are used:

プロジェクトでモジュールロード用にSystemJSを使用している場合、SystemJSの設定に@ angular / materialと@ angular / cdkを追加する必要があります。

@ angular / cdkパッケージは、複数のエントリーポイントで構成されています。 これらのエントリーポイントは、SystemJSに個別に登録する必要があります。

以下は、@ angular / material、@ angular / cdk / platformおよび@ angular / cdk / a11yが使用されている設定例です。


System.config({ // Existing configuration options map: { // ... '@angular/material': 'npm:@angular/material/bundles/material.umd.js', // CDK individual packages '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js', '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js', // ... 'hammerjs': 'npm:hammerjs', }, packages: { //... hammerjs: {main: './hammer.min.js', defaultExtension: 'js'} //... } });

Angular Materialプロジェクトの例

material.angular.io

AngularMaterialの公式ドキュメントそのものが、Angular Materialで作られています。

AngularMaterialの導入方法に関する記事はこちら

The following two tabs change content below.

ぞえ

実務未経験から1年でフリーランスエンジニアになって給料が6倍になった男/アル中 としても活躍しているので常に酒臭い/しかも190cmの巨人でもある。今は週3勤務しながら@ryudoi1と当メディア運営中 詳細なプロフ ぞえのプロフィール!! Twitterアカウント Twitter

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP