【Jamstack】microCMSでAPIを生成してみる

ホーム
BLOG
【Jamstack】
【Jamstack】microCMSでAPIを生成してみ…

【Jamstack】
2023.01.17

【Jamstack】microCMSでAPIを生成してみる

1. 概要

microCMSは国産のヘッドレスCMSです。

WordPressの管理画面側のみの機能を提供しているようなサービスで、データを管理するための管理画面と登録したデータを取得するためのAPIを提供しており、JamstackやSSGでWebサイトを制作する際によく利用されています。

microCMS｜APIベースの日本製ヘッドレスCMS

2. APIを作成してみる

アカウントの登録やプロジェクトの作成については、画面の手順通り進めればよいので省略。
アカウントを作成した後、管理画面にアクセスすると以下のように表示されると思います。

microCMSでは2022年4月にリリースされたAPIテンプレート機能を使用して、用途に合ったAPIを簡単に生成することができます。

APIを1クリックで生成できる「APIテンプレート」機能をリリースしました

今年は個人の技術ブログでも作ろうかと思っているので、今回はブログを選択。
数十秒ほど待機すると「ブログ」と「カテゴリ」の２つのAPIとサンプルデータが生成されます。

生成されたブログのサンプルデータをクリックすると、コンテンツの編集画面に遷移します。

編集画面ではタイトルの修正やアイキャッチ画像の設定ができたり、記事の内容をmarkdownで書くことができたりと非常に使いやすく便利な作りとなっています。

3. 生成されたデータを取得してみる

サイドメニュー > 権限管理 > 1個のAPIキーをクリックし、APIキー管理画面へ遷移します。
既にAPIキーが生成されているはずなのでコピーし、ターミナルから以下を実行します。
${}の部分は適宜置き換えてください。

$ curl "https://${service-id}.microcms.io/api/v1/" -H "X-MICROCMS-API-KEY:${api-key}"

Response

{
    "contents": [
        {
            "id": "wat6dydr1",
            "createdAt": "2023-01-16T15:23:24.138Z",
            "updatedAt": "2023-01-16T15:23:24.138Z",
            "publishedAt": "2023-01-16T15:23:24.138Z",
            "revisedAt": "2023-01-16T15:23:24.138Z",
            "title": "（サンプル）まずはこの記事を開きましょう",
            "content": "<h2 id=\"hdb41525ba7\">ブログテンプレートから作成されました🎉</h2><p>ブログテンプレートからAPIを作成しました。<br>おつかれさまでした🎉<br></p><h2 id=\"hf45076424a\">APIプレビューを試そう🚀</h2><p>最初に「APIプレビュー」をしてみましょう。<br>入稿したコンテンツはAPI経由で取得し、Viewに繋ぎ込みます。<br>APIプレビューでは実際のAPIレスポンスを確認でき、あなたの開発を加速させます。<br><br>👇まずはここをクリックします。<br><img src=\"https://images.microcms-assets.io/assets/cb96193ac1b54f069361764cb684789e/fc49d9fc25954a548ae2bf9f9a7e558e/blog-template-description1.png\" alt=\"\"><br><br>APIプレビュー画面が開いたら、<strong>「取得」</strong>ボタンでリクエストを試してみましょう。<br><img src=\"https://images.microcms-assets.io/assets/cb96193ac1b54f069361764cb684789e/1115f1dc140b44c591be4453f9796cda/blog-template-description2.png\" alt=\"\"><br><br>この記事の内容がAPIで取得できていることがわかります。<br><img src=\"https://images.microcms-assets.io/assets/cb96193ac1b54f069361764cb684789e/029e3996672e4f90a2f885de460f0113/blog-template-description3.png\" alt=\"\"></p><h2 id=\"h88398f2fb7\"><br>次にやること🏃</h2><p>APIプレビューで確認したレスポンスを参考に、あなた自身のWebサイトを構築しましょう。<br>microCMSはAPIでコンテンツを取得するため、お好きな言語・フレームワークで画面を構築できます。<br></p><ul><li><a href=\"https://document.microcms.io/tutorial/javascript/javascript-top\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript SDK</a></li><li><a href=\"https://document.microcms.io/tutorial/nuxt/nuxt-top\" target=\"_blank\" rel=\"noopener noreferrer\">Nuxt SDK</a></li><li><a href=\"https://document.microcms.io/tutorial/gatsby/gatsby-top\" target=\"_blank\" rel=\"noopener noreferrer\">Gatsby SDK</a></li></ul><p><br>その他に<a href=\"https://microcms.io/features/sdk\" target=\"_blank\" rel=\"noopener noreferrer\">サーバーサイドSDK（PHP / Go / Ruby）やモバイルSDK（iOS / Android）</a>もございます。<br><br>お困りなことや疑問点などございましたらお気軽にご連絡ください。<br><br>サポート窓口：<a href=\"mailto:support@microcms.io\" target=\"_blank\" rel=\"noopener noreferrer\">support@microcms.io</a><br>よくある質問：<a href=\"https://help.microcms.io/ja/knowledge\" target=\"_blank\" rel=\"noopener noreferrer\">https://help.microcms.io/ja/knowledge</a></p>",
            "eyecatch": {
                "url": "<https://images.microcms-assets.io/assets/4d80c8ec72754b38aef561764cb684789e/4d80c8ec72754b38aef561764cb684789e/blog-template.png>",
                "height": 630,
                "width": 1200
            },
            "category": {
                "id": "ydnnxlp3zh",
                "createdAt": "2023-01-16T15:23:22.203Z",
                "updatedAt": "2023-01-16T15:23:22.203Z",
                "publishedAt": "2023-01-16T15:23:22.203Z",
                "revisedAt": "2023-01-16T15:23:22.203Z",
                "name": "更新情報"
            }
        }
    ],
    "totalCount": 1,
    "offset": 0,
    "limit": 10
}

microCMSで生成されたコンテンツが取得できていますね！