最近流行った牛尾剛さん著書の「世界一流のエンジニアの思考法」という本を読んだので、メモがてら要約としてまとめました。

「世界一流エンジニアの思考法」要約

この記事は [ミライトデザイン Advent Calendar 2023](https://qiita.com/advent-calendar/2023/miraito-inc) の 3 日目の記事です。

2 日目に書いたこちらの記事に続いて 3 日目も書きました。

https://www.yukimasa.net/posts/auto-switch-git-user-per-repo

## はじめに

この記事では、 Next.js で構築したブログに Tocbot というライブラリを使用して、目次を追加する方法について紹介します。

[zenn](https://zenn.dev/) の目次に使用しているライブラリで、このサイトでも実際に Tocbot を使用して作成しています。

https://zenn.dev/link/comments/4d10c8dd8315e8

なお、 Next.js でのブログ構築についてはこの記事では紹介しません。

このサイトを構築したときの記事が別でありますので、気になる方はこちらを見てみてください。

https://www.yukimasa.net/posts/created-jamstack-personal-site/

## Tocbotとは

https://tscanlin.github.io/tocbot/

Tocbot は html の見出しタグ ( h1, h2 など ) から、自動的に目次 ( Table of Contents ) を生成するライブラリです。

また、目次はリンクになっているため任意の見出しにジャンプしたりすることができますし、スタイルも自由につけることができます。

## 使用方法

使い方はとても簡単なので、以下の手順を見て試してみてください。

### Tocbot のインストール

まずは以下のコマンドを実行してインストールしましょう。

```sh-session
❯ yarn add tocbot
```

or

```sh-session
❯ npm install --save tocbot
```

### Toc コンポーネントの作成

```tsx
import { useEffect } from "react";
import tocbot from "tocbot";

export const Toc = () => {
  useEffect(() => {
    tocbot.init({
      tocSelector: ".toc", //　目次を追加する class 名
      contentSelector: ".content", // 目次を取得するコンテンツの class 名
      headingSelector: "h1, h2, h3, h4", // 目次として取得する見出しタグ
    });

    // 不要となったtocbotインスタンスを削除
    return () => tocbot.destroy();
  }, []);

  return <nav className="toc" />;
};
```

使い方としては、 useEffect 内で `tocbot.init()` を実行して初期化処理を実行します。

init の引数に設定値を入れることで目次の各設定ができます。

色々なオプションがあるので、公式の [API > Options](https://tscanlin.github.io/tocbot/#options) から確認してみてください。

なお、このサイトではヘッダーを固定しているため、目次のアンカー位置がズレてしまいます。
そのため以下の設定を追記してヘッダーの高さ分を調整します。

また、 必要な見出しタグのみを目次として設定したいため、 `headingSelector` も修正します。

```diff tsx
export const Toc = () => {
  useEffect(() => {
    tocbot.init({
      tocSelector: ".toc", //　目次を追加する class 名
      contentSelector: ".content", // 目次を取得するコンテンツの class 名
-     headingSelector: "h1, h2, h3, h4", // 目次として取得する見出しタグ
+     headingSelector: "h2, h3", // 目次として取得する見出しタグ
+     // ヘッダーの高さ分ズレてしまうため調整
+     headingsOffset: 70,
+     scrollSmoothOffset: -70,
    });

    // 不要となったtocbotインスタンスを削除
    return () => tocbot.destroy();
  }, []);

  return <nav className="toc" />;
};
```

### スタイルの調整

目次のスタイルは CDN でスタイルを当てるか、独自で CSS を当てるかになります。

CDN を利用する場合は Next.js が用意している next/head の `<Head>` タグへ追加すれば適用されます。

```tsx
<Head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css"
  />
</Head>;
```

自分でスタイリングする場合は `tocSelector` で指定した class に対して CSS を書けば適用されます。

アクティブになっているリンクには `.is-active-link` という class が付与されるので、アクティブになっているリンクのスタイルも当てることができます。

参考にこのサイトで使用しているコードを紹介します。
※ コンポーネントライブラリには [Chakra UI](https://chakra-ui.com/) を使用しています。

```tsx
import { Box, useColorModeValue } from "@chakra-ui/react";
import { useEffect } from "react";
import tocbot from "tocbot";

export const Toc = () => {
  useEffect(() => {
    tocbot.init({
      tocSelector: ".toc",
      contentSelector: ".postArticle",
      headingSelector: "h2, h3",
      headingsOffset: 70,
      scrollSmoothOffset: -70,
    });

    // 不要となったtocbotインスタンスを削除
    return () => tocbot.destroy();
  }, []);
  const activeLinkColor = useColorModeValue("gray.900", "gray.300");
  const activeListIconColor = useColorModeValue("purple.500", "purple.700");

  return (
    <Box
      sx={{
        ".toc": {
          borderRadius: "0.25rem",
          fontSize: "0.875rem",
          position: "relative",

          ".toc-list": {
            paddingTop: "0.5rem",

            ":first-child": {
              paddingTop: 0,
            },
            ".toc-list-item": {
              position: "relative",
              listStyle: "none",
              paddingLeft: 5,
              paddingBottom: "0.5rem",

              ":last-child": {
                paddingBottom: 0,
              },
              "::before": {
                position: "absolute",
                top: "4px",
                left: 0,
                width: "12px",
                height: "12px",
                content: '""',
                background: "purple.300",
                border: "2px solid #fff",
                borderRadius: "full",
              },
              ".toc-link": {
                color: "gray.500",
                fontWeight: 700,
              },
              ".toc-list .toc-link": {
                fontWeight: 400,
              },
            },

            ".toc-list-item.is-active-li": {
              ".toc-link": {
                color: activeLinkColor,
              },
              "::before": {
                background: activeListIconColor,
                borderColor: "purple.100",
              },
            },
          },
        },
      }}
    >
      <nav className="toc" />
    </Box>
  );
};
```

## まとめ

Next.js で構築したブログに Tocbot を使用して目次を追加する方法を紹介しました。

Tocbot のオプションは他にもあるので、詳しい情報は Tocbot の公式ドキュメントを確認してください。

zenn でも使用されていて、簡単に目次を作成することができ、スタイルも自由にカスタマイズができるので是非試してみてください。

このサイトの目次スタイルは zenn を参考にしました。

記事のスタイルについても zenn のマークダウン記法を表示させるようにしているので、よければこちらも参考にしてみてください。

https://www.yukimasa.net/posts/zenn-markdown-with-nextjs

この記事では、 Next.js で構築したブログに Tocbot というライブラリを使用して、目次を追加する方法について紹介します。
zenn の目次にも使用しているライブラリで簡単に目次を作成することができるので是非試してみてください。

Tocbot を使用し Next.js で構築したブログに目次を追加する

この記事は [ミライトデザイン Advent Calendar 2023](https://qiita.com/advent-calendar/2023/miraito-inc) の 2 日目の記事です。

## はじめに

Git を使っていると個人や会社、その他クライアントなどでリポジトリのユーザー名・ユーザーアドレスを切り替えたいことがよくあります。

リポジトリ毎に config 設定をすれば良いのですが、設定をし忘れてグローバルに設定している自分のアドレスでコミットしてしまったということが何回かありませんか？

今回はリポジトリ毎に設定を自動で切り替える方法を紹介します。

## リポジトリごとの設定を強制する

`useConfigOnly` という設定を `true` にしておくことで、グローバルも含め `user.name` と `user.email` を指定していないとコミットできなくなります。

```sh-session
❯ git config --global user.useConfigOnly true
```

ただし、グローバルの設定があるとそれを使用するようになるため、リポジトリ毎で明示的に指定したい場合は、グローバルの設定を削除してリポジトリ毎に都度設定させるようにします。

```sh-session
❯ git config --global --unset user.email
❯ git config --global --unset user.name
```

これらの設定をした上で、ユーザー設定をしていないリポジトリでコミットをしようとすると下記のエラーが表示されるようになり、設定し忘れに気づくことができるようになりました。

```sh-session
❯ git commit -m "first commit"
Author identity unknown

*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: no email was given and auto-detection is disabled
```

:::message
`user.useConfigOnly` は、Git バージョン 2.8.0 以降から設定可能になります。
:::

## ディレクトリ単位で config を自動で切り替える

設定を強制させることでリポジトリ毎のユーザー設定を間違えることはなくなりましたが、都度リポジトリに設定することになるので少々面倒です。

そこで gitconfig で設定できる `includeIf` というのを使って、ディレクトリ単位でアカウントを切り替えるようにします。

`includeIf` は、gitconfig 内で使用できる機能で、特定の条件が満たされたときに特定の設定を適用することができます。

例えば、個人用（ private ）と仕事用（ works ）が以下のようなディレクトリで別れているとします。

```text
~/
├── private
└── works
```

private には個人用の情報で、 works には仕事用の情報を設定するとした場合、下記の config ファイルを作成します。

```text
~/
├── .gitconfig           # グローバルの config ファイル
├── .gitconfig-private   # 個人用の config ファイル
└── .gitconfig-works     # 仕事用の config ファイル
```

それぞれ設定したい情報を各設定ファイルに追記します。

```text:.gitconfig-private
[user]
  name  = private-user
  email = private-user@example.com
```

```text:.gitconfig-works
[user]
  name  = company-user
  email = company-user@company.example.com
```

そして、 `.gitconfig` で `includeIf` を使って作業ディレクトリ毎に読み込むファイルを設定します。

```text:.gitconfig
[user]
  [includeIf "gitdir:~/private/"]
    path = ~/.gitconfig-private
  [includeIf "gitdir:~/works/"]
    path = ~/.gitconfig-works
```

これで、指定したディレクトリ配下のリポジトリは、適用された config のユーザー情報で設定されるようになりました。

private 配下のリポジトリで user.name と user.email を確認すると意図した設定となっていることが確認できます。

```sh-session
❯ cd ~/private/private-test/
❯ git config user.name
private-user
❯ git config user.email
private-user@example.com
```

works 配下のリポジトリも同様に確認できました。

```sh-session
❯ cd ~/works/works-test/
❯ git config user.name
company-user
❯ git config user.email
company-user@company.example.com
```

例外的に特定のリポジトリだけ情報を変えたい場合は、通常通り local の gitconfig を設定することで上書きされるため問題ありません。

```sh-session
❯ cd ~/works/works-test/
❯ git config user.name "company-user-1"
❯ git config user.email
company-user-1
```

これで、リポジトリ毎に設定を行わずに、指定したディレクトリ配下のユーザーが自動切り替えされるようになりました。

:::message
`includeIf` は、Git バージョン 2.13.0 以降から設定可能になります。
:::

## まとめ

今回は、 `useConfigOnly` 設定を使用してユーザー設定の強制を行い、 `includeIf` 設定を使用してディレクトリ単位でユーザー情報を自動で切り替える方法について紹介しました。

これにより、リポジトリ毎にユーザー設定を行う手間を省き、設定のミスを防ぐことができます。

Git は開発をしていれば使用することが多いと思うので、是非この設定を参考にストレスフリーになってみてください。


Git を使っていると個人や会社、その他クライアントなどでリポジトリのユーザー名・ユーザーアドレスを切り替えたいことがよくありますよね。
設定の手間や設定し忘れなどを防ぐために、今回はリポジトリ毎に設定を自動で切り替える方法を紹介します。

リポジトリ毎の Git ユーザー情報を自動で切り替える

## はじめに

以前は、[Alfred](https://www.alfredapp.com/) の無料版と [Clipy](https://clipy-app.com/) というアプリケーションを併用していましたが、ワークフローを導入したいと思い、Alfred の有料版を購入しました。

今回は有料版を購入したのを機に、環境設定の見直しやワークフローの導入・カスタマイズを行い作業効率の改善をしたので、その内容をメモがてら紹介します。

## 無料版と有料版の違い

Alfred の無料版には使用できない機能がいくつかあります。
その中でも、有料版でしか使用できない強力な機能は以下の通りです。

- クリップボード履歴
- スニペット
- 1Password連携
- ワークフロー

https://webrandum.net/alfred4-comparison-powerpack/

1Password は使用していないため、クリップボードとスニペットは Clipy というアプリで代用することができました。

ただ、Notion から気軽にメモを取るために、ワークフローを使用したかったため、有料版を購入しました。

ワークフローを必要としない場合は、無料版でも十分だと思います。

## 基本設定

### Clipboard の Hotkey の設定

Clipy を使っていたときは `⇧ + ⌘ + V (シフト + コマンド + V)` だったので、それに合わせて Alfred の Hotkey を変更しました。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/c19acc1ceebf4e86aa354a8bcb05b246/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%2015.59.04.png)

### カンマ付きの数字も電卓で計算できるようにする設定

デフォルトの設定ではカンマ付きの数値は文字列の扱いとなって電卓で計算が出来ません。

カンマ付きの数値をコピペで計算したいケースがちょいちょいあったので、電卓設定の Input にある「Ignore thousands grouping separator」にチェックを付けると、カンマ付きの数値でも計算してくれるようになります。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/de874889eae64e239e6aa89e838201a2/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%2016.04.13.png)

### Alfred 起動時に自動で英語入力にする設定

Alfred のコマンドは英語となっているため、キーボードが日本語になっていると、 keyword を入力するときに英語に入力切り替えをする手間が増えます。

Advanced の Force Keyboard を `Alphanumeric` に設定しておくと、Alfred 起動時には必ず英語入力になります。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/3985e50f0a68425587a55260523c5416/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%2016.22.24.png)

### ターミナルアプリを iTerm2 に変更

Alfred のターミナル/シェル機能はターミナルを開くだけではなく、Alfred からターミナルで使えるコマンドを実行することができます。

ただ、iTerm2 は Hotkey があり、直接 iTerm2 を開いて実行するため実際は設定不要な気がします。というか不要ですが、まぁどうせならということで設定します。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/53cedce004b446eba8122fe1c468e238/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%2016.30.22.png)

デフォルトでは Prefix が `>` となっているので、変えたい人は好みで変えて下さい。

iTerm2 の設定ですが、 Application を `Terminal` から `custom` に変更します。

`custom` の場合はスクリプトを入力する必要があるので、ターミナルから `curl` コマンドを実行してスクリプトを取得します。

```bash
curl --silent 'https://raw.githubusercontent.com/vitorgalvao/custom-alfred-iterm-scripts/master/custom_iterm_script.applescript' | pbcopy
```

https://github.com/vitorgalvao/custom-alfred-iterm-scripts

クリップボードにコピーされているので、 Alfred にペーストします。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/af145fcffaec483ab3b3dd750cd011f1/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%2016.36.34.png)

これで、開くターミナルアプリが iTerm2 になりました。

### 設定ファイルを iCloud に同期させる設定

PC を変えたときでも環境設定は同じにしたいです。

Alfred は設定ファイルの同期やバックアップの作成ができるので Dropbox や iCloud に同期させる設定しましょう。

Advanced の Syncing にある「Set preferences folder...」を選択してフォルダを選択します。

自分の場合は iCloud の Documents を設定しています。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/43409e4eaa08461b969d38ae20232482/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%2016.43.06.png)

