<p>microCMS MCP Serverを使ってClaude Desktopからブログ投稿を自動化する実践記事です。</p>

<p>この記事内の「👉ここから先がClaude Desktop×microCMSのMCPサーバーで作成し自動投稿した記事」という見出し以降は自動投稿の内容となります。</p><p>前半は、実際に試した流れや発生したエラーなどを備忘録としてまとめました。</p><h2 id="ha9ea0715ee">試した環境</h2><ul><li>Claude Desktop（Freeプラン）Claude Sonnet 4</li><li>microCMS（Hobbyプラン）</li></ul><h2 id="h31fc5cbc4a">事前準備</h2><p>microCMS MCP Serverの設定については、microCMS公式の「<a href="https://blog.microcms.io/microcms-mcp-server/" target="_blank" rel="noopener noreferrer nofollow">microCMSのMCPサーバーをリリースしました</a>」記事を参考にしました。</p><p>Claude DesktopのJSONにMCPの設定を書いて再起動し、スキーマの読み込みから記事作成まで実際に試してみました。</p><h2 id="h7921b37509">試した流れ</h2><h3 id="hba26efff2d">初回指示内容</h3><blockquote><p>microCMSで作った2つのAPIのスキーマです。まずはこの内容を理解してください。（jsonファイルを添付）</p></blockquote><p>💎microCMSで構築されたブログシステムの構造を理解しました。</p><blockquote><p><a href="https://blog.microcms.io/microcms-mcp-server/" target="_blank" rel="noopener noreferrer nofollow">https://blog.microcms.io/microcms-mcp-server/</a> この記事を読んで設定を試しています。実際に使ってみてClaude Decktopのjsonに設定を書いて再起動、スキーマを読み込ませて記事を書かせてみたという記事を書きたいです。カテゴリはAIを使います。まずは記事を書いてください。</p></blockquote><p>💎記事の内容を作成させていただきます。</p><h3 id="h702129e458">1. POST権限エラー</h3><pre><code>Error: fetch API response status: 400 message is `POST is forbidden.`</code></pre><p><strong>原因</strong><br>microCMSのAPIキー設定でPOST権限が有効になっておらずエラーが発生しました。</p><p><strong>対処</strong><br>APIキー設定でPOST権限をONへ（HobbyプランはAPIキーが1つのため一時的にONにしました）</p><h3 id="hf8bed3c3d0">2. ステータスパラメータエラー</h3><pre><code>Error: fetch API response status: 400 message is Status parameter is not available in the current plan. Please upgrade your plan.</code></pre><p><strong>原因</strong><br>Hobbyプランではステータスパラメータ（下書き指定）が使用できません。</p><p><strong>対処</strong><br>下書きでの保存指示をやめて再指示へ</p><p>Claudeは状況を理解して「下書きでの保存ができないプランのようなので、公開状態で記事を作成します」と自動的に判断してくれました。</p><h3 id="h11f0ef414d"><strong>3. ネットワークエラー</strong></h3><pre><code>Error: Network Error. Details: fetch failed</code></pre><p><strong>原因</strong><br>一時的なネットワークエラーが発生したようです。</p><p><strong>対処</strong><br>Claudeが自動的に少し待ってから再トライしてくれました。</p><h2 id="h4275e6dd0e">💪指示内容を改善してみる</h2><p>Claude（Freeプラン）の文字制限に引っ掛かるためより具体的な指示に変更しました。</p><ul><li>カテゴリは登録済みの「AI」を使う</li><li>sectionというスキーマはカスタムフィールドを繰り返し使用できるようにしている</li><li>コードを書く場合はhighlight、文章を書く場合はricheditorを使う</li><li>他は今回使わなくてよい</li><li>Hobbyプランなので公開ステータスで書いてほしい</li></ul><p>追加でClaudeがカスタムフィールドの使い方を学ぶために、過去の記事データを1記事分のJSONデータとしてスキーマと一緒に渡しました。</p><h2 id="h01bdfecc91">最終的な結果</h2><p>何度か指示を書き直して試しましたが、以下の処理を自動で実行してくれて公開までたどり着けました<strong>😊</strong></p><ol><li>既存カテゴリ「AI」の確認・選択</li><li>記事内容の作成</li><li>公開ステータスでの記事作成</li><li>記事IDのレスポンス返却</li></ol><p>（最後レスポンス返却で制限に引っ掛かったのでまだ続きがったかもしれません・・）</p><h2 id="h06d13437e4">失敗したこと</h2><p>制限に引っ掛かってしまうのでスキーマのjsonを渡した際、解析と記事の作成をまとめて指示するとスキーマの解析が中途半端に。</p><p>書いた記事がカスタムフィールドの形式に合わず、過去記事を探しに行き学習したあと、書き直しをしていました。順序だてて実行することで精度があがることを忘れてはいけないなと反省しました。</p><h2 id="ha214098e44">まとめ</h2><p>有料プランであればさらに多くの状況判断ができそうで、より複雑な記事作成から公開まで自動化できる可能性を感じました。</p><p>実際に最初から最後まで1チャットで完結することはできませんでしたが、何度か試す中で以下のような処理をして柔軟に対応しようとしてくれました💡</p><ul><li>カテゴリの有無確認<ul><li>作成しようとして存在していることがわかると作成をやめて既存カテゴリを選択</li></ul></li><li>他の記事のスキーマ使用方法学習</li><li>エラー発生時の自動対処</li><li>プラン制限の理解と代替案提示<ul><li>Hobbyプランなので下書きにせず公開へ</li></ul></li></ul><p>自動化なのでもちろん楽でした🎉</p><p>装飾付けたりするのが地味に面倒なのですが、自動でリンク設定も別タブにしてくれたりかなり便利です。コードは専用のカスタムフィールドを用意しているのですが、指示したこともあり、正しい使い方で記載してくれました👏</p><p>こんな使い方もできたらいいな..という願いで、フィールド選択や装飾は十分イイ感じなので、サイトリニューアルで別CMSから記事を移行するときに、スクレイピング記事登録、画像アップロードや最適化までしてくれたらかなり楽になりそうですね！</p><p>今後も楽しみです🥳</p>

