CMS環境構築の基本ステップ（microCMS編）

執筆者：もろもろ更新日：2025/2/12

こんにちは！エンジニアのもろもろです！
今回は、国内産のヘッドレスCMSとして多くのWebサイトで利用されている、microCMSの環境構築の基本ステップについて解説します。

サービスの作成

microCMSを利用するにはアカウントの作成が必要です。
公式サイトでアカウントの作成をしましょう！
https://microcms.io/

ログインが成功したら、早速サービス管理画面が表示されると思います。
サービスとは、microCMSのコンテンツを管理するために必要な、サイトごとの単位となります。

「新しいサービスを作成」から、新規サービスを立ち上げましょう！

APIの作成

microCMSでは、投稿記事をAPIとして取得します。
つまり、( API = 投稿記事 )です。

APIの作成では、投稿する記事のテンプレートの作成を行います。

最初に出てくる入力画面のAPI名とはmicroCMS内での管理名、エンドポイントとは実際にコードを取得する際の識別名になります。
どれがどれかわからなくならないように、しっかりと認識しやすい命名を行いましょう！

命名が終われば、次にAPIの型を選択します。
こちらはAPIとして取得する情報の、種類を選択します。

リスト形式では、投稿した記事"一覧"の情報をまとめて取得することができます。
配列としてAPI情報を取得することができ、2個以上の投稿を作成するコンテンツの場合はこちらを選択する必要があります。

次に、オブジェクト形式についてです。こちらは投稿した記事"単体"の情報を取得することができます。
つまり、単体の投稿で成立するコンテンツの場合はこちらを選択します。

複数の投稿記事が置かれるブログ機能ならリスト形式、単体の投稿記事で管理する料金表ページなどはオブジェクト形式、というイメージです！

APIスキーマの設定

最後にAPIスキーマの設定です。
こちらは、投稿する記事の雛形の作成になります。

フィールドID：は取得するAPIでの管理名
表示名：はmicroCMS内での管理名
種類：は追加したいコンテンツ

になります。

例えば、タイトル、画像、文章の簡単な雛形を作りたい場合は、「テキストフィールド」、「画像」、「テキストエリア」を設定することで作成できます。

こちらで作成した雛形は左側のメニューにあるコンテンツ(API)から確認でき、「追加」ボタンから実際に記事の作成が可能です。

APIの取得

公開した記事はAPIとして取得することができます。
「コンテンツ（API）」から、取得したいAPIの管理画面まで移動し、「APIプレビュー」をクリックすることでAPIの確認画面まで移動することができます。

API取得なためのデフォルトのコードが「JS」「iOS」「Android」「PHP」「Ruby」「Go」「cURL」の７つのコードで用意されているので、
自分に適したコードを選択し取得しましょう。

取得したコードを自分のWebサイトなどに

また、「取得」ボタンを押すことで、実際のレスポンスを確認することができます！
例えば、りんごとみかんについて、2記事作成したコンテンツを取得した場合、下記のようなレスポンスが帰ってきます。

{
    "contents": [
        {
            "id": "ryz7lqr0ghvc",
            "createdAt": "2025-03-11T02:38:56.436Z",
            "updatedAt": "2025-03-11T02:38:56.436Z",
            "publishedAt": "2025-03-11T02:38:56.436Z",
            "revisedAt": "2025-03-11T02:38:56.436Z",
            "title": "美味しいみかんについて",
            "media": {
                "url": "https://images.microcms-assets.io/assets/123289ad586f490b81efd243c270ff44/bdad594a190b4d1887200209ad82ba38/fruit_mikan_set.png",
                "height": 355,
                "width": 400
            },
            "text": "愛媛みかんこそ至高。"
        },
        {
            "id": "2fow72ve7r5r",
            "createdAt": "2025-03-11T02:37:07.504Z",
            "updatedAt": "2025-03-11T02:37:07.504Z",
            "publishedAt": "2025-03-11T02:37:07.504Z",
            "revisedAt": "2025-03-11T02:37:07.504Z",
            "title": "美味しいりんごについて",
            "media": {
                "url": "https://images.microcms-assets.io/assets/123289ad586f490b81efd243c270ff44/8fb2f73ddcc441239ac134dd98d9c358/kari_ringo.png",
                "height": 400,
                "width": 342
            },
            "text": "青森りんごこそ至高。"
        }
    ],
    "totalCount": 2,
    "offset": 0,
    "limit": 10
}

"title","media","text"はAPIスキーマの設定で決めたフィールドIDになります。
これらに、記事の作成時に入力した情報がそれぞれ格納されています。

取得したAPIは常に更新されるので、記事投稿に合わせて自動更新されるWEBサイトを制作することができるのです！

以上でmicroCMSの環境構築は完了です！