## ワークフローの設定

Alfred にはワークフローという有料版でしか使用できない機能があり、この機能を使うと色々と作業を効率化させることができます。

Alfred のワークフローは公式が [Alfred Gallery](https://alfred.app/) から提供していたり、誰かが作っていたり、自作で作ったりすることができます。

色々と便利なワークフローを入れたので、気になったのがあったら試してみて下さい。

### FastNotion（自作）

FastNotion は Notion 公式アンバサダーの [Tsuburaya](https://twitter.com/___35d) さんが紹介しているワークフローです。

このワークフローは Alfred で入力したメモを Notion の指定したデータベースに保存することができる自作のワークフローです。

具体的な仕組みとしては、Alfred で入力したテキストを Notion API を使用してデータベースに保存するスクリプトを実行させています。

Notion は好きでいつも使っているのですが、簡易的なメモを取るときは結構めんどくさくて悩みだったので、このワークフローを入れてからメモが楽になりました。

具体的な設定方法については YouTube で紹介してくれているので、そちらを参考にしてみて下さい。

https://www.youtube.com/watch?v=Hoge2RZCrl0

ただ、動画で設定しているときの Notion API のバージョンが古いため、実際のコードの部分は最新の公式のドキュメントを参考に置き換えて下さい。

https://developers.notion.com/reference/post-page

### Colors

RGB, Hex のカラーコードを変換・表示してくれるワークフローです。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/211a21ceae70436e8947822a32f56b3a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%2017.25.22.png)

http://www.packal.org/workflow/colors

### Terminal Finder

ターミナルから Finder への移動やその反対の作業をよく行う人には便利です。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/ffa17f1c34f34835a6c70bb9358a8655/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%2017.27.13.png)

