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

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

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

以下のような感じです。

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

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

コピー
1```link
2https://blog.cohu.dev/new-blog
3```

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

コピー
1import { articleComponents } from '../articleComponents'
2;<ReactMarkdown children={markdown} components={articleComponents} />

articleComponentsは以下です。

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

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

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

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

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

hoge.cohuコピー
1hogehoge

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

コピー
1const match = /language-(\w+)(:?.+)?/.exec(className || '')
2const lang = match && match[1] ? match[1] : ''
3const filename = match && match[2] ? match[2].slice(1) : ''

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

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

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

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

コピー
1```link
2https://blog.cohu.dev/new-blog
3```

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

コピー
1if (lang === 'link') {
2  //   use only inner link, why a tag rel is not customed
3  return (
4    <iframe
5      className="mx-auto w-full max-w-7xl dark:opacity-80"
6      src={`https://hatenablog-parts.com/embed?url=${children}`}
7    />
8  )
9}

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

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

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

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

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

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

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

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

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

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

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

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

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

• https://staff.hatenablog.com/entry/2014/09/05/143600
• https://github.com/remarkjs/react-markdown