## **対象読者** - 個人開発者・エンジニア - お知らせ機能・ブログ機能をサクッと実装したい方 - ヘッドレスCMSに興味はあるけど、まだ使ったことがない方 ## **結論：個人開発のお知らせ機能はmicroCMSが最強かも** 先に結論から書きます。個人開発で「お知らせ」や「ブログ」機能を作るなら、ヘッドレスCMSの **microCMS** を使うのが、現時点で最も効率的で最適な方法だと感じました。 - **DB設計・構築が不要** - **画像ストレージが不要** - **高機能な管理画面が自動で手に入る** - **すぐ実装できる！** この記事では、私の開発しているSpreadSiteにどのように実装したか、具体的な手順を追いながら、爆速でお知らせ機能を実装する方法を解説します。 [実際の導入画面はこちら！](https://spread-site.com/blog) ## **そもそもmicroCMSとは？** [microCMS](https://microcms.io/)は、株式会社microCMSが開発・運営する、日本製のヘッドレスCMSです。「ヘッドレスCMS」とは、従来のブログシステム（WordPressなど）とは違い、見た目（フロントエンド）を持たず、API経由でコンテンツを管理することに特化したシステムのこと。 ### **microCMSのすごいところ** * **直感的な管理画面:** 日本語に完全対応しており、とにかく分かりやすい。 * **APIが自動生成:** コンテンツの構造を決めれば、APIがすぐに出来上がる。 * **画像管理もおまかせ:** 画像をアップロードすれば、最適化された状態で配信してくれる。ストレージのことを考える必要なし！ * **安心の日本製:** ドキュメントもサポートも日本語で安心。個人開発のバックエンドを、まるっとお任せできるような心強いサービスです。 ## **実装手順** ### **Step 1: microCMSでAPIを作成する** まず、microCMSにログインし、APIを作成します。 #### サービスを作成「一から作成する」でやっていきます。 ![MicroCMSのサービス作成画面のスクリーンショット](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/daa9ad5d-0fb6-46db-bd8b-48ee671c7625/85aaa884-4076-4a2c-aa3f-16b7d3c6aa7e.png) *MicroCMSのサービス作成画面のスクリーンショット* #### サービス名・IDを入力自分のサービス名で大丈夫です。IDの方はすでに使われてたら変更しましょう。（アプリからは見えないので、気にせず！） ![サービス名とIDの入力画面のスクリーンショット](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/daa9ad5d-0fb6-46db-bd8b-48ee671c7625/89fc0b3d-0188-432d-9970-a1eadcb48c72.png) *サービス名とIDの入力画面のスクリーンショット* #### APIの型は「リスト形式」を選択 ![APIの型の選択画面のスクリーンショット](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/daa9ad5d-0fb6-46db-bd8b-48ee671c7625/1533aef4-1f62-4d17-82b4-76c8142e7988.png) *APIの型の選択画面のスクリーンショット* #### API名とエンドポイントを決める（注意）エンドポイントですが、ここで指定したものを後で環境変数（.env）に指定します。画像ではblogと指定しています。 ![APIの基本情報の入力画面のスクリーンショット](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/daa9ad5d-0fb6-46db-bd8b-48ee671c7625/743185ae-b11b-4f1d-90e6-bcbef628d972.png) *APIの基本情報の入力画面のスクリーンショット* #### APIを作成していきます私は自分で決めるを選択しました。 ![APIの作成画面のスクリーンショット](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/daa9ad5d-0fb6-46db-bd8b-48ee671c7625/da3a76aa-3135-41e9-bb86-90f89aaad374.png) *APIの作成画面のスクリーンショット* #### スキーマを作成していくここでAPIを使って取得する情報を決めます。次に、APIのスキーマ（どんなデータを持つか）を定義します。私のブログでは、以下のように設定しました。 * `title` (テキストフィールド) * `description` (テキストエリア) * `body` (リッチエディタ) ← これが最高！Markdownで記事が書ける！ * `eventDate` (日時) * `image` (画像) ← 画像アップロード機能もこれだけでOK！これだけで、もうAPIと高機能な管理画面が完成です。 ![APIスキーマを設定する画面のスクリーンショット](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/daa9ad5d-0fb6-46db-bd8b-48ee671c7625/5b3f3730-1d35-4699-b8e2-40fab0f0cf20.png) *APIスキーマを設定する画面のスクリーンショット* ### **Step 2: コンテンツを入稿し、APIキーを取得する** APIができたので、管理画面からテスト用のお知らせを1〜2件、入稿してみましょう。タイトルや本文を書き、画像をアップロードするだけ。本当にブログを書くような感覚です。 ![ブログ記事やお知らせを作成する画面のスクリーンショット](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/daa9ad5d-0fb6-46db-bd8b-48ee671c7625/2790f1af-66fe-4e1c-9291-5ed24988eb7d.png) *ブログ記事やお知らせを作成する画面のスクリーンショット* 次にサイドバーの「1個のAPIキー」に移動し、APIキーをコピーします。 ![APIキーの取得画面のスクリーンショット](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/daa9ad5d-0fb6-46db-bd8b-48ee671c7625/2cb70ec7-32e0-436b-9c48-1e10efa3e92f.png) *APIキーの取得画面のスクリーンショット* このキーは **`.env`** ファイルに環境変数として保存し、外部に漏らさないようにしましょう。 ```.env MICROCMS_SERVICE_DOMAIN=先ほど決めたエンドポイント（本記事ではblog）を指定 MICROCMS_API_KEY=取得したAPIキーを指定 ``` ### **Step 3: フロントエンドに実装する** いよいよフロントエンドの実装です。SpreadSiteではNext.jsを使っているので、その例で紹介します。 #### **1. microCMSクライアントの準備** まず、SDKをインストールし、APIと通信するためのクライアントファイルを用意します。 ```bash npm install microcms-js-sdk ``` ```typescript:lib/microcmsClient.ts import { createClient } from 'microcms-js-sdk'; import { cache } from 'react'; export type Blog = { id: string; title: string; description: string; body: string; eventDate: string;// ここはDateではなくStringでOKです。 image: { // imageの中にurlと大きさが入っているので注意です。 url: string; height: number; width: number; }; } if (!process.env.MICROCMS_DOMAIN) { throw new Error("MICROCMS_DOMAIN is required"); } if (!process.env.MICROCMS_API_KEY) { throw new Error("MICROCMS_DOMAIN is required"); } export const client = createClient({ serviceDomain: process.env.MICROCMS_DOMAIN, apiKey: process.env.MICROCMS_API_KEY, }); // ブログ一覧を取得 export const getBlogs = async () => { const blogs = await client.getList({ endpoint: "blog" }); return blogs; } // ブログの詳細を取得後のコードで2回取得するのでcacheしておきましょう。 export const getDetail = cache(async (contentId: string) => { try { const blog = await client.getListDetail({ endpoint: 'blog', contentId, }); return blog; } catch { return null; } }); ``` #### **2. お知らせ一覧・詳細ページの作成** 先ほど作ったクライアントを使って、記事一覧と詳細ページを作ります。コードは長くなるので要点だけ抜粋しますが、やっていることは `getBlogs` や `getDetail` を呼び出して、返ってきたデータを表示しているだけです。このコードでは試していませんが、おそらく動くかと思います。 ```tsx:app/blog/page.tsx (一覧ページ) import { getBlogs } from "@/lib/microcmsClient"; import Link from "next/link"; import Image from "next/image"; export default async function BlogPage() { const { contents } = await getBlogs(); // ...（中略）... return ( // ...（中略）...