<h2 id="he1b4333ba2">👉ここから先がClaude Desktop×microCMSのMCPサーバーで作成し自動投稿した記事</h2><p>先日、microCMSからリリースされた「<a href="https://blog.microcms.io/microcms-mcp-server/" target="_blank" rel="noopener noreferrer">microCMS MCP Server</a>」を実際に導入し、Claude Desktopと連携してブログ投稿を自動化してみました。</p><p>MCP（Model Context Protocol）とは、AI アシスタントが外部システムと安全に連携するためのプロトコルで、これによりClaude DesktopからmicroCMSのコンテンツを直接操作できるようになります。</p><p>実際の設定手順から使用感まで、詳しくレポートしていきます。</p>

<h2 id="h4cc8fe4c38">セットアップ手順</h2><h3 id="hfd86c073b8">1. microCMS APIキーの取得</h3><p>まず、microCMSの管理画面からAPIキーを取得します。</p><ul><li>「API キー」メニューから「作成」をクリック</li><li>「書き込み」権限を有効にして作成</li><li>生成されたAPIキーをコピーして保存</li></ul><h3 id="hf3d632d6b9">2. Claude Desktop設定ファイルの編集</h3><p>Claude Desktopの設定ファイルに、microCMS MCP Serverの設定を追加します。</p>

<h3 id="h5095390624">3. 環境変数の設定</h3><p>設定ファイルの<code>MICROCMS_SERVICE_DOMAIN</code>と<code>MICROCMS_API_KEY</code>を実際の値に置き換えます。</p><ul><li><code>MICROCMS_SERVICE_DOMAIN</code>: microCMSのサービスドメイン（例：your-blog）</li><li><code>MICROCMS_API_KEY</code>: 先ほど取得したAPIキー</li></ul><p>設定後、Claude Desktopを再起動すると、MCPサーバーが有効になります。</p>

<h2 id="hd1cdf3fdf7">実際の使用体験</h2><h3 id="h65ba23de30">スキーマの読み込み</h3><p>Claude Desktopを再起動後、まずはmicroCMSのスキーマ構造を読み込ませました。</p><p>「私のブログのスキーマを教えて」と質問すると、Claude が自動的にmicroCMSのAPIにアクセスし、以下のような情報を取得してくれます：</p><ul><li>各コンテンツタイプのフィールド構成</li><li>カスタムフィールドの詳細</li><li>必須フィールドや制約事項</li></ul>

