Angular９とFirebaseでブログを作ってみる３（AngularからFirebaseを見れるようにして、TOP画面にFirebase Storage上の画像を表示してみる）

前回でAngular Materialの導入まで行いました。

今回は、TOPページに画像を置きたいと思うのですが、画像をコード内に配置するのは行けてないので、Firebase Storageを使おうと思います。

AngularからFirebaseを参照するための設定

Firebase側の設定

接続情報の生成

• 「Project Overview - アプリの追加」を選択
  • プラットフォームはwebを選択

• 任意のニックネームをつけてアプリを登録します
  • Hostingはすでに作成済みのため、チェックなし

• ApiKey等の情報が生成されます

Angular側の対応

@angular/fireのセットアップ手順に沿って設定を行います

AngularFireのインストール

@angular/fireをインストールします

npm install firebase @angular/fire --save

Angularプロジェクトに組み込み

• environments.ts（.prod.tsも）に生成した接続情報を登録します

src/environments/environments.ts

export const environment = {
  production: true,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

• app.module.tsでAngularFireModuleをインポート

・・・
import { environment } from 'src/environments/environment';
import { AngularFireModule } from '@angular/fire';

@NgModule({
    ・・・
  imports: [
    ・・・
    AngularFireModule.initializeApp(environment.firebase),
    ・・・
  ],
    ・・・
})
export class AppModule { }

TOPページの編集

Firebase Storageに画像を置く

Firebase Storageの開始

• FirebaseコンソールのStorageから「始める」を選択します

-　セキュリティルールについての案内が表示されるので、確認したら「次へ」を押下します

-　リージョンを聞かれるため、asia-northeast1(東京)を選択します

• 完了を押下するとバケットが作成されます

画像を配置

• images/top.jpgを配置します

セキュリティルールの設定

現状、画像の追加はしないので、読み取り専用となるように設定します

Rulesタブを開き、allow read;に変更します。
→　これで読み取りしかできないようになります

Angular側からFirebase Storageを参照

AngularFireStorageのセットアップを行います

• app.module.tsでAngularFireStorageModuleをインポート

src/app/app.module.ts

・・・
import { AngularFireStorageModule } from '@angular/fire/storage';

@NgModule({
  ・・・
  imports: [
  ・・・
    AngularFireStorageModule,
    ・・・

• top.component.tsを修正します
  • imgタグのURLは動的に取得します

src/app/top/top.component.ts

・・・
export class TopComponent implements OnInit {
  imgUrl: string;

  constructor(private storage: AngularFireStorage) {}

  ngOnInit() {
   this.storage.ref('images/top.jpg').getDownloadURL().subscribe(image => {
      this.imgUrl = image;
    });
  }
}

• htmlファイルを修正します
  • それっぽくするために、お知らせとTwitterコンポーネントを作成し、枠だけ表示できるようにしてます

src/app/top/top.component.html

<div class="blog-title">
  <h1>てらしー　ブログ</h1>
  <img [src]="imgUrl">
</div>
<div>
  <div class="contents">
    <app-top-news></app-top-news>
  </div>
  <div class="contents">
    <app-top-twitter></app-top-twitter>
  </div>
</div>

こんな感じになりました

※ヘッダもそれっぽいメニューにしましたが、リンクにはなってない状態です。

まとめ

これでブログっぽくなってきました！
次回はブログ一覧画面とAbout（自己紹介ページ）へのルーティングあたりをやろうかと思います。

（追記）
Angular９とFirebaseでブログを作ってみる４（画面遷移をできるようにしてみる）