はじめに

前回は、ブログサイトを支えるバックエンドの全体像を整理しました。
今回は、その中で記事データの管理を担う microCMS の初期設定を行います。

本記事のゴールは、ブログ記事を登録・取得できる状態をつくり、次回以降の実装に備えることです。

microCMSとは？

SaaS型のヘッドレスCMS(コンテンツ管理システム)です。

記事データをmicroCMSで作成し、API経由でサイトに表示するように設計します。

前回記事で詳細な説明を行っておりますので、「microCMSの何がいいの？」と気になる方は、以下のリンクを覗いてみてください👀

アカウント作成・サービス作成

microCMSアカウント作成

microCMS公式サイトにアクセスし、アカウントを作成します。

「無料ではじめる」をクリックし、メールアドレスとパスワードを設定して、アカウント登録を行います。

アカウント登録が完了すると以下の管理画面に進みます。

「一から作成する」を選択し、新規サービスを作成します。

「テンプレートから選ぶ」を選択するとmicroCMSが用意した様々なサイトに最適なテンプレートから作成することもできます。ブログのテンプレートもありますので、手っ取り早く始めたい方はそちらで作成するのがおすすめです。

サービス名を入力し、「サービスを作成する」をクリックします。

サービス作成が完了すると、管理画面からAPI/作成画面に移行します。

APIの作成

API作成画面でAPIを作成できます。

自分で作成することもできますが、ここで「ブログ」のテンプレートから作成すると便利なので、ブログのテンプレートを選択します。

「ブログ」のテンプレートから作成すると以下の様にコンテンツ(API)を自動設定してくれます。

後程APIスキーマの設定などは、編集しますが、一旦このままで進めます。

ブログコンテンツに自動で設定されたデフォルトの記事を選択すると、以下の様に内容が登録されていることが分かります。

１記事の内容の編集などは、この画面上で行います。

記事を登録する

試しに新しい記事を登録してみます。

記事の登録は、管理画面のコンテンツ(API)のブログを選択したトップ画面上で「+追加」ボタンをクリックします。

以下の画面の「+追加」ボタンです。

クリックすると、以下のような1記事の内容の登録画面に進みます。内容を入力し、公開せずに保存する場合は、「下書きを保存」。公開する場合は、「公開」をクリックします。

今回は、「公開」をクリックします。

「公開」をクリック後、コンテンツ(API)のブログの画面に戻ります。

以下の様に、新規内容が登録されていることが分かります。

APIキーの確認

microCMSで登録した内容をページに表示したい場合は、ページを表示するシステム側からAPIを用いて、情報を取得します。

その為に、APIキーをシステム側に設定して呼び出しを行います。

詳細については、次回以降のページ毎のシステム設計で説明します。

この記事では、APIキーの確認方法について、説明します。

コンテンツ情報の画面から以下のようにAPIキーを確認できます。

APIキーを追加できますが、2025年8月現在では、無料枠では設定できるAPIキーが1個までと上限があります。

また、APIキーが外部に流出すると、第三者がサービスを不正利用できる様になる為、厳重に管理する必要があります。

動作確認

microCMSでは、APIで呼び出した際にどのような値を返すのかプレビュー表示で確認することができます。

今回は、プログラム側でのAPI呼び出し方法の説明は割愛しますので、このプレビュー表示でどのような値が返ってくるのか確認したいと思います。

実際に以下の画面で操作できます。

コンテンツ(API)のブログページに移動します。

以下図の「APIプレビュー」をクリックします。

クリックすると以下のような画面が開き、「取得」ボタンを押すと、実際にレスポンスで返される値を確認することができます。

ここで確認できるのは実際のAPIレスポンス(JSON形式)です。プログラムでfetchした時に返ってくるものと同じ内容が表示されます。

上記は、エンドポイントをbolgと設定し、ブログコンテンツ全体の情報を取得するAPIのプレビューを行いました。

ブログの1記事の情報をAPIプレビュー表示することも可能です。

まとめ

今回は、microCMSの初期設定を行い、記事データを管理できる状態を作りました。

これで、ブログ記事を API経由で取得する環境が整いました。

次回より、第2回目の記事でデプロイしたCloudflare×Remixのテンプレートファイルを編集し、ブログらしいページを作っていきます🔨

まずは、Remixのページルーティングやloader関数、コンポーネントについて理解し、シンプルでも「ブログらしいトップページ」が表示できる状態を作ります🔥