<h3 id="hbd93833921">記事の作成体験</h3><p>実際に記事を作成してみると、驚くほどスムーズでした。</p><p>「技術記事を書いて」と依頼すると、Claude が：</p><ol><li>適切なカテゴリを自動選択</li><li>記事構成を考慮してsectionフィールドを構築</li><li>コード部分は<code>highlight</code>フィールドを使用</li><li>本文は<code>richeditor</code>フィールドで構成</li></ol><p>このように、スキーマの構造を理解した上で、適切なフィールドを選択して記事を作成してくれました。</p>

<h2 id="h7d5d0816f4">メリットと課題</h2><h3 id="h3ab24f6f50">メリット</h3><ul><li><strong>効率的な記事作成</strong>: 管理画面を開かずに記事を作成・更新できる</li><li><strong>スキーマ理解</strong>: 複雑なカスタムフィールドも適切に処理</li><li><strong>一貫性のある構成</strong>: 毎回同じような構造で記事を作成</li><li><strong>下書き機能</strong>: 公開前に内容を確認できる</li></ul><h3 id="ha60de12900">現在の課題</h3><ul><li><strong>画像アップロード</strong>: 現時点では画像の直接アップロードが必要</li><li><strong>プレビュー機能</strong>: 実際の表示を確認するには管理画面が必要</li><li><strong>権限管理</strong>: APIキーの管理に注意が必要</li></ul>

<h2 id="h8f041e8caa">今後の可能性</h2><p>microCMS MCP Serverの登場により、コンテンツ管理の自動化が大きく進歩しました。</p><p>今後期待される機能：</p><ul><li>画像生成・アップロード機能の統合</li><li>SEO最適化の自動化</li><li>複数記事の一括管理</li><li>コンテンツ分析・改善提案</li></ul><p>特に、AIによるコンテンツ生成と、headless CMSの柔軟性を組み合わせることで、新しいコンテンツ制作フローが生まれそうです。</p>

<h2 id="ha214098e44">まとめ</h2><p>microCMS MCP Serverを実際に使ってみて、技術ブログの執筆効率が大幅に向上しました。</p><p>特に、スキーマの複雑さを気にせずに記事を作成できる点と、Claude Desktopの自然な対話形式での指示が可能な点が素晴らしいと感じました。</p><p>まだリリースされたばかりのツールですが、今後のアップデートにも期待しています。headless CMSとAIの組み合わせは、コンテンツ制作の未来を大きく変える可能性を秘めていると思います。</p><p>興味のある方は、ぜひ一度試してみてください！</p>

microCMS MCP Serverを実際に使ってみた - Claude Desktop連携でブログ投稿を自動化

<p>「<a href="https://841-biboroku.info/entry/edge-runtime-keyword-search/" target="_blank" rel="noopener noreferrer nofollow">CloudflareのEdge RuntimeとmicroCMSのqパラメータを使ってキーワード検索結果ページを作る</a>」で作成した検索ページをもとにmicroCMSのプレビュー画面を作成しました。</p><p>バージョン：Next.js v13.5.4（Pages Router）、@cloudflare/next-on-pages CLI v.1.8.6、microcms-js-sdk v2.7.0</p><h2 id="h74bfa52507">microCMSに画面プレビューボタンを表示する</h2>

<ol><li>API設定＞画面プレビューを開く</li><li>遷移先URLを設定<br>https://プレビュー表示させるドメイン/プレビュー用のページ/?id={CONTENT_ID}&amp;draftKey={DRAFT_KEY}</li><li>画面プレビューボタンの表示をONにする</li><li>変更する</li><li>編集画面に「画面プレビュー」ボタンが表示される</li></ol><p>💬余談<br>ローカルで開発してるときは遷移先URLに「http://localhost:3000/」を設定してすぐ確認できるようにしてました。</p><h2 id="h514049fd38">プレビュー用ページ</h2>

import type {
  GetServerSideProps,
  InferGetServerSidePropsType,
  NextPage,
} from "next";
import { getBlogDetail, getAllCategoryList } from "@/libs/microcms";
import type { Blog, Category } from "@/libs/microcms";
import { NextSeo } from "next-seo";
import { CategoryList } from "@/components/CategoryList";
import { Article } from "@/components/Article";