https://github.com/LeEnno/alfred-terminalfinder

### Google Suggest

g + keyword で検索したキーワードの検索候補をサジェスト表示してくれます。

いちいちブラウザから検索する必要がないので楽です。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/20f8a035a63e45b89bc09f01c1759a0e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%2018.04.04.png)

https://alfred.app/workflows/alfredapp/google-suggest/

### Deepl-Translate

Alfred で Deepl 翻訳が使えます。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/77b18588427545ac896a18f2df53810c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%2018.08.52.png)

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/fd7fc798040c4b9dac3b388a5e12c54a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%2018.09.03.png)

https://github.com/AlexanderWillner/deepl-alfred-workflow2

デフォルト設定では、優先言語がドイツ語 (DE) と英語 (EN) で、訳文の言語が英語になっています。

そのため、日本語 ⇔ 英語とするための設定を行います。

実際の設定方法はこちらの記事を参考に。

https://tomi-kun.hatenablog.com/entry/2022/10/13/001546

### Notion Search

Notion のページ検索を Alfred 上からできるワークフローです。

Notion のページを開きたいときは、 Notion アプリを開いてから `⌘ + P` でページ検索を行っていましたが、Alfred から一発でページ検索ができるようになります。

ただ、1 つのワークスペースしか設定できないので、複数ワークスペースを検索したい場合は実現出来なそうです。

設定が結構大変ですが、[公式の手順](https://github.com/wrjlewis/notion-search-alfred-workflow#get-your-workflow-variables)を参考に設定ができるので確認してください。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/c0955f2c8a4b4c5fa41808758d671a30/S__179093509.jpg)

https://github.com/wrjlewis/notion-search-alfred-workflow

### GitHub

Github のリポジトリや PullRequest, issue などを開くことができるワークフローです。

複数リポジトリがある場合や、PR を作成するさいにすぐに画面を開くことができるので便利です。

こちらは公式の Setup 手順に従って設定をして下さい。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/50c11ae856c44af891a5ef00f8939d3c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%2018.35.41.png)

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/71ad0ea0265645c4ae12b73c9b675d82/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-18%2018.34.57.png)

https://github.com/gharlan/alfred-github-workflow

## その他のランチャーアプリ

Alfred の有料版を購入してから知ったのですが、Raycast というランチャーアプリも便利みたいです。

https://www.raycast.com/

しかも最近 Raycast AI が導入されたので、ランチャーから ChatGPT のように AI が動いてくれます。

使ったことはないのですが、便利そうだしかっこいいので Alfred を使ってみようと思ってる人は是非比較して試してみて下さい。

## 最後に

今までは Spotlight より便利なランチャーアプリとしてしか使用していませんでしたが、有料版の購入をきっかけに設定を見直したりワークフローを導入したことで作業効率が上がりました。

