Back to blog
Apr 21, 2022
2 min read

react-markdownにブログカードを実装する

react-markdownで作ったブログにブログカードを実装して記事のクリック率を高めませんか?コードを見せつつ実装の解説を丁寧に行います。

はじめに

こんにちは。自作ブログ作ってから更新する頻度、高すぎるこふです。

ブログカードをreact-markdownに埋め込む方法をお伝えします。markdownをパースしてhtmlにするものであれば、共通の考え方で使えると思います。

以下のような感じです。

https://blog.cohu.dev/new-blog

どうやるか

具体的なコードと解説をします。コードは抜粋しつつなので、ご自身のコードに組み合わせてください。

ブログにはこのように書いています。

```link
https://blog.cohu.dev/new-blog
```

一般にコードブロックと呼ばれる部分に挿入しています。本来はプログラミング言語ごとのコードを埋め込む場所ですが、代用しています。

import { articleComponents } from "../articleComponents";
<ReactMarkdown children={markdown} components={articleComponents} />;

articleComponentsは以下です。

const customCode: CodeComponent = ({ inline, className, children }) => {
  const match = /language-(\w+)(:?.+)?/.exec(className || "");
  const lang = match && match[1] ? match[1] : "";
  const filename = match && match[2] ? match[2].slice(1) : "";
  if (lang === "link") {
    return (
      <iframe
        className="mx-auto w-full max-w-7xl dark:opacity-80"
        src={`https://hatenablog-parts.com/embed?url=${children}`}
      />
    );
  }
  // その他のコードブロック処理など・・・
};
export const articleComponents = {
  code: customCode,
};

ここでポイントを解説です。

react-markdownのコードブロックの性質上、classNameという変数にバックコーテーション(`)の後ろの文字列が入ります。

その部分に、プログラミング言語とファイル名を代入しています。

例えば、cohuというプログラミング言語があり、ファイル名がhoge.cohuだったとすると、以下のようになります。

hogehoge

つまり、この文字列を正規表現を使って該当箇所の文字列を持ってくれば良い訳です。 該当箇所が以下のコードです。

const match = /language-(\w+)(:?.+)?/.exec(className || "");
const lang = match && match[1] ? match[1] : "";
const filename = match && match[2] ? match[2].slice(1) : "";

language-の後ろに言語、コロンの後ろにファイル名を持ってきます。

正規表現の解説は他の記事に任せるとして、必要な説明だけ。


プログラミング言語名は必須としていて、コロンより後ろのファイル名は任意で受付ます。

そうすることで、以下のようにlinkだけ指定した時に、linkという文字列を持ってくることが可能です。

```link
https://blog.cohu.dev/new-blog
```

これでlinkは持ってこれたので、中身を埋め込みます。

if (lang === "link") {
  //   use only inner link, why a tag rel is not customed
  return (
    <iframe
      className="mx-auto w-full max-w-7xl dark:opacity-80"
      src={`https://hatenablog-parts.com/embed?url=${children}`}
    />
  );
}

はてなブログのカードを埋め込むことで実現しています。詳細は後ほど。

csstailwind cssを用いていますが、特殊なことは書いていません。

これにより、以下のようなカードを挿入できる訳です。

https://blog.cohu.dev/new-blog

なぜこの方法でやるの?

実装のコストを考えた上での実装です。

ブログカードを実装するためには、その URL を辿って meta タグを取得し埋め込む必要があります。

その肩代わりをしてくれるのが、はてなブログのブログカードです。

ブログカードのメリット

一般に言われているのは、クリック率が上がることです。

ひと目でクリックしたくなりがちです。

しかし、濫用すると場所を取るので、必要最小限にとどめる必要があるとは思います。

他の手段はないの?

ありますが、お金が結構かかってしまいます。

そのため、はてなブログ公式のものが使えなくなったら代替する必要ありです。

おわりに

最後までお読みいただきありがとうございました。

ブログカードを使って記事のクリック率を高めましょう。

参考文献