選択した HTML ファイルを表示するには？

選択した HTML ファイルを表示するには？

Firebase のストレージに投稿したブログの原稿の一覧から選択した記事を表示する方法を紹介します。今回は、HTML 形式のファイルを投稿して、それを表示する方法を紹介します。

ブラウザが表示できるのは HTML 形式が基本！

Web ブラウザで表示する場合には、基本は HTML 形式のファイルが一番簡単に表示できます。 この記事では、まず HTML 形式のファイルを Firebase のストレージに投稿して、その一覧を表示して、その中から選択したファイルを表示する事を目標にします。

まずは前提条件として、ファイルの一覧をテーブルに表示してファイルを選択できるようにしているとします。 UI の記述例は、このような形でテーブル一覧を表示します。 「files」が、Firebase ストレージの「リファレンス」の配列です。

<table className="table table-hover">

  <thead className="table table-dark">

    <tr>

      <th>File Name</th>

      <th></th>

    </tr>

  </thead>

  <tbody>

    {folders.map((file: firebase.storage.Reference) => (

      <tr key={file.name}>

        <td>{file.name}</td>

        <td>

          <button

            className="btn btn-success"

            id={file.name}

            onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>

              folderSelectedEvent(e)

            }

          >

            Select

          </button>

        </td>

      </tr>

    ))}

  </tbody>

</table>

選択したファイルの URL から中身を取得

残念ながら、Firebase のストレージに保存したファイルの中身を見るための API は用意されていません。従って、Firebase のストレージに投稿したファイルの中身を見るためには、ファイルの URL から中身を取得する方法を利用します。

そこで最初に選択したファイルの URL を取得する方法から見ていきます。 前回の記事で、ファイルの一覧を取得していますが、このファイルの一覧で取得しているのは Firebase ストレージの「リファレンス」の配列です。Firebase のストレージ機能は、この「リファレンス」から、リファレンス先のファイルの URL を取得する API が用意されています。

この URL を指定して、「fetch()」を使って指定した URL の中身を取得します。今回は、HTML ファイルを対象にしているので取得したファイルの中身は HTML の文字列（string）です。

function fileSelectedEvent(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {

  const fileName = e.currentTarget.id;

  console.log(fileName);

  const selected: firebase.storage.Reference | undefined = files.find(

    (file: firebase.storage.Reference) => {

      return file.name === fileName;

    }

  );

  if (selected) {

    selected.getDownloadURL().then((url) => {

      console.log(url);

      fetch(url)

        .then((response: Response) => {

          const contents = response.text();

          return contents;

        })

        .then((contents: string) => {

          setContents(contents);

        })

        .catch((error: any) => {});

    });

  }

}

取得した HTML を表示する

取得した HTML を表示するには、以下のような記述を JSX で書けば表示されます。

<div>

  <article dangerouslySetInnerHTML={{ __html: contents }}></article>

</div>

HTML の中身を取得した際に、React のステートの「contents」にセットしているので、それをそのまま「dangerouslySetInnerHTML」に渡せば表示できます。 （＊）この例では、React Hook を利用しています。クラス形式で記述する場合は、「setState()」で、値をセットします。

ブログの記事を投稿する機能は、ブログの記事の原稿を Firebase のストレージに保存することで実現して、Firebase のストレージに保存されているファイルの一覧から表示したいファイルを選択して、表示するという基本機能が実現できる事になります。あとは、実際の表示の体裁を整えれば基本的なブログの機能はカバーできます。

Firebase のストレージを利用すると、ブログサービスの機能は意外にシンプルに実現できます。

HTML で原稿を書くか？

今回の例では、HTML でブログの原稿を書くのが前提ですが、ブログの原稿の場合、HTML で書くのは意外に面倒ですし、管理が大変です。要は慣れの問題なので、HTML での記述に慣れてしまえば大きな問題ではありません。これでも、十分に機能します。 しかし、将来的な原稿の管理や更新を考えると、HTML で記事を書くよりは、Markdown で書くと扱いが便利です。

Markdown の場合、Markdown の記述のままでも読みやすく、記述もシンプルです。また、プログラムのソースコードの引用も HTML で直接書くよりは遥かに簡単です。特にプログラムをされる方の場合 GitHub を利用される方も多いと思いますが、GitHub のドキュメントは Markdown で記述するケースも多いので Markdown に慣れている方も多いかと思います。

そこで、次回はここまでの機能を拡張して、Markdown でブログの原稿を投稿する仕様に変更する予定です。 これで、原稿の執筆もだいぶシンプルになります。

まとめ

ここまででブログサービスの基本機能が揃いました！

＊　ブログの記事を Firebase のストレージに投稿

＊　Firebase のストレージ（フォルダ）内のファイルの一覧の表示と選択

＊　選択した Firebase ストレージのファイルの中身を表示

Firebase のストレージ機能を使うと、意外にシンプルにブログのサービスが実現できます。 今回は、HTML のファイルから HTML の記述を読み込んで表示するという機能ですが、この機能を拡張して Markdown 形式で原稿を投稿できるようにすると更に便利でブログの記事の執筆も楽になります。

次回は、Markdown 対応を紹介する予定です。お楽しみに！