他にもいろんなワークフローがあるので、今後も便利なものがあれば導入していこうと思います。


有料版の Alfred を購入したのを機に、環境設定の見直しやワークフローの導入・カスタマイズを行い作業効率の改善をしたので、その内容をメモがてら紹介します。

Alfredの有料版を買ったので作業効率を上げるための各種設定メモ

## はじめに

このサイトは Next.js で構築し、記事コンテンツは microCMS で管理しています。

基本的なスタイリングについては chakra-ui というコンポーネントライブラリを使用しているため、細かい部品ごとのスタイリングはライブラリに任せています。

https://chakra-ui.com/

記事は markdown 記法のものを microCMS から取得し、zenn が提供しているライブラリを使用して HTML へのパース及びスタイリングを行っています。

このライブラリを導入することで、zenn 独自のマークダウン記法も使用できる上に、リンクをカードにしてくれたり、Twitter や Youtube の埋め込みも勝手にやってくれます。

今回の記事で自分と同じような構成を考えている人の参考になれば良いなと思います。

サイトの構築自体はこちらを参考に

https://www.yukimasa.net/posts/created-jamstack-personal-site

## 注意事項

- microCMS のリッチエディタを使用している場合は、markdown 記法に変換したものを新たなフィールドに移動する必要がある
  - 記事が多いほど手間がかかる
- 執筆は別のエディタで行い、コンテンツを mircoCMS に貼り付ける方法がやりやすいが、その場合は画像だけ microCMS にアップしておく必要がある
- zenn の独自記法に依存するため、他の箇所でコンテンツ利用する場合は使用できない
  - スタイルの恩恵だけ受けて、独自記法は使用しないようにするなど工夫が必要

## 使用するライブラリ

### zenn-markdown-html

zenn 独自の記法を含む markdown を HTML に変換するためのライブラリ。

https://github.com/zenn-dev/zenn-editor/tree/main/packages/zenn-markdown-html

### zenn-content-css

zenn-markdown-html で markdown から変換された HTML に適用するためのCSS。

https://github.com/zenn-dev/zenn-editor/tree/main/packages/zenn-content-css

### zenn-embed-elements

markdown の zenn 独自の埋め込み要素をHTMLに変換するためのライブラリだが、現在は KaTeX による数式のレンダリングのためにのみ利用している。

https://github.com/zenn-dev/zenn-editor/tree/main/packages/zenn-embed-elements

## バージョン

- Next.js: 13.1.6
- React: 18.2.0
- zenn-content-css: 0.1.137
- zenn-embed-elements: 0.1.137
- zenn-markdown-html: 0.1.137

## microCMS の記事投稿をリッチエディタからテキストエリアに変更する

新規で microCMS を構築する場合は markdown 用にテキストエリアのフィールドを用意すれば良いのですが、すでにリッチエディタで運用している場合は引っ越しが必要です。

方法としては、現在のリッチエディタを生かしたまま、新たにテキストエリアのフィールドを新規追加します。

リッチエディタの内容を markdown 記法に変換し、作成したテキストエリアのフィールドに追加します。

変換方法は何でもいいのですが、自分の場合はリッチエディタのコンテンツを Notion のページにコピペして、そのページを markdown でエクスポートしたものをテキストエリアに貼り付けていました。

そうすることで画像のリンク先も変更することなく引っ越しできるのですが、他に方法があれば何でも良いです。

実装が完了したら不要になったリッチエディタは削除しましょう。

## Zennのマークダウン記法を導入

導入自体はすごい簡単で、こちらの記事を参考に実装してください。

https://zenn.dev/team_zenn/articles/intro-zenn-markdown

ただ、上記の記事で実装したときに、リンクカードやTwitterの埋め込みが動かない事象が発生しました。

`_document.tsx` に script を埋め込む用に記載がありますが、`_document.tsx` は SSR のみの実行なので、 `pages` ごとに以下の `Head` タグを追加しました。

```tsx
import Head from "next/head";

// ..省略..

<Head>
  <script src="https://embed.zenn.studio/js/listen-embed-event.js"></script>
</Head>
```

### 追記（2023/3/1）

zenn-markdown-html のバージョンアップにより、埋め込み要素がレンダリングされない事象が発生しました。

https://github.com/zenn-dev/zenn-editor/pull/420

上記の PR で `markdownToHtml` に `embedOrigin` を追加したようで、今までと同じ様に動作させるためには、以下の記述を追記します。

```diff tsx
- const content = await markdownToHtml(post.content || '')
+ const content = await markdownToHtml(post.content || '', {
+   embedOrigin: "https://embed.zenn.studio",
+ })
```

## Zennのマークダウン記法

https://zenn.dev/zenn/articles/markdown-guide

zenn は基本的なマークダウン記法に加えて、アコーディオンやメッセージなど独自のマークダウン記法も用意しています。

:::message
メッセージをここに
:::

:::details アコーディオン
表示したい内容
:::

また、コードブロックは言語指定とファイル名の表示も可能です。

```ts:index.ts
const hoge: string = "Hello, world!"
console.log(hoge)
```

シンタックスハイライトには Prism.js を使用しており、対応言語はこちらから確認できます。

https://prismjs.com/#supported-languages

zenn 記法は便利なのですが、 headlessCMS のコンテンツなのでなるべく独自記法には依存させたくは無いです。

が、現状このサイト以外でコンテンツを使用する予定は無いので、ひとまず気にせず使ってます。

## 記事執筆について

もともとは microCMS のリッチエディタを使用していましたが、基本的には Notion で書いた記事を貼り付けて、画像だけ別途アップロードする運用でした。

今は執筆時に markdown プレビューを見ながら書きたいので、Visual Studio Code の zenn 拡張を使用して記事を書いています。

ただ、画像だけは変わらず microCMS にアップロードしてそのリンクを使用しているので、まだ完全ではないなといったところです。

https://zenn.dev/negokaz/articles/aa4e12b76d516597a00e

## まとめ

もともとは拾ってきた適当な css を貼り付けて、シンタックスハイライトは highlight.js というライブラリを使用しており、スタイルの改善をしたいなといったと思ったところから始まりました。

結果的に執筆も markdown に代わり、スタイリングも zenn と同じで見やすくなったので良かったです。

まだ改善箇所はありますが、このサイトを遊び場として色々と実装していきたいなと思います。


Next.js で構築したサイトに microCMS で管理しているコンテンツを zenn のマークダウン記法で表示させる方法を紹介します。

Next.js × microCMSでZennのマークダウンを表示するブログの作り方