export const runtime = "experimental-edge";

type Props = {
  post: Blog;
  categories?: Category[];
} & InferGetServerSidePropsType<typeof getServerSideProps>;

const Page: NextPage<Props> = ({ post, categories }) => {
  if (post)
    return (
      <>
        <NextSeo noindex={true} />
        <Article post={post} />
        <CategoryList categories={categories} />
      </>
    );
};
export default Page;

export const getServerSideProps: GetServerSideProps = async (context) => {
  const postId = context.query.id;
  const draftKey = context.query.draftKey;
  const post = postId
    ? await getBlogDetail(`${postId}`, {
        draftKey: `${draftKey}`,
      })
    : null;
  const categories = await getAllCategoryList({ fields: "title,slug" });

  if (!post) {
    return {
      notFound: true,
    };
  }

  const data = {
    post,
    categories,
  };

  return {
    props: data,
  };
};

<h4 id="ha2d7bf771c">エッジランタイムの設定</h4><p><a href="https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/get-started/#4-ensure-all-server-rendered-routes-use-the-edge-runtime" target="_blank" rel="noopener noreferrer nofollow">Ensure all server-rendered routes use the Edge Runtime</a></p><p>Cloudflare PagesでSSRするときに必要な設定をプレビューページに設定します。</p><pre><code>export const runtime = &quot;experimental-edge&quot;;</code></pre><h4 id="h6b6fe95a5b">コンテントIDと下書き状態を取得するdraftKeyのクエリ文字列を取得</h4>

const postId = context.query.id;
const draftKey = context.query.draftKey;
const post = postId
  ? await getBlogDetail(`${postId}`, {
      draftKey: `${draftKey}`,
    })
  : null;

<p>getBlogDetail()はmicroCMS SDKの<a href="https://github.com/microcmsio/microcms-js-sdk?tab=readme-ov-file#get-single-content-with-parameters" target="_blank" rel="noopener noreferrer nofollow">getListDetail()</a>を使って記事を取得するようにしています。</p><p>これで終わりです。</p><p>あとはほぼ検索結果ページと同じ仕組みにしているので、簡単に実装ができました。</p>

Cloudflare Pages×Next.jsで実装するmicroCMSのプレビュー画面

<p>React-Virtuoso、React-Window、React-Virtualizedの３つを同じ記事データを使って実装比べをしてみました。</p><p>3つとも複雑さはなく簡単に実装することができました。個人的には、React-Virtuosoがシンプルかつ要素の高さを自動で可変対応してくれる機能が備わっていて使いやすかったです。</p><h2 id="hb15b677c17">仮想スクロールを実装</h2><p>大量のダミーデータを使ってもよかったのですが、1200件記事（手持ちの記事30件×40）で実装しました。</p><p>↓スクロールするとDOMが更新されていることが分かります。スルスル・サクサク動きます。</p>

<h3 id="hfe5731c37c">React-Virtuoso</h3><p><a href="https://virtuoso.dev/" target="_blank" rel="noopener noreferrer nofollow">https://virtuoso.dev/</a></p>

import debounce from "lodash/debounce"; // lodashのdebounce関数を使う
import { Virtuoso } from "react-virtuoso";

const Filters = ({ posts }: PostProps) => {
  const [filter, setFilter] = useState("");
  const [filteredPosts, setFilteredPosts] = useState(posts);

  useEffect(() => {
    const delayedFilterPosts = debounce(() => {
      const filtered = posts.filter((post) =>
        post.title.toLowerCase().includes(filter.toLowerCase())
      );
      setFilteredPosts(filtered);
    }, 300);

    delayedFilterPosts();

    return () => {
      delayedFilterPosts.cancel();
    };
  }, [filter, posts]);

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    setFilter(e.target.value);
  };

  return (
    <>
      <input
        type="text"
        placeholder="word..."
        value={filter}
        onChange={handleInputChange}
        style={inputText}
      />
      <Virtuoso
        style={list}
        data={filteredPosts}
        totalCount={filteredPosts.length}
        itemContent={(index, post) => (
          <p key={index}>{post.title}</p>
        )}
      />
    </>
  );
};
export default Filters;

