microCMS をさわってみる その9

日本製のHeadless CMS、microCMSをさわってみる。その9

GitHub: https://github.com/yuheijotaki/micro-cms-ramen
Netlify: https://ramen.yuheijotaki.dev/

ラーメンコンテンツの描画

前回作ったコンテンツを描画していきます。
curlは python -mjson.tool をつけると見やすく出してくれます。

curl "https://jtk.microcms.io/api/v1/demo" -H "X-API-KEY: ここにAPIキー" | python -mjson.tool

JSONの中身は下記のような感じ

{
    "contents": [
        {
            "category": [
                {
                    "category": "\u307f\u305d",
                    "createdAt": "2020-03-05T07:07:17.724Z",
                    "id": "5__2y6A9e",
                    "updatedAt": "2020-03-05T07:07:17.724Z"
                },
                {
                    "category": "\u30e9\u30fc\u30e1\u30f3",
                    "createdAt": "2020-03-05T07:05:54.951Z",
                    "id": "pM7WYjpvf",
                    "updatedAt": "2020-03-05T07:07:24.608Z"
                }
            ],
            "content": "<h3 id=\"hjzz2WrKPk3\">\u3010\u6c60\u888b \u5473\u564c\u30e9\u30fc\u30e1\u30f3\u3011</h3><p>\u30b7\u30c3\u30ab\u30ea\u3068\u3057\u305f\u6b6f\u5fdc\u3048\u306e\u9eba\u306f\u6fc3\u539a\u5473\u564c\u30b9\u30fc\u30d7\u3068\u76f8\u6027\u629c\u7fa4\u3067\u3059\u3002</p>",
            "createdAt": "2020-03-03T06:37:47.405Z",
            "id": "hanada",
            "image": {
                "url": "https://images.microcms-assets.io/protected/ap-northeast-1:ab97ca46-b946-408b-917a-fae46b705181/service/jtk/media/FireShot%20Capture%20062%20-%20%E9%BA%BA%E5%87%A6%20%E8%8A%B1%E7%94%B0%20%E6%B1%A0%E8%A2%8B%E5%BA%97%20-%20%E6%B1%A0%E8%A2%8B_%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3%20%5B%E9%A3%9F%E3%81%B8%E3%82%99%E3%83%AD%E3%82%AF%E3%82%99%5D%20-%20tabelog.com.png"
            },
            "name": "\u9eba\u51e6 \u82b1\u7530 \u6c60\u888b\u5e97",
            "updatedAt": "2020-03-05T07:12:51.182Z",
            "url": "https://tabelog.com/tokyo/A1305/A130501/13109890/"
        }
    ],
    "limit": 10,
    "offset": 0,
    "totalCount": 1
}

詳細ページのテンプレート、出力部分だけとこんな感じになります。
JSONの形通りにVueで出力すればOKですね。

<template lang="pug">
  div
    h1 {{ post.name }}
    div(
      v-html="post.content"
    )
    h2 カテゴリー
    ul
      li(v-for="item in post.category") {{item.category}}
    h2 食べログURL
    p
      a(:href="post.url" target="_blank") {{ post.url }}
    p
      img(:src="post.image.url")
</template>

フロント（見た目）はこんなかんじになりました。

一覧

詳細

まとめ

一通り試したいことの最低ラインができたので一旦完了にします。
本来は、microCMSのその他機能

• 下書きプレビュー
• ステージングなどの環境分け

などもできれば実案件で使うときに役立てるかもしれないのですが、十分に検証はできたかと思います。

実案件でmicroCMS使う際の懸念点としていまだに残っているのは↑の2点ができるかということと、

• プランや容量がどこまでの規模の案件で使えるかの確認
• コンテンツの形式が限られているのでその要件に収まるか
• GitHub + Netlify 以外のサービスと組み合わせる時の環境構築どうするか
• API（microCMS）側のサーバーどこまで安定しているのか

などの検証や調査みたいなことが必要だと思っています。

ただ静的htmlで作っていた小規模のサイトにちょこっとお知らせエリアとか制作実績を加えたいみたいな要件に関してはすごい使えるなと思います。
それこそHeadless CMSの特徴なのでWPごと入れる手間に比べれば、かなりエンジニアにとってもいい流れにあるなあということを体感できました。