{contents.map((blog) => (

{blog.title}

{blog.image &&

} ))}

// ...（中略）... ); } ``` ```tsx:app/blog/[blogId]/page.tsx (詳細ページ) import { getBlogs, getDetail } from '@/lib/microcmsClient'; import { Metadata } from 'next'; // サイトのベースURL const BASE_URL = process.env.NEXT_PUBLIC_APP_URL || 'https://spread-site.com'; // メタデータを生成 export async function generateMetadata({ params, }: { params: Promise<{ blogId: string }>; }): Promise { const { blogId } = await params; const blog = await getDetail(blogId); if (!blog) { return { title: 'SpreadSiteブログ', description: '指定されたお知らせは存在しません。', }; } const blogUrl = `${BASE_URL}/blog/${blogId}`; return { title: blog.title, description: blog.description, } } // ページ本体 export default async function StaticDetailPage({ params, }: { params: Promise<{ blogId: string }>; }) { const {blogId} = await params; const blog = await getDetail( blogId ); if(!blog) return NotFound() return( <>

{blog.title}

) } ``` 少し解説すると、先ほど`getDetail()`でcacheをしたのは、このページで情報を2回取得するためです。メタデータ用の情報取得、ページ表示用の情報取得、の2回ですね。気になる方は`import { cache } from 'react';`を調べて覚えとくといいです。さて、これであとはCSSを整えれば、立派な機能の出来上がりです。この辺はAIに作ってもらうといいです。私の場合こんな感じのcssを作りました。軽く説明をコメントしたので、あとはあなたのスタイルに！ ```css:app/styles/blog.css（global.cssでもOK） .article-body { /* 全体のフォントサイズと行間を設定。読みやすさの基本です */ @apply text-base leading-relaxed text-foreground/90 md:text-lg md:leading-loose; } /* 見出し (h2) - セクションの区切りとして最も目立つように */ .article-body h2 { @apply mt-12 mb-4 border-b-2 border-primary/50 pb-2 text-2xl font-bold tracking-tight md:text-3xl; } /* 見出し (h3) - h2より少し控えめな小見出し */ .article-body h3 { @apply mt-10 mb-4 text-xl font-semibold tracking-tight md:text-2xl; } /* 段落 (p) - 段落間の余白で読みやすさを確保 */ .article-body p { @apply mb-6; } /* リンク (a) - サイトのテーマカラーを使い、インタラクティブに */ .article-body a { @apply text-primary underline decoration-primary/50 decoration-2 underline-offset-4 transition-colors hover:text-primary/80 hover:decoration-primary/80; } /* リスト (ul, ol) - 箇条書きを整形 */ .article-body ul, .article-body ol { @apply mb-6 ml-6 list-outside space-y-2; } .article-body ul { @apply list-disc; } .article-body ol { @apply list-decimal; } .article-body li::marker { @apply text-muted-foreground; } /* 引用 (blockquote) - 引用部分を視覚的に区別 */ .article-body blockquote { @apply mb-6 border-l-4 border-primary bg-muted/50 p-4 italic text-muted-foreground; } .article-body blockquote p { @apply mb-0; /* 引用内の段落の余白は不要なのでリセット */ } /* コードブロック (pre, code) - プログラムのコードなどを表示する際に使用 */ .article-body pre { @apply mb-6 overflow-x-auto rounded-md bg-muted p-4 text-sm font-mono; } .article-body code:not(pre > code) { @apply rounded bg-muted px-1.5 py-1 font-mono text-sm; } /* 水平線 (hr) - 話題の転換を示す区切り線 */ .article-body hr { @apply my-12 border-border; } /* 太字 (strong) - 強調部分を明確に */ .article-body strong { @apply font-semibold text-foreground; } /* 画像 (img) - 本文中の画像に余白と角丸を適用 */ .article-body img { @apply my-8 rounded-md shadow-md; } ``` ## **完成した実際のブログ機能：SpreadSiteブログ** この方法で作ったお知らせ機能がSpreadSiteで実際に動いています。データの管理はすべてmicroCMSです。サクサク動いて、見た目もバッチリです！ ![SpreadSiteで実際に作成したブログ一覧画面のスクリーンショット](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/daa9ad5d-0fb6-46db-bd8b-48ee671c7625/92960854-d9b6-458f-ba6a-b8cfbb4488d6.png) *SpreadSiteで実際に作成したブログ一覧画面のスクリーンショット* [スプレッドサイトのブログ画面はこちら](https://spread-site.com/blog) ## よくある質問 ### Q: 本当に無料で使えますか？ A: はい、無料プラン（Hobbyプラン）があります。月間のデータ転送量が20GBまで、API数も5つまで作成可能なので、個人開発のブログ機能なら十分すぎるほどです。 ### Q: 画像の管理はどうなっていますか？ A: microCMSの管理画面から直接アップロードでき、API経経で画像のURLが取得できます。リサイズや最適化も自動で行ってくれるので、自分で画像用のストレージ（S3など）を用意する必要は一切ありません。 ### Q: Next.js以外でも使えますか？ A: もちろんです。APIベースなので、React, Vue, Svelte, Astroなど、APIを叩ける環境なら何でも使えます。公式でSDKも用意されています。 ### Q: 記事の更新や削除はどうやるのですか？ A: すべてmicroCMSの管理画面から行えます。一度フロントエンドを作ってしまえば、あとはコードを触ることなく、ブラウザ上でコンテンツを管理できます。 ### Q: セキュリティは大丈夫ですか？ A: APIキーの管理が重要です。記事で紹介したように、APIキーは環境変数に設定し、クライアントサイド（ブラウザ）に直接書き込まないようにしましょう。Next.jsのサーバーサイドで通信すれば安全です。 ### Q: もっと複雑な機能も作れますか？ A: はい。「コンテンツ参照」機能を使えば、カテゴリやタグといった、より複雑なデータ構造も作れます。私の用途では本文の使い方で十分だったので、検証はしていません🙏 ## **料金プラン** microCMSには、個人開発に最適な無料プランから、大規模なビジネス利用に対応したプランまで用意されています。 | プラン名 | 月額料金 | API数 | データ転送量/月 | メンバー数 | |:---|:---:|:---:|:---:|:---:| | **Hobby** | **¥0** | 5 | 20GB | 3 | | **Team** | ¥4,900〜 | 10〜 | 200GB〜 | 3〜 | | **Business** | ¥75,000〜 | 30〜 | 1TB〜 | 20〜 | :::info ※2025年7月時点の情報です。最新の情報は[公式サイト](https://microcms.io/pricing)をご確認ください。 ::: ## おわりに「お知らせ機能で数日もかけたくない…」そんな私のわがままをmicroCMSは完璧に叶えてくれました。短時間でデータベースやストレージも作らずに作れたのは驚きでした！！めちゃめちゃおすすめです！🤩 アップデート情報やメディア情報、お知らせを実装するには最適です！この記事が役に立った、面白かったと思っていただけたら、ぜひX（旧Twitter）もフォローしていただけると、今後の開発や発信の励みになります！ [**X (旧Twitter) をフォローする**](https://twitter.com/okayu855) ## SpreadSiteもよろしくお願いします！私が現在開発・運営している**スプレッドシートだけでホームページが作れる**サービス、SpreadSite、ぜひチェックしてみてください！登録したよーと一言かけてもらえたら、めちゃめちゃ喜んでペコペコしにいきます！！！ https://spread-site.com [プロダクト紹介記事はこちら！](https://izanami.dev/post/ae112b6f-f5d7-430b-8216-d51d4084bbe6)

DB不要！microCMSで2時間でお知らせ機能が実装できた