<h3 id="h8cb5f3aa41">React-Window</h3><p>有名な仮想リストライブラリです。</p><p><a href="https://react-window.vercel.app/#/examples/list/fixed-size" target="_blank" rel="noopener noreferrer nofollow">https://react-window.vercel.app/#/examples/list/fixed-size</a></p>

import { FixedSizeList as List } from "react-window";

const Row = ({
  index,
  style,
}: {
  index: number;
  style: React.CSSProperties;
}) => <p style={style}>{filteredPosts[index].title}</p>;

return (
  ～
  <List
    height={500}
    itemCount={filteredPosts.length}
    itemSize={30}
    width={"100%"}
  >
    {Row}
  </List>
  ～
)

<h3 id="h839d11de92">React-Virtualized</h3><p>React-windowと同じ方が制作されていて、<a href="https://github.com/bvaughn/react-window#how-is-react-window-different-from-react-virtualized" target="_blank" rel="noopener noreferrer nofollow">React-Windowとの違い</a>も紹介されています。</p><p><a href="https://bvaughn.github.io/react-virtualized/#/components/Masonry" target="_blank" rel="noopener noreferrer nofollow">https://bvaughn.github.io/react-virtualized/#/components/Masonry</a></p>

import { List } from "react-virtualized";

const rowRenderer = ({
  index,
  key,
  style,
}: {
  index: number;
  key: string;
  style: React.CSSProperties;
}) => (
  <div key={key} style={style}>
    {filteredPosts[index].title}
  </div>
);

return (
  ～
  <List
  width={600}
  height={400}
  rowCount={filteredPosts.length}
  rowHeight={30}
  rowRenderer={rowRenderer}
  />
  ～
)


<h2 id="h1bb903a08e">&lt;input&gt;に入力したテキストで記事を絞り込む</h2><p>onChangeイベントを発生させるので、過剰に発生させないようにするためlodashのdebounce関数を使用して制限しました。</p>

// debounce関数で処理を間引く
const delayedFilterPosts = debounce(() => {
  // フィルタリング処理
  const filtered = posts.filter((post) =>
    post.title.toLowerCase().includes(filter.toLowerCase())
  );
  setFilteredPosts(filtered);
}, 300); // 300msの遅延を設定

delayedFilterPosts(); // 初回レンダリング時に実行

<p>debounce関数は、指定された関数を遅延させる関数を返します。この場合、300ミリ秒の遅延を設定しているので、delayedFilterPostsは300ミリ秒ごとに実行されます。これにより、filterPosts関数が短時間に連続して呼び出された場合に、最後の呼び出しのみが実際に実行され、過剰な処理を防ぎます。</p>

<h2 id="heaa723eefe">ChatGPTに聞いてみた</h2><table><tbody><tr><th colspan="1" rowspan="1"><p><strong>機能 / ライブラリ</strong></p></th><th colspan="1" rowspan="1"><p><strong>React-Virtualized</strong></p></th><th colspan="1" rowspan="1"><p><strong>React-Window</strong></p></th><th colspan="1" rowspan="1"><p><strong>React-Virtuoso</strong></p></th></tr><tr><td colspan="1" rowspan="1"><p>インストールの簡易さ</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>コミュニティのサポート</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>性能</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>メモリ使用量</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>カスタマイズ可能性</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>レンダリングの柔軟性</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>サポートされている<br>コンポーネントの種類</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>ドキュメントの質</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>セルの可変高さサポート</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>ライブラリのサイズ</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr></tbody></table><h3 id="h088bd2a600">ChatGPTに聞いたデメリット</h3><h4 id="h839d11de92">React-Virtualized</h4><ul><li>メモリ使用量がやや多い</li><li>セルの再利用が不十分</li></ul><h4 id="h8cb5f3aa41">React-Window</h4><ul><li>セルの可変高さサポートがやや不十分</li><li>ライブラリのサイズがやや大きい</li></ul><h4 id="hfe5731c37c">React-Virtuoso</h4><ul><li>コミュニティのサポートが限られている</li></ul><h3 id="h6dc2e58b5f">他にもChatGPTに聞いてみた</h3><p>📏メモリ使用量が小さい順<br><strong>React-Window</strong>　＜　React-Virtuoso　＜　React-Virtualized</p><p>📚ライブラリのサイズが小さい順<br><strong>React-Virtuoso</strong>　＜　React-Window　＜　React-Virtualized</p><p>🌎普及度（推測だそうです）<br><strong>React-Window（2018年）</strong>＞ React-Virtualized（2015年）＞ React-Virtuoso（2020年）<br>※（）…最初のバージョン</p><p></p>

