Firebase

Storageの利用

Storageの設定

（１）Firebaseの画面で左側の「Storage」をクリックします。表示された画面の「始める」をクリックします。

（２）「次へ」をクリックします。

（３）「Cloud Storageのロケーション」を選択し、「完了」をクリックします。

storageモジュール

FirebaseのStorage機能を利用するにはfirebaseパッケージのstorageモジュールを使います。

const storage = firebase.storage();

ファイルのアップロード

ファイルのアップロードやダウンロードを行う際にはまず操作対象となるStorage上のファイルパスを指定してファイルの参照（Reference）を作成します。そのReferenceに用意されているputメソッドを呼び出すことでアップロードを行います。
なお、大きなファイルをアップロードする場合を考えるとわかりやすいですがアップロードはすぐに終わるわけではないので、putメソッドを呼び出すとPromiseが返されます（正確にはUploadTaskというオブジェクトが返されますが、Promiseと同じようにthenメソッドとcatchメソッドを持つため、Promiseと同じ感覚で利用できます）

      // Storageに置かれるファイルの参照を作成
      const ref = storage.ref(FAVICON_PATH);
      // ファイルのアップロード
      ref.put(blob);

上のプログラム例ではputメソッドの引数としてblobとありますが、このblobというのはBinary Large OBjectの略です。putメソッドには「ファイルパス」を指定するのではなく、「ファイルの内容」を指定します。つまり、アプリ内でファイルの内容を読み込んだ上でputメソッドを呼び出す必要があります。Blobの取得にはfetch関数が利用できます。

ファイルのダウンロード

Referenceオブジェクトにはput（アップロード）に対応するgetメソッドはありません。代わりに「StorageにあるファイルをダウンロードするためのURL」が発行されるgetDownloadURLメソッドが用意されています。getDownloadURLメソッドもPromiseを返すため、実際のURLはthenメソッドに登録するコールバック内で受け取ります。

  downloadFile() {
    const ref = storage.ref(FAVICON_PATH);
    // Storageに置かれたファイルに対してダウンロードに利用できるURLを要求
    ref.getDownloadURL()
    .then(url => {
      // 取得したURLをstateに設定
      this.setState({imageUrl: url})
    })
  }

ファイルの削除

ファイルを削除するにはReferenceオブジェクトを取得し、deleteメソッドを呼び出します。deleteメソッドもPromiseを返します。
※thenメソッドのコールバックに渡される引数はありませんが、thenメソッドのコールバックが呼び出されることで「正しく削除が完了した」ことがわかります。

  deleteFile() {
    const ref = storage.ref(FAVICON_PATH);
    // Storageに置かれたファイルに対して削除を要求
    ref.delete();
  }