キャスレーコンサルティング株式会社 LS(リーディング・サービス)部の原です。
今回は、フロントエンド開発で使用されている、Angular(6)とFirebaseについてご紹介したいと思います。

Firebaseのリアルタイムデータベースを用いた、
Angularウェブアプリを作る際に参考にしてみてください。

知っておくべきこと:
typescript, html5, css3
※node.jsは、インストール済みとします。

目次

  1. Angular新規プロジェクトのセットアップ
  2. UIコンポーネントのセットアップ
  3. Firebaseのセットアップ
  4. データを表示させる
  5. 終わりに

Angular新規プロジェクトのセットアップ

まず始めに、Angularをインストールします。

npm install -g @angular/cli

次に、新規プロジェクトを作成してサーバーをローンチします。

ng new tech-blog
cd tech-blog
ng serve --open

–open (-o)コマンドで、ブラウザーが自動で立ち上がります。(http://localhost:4200/)

UIコンポーネントのセットアップ

少し見栄えをよくするために、UIコンポーネントをセットアップします。
他にも、Angular Material(Googleが提供する、Angular用のUIコンポーネント)や
PrimeNG等もありますが、今回はBootstrap4を使ってみます。

npm install --save bootstrap

Bootstrap cssを使えるようにするために
Bootstrap css をプロジェクトに導入します。
下記を、src/styles.cssに貼り付けます。

@import "~bootstrap/dist/css/bootstrap.css"

これだけだと、Bootstrapの機能は使えません。
理由は、Bootstrapが必要とするJQueryや、Popper.jsがないからです。
Bootstrapの機能をAngularで使う場合は、以下をお勧めします。
https://ng-bootstrap.github.io
https://valor-software.com/ngx-bootstrap/
今回は、ng-bootstrapを導入します。

npm install --save @ng-bootstrap/ng-bootstrap

次に、モジュールをインポートします。
下記を、src/app/app.module.tsに貼り付けます。

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [NgbModule, ...],
  ...
})
export class YourAppModule {
}

下記のサンプルhtmlを、src/app/app.component.htmlに貼り付けて動けば
Bootstrapのセットアップは完了です。


<div class="container">
  
<div class="row">
    
<div class="col">
      <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
        <ngb-panel title="タイトル1">
          <ng-template ngbPanelContent>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pretium augue,
            sed finibus velit. Pellentesque tellus est, consectetur a tempor a, sagittis ac purus.
            Maecenas sit amet sapien eu eros congue egestas. Ut vulputate felis laoreet mauris rhoncus rutrum.
            Cras laoreet hendrerit risus, non maximus nulla semper vel. Vestibulum ante ipsum primis
            in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ac blandit sem, ac gravida odio.
          </ng-template>
        </ngb-panel>
        <ngb-panel title="タイトル2">
          <ng-template ngbPanelContent>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pretium augue,
            sed finibus velit. Pellentesque tellus est, consectetur a tempor a, sagittis ac purus.
            Maecenas sit amet sapien eu eros congue egestas. Ut vulputate felis laoreet mauris rhoncus rutrum.
            Cras laoreet hendrerit risus, non maximus nulla semper vel. Vestibulum ante ipsum primis
            in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ac blandit sem, ac gravida odio.
          </ng-template>
        </ngb-panel>
        <ngb-panel title="タイトル3">
          <ng-template ngbPanelContent>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pretium augue,
            sed finibus velit. Pellentesque tellus est, consectetur a tempor a, sagittis ac purus.
            Maecenas sit amet sapien eu eros congue egestas. Ut vulputate felis laoreet mauris rhoncus rutrum.
            Cras laoreet hendrerit risus, non maximus nulla semper vel. Vestibulum ante ipsum primis
            in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ac blandit sem, ac gravida odio.
          </ng-template>;
        </ngb-panel>;
      </ngb-accordion>;
    </div>;

  </div>;

</div>;

Firebaseのセットアップ

まず初めに、https://firebase.google.comを開き、プロジェクトを作成します。

1.プロジェクトを追加します

2.テストモードで作成します

3.画面に表示する用のデータを作成する

データを表示させる

1.AngularFireとFirebaseをインストールする

AngularFireとは、FirebaseがサポートするAngular用APIです。
このAPIをつかって、先ほど作成したデータを取得します。

npm install @angular/fire firebase --save

2.Firebaseのコンフィグを追加する

Firebaseコンソールを開いて、
「ウェブアプリに Firebase を追加」をクリックして必要な情報をコピーします。

次にコピーした情報を、/src/environments/environment.ts に下記のように貼り付けます。

export const environment = {
  production: false,
  firebase: {
    apiKey: 'YOUR_APIKEY',
    authDomain: 'YOUR_AUTH_DOMAIN',
    databaseURL: 'YOUR_DATABASE_URL',
    projectId: 'YOUR_PROJECT_ID',
    storageBucket: 'YOUR_STORAGE_BUCKET',
    messagingSenderId: 'YOUR_MESSAGING_SENDER_ID'
  }
};

3.@NgModuleにAngularFireModuleを設定する

firebaseモジュールを、下記のようにapp.module.tsに追加します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4.インジェクトとデータの取得

app.component.tsを、下記のように書き取得したデータをitemにセットします。

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items: Observable<any[]>;;
  constructor(db: AngularFireDatabase) {
    this.items = db.list('/tech-blog').valueChanges();
  }
}

5.取得したデータを表示

そして先ほど用意した、src/app/app.component.htmlを下記のように変更します。


<div class="container">;
  
<div class="row">;
    
<div class="col">;
      <ngb-accordion #acc="ngbAccordion"activeIds="ngb-panel-0">;
        <ngb-panel title="{{item.name}}" *ngFor="let item of items | async">;
          <ng-template ngbPanelContent>;
              {{item.quote}}
          </ng-template>;
        </ngb-panel>;
      </ngb-accordion>;
    </div>;

  </div>;

</div>;


これでデータが表示されました。

最後に

いかかでしたか。
簡単に、Firebaseから取得したデータを、Angularで表示できたかと思います。

また、Firebaseには、Firebase Analyticsという機能も付いており、ユーザーの行動を調べたり、
ユーザーがあなたのアプリを、どのように使っているかを理解するのに役立ちます。
無料プランもあるので、ぜひ皆さんも使ってみてください。

最後まで読んでいただき、ありがとうございました。

原
CSVIT事業部 LS(リーディング・サービス)部 原
南国育ちのハーフです。