Vueを使ってFirebaseストレージのファイルを表示する

2022年4月21日

Vue を使って Firebase ストレージのファイルを表示する

前回は Firebase のストレージの特定のフォルダに保存されているファイルの一覧を Vue を利用して表示する方法を紹介しました。この記事では、表示されたファイルの中から選択されたファイルの中身を表示する方法を紹介します。

Firebase ストレージのファイルにアクセスするには

Firebase ストレージの機能の一部として、保存されているファイルのリンク（URL）を取得する機能がサポートされています。リンク（URL）がわかると、Javascript の基本機能「fetch()」を使えばファイルの中身を取得することができます。
したがって、Firebase ストレージに保存されているファイルの中身を表示するには、以下の手順が必要になります。
ファイルを選択する
選択したファイルのリンク（URL）を取得
取得したリンク（URL）を使ってファイルの中身を取得
取得したファイルの中身を表示
の四つのステップです。

ファイルを選択するには？

いろいろなやり方がありますが、クリックされた場合の処理を行う関数に、「file」を渡してしまうのが簡単な方法です。

前回の「src/views/HomeView.vue」に記述の追加を行います。

<template>
  <div>
    <h1>HTML view</h1>
    <div class="file-list">
      <ul v-for="file in list.files" :key="file.name">
        <li class="link-item" @click="selectedEvent(file)">
          {{ file.name }}
        </li>
      </ul>
    </div>
    <div v-html="htmlText"></div>
  </div>
</template>

こうすることで選択した「file」を受け取った関数で、選択されたファイルの情報を受け取って表示する情報をセットするような処理を行う事ができます。

今回は、ファイルの中身が HTML の記述と言う前提で、ファイルの中に書かれている HTML の記述をこのページの表示に埋め込むようにしてあります。

<div v-html="htmlText"></div>

この部分がファイルから取得した HTML の記述を入れた変数「htmlText」を表示する部分になります。

選択されたファイルの処理

前回紹介した、Firebase ストレージのフォルダに保存されたファイルの一覧を取得する処理に加えて、選択されたファイルのリンク（URL)を取得して、その URL を元に、ファイルの中身を取得して、「htmlText」にセットする処理が加えられています。

<script>
import { getURL } from "../lib/firebase";

export default {
  data() {
    return {
      list: {
        files: [],
        folders: [],
      },
      htmlText: "",
    };
  },

  .....

  methods: {
    selectedEvent(selectedFile) {
      if (selectedFile) {
        getURL(selectedFile).then((url) => {
          fetch(url).then((res) => {
            res.text().then((raw_text) => {
              this.htmlText = raw_text;
            });
          });
        });
      }
    },
  },
};
</script>

ファイルのリンク（URL）を取得する処理は、Firebase ストレージの機能を利用するので、以下のような関数を「src/lib/firebase.js」に追加します。

// src/lib/firebase.js
import { getDownloadURL } from "firebase/storage";

export function getURL(ref) {
  return new Promise((resolve) => {
    getDownloadURL(ref).then((url) => {
      resolve(url);
    });
  });
}

これで、選択したファイル（テキストファイル）の中身を表示できる様になります。一応 HTML ファイルを前提にしているので、HTML で記述してあれば表示可能です。通常のテキストファイルの場合は、テキストファイルがそのまま表示されます。（基本的にテキストファイルの改行は無視されます）

簡単なブログの仕組みが完成

これで、管理者として記事を HTML で記述して Firebase のストレージにアップロード（投稿）すれば、一覧からファイルを選択して表示することが可能になりました。
必要に応じて CSS の部分の記述を、Vue のファイルに加えればさらに体裁を整えて表示することが可能です。読み込む HTML ファイルの中に CSS の記述を書いておけば、読み込む部分の体裁も変える事ができます。
ブログサービスの基本部分はこの様に比較的シンプルな記述で実現できます。実際には、表示の体裁を CSS を使って整えて見栄えのするページに仕上げる方がこのての実装ではより、時間と手間がかかる場合が多くなります。
この記事では、プログラミングのやり方に重点を置いているので CSS の部分はあまり触れていません。

まとめ

Firebase のサービスを利用すると TML の原稿を書けば、ブログなどの記事を投稿して公開する機能は初心者でも簡単に実装できます。
実際には、機能の実現よりは、CSS を駆使してページの見栄えを良くする部分がこの手の実装ではより重点が置かれます。
もう一つの問題は、HTML を書くのは少し面倒な場合があります。そうした場合、もう少し記事を書きやすい方法として、「Markdown」と言う形式で書くと、もう少し記事が書きやすくなります。また、そのままの状態（Markdown 形式）でもある程度読みやすくなるので便利です。
次回は、このMarkdownを利用して記事を書いた場合の扱い方について紹介します。

このブログを検索

シリコンバレースーパーウエア