<p>📝参考</p><ul><li><a href="https://zenn.dev/tara_is_ok/articles/a955a9561516da" target="_blank" rel="noopener noreferrer nofollow">無限スクロールにはReact-Virtuosoが良さそう🧩</a></li><li><a href="https://github.com/bvaughn/react-window/issues/665" target="_blank" rel="noopener noreferrer nofollow">setting height of items for VariableSizeList itemSize is not working.</a></li><li><a href="https://virtuoso.dev/" target="_blank" rel="noopener noreferrer nofollow">React Virtuoso ドキュメント</a></li><li><a href="https://codesandbox.io/s/react-virtuoso-custom-scrollbar-mz4lg" target="_blank" rel="noopener noreferrer nofollow">react-virtuoso custom scrollbar</a><p></p></li></ul>

仮想スクロールライブラリを使って記事一覧から特定の単語を含むタイトル記事を絞り込み表示する

<h2 id="h1f01853ea1">getServerSidePropsで検索ページを作る</h2>

export const runtime = "experimental-edge";

const Home: NextPage<Props> = ({ posts, keyword, totalCount, categories }) => {
  return (
    <>
      <div className={styles.header}>
        <SearchBox />
        <p className={styles.result}>該当：{totalCount}件</p>
      </div>
      <div className={styles.wrap}>
        {keyword === "" && <p>キーワードを入力してください</p>}
        {posts && totalCount > 0 && (
          <>
            <div className={styles.wrap}>
              <div className={styles.archive}>
                {posts
                  ? posts.map((post) => <PostItem key={post.id} post={post} />)
                  : ""}
              </div>
            </div>
          </>
        )}
        {totalCount === 0 && keyword && (
          <p className="notfound">
            「{keyword}」を含む記事はありません。
            <br />
            キーワードを変更して再検索してください。
          </p>
        )}
      </div>
      <CategoryList categories={categories} />
    </>
  );
};
export default Home;

export const getServerSideProps: GetServerSideProps = async (context) => {
  const keyword = context.query.q;
  const posts = keyword
    ? await getAllBlogList({
        q: `${keyword}`,
        fields: "必要なフィールドだけ取得（指定しなくてもいい）",
      })
    : null;
  const totalCount = posts ? posts.length : 0;
  const categories = await getAllCategoryList({ fields: "title,slug" });

  const data = keyword
    ? {
        posts,
        keyword,
        totalCount,
        categories,
      }
    : {
        keyword,
        totalCount,
        categories,
      };

  return {
    props: data,
  };
};

<h4 id="hcbe32938f2">エッジ ランタイムを設定</h4><pre><code>export const runtime = &quot;experimental-edge&quot;;</code></pre><h4 id="hc070b28ff1">クエリ文字列（?q=xxx）の取得</h4><pre><code>const keyword = context.query.q;</code></pre><h4 id="h1cc13c40af">microCMSのコンテンツの全文検索用のクエリパラメータを指定</h4><pre><code>q: `${keyword}`,</code></pre><p>getAllBlogListは、microCMS-SDKのコンテンツの全件取得を行うgetAllContents()メソッドを使っています。</p><pre><code>export const getAllBlogList = async (queries?: MicroCMSQueries) =&gt; {
 const listData = await client.getAllContents&lt;Blog&gt;({
  endpoint: &quot;blog&quot;,
  queries,
 });
 return listData;
};</code></pre><p>microCMSのドキュメントにもあるように、完全一致する結果を返してくれるわけではありませんが、そこまで厳密にしなくてもいいのでqクエリパラメータを使いました。</p><blockquote><p>qパラメータによる検索は、コンテンツに関する情報を形態素解析した結果を対象に実施されます。検索語句と一致するキーワードの登録がないコンテンツでも、検索結果に含まれることがあります。正確な部分一致検索が必要な場合は、filtersパラメータのcontainsの使用をご検討ください。</p></blockquote><p>クエリパラメータ q <a href="https://document.microcms.io/content-api/get-list-contents#ha8abec0b2f"><u>https://document.microcms.io/content-api/get-list-contents#ha8abec0b2f</u></a></p><h4 id="he267d78153">keywordが未指定のとき</h4><p>keywordが指定されてないときは全件該当してしまうので、結果を返さないようにpostsを含まないようにしています。（もっといい書き方あるだろう・）</p>

