現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

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を使用する事が可能です。

ステップ３component 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モジュールをインポートしてください。

ステップ４　テーマをインクルードしよう！

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の導入方法に関する記事はこちら

【超簡単】AngularMaterialを導入する方法【チュートリアル】

はじめにAngularが6にバージョンアップされた事によって、簡単にAngularMaterialを利用する事が可能になったので、AngularMaterialを導入する方法をまとめました。このチュートリアルをやり終えたら、6で追加された新機能ng addに関してもざっくりと把握する事が出来...

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日