ブログの原稿に Markdown は便利

ブログの原稿に Markdown は便利

Firebase ストレージを利用したブログサービスでは、Firebase ストレージに投稿したブログの投稿を表示する仕組みにしています。Web ブラウザで表示させるには、HTML が便利ですが、Markdown は更に便利な記述方法です。この記事では、Markdown を利用したブログの記事作成について紹介します。

Markdown とは？

Markdown は、GitHub のドキュメントなどでも利用されている、簡易型のマークアップ言語で生の原稿でも HTML などに比べると読みやすく、原稿の作成も簡単にできます。

Markdown の記述から簡単に HTML に変換するためのモジュールも各種プログラミング言語で作成されているので、HTML で記述するより応用範囲が広く、今回紹介するブログサービスで利用することにしました。

前回までに、HTML で Firebase ストレージに投稿したブログの記事を読み込んで表示させるまでを紹介しましたが、簡単な変更で Markdown で投稿した記事を HTML に変換できるので、ほぼ同じ仕組みで Markdown の投稿をサポートする事ができます。

便利なのは、プログラムなどを引用するのも、簡単にできる点です。 HTML の場合、HTML で利用している文字は別の文字列に変換するする必要があるなど、プログラムを HTML の記述に埋め込むには少し手間がかかります。「<」や「>」などは良い例です。Markdown ならばほぼコピー＆ペーストで済みます。

Markdown を HTML に変換するには？

今回は、React を利用してブログサービスを作成しているので Javascript(正確には Node.js)のモジュールを利用します。

まず、Markdown の記述を処理しやすい形に変換してくれるモジュールとして、「gray-matter」を利用します。利用には、インストールが必要です。他のモジュールも一緒にインストールしておきます。

$ npm install gray-matter

$ npm install marked

$ npm install dompurify

$ npm install --save-dev ＠types/markd ＠types/dompurify

「gray-matter」で処理すると、Markdown の中身を JSON 形式に変換してくれます。

これで取り出した、本文の部分を「marked」で処理すると、HTML に変換してくれます。「marked」のドキュメントに書かれていますが、「markd」自体は、生成した HTML のサニタイズはやってくれません。そこで、生成した HTML のサニタイズは「dompurify」を利用して行います。

一覧から指定されたファイルから、必要な HTML を生成して、React のステート変数「html」に保存する処理を行なっています。

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

  const fileName = e.currentTarget.id;

  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) => {

          const processedMatter = graymatter(contents);

          const html = dompurify.sanitize(marked(processedMatter.content));

          setContents(html);

        })

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

    });

  }

}

必要なモジュールをインストールして、数行追加するだけで、Markdown 形式のファイルの中身を HTML に変換して表示させる事ができます。

便利なメタデータ

Markdown を利用すると便利なのは、簡単にメタデータを埋め込む事が可能で、「gray-matter」で簡単にメタデータを取り出して処理できる点です。

メタデータは、Markdown の冒頭に埋め込む事ができます。 Markdown に埋め込んだメタデータの例です。メタデータとして以下の三項目を埋め込んだ例です。

＊　title (投稿のタイトル)

＊　date (投稿の日付)

＊　description (投稿の概要)

---

title: 記事のタイトル

date: 2021-08-12

description: 記事の概要をここかきます

---

# タイトル

本文

このように書いておくと、「gray-matter」で処理をすると簡単にこのメタデータにアクセスできます。

interface Metadata {

  title: string;

  date: string;

  description: string;

}

function getMetaData(text: string): Metadata {

  const matterResult = graymatter(text);

  const metadata = {

    title: matterResult.data.title,

    date: matterResult.data.date,

    description: matterResult.data.description,

  };

  return metadata;

}

原稿を表示する場合には余り役に立ちませんが、投稿の一覧を表示する際には、こうしたメタデータを取り込んで、一覧と一緒に表示すると便利です。

次のステップは？

一通りのブログを運営するための機能はこれまで説明してきた機能を組み合わせると簡単に実現できます。来週は、このブログサービスを更に利用者に快適に利用してもらえるように少し工夫してアクセスの改善などを行なって行く予定です。

今日紹介した、Markdown に埋め込んだメタデータは確かに便利ですが、このデータを取り込むには、毎回、Markdown の中身を読み出して、「gray-matter」で処理する必要があります。この方法だと、必要なファイルの全ての中身を毎回処理する必要があるので時間がかかります。

これを投稿時に、読み出して、Firebase のデータベースに保存しておけば、この処理は投稿時の一度で済みます。あとは、選択されたファイルのみ中身を読み出して表示するようにすれば、不要なアクセスを減らす事が可能になって、処理時間も短くできます。

まとめ

Firebase を利用したブログサービスで、ブログの投稿を HTML ではなく、Markdown で作成して投稿できるようにする方法を紹介してきました。

Markdown の方が生原稿でも読みやすく、メタデータを埋め込んで簡単に取り出せるなどのメリットがあるので、より便利なブログサービスの実現が可能になります。メタデータを利用することで、記事の一覧表示に更に詳しい投稿の情報を加える事が可能になるので、利用者には更に便利にブログのアクセスが可能になります。

来週は更に機能の改善を紹介していきます。お楽しみに！