<h2 id="h6c42ace2bd">Cloudflare PagesでSSRを使えるように設定</h2><p>設定＞ビルド＆デプロイ＞ビルドの構成のフレームワークプリセット「Next.js」を選択します。（※Next.js（Static HTML Export）ではなくNext.js）<br>ビルド コマンド、ビルド出力ディレクトリなど選択時に自動で初期値が設定されます。</p><p>設定＞functions＞互換性フラグに<code>nodejs_compat</code>を登録します。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/bb87002b4a5b4acb9dea6d962dfdfc11/image.png" alt="" width="966" height="557"></figure><p>デプロイして検索結果が表示されたら成功です🎉</p>

<h2 id="h93d835c79a">失敗・起こったエラー</h2><p>検索ページだけ作ってデプロイした結果</p><pre><code>Error occurred prerendering page &quot;/search&quot;. Read more: https://nextjs.org/docs/messages/prerender-error</code></pre><p>search/index.tsxに<code>export const runtime = &quot;edge&quot;;</code>を設定</p><pre><code>Error: Page /search provided runtime &apos;edge&apos;, the edge runtime for rendering is currently experimental. Use runtime &apos;experimental-edge&apos; instead.</code></pre><p>next.config.jsに<code>runtime: &apos;edge&apos;,</code>を設定</p><pre><code>experimental: {
  runtime: &apos;edge&apos;,
},</code></pre><pre><code>Error: Page /search provided runtime &apos;edge&apos;, the edge runtime for rendering is currently experimental. Use runtime &apos;experimental-edge&apos; instead.</code></pre><p>search/index.tsxに<code>export const runtime = &quot;erimental-edge&quot;;</code>を設定</p><pre><code>00:17:31.819Error occurred prerendering page &quot;/search&quot;. Read more: https://nextjs.org/docs/messages/prerender-error
00:17:31.819ReferenceError: self is not defined</code></pre><p>ビルドの構成から<code>next export</code>を削除したら静的ファイルが全部出力されなくなった・・</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/fced5e74e5b340aea6c3934df6ec4d15/image.png" alt="" width="986" height="293"></figure><p>ビルドの構成をNext.js（Static HTML Export）からNext.jsに変更して再デプロイしたら「Node.JS Compatibility Error」<br>「互換nodejs_compat性フラグが設定されていません」とのこと。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/b216e7c8f0fb410a965199b3f0b592f8/image.png" alt="" width="1059" height="432"></figure><h4 id="h370f4f57eb">ローカルの/search/ページでInernet Server Errorがでる</h4><pre><code>⚠ You are using an experimental edge runtime, the API might change.</code></pre><p>まだ解決できず、ローカルで動作確認するときはコメントアウトしています；</p><h4 id="hcd63b0c9a9">middlewareで設定していたBasic認証が効かなくなった</h4><p>以前、<a href="https://841-biboroku.info/entry/cloudflare-pages-function-basic-auth/" target="_blank" rel="noopener noreferrer nofollow"><u>functions/_middleware.tsでBasic認証を設定</u></a>をしていましたが、Edge runtimeの設定をしたら該当ファイルを読まなくなりBasic認証が解除されてしまいました。なのでBasic認証はNext.jsのmiddlewareに切り替えて実装することにしました。</p><p><br></p>

<p>📝参考<br>・<a href="https://blog.microcms.io/astro-search/" target="_blank" rel="noopener noreferrer nofollow">AstroとmicroCMSを使った検索機能を実装する</a><br>・Cloudflare Deploy a Next.js site＞<a href="https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-the-edge-runtime" target="_blank" rel="noopener noreferrer nofollow">Use the Edge Runtime</a><br>・<a href="https://developers.cloudflare.com/workers/runtime-apis/nodejs/" target="_blank" rel="noopener noreferrer nofollow">CloudflareダッシュボードからNode.jsを有効にする</a><br>・<a href="https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/examples.md" target="_blank" rel="noopener noreferrer nofollow">packages/next-on-pages/docs/examples.md</a></p>

