おさらい①

セットアップ

まずは、Angularプロジェクトのセットアップから振り返ってみましょう

セットアップ方法

Angular CLI

Angularのボイラーテンプレートを作成してくれる、コマンドライン・インタフェース

次に使用方法を見てみましょう

Angular CLI

インストール

$ npm install -g @angular/cli

プロジェクト作成

$ ng new my-app

インストールはnpmを使います。-gオプションを付けるとどこでも使えるようになります。

ngがCLIコマンドで、new my-appでプロジェクト作成

Angular CLI

プロジェクトの起動

$ cd my-app
$ ng serve --open

プロジェクトを起動するには、serveコマンドを使います。--openオプションをつけるとブラウザが自動的に立ち上がります

DEMO

では実際にAngular CLIを使ってプロジェクトを作って立ち上げてみます

アレンジ

初期は以下ような構成となっておりますので、扱いやすいように変更を加えます

$ rm -f ./app/app.component.*
$ ng g component component/app

アレンジ

SCSSが使えます。cssを読み込んでいる箇所とファイル名をscssに変更するだけです

おさらい②

コンポーネントとサービス

コンポーネントとサービスについて振り返りましょう

DEMO

まずはこちらをご覧ください

コンポーネント

コンポーネント分け方には個人差がありますが、私の場合は次のように分けました

コンポーネント

私の場合は、役割毎にコンポーネントを切りました。役割ごとに切ることで、見通しがよく追いやすくなります

サービス

サービスは４つ作成しステートを管理します。再生ボタンで各ステートを読み込んで音を鳴らします

次へのステップ

作るアプリを考える

いざアプリを作ると考えてもなかなかアイディアが浮かんでこないものです。私の場合はブラウザAPIを使ったアプリを考えてみることをおすすめします。

作るアプリを考える

数多くあるブラウザAPIの中でおすすめはWebRTCです。

WebRTC

WebRTCを導入するのは簡単で、第２引数のコールバックにストリームデータが返りますので、それを扱うと映像や音声を扱うことが出来ます

        navigator.getUserMedia({audio: true, video: false},
            (mediaStream) => {
                ...
            },
            (err) => {
                console.error(err);
            }
        );

次へのステップ 

PWA対応を行なうとオフラインで接続できたり、プッシュ通知を行えたり、ネイティブアプリのようにすることができます

PWA対応を行おう

PWA対応

Angular Mobile Toolkitを導入すると、簡単にPWA対応が行なえます

Angular Mobile Toolkit

https://youtu.be/ecu1vAO23ZM

インストール

$ npm install --save @angular/service-worker
$ ng set apps.0.serviceWorker=true
$ vi .angular-cli.json

"apps": [
    {
        "serviceWorker": true
    }
]

# NGSW works only in --prod mode
$ ng build --prod

詳細はNG CONFのビデオが参考になります

次へのステップ

マテリアルデザインは、わかりやすさを追求したデザイン設計。

マテリアルデザイン

を取り入れよう

マテリアルデザイン

Angularでマテリアルデザインを取り入れる場合は、@angilar/materialを使うと簡単に導入できます

Angular Materialize

import {
    MdButtonModule, MdCardModule, MdCheckboxModule, MdCommonModule, MdGridListModule, MdMenuModule,
    MdToolbarModule
} from '@angular/material';

@NgModule({
    ...
    imports     : [
        MdButtonModule,
        MdCheckboxModule,
        MdMenuModule,
        MdCommonModule,
        MdToolbarModule,
        MdCardModule,
        MdGridListModule
    ],
    ...
})
export class AppModule {}

    <md-card [style.padding]="0" *ngFor="let item of items">
        <img md-card-image src="{{item.src}}">
        <md-card-content>
            <md-grid-list cols="2" rowHeight="50px" [style.padding]="0">
                <md-grid-tile>{{item.name}}</md-grid-tile>
                <md-grid-tile>{{item.temperature}}℃</md-grid-tile>
            </md-grid-list>
        </md-card-content>
    </md-card>

次へのステップ

現在多くのAPIがSSL通信が必須となっております。そのためSSL接続も提供してくれるFirebaseがおすすめです

アプリを公開しよう

次へのステップ

Firebaseは、バックエンドサービスです。databaseの他にホスティングやPush通知なども使うことが出来ます

Angularコミュニティとしてng-japanがあります。ng-japanでは年１回の大きなカンファレンスを行っており、最新のAngular情報を得ることができます

コミュニティに参加しよう

ng-japanではslackに専用チャンネルを用意しております。Angularを使っていてわからない点の質問や、最新情報をお届けしております。

slackに参加しよう

https://ng-japan-invite.herokuapp.com/

不定期開催ですが、およそ２ヶ月１回の割合でアンオフィシャルなAngularイベントを開催しております。

ng-sakeに参加しよう

https://ng-sake.connpass.com/

no Angular no Life
ng new からはじめよう

Angularを楽しもう