## はじめに

今回は Next.js で構築したサイトでページ遷移するときに、画面上部にプログレスバーを表示させ読み込み状態がわかるようにする方法を紹介します。

プログレスバーは Zenn などでも使用されている NProgress というライブラリを使用することで簡単に表示させることができます。

https://ricostacruz.com/nprogress

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/bae6afc112c94202be6fedecd3a865b1/nprogress.gif)

## 環境

- Next.js: 13.0.6
- React: 18.2.0
- NProgress: 0.2.0

## 実装手順

1. ライブラリのインストール
2. プログレスバーを表示させる hooks の作成
3. `_app.tsx` に hooks の呼び出し処理を実装する

### ライブラリのインストール

https://github.com/rstacruz/nprogress

ライブラリをインストールする

```sh
❯ yarn add nprogress
```

型定義をインストール

```sh
❯ yarn add -D @types/nprogress
```

### プログレスバーを表示させる hooks の作成

ページ遷移時にプログレスバーを表示させる hooks を作成します。

Next.js の `useRouter` でページ遷移時のイベントを取得できるので、イベントごとにプログレスバーの表示/非表示を切り替えます。

プログレスバーの制御は `NProgress.start()` と `NProgress.done()` を実行するだけです。

まずは `src/hooks/useProgressBarAtTransition.ts` を作成します。

```ts:src/hooks/useProgressBarAtTransition.ts
import 'nprogress/nprogress.css'

import { useRouter } from 'next/router'
import NProgress from 'nprogress'
import { useEffect } from 'react'

export const useProgressBarAtTransition = (): void => {
  const router = useRouter()

  useEffect(() => {
    const handleStart = () => {
      NProgress.start()
    }

    const handleStop = () => {
      NProgress.done()
    }

    router.events.on('routeChangeStart', handleStart)
    router.events.on('routeChangeComplete', handleStop)
    router.events.on('routeChangeError', handleStop)

    return () => {
      router.events.off('routeChangeStart', handleStart)
      router.events.off('routeChangeComplete', handleStop)
      router.events.off('routeChangeError', handleStop)
    }
  }, [router])
}
```

プログレスバーのスタイルは `import 'nprogress/nprogress.css'` でライブラリのデフォルトスタイルを適用します。

イベントごとの処理は `router.events.on` でイベント名とイベント発生時の処理を指定することで実行できます。

各イベントについては以下のとおりです。

- `routeChangeStart` : 画面遷移が変更され始めたときに発生
- `routeChangeComplete` : 画面遷移が完全に変更されたときに発生
- `routeChangeError` : 画面遷移時にエラーが発生した場合、または画面の読み込みがキャンセルされた場合に発生

useEffect でイベントごとの処理を指定し、コンポーネントが破棄された際のクリーンアップ処理は `router.events.off` で行います。

