Firebaseストレージからの読み込みのやり方

February 24, 2021

Firebase ストレージからの読み込みのやり方

前回の記事では、Firebase のストレージにあるデータ（ファイル）のリストなどの情報の取得の仕方を紹介しました。この記事では、Firebase のストレージにあるデータ（ファイル）を実際に扱う方法について解説していきます。

Firebase のストレージのデータはファイル

基本的に、Firebase のストレージのデータはファイルになります。ファイルの中身は動画だったり、写真だったり文章やプログラムだったりいろいろです。

実際に Firebase のストレージに保存したデータをどのように扱うかは、開発するアプリやサービスによって変わってきます。

その中で頻繁に使うのが「ダウンロード」です。オンライン上のサーバー、よく「クラウド」と呼ばれたりしますが、インターネット上にファイルを置いておいて、共有するという利用方法です。利用者が、目的のファイルをダウンロードするためのリンク（URL）を取得してそこから Web ブラウザなどを使ってダウンロードするという形の利用方法です。

Firebase のストレージもこうした形の利用の仕方ができます。

ダウンロードのリンクを取得する方法

ダウンロードのリンクを取得するには、ファイルのある「場所」が必要になります。これを Firebase のドキュメントでは「リファレンス（reference）」と呼んでいます。これは、ファイルのある場所をフォルダの階層で表した、パス（path）がわかれば Firebase の提供する API を使って取得できます。

このパスは、トップレベルの「バケット（bucket）」からのフォルダの構成とファイルの名前で決まります。例えば、ブログの投稿をバケットに「年」「月」別に保存しているとします。 2021 年の投稿は「2021」というフォルダに、2 月の投稿は「Feb」というフォルダに、ファイルの名前は「2021-02-23.html」のような形で保存している場合、このファイルへのパスは

2021/Feb/2021-02-23.html

の様に表す事ができます。

もしくは、昨日のリストを取得する際に取得した「ストレージの Reference」を使います。このリファレンスを使って、「getDownloadURL()」というメソッドを呼び出せば URL を取得できます。

const storage: firebase.storage.Storage = firebase.storage();
const ref: firebase.storage.Reference = storage.ref("2021/Feb/2021-02-23.html");
ref.getDownloadURL().then((url: string) => {
  console.log(url);
});

この URL を提供すればファイルをダウンロードする事ができます。

React で利用する JSX で書く場合には

export default function GetLink() {
  const [url, setURL] = useState("");
  const storage: firebase.storage.Storage = firebase.storage();
  const ref: firebase.storage.Reference = storage.ref("2021/Feb/2021-02-23.html");
  ref.getDownloadURL().then((fileURL: string) => {
    console.log(fileURL);
    setURL(fileURL);
  });
  return <a href={url}>ダウンロードはこちら</a>;
}

あまり現実的なコードではありませんが、コードに埋め込まれたパスのファイルへのリンクの記述を返すコンポーネントの例です。

表示するページにリンクを作成して、ダウンロードするだけの場合は簡単な処理で実現できます。

URL を利用する場合の注意点

繰り返しになりますが、このリンクを取得するためのアクセスには、Firebase ストレージのセキュリティルールが適用されます。つまり、アクセス権限のないひとがこのプログラムを実行して URL を取得する事はできません。

しかし、取得した URL からダウンロードは、URL を知っていれば、セキュリティルールの設定に関係なくダウンロードは可能です。この部分は誤った認識がある場合も多いので注意が必要です。

プログラムでファイルの中身にアクセスするには？

Firebase 自体は、Firebase のストレージに置かれたファイルの中身にアクセスする API は提供していません。ただし、URL が取得できるので、「fetch()」などのファンクションを利用するとファイルの中身にアクセスする事は可能です。例として、テキスト形式のファイルの中身にアクセスするコードは以下の様になります。

function getStorageFileContents(url: string): Promise<string> {
  return new Promise((resolve) => {
    fetch(url)
      .then((response) => {
        resolve(response.text());
      })
      .catch((error) => {
        resolve("");
      });
  });
}

これで、テキストファイルの中身をプログラムで処理する事も可能になります。

利用例としては、例えば、Firebase ストレージに Markdown で記述されたファイルを保存しておいて、そのデータをプログラムで HTML に変換して Web ブラウザで表示する様なアプリケーションの場合はこうした処理で実現可能です。

ブログの記事を Markdown で書いて、投稿するようなサービスを作る際には利用できる方法です。実用例には、「tomonorihirai.com」のブログサイトはこの方法で実現しています。

このブログ記事も、Markdown で書いていますが、「sv-sw.com」では、バックエンドで Markdown を HTML に変換して、サーバー側でレンダリングを行っているので今回紹介している方法とは若干異なります。ただ、投稿データは Firebase のストレージを利用して保存しています。

まとめ

この記事では、Firebase のストレージに保存したデータ（ファイル）を読み込む方法について紹介してきました。最もよく利用される方法は、ダウンロード用のリンク（URL）を取得してリンクを Web ページで提供する方法です。この方法の場合は、Firebase ストレージ上のファイルのパス（path）がわかれば簡単にダウンロード用の URL を取得できます。

この URL は、Firebase ストレージのセキュリティールールでは管理できないので注意が必要です。

ファイルの中身にアクセスしたい場合は、Firebase では機能を提供していませんが、ファイルにアクセスするための URL がわかればファイルの中身の取得も可能です。ブログなどのアプリ・サービスを作成する場合には、利用できる方法です。

Firebase のストレージの活用は意外にシンプルなコードでできるので、知っていると便利です。オンラインコンテンツの配信などに利用できるので是非試してみてください。

Firebaseの技術情報サイト

Firebase活用の為の技術情報サイトです

Firebaseストレージからの読み込みのやり方