microCMS使ってみた

今回は以前から気になっていた、日本製Headless CMSであるmicroCMSを触ってみたのでそのことについて書きます

Headles CMSとは

Head (ビュー = 表示画面) less(ない) CMS(コンテンツ管理システム)で、表示画面がないCMSのことです。
今までのCMSは表示画面とコンテンツ管理が合わさったものでしたが、HeadlessCMSは表示画面が存在しないので、自分で自由に作成することができます。
また、サイトのある一部分のみコンテンツ管理することも可能です。 Contentfulなどが有名だと思います。

microCMSとは

導入でも書きましたが、microCMSは日本製のCMSです。
ドキュメントや、サポートまですべて日本語対応しているため、初めてHeadlessCMSを触ってみる場合には取り扱いやすいと思います。
また、完全に主観ですが管理画面が分かりやすいため、エンジニアだけでなくコンテンツを管理する編集者も使いやすいと思います。

実際に使ってみる

それでは実際にブログ記事を管理する想定で使ってみます。
アカウント作成などは省きます。

APIの作成

まずはAPIを作ります。
API名とエンドポイントを指定します。 f:id:ryonnsui1201:20200528230033p:plain

APIで取得できるデータの形式を指定します。
今回は、記事一覧を取得するAPI作成するためリスト形式にします。 f:id:ryonnsui1201:20200528232932p:plain

APIで管理する各フィールドを作成します。
シンプルに

記事タイトル
記事内容
投稿日時

を作成しました。

f:id:ryonnsui1201:20200528233356p:plain

フィールドの種類はたくさんあるため、コンテンツの種類によって選択します。 f:id:ryonnsui1201:20200528233752p:plain

フィールドに対して、複数のコンテンツを参照させることができます。
例えば、記事に対して複数タグなどをつけたい場合は、タグを返すAPIを作成しコンテンツを公開することで、記事一覧のAPIのタグのフィールドに複数のコンテンツを参照させることができます。
f:id:ryonnsui1201:20200529005010p:plain

コンテンツ作成

APIは作成したので、コンテンツを作成します。
先程作成した、タグも複数紐付けることができています。
コンテンツは、予約公開することもできます。 f:id:ryonnsui1201:20200529005724p:plain

APIプレビューで、APIのレスポンスを簡単にみることができます。 f:id:ryonnsui1201:20200529010307p:plain

画面での表示

画面で表示させます。

APIキーを保護する

APIキーをenvファイルで保護します。

.envにAPIキーを記述

API_KEY=key

記事一覧ページ

記事を一覧表示するだけのページを作ります tailwindcssを使っています。

<template>
  <div class="max-w-screen-lg mx-auto mt-5 flex flex-col items-center">
    <div>
      <article-card
        v-for="article in articles"
        :key="article.id"
        :article="article"
      />
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import ArticleCard from '~/components/ArticleCard.vue'

export default {
  components: {
    ArticleCard
  },
  async asyncData() {
    const { data } = await axios.get(
      'https://bloglog.microcms.io/api/v1/blogs',
      {
        headers: { 'X-API-KEY': process.env.API_KEY }
      }
    )
    return {
      articles: data.contents
    }
  },
  data() {
    return {
      articles: [],
    }
  }
}
</script>

記事タイトル、投稿日、タグ、記事の内容が表示されていることが確認できました。 f:id:ryonnsui1201:20200529022345p:plain

さいごに

紹介の部分でも書きましたが、microCMSは日本語のドキュメントが充実しているので、扱いやすいです。
早いペースで新機能が追加されたり、改善されているため今後もっと使いやすくなっていくのでは、と思います。

参考

microcms.io

テクメモ

備忘録