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

[前回](https://qiita.com/teracy55/items/b7fc7ebaef5770f2cdbc)でAngular Materialの導入まで行いました。

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


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

## Firebase側の設定

### 接続情報の生成

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/9679b136-1eae-d8fc-a683-945e034768b3.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/e183ea53-b906-6ce5-69de-bd7f96b5b32c.png)

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



## Angular側の対応

[@angular/fireのセットアップ手順](https://github.com/angular/angularfire/blob/HEAD/docs/install-and-setup.md#1-installation-and-setup)に沿って設定を行います

### 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から「始める」を選択します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/cf30fe87-c86a-12ec-b7c5-baa48d39e390.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/a0e577c5-d742-094b-f22a-b22440544506.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/44e7b8d6-900e-8f43-7ef7-ea13b99fffdf.png)

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

### 画像を配置

- `images/top.jpg`を配置します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/26b5d723-574c-ceee-4c75-6a971277c4e0.png)


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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/77d6c297-8251-05a1-5346-31980ede7d59.png)




## Angular側からFirebase Storageを参照

[AngularFireStorage](https://github.com/angular/angularfire/blob/d454cf0a4457a9f0d6b5b3018db3d461a97812b9/docs/storage/storage.md)のセットアップを行います

- 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>
```

# こんな感じになりました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/02c6ac4b-2e58-c581-aa00-19744e47968b.png)

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


# まとめ

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


（追記）
[Angular９とFirebaseでブログを作ってみる４（画面遷移をできるようにしてみる）](https://qiita.com/teracy55/items/231bf2cb472d077e03f0)