その他の router の情報については [公式ページ](https://nextjs.org/docs/api-reference/next/router#routerreload) で確認できるので、時間があるときにでも覗いてみてください。

https://nextjs.org/docs/api-reference/next/router#routerreload

### `_app.tsx` に hooks の呼び出し処理を実装する

全ページに適用させるために `_app.tsx` で作成した hooks を実行させます。

```tsx:_app.tsx
import type { AppProps } from 'next/app'

import { useProgressBarAtTransition } from '@/hooks/useProgressBarAtTransition'

const MyApp = ({ Component, pageProps }: AppProps) => {
  useProgressBarAtTransition()

  return <Component {...pageProps} />
}

export default MyApp
```

これで画面遷移を行なうと画面上部にプログレスバーとスピナーが表示されていることが確認できるかと思います。

## カスタマイズ

実装としては完了となりますが、カスタマイズもいくつかできるので試したいと思います。

詳細については公式の Github に記載があるので確認してみてください。

https://github.com/rstacruz/nprogress#advanced-usage

### スピナーを非表示にする

画面右上に表示されるスピナーはプログレスバーが表示されているので非表示にしたいと思います。

```ts:src/hooks/useProgressBarAtTransition.ts
// ..省略..

export const useProgressBarAtTransition = (): void => {
  const router = useRouter()

  // スピナーを非表示にする
  NProgress.configure({ showSpinner: false })

  useEffect(() => {

    // ..省略..

  }
}
```

`NProgress.configure({ showSpinner: false })` を追加するだけでスピナーが非表示となります。

スピナーの設定以外にも速度やアニメーションなども設定できるみたいなので、気になる人は試してみてください。

### スタイルを修正する

スタイルはライブラリデフォルトのものを指定していましたが、プログレスバーの色などを変更したい場合は css を修正します。

まずは、公式の css をプロジェクトに作成するので、 Github からコピーしてきます。

https://github.com/rstacruz/nprogress/blob/master/nprogress.css

コピーしてきたら `#29d` が指定されている箇所を変更したい色に置換してみます。

変更したら `_app.tsx` でcssをインポートします。

```tsx:styles/nprogress.css
import '../../styles/nprogress.css'

// ..省略..
```

そうするとプログレスバーのカラーが変更されたことが確認できると思います。

## まとめ

NProgress を使うだけで簡単に画面遷移時のプログレスバーが表示できたかと思います。

細かいカスタマイズもできるので色々いじってみてください。

## 参考

https://caspertheghost.me/blog/nprogress-next-js

https://fumidzuki.com/knowledge/5013/

https://learnjsx.com/category/4/posts/nextjs-nprogress


今回は Next.js で構築したサイトでページ遷移するときに、画面上部にプログレスバーを表示させ読み込み状態がわかるようにする方法を紹介します。
プログレスバーは Zenn などでも使用されている NProgress というライブラリを使用することで簡単に表示させることができます。

Next.jsで画面遷移時にプログレスバーを表示させる

## nextのアップグレード

[Upgrade Guide | Next.js](https://nextjs.org/docs/upgrading)

https://nextjs.org/docs/upgrading

公式に従ってコマンド実行

```sh
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
```

## <Image>コンポーネントのimportの修正

`next/future/image` から `next/image` に変更されたので、使用している箇所の修正

※ 今までの `next/image` は `next/legacy/image` になりました。

公式から `codemod` が用意されているので実行

```sh
npx @next/codemod next-image-to-legacy-image ./src
```

`next/image` は `next/legacy/image` となり、`next/future/image` は `next/image` に変わりました。

## <Link>コンポーネントの修正

今までは `<a>` タグを子として追加していたのが、今後は不要になった。

そのため `<Link>` コンポーネントの `<a>` タグを削除する必要がある。

こちらも公式から `codemod` が用意されている

```sh
npx @next/codemod new-link ./src
```

上記コマンドを実行すると `<a>` タグを `next/link` から安全に削除するか、 `<Link>` コンポーネントに `legacyBehavior` を追加します。


このサイトのNext.js 12→13 アップグレードメモ

Next.js 12→13 アップグレードメモ

## はじめに

年が明けてから少し時間が経ってしまいましたが、2023年6月にはエンジニアとして4周年になるので、年の境目をきっかけに今まで触れたことのある技術や経験したことについて振り返ってまとめたいと思います。

## 言語

- Ruby（1年8ヶ月）
- Swift（1年8ヶ月）
- Java（1年8ヶ月）
- PHP（2年4ヶ月〜）
- TypeScript（2年4ヶ月〜）

### コメント

Ruby, Swift, Java は同じ案件で使用。

Ruby on Rails で構築された管理システムの開発と、iOS, Android の開発で Swift, Java を使用したモバイルアプリの開発を行っていました。

エンジニアなりたてほやほやだったので、最初は開発より Git やその他周辺知識のキャッチアップで忙しかった気がします。

管理システム開発したりアプリのリリースまで行ったりしたので、だいぶ良い経験になったと思います。

PHP, TypeScript は今の案件で使っている言語で、Ruby とかよりはちゃんと身についている感じです。

## フレームワーク・ライブラリ

### フロントエンド

- React/Next.js
  - [Redux Toolkit](https://redux-toolkit.js.org/)
    - 状態管理ライブラリ
  - [Redux Persist](https://github.com/rt2zz/redux-persist)
    - 管理している状態をブラウザの storage と同期させるライブラリ
  - [React Hook Form](https://react-hook-form.com/)
    - フォームバリデーションライブラリ
  - [Material UI](https://mui.com/)（現: MUI）
    - UIコンポーネントを提供しているライブラリ
    - v5でブランド名が MUI に変更された（破壊的な変更もあって、乗り換えがまだできていない…）
  - [Chakra UI](https://chakra-ui.com/)
    - 同じくUIコンポーネントを提供しているライブラリ
    - 個人的にはこっちのほうがUtility-Firstで好み
    - → MUI より Utility-First で style が当てやすく、TailwindCSS はコンポーネントではなく class を提供している感じなので、結局は自分でUIを組み立てなきゃいけない
    - → ただ、MUI より提供しているコンポーネントが少ないのがデメリットかも

### バックエンド

- Ruby on Rails
- Laravel
  - [Laravel Sanctum](https://readouble.com/laravel/9.x/ja/sanctum.html)
    - SPA での認証に使用
  - [Laravel-permission](https://spatie.be/docs/laravel-permission/v5/introduction)
    - ロールを使用したアクセス制御を実現するために使用
    - **RBAC方式（Role Base Access Control）**
    - → User ⇔ Role ⇔ Permission
  - [Laravel-Dacapo](https://github.com/ucan-lab/laravel-dacapo)
    - マイグレーションファイルをスキーマで管理し生成するライブラリ
    - **※ プロジェクト構築時のみ使用し、運用フェーズでは通常のマイグレーション運用とするので、使用後は削除する**
  - [Laravel Enum](https://github.com/BenSampo/laravel-enum)
    - Laravel で Enum をいい感じに使えるようにするライブラリ
    - PHP8.1 からは Enum が追加されたので不要になりそう
  - [L5 Swagger](https://github.com/DarkaOnLine/L5-Swagger)
    - PHPdoc みたいな形で Swagger のapi仕様書を作成するために使用

#### 参考

https://qiita.com/ucan-lab/items/e75ef2bba744d9dcd4d0

### コメント

Rails を使っていたときは テンプレートエンジン で View を作成していましたが、現在担当している案件では、フロントを Next.js/React で構築し、 Laravel でAPIサーバーを立てています。

認証に Laravel Sanctum を使用していたが、最近 AWS Cognito を導入して実装内容が変わった。

AWS Cogntio は Laravel から sdk を使用する方法での認証となっているので、調べても情報が少なく苦労したがかなりの経験となった。

## プラットフォーム

### GCP

https://console.cloud.google.com/?hl=ja

- コンピューティング
  - GAE（Google App Engine）
  - GCE（Google Compute Engine）
  - GCF（Google Cloud Functions）
- ストレージ・データベース
  - GCS（Google Cloud Storage）
  - Cloud SQL
- 管理ツール
  - Cloud Monitoring
  - Logging
- ネットワーキング
  - Cloud Load Balancing
  - Cloud NAT
  - Cloud VPN
- デベロッパーツール
  - Cloud SDK
  - Cloud Scheduler
  - Cloud Tasks

### AWS

https://aws.amazon.com/jp/

- Amazon Cognito
- Amazon SES（Simple Email Service）

### コメント

基本的には GCP を使用していたが、 認証に Cognito を使用するとのことから AWS も触るようになった。

スケーラビリティがどうとか細かい設計や設定はまだ怪しいが、基本的な操作などは一通りできるようにはなっている感じ

## ツール・サービス

### Docker

- 主に開発環境で使用
- 今はほとんどがDockerで最初の頃は vagrant で構築したりしていた
- Dockerの細かいコマンドとかは忘れてたりするが基本概念はある程度理解
- このの記事が理解できたら運用する上では十分そう

https://zenn.dev/suzuki_hoge/books/2022-03-docker-practice-8ae36c33424b59

### Vercel

- OG Image Generation
  - OG画像を動的に生成するライブラリ
  - 実際にこのサイトで使用しているので、こちらを参考に

https://www.yukimasa.net/posts/vercel-ogimage-generation

- Vercel Analytics
  - アプリケーションのパフォーマンスやぺーじアクセスなどを計測できる
  - Google Analitics より自由度は低そうだが試しに入れてみた

### **[PAY.JP](http://pay.jp/)**

- クレジットカード決済の代行サービス
- 都度課金や継続課金に対応しているが、最近だと Stripe のほうがいいぽい？

### [SendGrid](https://sendgrid.kke.co.jp/)

- メールサーバーとして使用
- 無料枠があるし使い勝手はいい感じ

## おわりに

2022年は案件で忙しかったこともあり、キャッチアップやアウトプットが少なかったなと感じた年だった。（案件での経験はかなり得たが）

Next.js でこのサイトを作ったりした分、2023年はもうちょっとキャッチアップやアウトプットを増やしていこうと思いました。


2023年6月にはエンジニアとして4周年になるので、年の境目をきっかけに今まで触れたことのある技術や経験したことについて振り返ってまとめたいと思います。

2023を迎えたということで、今まで触れた技術などをまとめとく

この記事は [ミライトデザイン Advent Calendar 2022](https://qiita.com/advent-calendar/2022/miraito-inc) の23日目の記事です。

https://qiita.com/advent-calendar/2022/miraito-inc

前日の [kakiuchi](https://qiita.com/tkek321) の記事に続いて書いていきます。

https://qiita.com/tkek321/items/2aa7757514532dbda2c4

## はじめに

2022/10/10にvercelからOG Imageを自動生成するライブラリの発表がありました。

https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images

このライブラリを使ってNext.jsで作ったページのOG画像を動的に生成する方法を紹介します。

前回の記事を例にこんな感じで表示させることができます。

https://twitter.com/yyykms123/status/1601279551430328320

## 環境

- react: 18.2
- next: 12.3.1
- vercel/og: 0.0.20

## OG画像を生成するライブラリ

vercelが発表した `@vercel/og` というライブラリは、[Vercel Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions) でHTML/CSS（JSX）でマークアップしたものを動にOG画像として生成することができるライブラリです。

[Vercel Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions) とは、エッジで関数を実行できる環境となるので、`@vercel/og` は `runtime: 'edge'` という設定を行ってEdge Runtimeで使用する必要があります。

また、Next.js は v12.2.3 以降を使用する必要があります。

コアエンジンでは [Satori](https://github.com/vercel/satori) と [Resvg](https://github.com/yisibl/resvg-js) という2つのライブラリを使用して、最終的にPNGに変換しています。

具体的には、SatoriというライブラリがHTML/CSS（JSX）からSVGを生成し、Resvgが生成されたSVGをPNGに変換しているような流れで、これをEdge環境で行っています。（JSX → SVG → PNG）

https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation

## 使用方法

基本的には公式の通り進めてけば問題ないです。
サンプルリポジトリを作成しているので参考に見てみてください。

https://github.com/yukimasa/vercel-og-sample

### 画像生成の設定

まずはライブラリのインストール

```
$ yarn add @vercel/og
```

ライブラリをインストールしたら `pages/api` 配下に `og.tsx` を作成して、og画像を生成するためのAPIエンドポイントを作成します。

config に `runtime: 'edge'` を指定して `ImageResponse` を return するだけです。

今回は公式の「Hello world!」の画像で設定をしています。

```tsx:pages/api/og.tsx
import { ImageResponse } from '@vercel/og';

export const config = {
  runtime: 'edge',
};

export default function handler() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 600,
    },
  );
}
```

作成したら `yarn dev` でサーバーを立ち上げ [http://localhost:3000/api/og](http://localhost:3000/api/og) を確認すると画像が生成されていることが確認できます。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/11bf6475eee1476eb2c535f645bb52f0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-22%2023.20.56.png)

画像の生成はこれだけです。

### OGPの設定

ただ、このままだと画像が生成されただけなので、OG画像として表示されるようにするために、pageの `<Head>` に `<meta>` タグを追加します。

ここでは、試しにトップページで確認できるように `pages/index.tsx` で設定します。

実際に確認できるようにvercelにデプロイして絶対パスを指定しておきましょう。

```tsx:pages/index.tsx
<meta
  property="og:image"
  content="<https://vercel-og-sample.vercel.app/api/og>"
/>
```

デプロイできたらOGPを確認できるツールで確認してみましょう。

https://rakko.tools/tools/9/

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/b488b00841d941959682185ec9332840/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2016.01.43.png)

先程確認した画像でOG画像が設定されていることが確認できます。

### ページごとで動的に画像を生成する

画像を生成してOG画像として設定できたことが確認できましたが、このままでは全ページ「Hello world!」の画像となってしまいます。

そのため、次はページごとに動的に画像が変わるように設定していきます。

ページごとにOG画像を生成するためには、queryパラメーターを使用して動的にページタイトルやその他要素を画像に挿入することができます。

```
<https://vercel-og-sample.vercel.app/api/og?title=hogehoge&publishedAt=2020-12-23>
```

まずは、先程作成した `og.tsx` を下記のように修正します。

```tsx:pages/api/og.tsx
import { ImageResponse } from "@vercel/og";
import { NextRequest } from "next/server";

export const config = {
  runtime: "edge",
};

export default function (req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const hasTitle = searchParams.has("title");
  const title = hasTitle
    ? searchParams.get("title")?.slice(0, 100)
    : "My default title";

  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {title}
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  );
}
```

最初と違う点としては、 `searchParams` でパラメーターから `title` のデータを取得して、画像のテキストに挿入しています。

試しに先程トップページで指定したurlに `title` のパラメーターを付与して確認してみます。（画像の確認なので、localhostで問題なし）

開発環境で、apiのパスにアクセスしてみます。

[http://localhost:3000/api/og?title=OG画像を動的に生成](http://localhost:3000/api/og?title=OG%E7%94%BB%E5%83%8F%E3%82%92%E5%8B%95%E7%9A%84%E3%81%AB%E7%94%9F%E6%88%90)

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/517cebf179af4d0eb3bae2a1197cb0d7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2016.30.09.png)

するとパラメーターで渡したtitleが画像で表示されていることを確認できました。

### サンプルブログを作成し、ページごとにパラメーターを変更してOG画像を設定する

あとは、トップページではなくページごとの `<meta>` タグにクエリーパラメーターを設定するようにします。

サンプルとして、ブログのように一覧ページと詳細ページを作成して各ページで動的にOG画像が生成されるようにします。

### APIの作成

まずはブログのダミーデータを取得できるようにAPIを作成します。

Postの型定義

```ts:types/post.ts
export type Post = {
  id: string;
  title: string;
};
```

ブログのダミーデータ

```ts:mock/posts.ts
import { Post } from "../types/post";

export const postsData: Post[] = [
  {
    id: "4d20c87f-3497-125b-209d-6aa0c44333ac",
    title: "OG画像を動的に生成する",
  },
  {
    id: "46ab05ad-f790-574e-5367-a88a21bf6916",
    title: "Next.jsでJamstackな個人サイトを作った",
  },
];
```

post一覧取得API

```ts:pages/api/posts/index.ts
import type { NextApiRequest, NextApiResponse } from "next";
import { postsData } from "../../../mock/posts";
import { Post } from "../../../types/post";

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Post[]>
) {
  res.status(200).json(postsData);
}
```

post詳細API

```tsx:pages/api/posts/[id].ts
import type { NextApiRequest, NextApiResponse } from "next";
import { postsData } from "../../../mock/posts";
import { Post } from "../../../types/post";

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Post>
) {
  const posts = postsData;
  const { id } = req.query;
  const post = posts.filter((post) => post.id === id)[0];

  res.status(200).json(post);
}
```

これで、ブログのデータを取得できるAPIができました。

試しに確認してみます。

[http://localhost:3000/api/posts](http://localhost:3000/api/posts)

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/6f1f00312d8d495bb25ed36654e72385/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2017.14.55.png)

[http://localhost:3000/api/posts/4d20c87f-3497-125b-209d-6aa0c44333ac](http://localhost:3000/api/posts/4d20c87f-3497-125b-209d-6aa0c44333ac)

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/f96020b945184a32a4c7711f4f59659d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2018.07.08.png)

これで、一覧及び詳細データが取得できました。

APIができたら、この時点でデプロイをしておきます。

この後ページを作成しますが、APIからダミーデータを取得して事前ビルドをする必要があるので、本番環境でAPIが無いと事前ビルドでデータが取得できずにエラーとなってしまいます。

### ページの作成

あとは一覧と詳細のページファイルを作成しますが、開発環境と本番環境でurlが変わるようにenvの設定をしておきます。

```:.env.local
NEXT_PUBLIC_APP_URL=http://localhost:3000
```

本番環境では、自身がデプロイした環境で設定してください。

vercel の場合だと、ダッシュボードの `Settings > Environment Variables` で設定ができます。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/b80abfe456594d7192212951fc5228ef/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2018.45.58.png)

では、ダミーデータをAPIから取得して、一覧画面に表示させるためのページファイルを作成します。

```tsx:pages/posts/index.tsx
import { GetStaticProps, NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { Post } from "../../types/post";

type DataType = {
  contents: Post[];
};

export default function Posts({ contents }: DataType) {
  return (
    <>
      <Head>
        <title>posts</title>
        <meta name="description" content="記事一覧" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>

      <main
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          alignItems: "center",
          padding: "6rem",
        }}>
        <ul>
          {contents.map((post) => (
            <Link key={post.id} href={`/posts/${post.id}`}>
              <li>{post.title}</li>
            </Link>
          ))}
        </ul>
      </main>
    </>
  );
}

export const getStaticProps: GetStaticProps<DataType> = async () => {
  const data = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/posts`).then(
    (data) => data.json()
  );

  return {
    props: {
      contents: data,
    },
  };
};
```

一覧ページを確認するとダミーデータのリストが表示されたことが確認できます。

[http://localhost:3000/posts](http://localhost:3000/posts)

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/5c3c5c8b7b944488aae093d957c756d8/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2018.10.21.png)

次に詳細画面のページファイルを作成します。

```tsx:pages/posts/[id].tsx
import {
  GetStaticPaths,
  GetStaticPathsResult,
  GetStaticProps,
  InferGetStaticPropsType,
  NextPage,
} from "next";
import Head from "next/head";
import { Post } from "../../types/post";
import { ParsedUrlQuery } from "querystring";

type Params = {
  id: string;
} & ParsedUrlQuery;

type DataType = { post: Post };

type Props = InferGetStaticPropsType<typeof getStaticProps>;

export default function Posts({ post }: Props) {
  return (
    <>
      <Head>
        <title>{post.title}</title>
        <meta name="description" content={post.title} />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta
          property="og:image"
          content={`${process.env.NEXT_PUBLIC_APP_URL}/api/og?title=${post.title}`}
        />
      </Head>

      <main
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          alignItems: "center",
          padding: "6rem",
        }}>
        <p>id: {post.id}</p>
        <h2>{post.title}</h2>
      </main>
    </>
  );
}

export const getStaticPaths: GetStaticPaths = async (): Promise<
  GetStaticPathsResult<Params>
> => {
  const data = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/posts`).then(
    (data) => data.json()
  );

  const paths = data.map((post: Post) => {
    return {
      params: {
        id: post.id,
      },
    };
  });

  return { paths, fallback: false };
};

export const getStaticProps: GetStaticProps<DataType, Params> = async ({
  params,
}) => {
  if (!params?.id) {
    throw new Error("Error: ID not found");
  }

  const post = await fetch(
    `${process.env.NEXT_PUBLIC_APP_URL}/api/posts/${params.id}`
  ).then((data) => data.json());

  return {
    props: { post },
  };
};
```

一覧からブログを選択すると詳細画面に遷移され、idとtitleが表示されることが確認できました。

[http://localhost:3000/posts/46ab05ad-f790-574e-5367-a88a21bf6916](http://localhost:3000/posts/46ab05ad-f790-574e-5367-a88a21bf6916)

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/1231fa11cd944264bb1f56bc4ab243de/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2018.10.37.png)

また、詳細ページの meta タグを確認してみてください。

```tsx
<meta
  property="og:image"
  content={`${process.env.APP_URL}/api/og?title=${post.title}`}
/>;
```

上記のように記述していますが、ビルドされたあとはAPIから取得したデータのタイトルが表示されていることが確認できます。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/ee104e9b8f0d44589b1fe01f768befce/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2018.32.41.png)

これで、ページごとにOG画像が生成されるようになったので、最後にデプロイしてOGP確認ツールで見てみます。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/75a32e58be1c41ea84203d2cce0bcf4f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-24%2012.47.05.png)

ページのタイトルを取得してOG画像が設定されていることが確認できました。

## その他カスタマイズ

OG画像の設定はできるようになったので、あとはスタイルをカスタマイズして完成させます。

公式の方でサンプルを用意していたり、play groundで確認できたりするので、後は自分好みにカスタマイズしてスタイルを整えていきましょう。

https://vercel.com/docs/concepts/functions/edge-functions/og-image-examples

https://og-playground.vercel.app/

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/e78d5bace84846ffbe8078f83ceae062/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-24%2012.57.19.png)

## まとめ

もともとOG画像は自分で作成して設定していたりしたので、自動で生成してくれると楽ですし、デザインも統一されるのでとてもいいなと思いました。

Vercelが用意してくれているライブラリで簡単にOG画像が生成できるので、よかったら試してみてください。

次は「NFTと仮想通貨とブロックチェーン関連」について書いてくれる [FrozenVoice](https://qiita.com/FrozenVoice) さんの記事です。

https://qiita.com/FrozenVoice/items/9b5a607ec6c8d8ef9d54

Vercelが新しく出したライブラリを使用してNext.jsで作ったページのOG画像を動的に生成する方法を紹介します。

vercelのog image generationを使用して、Next.jsで動的にOG画像を自動生成する

Next.js × microCMS を使用してJamstackな個人サイトを作ってみました。