【Ionic+Firebaseでアプリ開発】 Firestoreの中身を一覧表示する

#はじめに
Ionicを使って[Firestore](https://firebase.google.com/docs/firestore?hl=ja)に登録したデータを表示するアプリを作成します。
表示するのは趣味で運営しているスノーボードまとめサイトの記事です。
[スノーボードまとめサイトTWEAK](https://sefy.work/)

以下のようにFirestoreに登録した記事の情報を一覧表示して、タップすると記事に遷移するアプリを作成します。
![firebaseList.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410068/a99c59b6-71ec-e92a-52f6-ad66f7581761.gif)


#プロジェクトを作成する
以下のコマンドでプロジェクトを作成します。

```
ionic start firestoreList blank --type=angular
```

#必要なパッケージのインストールと環境設定
Ionicのアプリ内でwebページを開くために[In App Browser](https://ionicframework.com/docs/native/in-app-browser)をインストールします。

```
ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser
```

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

```
npm install firebase @angular/fire --save
```
以下のように環境設定します。

```/src/environments/environment.ts
export const environment = {
  production: false,
  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>'
  }
};
```

#Firestoreにデータを登録する
以下のようにデータを登録しました。
アプリではgroundtricksコレクションの中身を一覧表示します。
<img width="1440" alt="スクリーンショット 2020-05-23 16.46.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410068/5dfef146-76f4-054d-0549-8050d66bd064.png">


#一覧表示するページを実装する
1.`/src/app/app.module.ts`を以下のように変更してInAppBrowserとFirebaseを使えるように設定する

```app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

//Firebase設定情報ファイルをインポート
import { environment } from '../environments/environment';

//Firebaseを利用するためのモジュール
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    InAppBrowser
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
```
2.一覧表示ページのUIを実装する

```app/home/home.page.html
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      記事一覧
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-card *ngFor="let trick of groundtricks" class="activated">
    <ion-item (click)="openPage(trick.url)" class="activated">
    <ion-card-header>
      <ion-img src = "{{trick.image}}" class="image"></ion-img>
    </ion-card-header>
      <ion-card-content>
          <p><font size="2">レベル：{{ trick.level }}</font></p><br>
          <p><font size="3" color="#000000">{{ trick.name }}</font></p>
      </ion-card-content>
    </ion-item>
  </ion-card>
</ion-content>
```

3.一覧表示ページの処理を実装する

```app/home/home.page.ts
import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{
  groundtricks: any;

  constructor(
    private firestore: AngularFirestore,
    private inAppBrowser: InAppBrowser,
  ) {}

  ngOnInit() {
    this.readGroundtrick().subscribe(data => {
      this.groundtricks = data.map(e => {
        return {
          genre: e.payload.doc.data()['genre'],
          image: e.payload.doc.data()['image'],
          level: e.payload.doc.data()['level'],
          rotation: e.payload.doc.data()['rotation'],
          name: e.payload.doc.data()['name'],
          url: e.payload.doc.data()['url'],
        };
      });
    });
  }

  openPage(url){
    this.inAppBrowser.create(url);
  }

  readGroundtrick() {
    return this.firestore.collection('groundtrick').snapshotChanges();
  }
}
```

#iOSアプリとして出力
Cordovaの場合は、以下のコマンドでiOSアプリとして出力します。

```
ionic cordova prepare ios
```


#おわりに
Ionic+FirebaseでFirestoreの中身を一覧表示するiOSアプリを開発してみました。
何もしなくてもダークモードに対応していて感動しました。
今後、追加機能の開発についても紹介していきます。
[【Ionic+Firebaseでアプリ開発】お気に入り登録機能を実装する](https://qiita.com/se_fy/items/1a3a9ee38f6b54c469d1)(2020/6/1追記)

#参考
[AngularのプロジェクトにFirebaseを導入する](https://qiita.com/Yamamoto0525/items/437a2884c0c51f5a3af8)
[iOSでの開発 - Ionic Framework 日本語ドキュメンテーション](https://ionicframework.com/jp/docs/developing/ios)