<h2 id="h44f833b591">追記：sitemap.xmlが生成されなくなっていた</h2><p>cloudflareのビルドコマンドを変更したときにビルド出力ディレクトリが<code>.vercel/output/static</code>に切り替わったのにnext-sitemap.config.jsが以前の設定のままだったことが原因でした。<br>next-sitemap.config.jsの設定を変更し再デプロイで生成されるようになりました。</p>

//修正前
module.exports = {
  outDir: './out',
}

//修正後
module.exports = {
  outDir: '.vercel/output/static',
}

CloudflareのEdge RuntimeとmicroCMSのqパラメータを使ってキーワード検索結果ページを作る

<p>OGP画像をmicroCMSで紹介されている「<a href="https://blog.microcms.io/imgix-ogp/" target="_blank" rel="noopener noreferrer">imgixで動的画像・OGPを作成する</a>」を参考に設定しました。</p><p><br></p><h2 id="hc5442734bc">自動生成したOGP</h2><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/4f0b9cc0f7a74337b0390aa53eeef6ca/ogp-sample.png" alt="" width="1200" height="630"></p><p><br></p><p><br></p>

import base64url from "base64url";

export const createOgImage = (title: string, color: string) => {
  const ogImageUrl = `${ベースになる画像URL}?w=1200&h=630&blend64=${base64url(
    `https://assets.imgix.net/~text?txtsize=50&txt-color=${color}&w=1000&h=230&txt-align=middle,left&txtfont=Hiragino%20Sans%20W6&txt-track=2&txt64=${base64url(
      title
    )}`
  )}&blend-mode=normal&blend-x=100&blend-y=200&monochrome=95${color}&fm=png`;
  return { ogImageUrl };
};

<h3 id="h4b5581ac68">選択したカテゴリによってロゴカラーを変化させる</h3><p>使用したimgixパラメータは、「<a href="https://docs.imgix.com/apis/rendering/stylize/monochrome" target="_blank" rel="noopener noreferrer">monochrome</a>」。</p><p>色を設定することで全体の色相を変化させることができます。</p><p><br></p><p>用意したベース画像のロゴは、指定した色によって変化させるためあえてグレースケールにしています。</p><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/681fc260d17943b8997324794108c203/ogpbase.png?w=350&amp;h=183" alt="" width="350" height="183"></p><p><br></p><p>カテゴリのAPIスキーマにイメージカラー（imgColor）のフィールドを追加し、カラーコードを設定します。</p><p>1つ目のカテゴリに指定したimgColorをmonochromeに設定することで、選択したカテゴリによってOGP画像内のロゴカラーを変化させています。</p>

<h3 id="h148780a7d5">タイトルが複数行になっても上下中央に配置する</h3><pre><code>w=1000&amp;h=230</code></pre><p>タイトルが入る枠の幅と高さ位置を設定。</p><p>高さは最大3行を想定した高さにしました。</p><p><br></p><pre><code>txt-align=middle,left</code></pre><p>タイトル枠に対してテキストに配置を上下中央の左寄せにします。</p><p><br></p><pre><code>blend-x=100&amp;blend-y=200</code></pre><p><strong>X軸</strong></p><p>(OGP画像の幅(1200px)-テキスト枠の幅(1000px))÷2=100</p><p><strong>Y軸</strong></p><p>OGP画像の高さ(630px)÷2-タイトル枠(230px)÷2=200</p>

<h2 id="h30484efed0">OGP画像を設定する</h2><p>記事詳細ページに先ほど作成したコンポーネントを読み込み画像のURLを生成する。</p><p>生成したURLをnext-seoのimages-&gt;urlに設定するだけでOK。</p>

import { createOgImage } from "@/components/createOgImage";
～略
const PostDetail: NextPage<PostPageProps> = ({ postData, categories }) => {
  const { ogImageUrl } = createOgImage(post.title, post.category[0].imgColor);
  return (
    <>
      <NextSeo
        title={post.title}
        canonical={pageUrl}
        openGraph={{
          url: pageUrl,
          images: [
            {
              url: ogImageUrl,  //生成したOGPのURLを設定
            },
          ],
          title: post.title,
        }}
      />
～略
    </>
  );
};