metascraper + unified でブログカードを作った


こんにちは。ブログ作って9ヶ月放置した人です。

正月に書こうと思っていたんですが、

- ブログのデザインがひどくて書く気になれなかった
- ブログカードを実装したかった
  - 2021年買ってよかったものリストを書こうと思ったらブログカード作りたくなった

みたいな経緯があって正月はこのブログのブログカードを作ってました。

今日はそのブログです。ちなみにブログカード以外にもちょこちょこ読みやすくなるように CSS をいじってます。

なんで正月に書かずに今書いているかというと最後の詰めをサボったからです。すみません。

## ブログカード完成品
今回作るにあたって、
- サムネイルとタイトル、説明を表示する
- ビルド時にサイトから OGP でデータを読み込んでビルドする

ことを要件としました。できあがったものがこちらです。

[https://hayaokimura.com/blogs/create-blog-with-next-netlify-cms:embed]

みための改善余地はまだあるなと思いつつ、ある程度作りたいものが作れたので良しとしました。
使いかたは、リンクにしたい URL を `[]` で囲って、URL の最後に `:embed`を追加すると使えます。上のリンクは

```
[https://hayaokimura.com/blogs/create-blog-with-next-netlify-cms:embed]
```

みたいな感じです。

## やったこと

最終的にやったこととしては、

- ReactMarkdown を使うのをやめる
- unified をそのままつかって markdown to HTML 変換をビルド時に行う
- 特定の文字列を embed タグとして扱う unified plugin を書く
- レンダリング時は HTML to react をする。その時 embed タグを解釈する

### ReactMarkdown を使うのをやめる

もともとこのブログは ReactMarkdown をつかって markdown を react 化していました。（作ったばかりのブログカード使いたがるのは許してください。）

[https://github.com/remarkjs/react-markdown:embed]

ですが、この方法だとそもそも markdown to react をページを読み込んだときに行っています。

自分が今回やりたかったのはビルド時に markdown to react するとともに OGP でデータをサイトから読み込むことだったので、 ReactMarkdown をこのまま使うことはできませんでした。

### unified をつかって md to HTML をビルド時にする。
unified はいろんな文字列を構文木に変換して扱えるようにするライブラリです。 ReactMarkdown の内部でも結局は unified のプラグインで md to react が成されています。

[https://github.com/unifiedjs/unified:embed]

これを使って、まず markdown to HTML をビルド時に行うようにしました。HTML の文字列として props に保存される形になります。

### 特定の文字列を embed タグとして扱う unified plugin を書く
unified で markdown を HTML にするとき、特定の文字列の場合（今回は `[]` で囲まれた `:embed` を含んだ URL 文字列）に OGP から情報を取ってきて、出力する HTML の文字列に OGP でとってきた情報を含めたいです。

unified は Transformer という構文木を変換するプラグインを挟むことで、変換時にいろいろな処理をすることができます。unified 公式のこの図がわかりやすいです。

![unified がやること](/img/unified.png)

今回の場合、Input が markdown、Output が HTML です。Parserで、markdown を構文木にした後、Transformer を構文木に作用させる事によって、色々できます。今回の場合は、特定の文字列の場合に `embed` という HTML タグにするようにしました。

```javascript
async function transformer(tree, file) {
  const nodes = selectPossibleOembedLinkNodes(tree);

  await nodes.map((node) => processNode(node));

  async function processNode(node) {
    if (!node.children || node.children.length == 0) {
      return;
    }
    const firstText = node.children[0];
    if (firstText.type !== "text") {
      return;
    }
    const value = firstText.value;

    if (value && isEmbed(value)) {
      node.type = "rehype-embed";
      const { body: HTML, url } = await got(extractUrl(value));
      const metadata = await metascraper({ HTML, url });
      node.data = metadata;
      node.children = null;
    }
  }
}
```

`node.type` に `rehype-embed` を指定し、metascraper ライブラリで取得した OGP のデータを node.data にわたすことで、props としてフロントで取得できるようにしています。

### レンダリング時に HTML を React に変換する。その時ブログカードコンポーネントを作る

ビルド時にうまく行っていれば、`[https://hoge.hoge:embed]`という文字列は `rehype-embed` タグと OGP のデータに変換されてフロントに渡ってきます。
フロントでもunifiedを用いて HTML から React に変換します。このとき、特定のタグの変換の仕方を components を与えることで指定できます。今回の場合下記のように RehypeEmbed コンポーネントを指定することで、ブログカードを作ることができます。

```javascript
const processor = unified().use(rehype2react, {createElement: React.createElement, components: {"rehype-embed": RehypeEmbed}});
```

```javascript
export const RehypeEmbed: React.FC<any> = (props) => {
  return (
    <ALink href={props.url} target="_blank" rel="noopener noreferrer">
      <ImageWrapper>
        <Image src={props.image} />
      </ImageWrapper>
      <DescriptionWrapper>
        <Title>{props.title}</Title>
        <Description>{props.description}</Description>
      </DescriptionWrapper>
    </ALink>
  );
}
```

こうすると metadata として HTML に渡した情報が props として利用でき、React で利用できます。

## まとめ

意外と長くなってしまった。 unified を触るのが初めてだったので結構楽しかったですが、実際は結構手こずってました笑

React でブログ作ってる人は参考にしてみてください。では！


Next.js + Netlify CMS でブログを作る


ブログ作りました！🎉🎉🎉
自分で作ったブログは機能こそ少ないですが、とても愛着が湧いていいです。せっかく作ったので、備忘録がてら今回作ったブログの作り方を書いておきます。

目次

```
- 構成
  - Next.js
  - Netlify CMS
- やったこと
- これから作りたいもの
```

## 構成

### Next.js

React のフレームワーク。SSR や、ビルド時レンダリング（SSR っぽい略し方を知らない）を簡単にすることができる。ルーティングもフォルダ構成で簡単にすることができて便利。自分は今まで Next.js を全く使ったことがなかったので、[チュートリアル](https://nextjs.org/learn/basics/create-nextjs-app)を一通りやってなんとなく使い方を理解した。

### Netlify CMS

静的ホスティングサービス[Netlify](https://www.netlify.com/)が提供している Git ワークフロー用 CMS。サイトに CMS 機能を追加することができる。

[https://www.netlify.com/:embed]

## やったこと

- Next.js のセットアップ
- Netlify CMS の設定
- デプロイ

### Next.js のセットアップ

自分は[Netlify CMS の Next.js セットアップフロー](https://www.netlifycms.org/docs/nextjs/)を進めて Netlify CMS with Next.js をセットアップしましたが、ブログを作りたいならこれはあまりおすすめしません。このフローでは markdown を react コンポーネントに変換する際に、[frontmatter-markdown-loader](https://hmsk.github.io/frontmatter-markdown-loader/)を使用していますが、これを使うとファイル名を指定して直接インポートする必要があるため、ファイル名を利用した dynamic routing ができませんでした。（できる方法があったら教えてほしい）

より良い方法として、[Creating a Markdown Blog with Next.js](https://dev.to/tinacms/creating-a-markdown-blog-with-next-js-52hk)を見ながらすすめることをおすすめします。これに沿ってセットアップすればとりあえず Next.js でブログを作るところまで進められます。

### Netlify CMS の設定

Next.js をつかった Markdown Blog を作ることはできたので、次はそれを Netlify CMS で管理できるようにしたいです。[Netlify CMS の Next.js セットアップフローの Adding Netlify CMS](https://www.netlifycms.org/docs/nextjs/#adding-netlify-cms)より後を参考にするといいです。ここでは、`admin/index.html`と`admin/config.yml`の作成をして Netlify にデプロイしています。`admin/index.html`はコピペで済むのですが、`admin/config.yml`は若干設定を変える必要があるので今自分が使っている設定を参考に、config.yml の設定をしてください。

```yaml
backend:
  name: git-gateway
  branch: master
media_folder: public/img
public_folder: img
publish_mode: editorial_workflow
collections:
  - name: "blogs"
    label: "Blogs"
    folder: "posts/blogs"
    create: true
    slug: "{{fields.slug}}"
    fields: # The fields for each document, usually in front matter
      - { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Slug", name: "slug", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Featured Image", name: "thumbnail", widget: "image" }
      - { label: "Body", name: "body", widget: "markdown" }
```

**backend:** backend のプロトコル設定。git-gateway をよくわかってないけど、レポジトリとサイトの間の通信を担っています。デプロイする branch を指定できますが、基本 master でいいと思います。

**media_folder:** 画像など、メディアファイルを格納する場所。Next.js は public 以下が静的アセットを格納する場所なので public 以下を指定します。

**public_folder:** 画像を公開するパス。Next.js であれば media_folder の public を抜いたものになるはずです。

**publish_mode:** このオプションは指定しなくてもいいですが、指定すると下書き機能が有効になります。便利。下書き中の記事はブランチ切って PR として保存されています。

**collections:** 記事のフォーマットを指定します。複数指定できるので、ブログ記事と作品一覧みたいな使い方もできそう。

collections の中のパラメータとして一番大事なのは`create: true`です。これを指定しないと Admin の画面で編集ができません。あと、日本語の記事タイトルにするのであれば、`slug: "{{fields.slug}}"`は大事です。デフォルトでは、タイトルがファイル名になるので、日本語のタイトルを付けていると url が日本語になってダサいし長いです。fields に slag を追加して、slag を指定できるようにするとそれぞれファイル名を指定することができるようになります。fields は編集できる変数を追加できます。今自分が指定しているパラメータだと編集画面はこのように表示されます

![Netlify cms 上での表示](/img/netlify-cms-editor-params-shot.png)

### デプロイ

[Publishing to GitHub and Netlify](https://www.netlifycms.org/docs/nextjs/#publishing-to-github-and-netlify)のとおりに進めればデプロイできるはずです！これでブログの完成！やったね！

## つまづいたとこ

**date の取得**

[Creating a Markdown Blog with Next.js](https://dev.to/tinacms/creating-a-markdown-blog-with-next-js-52hk)に従ってセットアップをしていましたが、markdown を取得するところでエラーになりました。

```js
export async function getStaticProps({ ...ctx }) {
  const { slug } = ctx.params;
  const content = await import(`../../posts/${slug}.md`);
  const config = await import(`../../data/config.json`);
  const data = matter(content.default);

  return {
    props: {
      siteTitle: config.title,
      frontmatter: data.data,
      markdownBody: data.content,
    },
  };
}
```

```
SerializableError: Error serializing `.frontMatter.date` returned from `getStaticProps` in "/blogs/[slug]".
Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.
```

[Next.js の SSG で AMP-only のブログを作った](https://hbsnow.dev/blog/nextjs-blog-ssg/) を参考に直しました。

[https://hbsnow.dev/blog/nextjs-blog-ssg/:embed]

return するときに　`JSON.parse(JSON.stringify(returnData))` をすると治ります。（対症療法感がすごい）

## これから作りたいもの

一旦はブログを作ることができました。ただ、一般的なブログに備わってる機能でまだ足りないものがいくらかあるのでこれから実装したいです。

- OGP 設定
- ブログカードなど、OGP の埋め込み設定
- 関連記事など、回遊対策
- SEO
- 画像サイズの自動調節
- sitemap.xml の設定
- コード埋め込み時の言語に応じたコードハイライト

OGP 埋め込みと画像サイズは実装が悩ましい……
またいい感じの実装ができたらブログにします。ではでは


metascraper + unified でブログカードを作った

Mar 04 2021

Next.js + Netlify CMS でブログを作る

Jun 14 2020