react-markdownにブログカードを実装するの絵文字

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

2022-04-21

2022-04-21

はじめに

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

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

以下のような感じです。

どうやるか

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

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

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

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

<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') { // 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}`} /> ) } // 省略:その他のコードブロック処理 } export const articleComponents = { code: customCode, }

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

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

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

例えば、cohuというプログラミング言語があり、ファイル名がhoge.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という文字列を持ってくることが可能です。

blog.md
```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を用いていますが、特殊なことは書いていません。

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

なぜこの方法でやるの?

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

実装のコスト、金銭面でのコストです。


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

このサイトは静的な html を出力している都合上、単体ではできません。そうすると、別のサーバーに API を作って情報を取得し、表示させると良いのでは?と思うでしょう。


外部のサーバー、API が必要なのは、CORS を考えるとわかるでしょう。

これが、実装のコストと料金のコストにつながります。

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

ブログカードのメリット

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

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

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

他の手段はないの?

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

そのため、はてなブログ公式のものが使えなくなったら追記予定です。

さいごに

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

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

参考文献



アバター

こふ

情報通信を専攻している大学生です。大学(研究)・趣味・アルバイトでプログラムを書いています。ITツール・サービス・文章を創作することが好きです。

ぼくについて

共有する