Headless CMS 軽く触って比較してみた(Contentful / microCMS / strapi / GraphCMS)

Blogを作ろう！ってなったものの、どのHeadless CMSを使えばいいか、全くわからなかったので、とりあえず調査しました。

## はじめに
この記事はあくまで自分がどのHeadless CMSを使ってblogを作るかを検討するための比較記事です。
欠けている機能説明等も多いと思いますが、ご了承ください。

HeadlessCMS比較記事は圧倒的に下記記事がわかりやすかったです。

> [4種類のHeadlessCMSを試してみた感想（wordpress/strapi/contentful/microCMS）](https://qiita.com/to4-yanagi/items/4e431b99b78401ef65ca)

## [Contentful](https://www.contentful.com/)
### 特徴
* とにかく高機能、細かく設定できる、かゆいところに手が届く
* 無料枠 2つのプロジェクト
* 無料枠 メンバー数 10人
* 無料枠 レコード数上限 5000個

### 管理画面のUI
#### データ構造作成
<img width="1280" alt="スクリーンショット 2019-12-29 16.23.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/3ad1c68f-2045-6d37-5fe1-350361f31ed3.png">

#### データの形式選択
<img width="1280" alt="スクリーンショット 2019-12-29 16.20.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/b7a89e4c-f301-9aed-d37f-d61124fc677f.png">
<img width="839" alt="スクリーンショット 2019-12-29 16.21.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/9347229e-5981-18b0-81f4-2d9c41f614ce.png">

#### コンテンツ編集画面
<img width="1280" alt="スクリーンショット 2019-12-29 16.24.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/cabdfe40-4b15-d900-9ae8-a1a2e6516dc6.png">

### API
<img width="1280" alt="スクリーンショット 2019-12-29 16.45.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/9223ad49-c643-ed7c-40f7-ee079ea03043.png">

### ちょっとミスったこと
* markdownは`rich text`じゃなくて`text内`の`long text`

### 触ってみた感想
* めっっっっちゃ高機能、なにもかも実現できそう。
* 無料枠がはんぱない、十分すぎる。
* 管理画面に対する学習コストはかかりそう。
* ちょっとUIが煩雑だったきがした。

### 参考記事
* [【画像で説明】Contentfulの使い方。初期設定と各メニューについて学ぶ](https://blog.cloud-acct.com/posts/blog-contentful-signup/)👈おすすめ！
* [Contentfulの料金と使い方を整理しつつ、Nuxt.jsと組み合わせてブログを作る](https://qiita.com/nishinoshake/items/466db319ec485ebc7db8)
* [次世代Headless CMS「contentful」事始め](https://qiita.com/daikiojm/items/3fbde3c88a7d0a053675)
* [Contentfulを使い倒したくてContentful芸を磨く【検索・絞り込み編】](https://gift-tech.co.jp/articles/contentful-skils)
* [Nuxt.jsとContentfulでブログ作ってみた](https://qiita.com/hisako135/items/082115b50df92ef3e941)

## [microCMS](https://microcms.io/)

### 特徴
* 日本製
* 2019年8月スタートとすごく新しい
* 無料枠 メンバー数2人
* 無料枠 データ転送量100GB/月 使える

### 管理画面のUI
#### データ構造作成
<img width="1016" alt="APIスキーマ作成" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/f71b9e00-7475-2adc-ae16-6b8db39df8b0.png">

#### データの形式選択
<img width="1065" alt="形式" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/1247f290-5978-93dd-29f2-13f0ff8bc79f.png">

#### コンテンツ編集画面
<img width="1017" alt="記事書くところ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/a7459947-b2d4-c799-c43d-e7443df78f97.png">

#### API
<img width="1280" alt="スクリーンショット 2019-12-29 16.28.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/0886ae27-2f0a-ee2a-e23d-04b4c61143b8.png">

#### 開発ロードマップ
これは嬉しい....！
<img width="350px" alt="開発ロードマップ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/1d5bf4c4-6ab7-a7d0-0144-db7372d01b20.png">

### 触ってみた感想
* 日本語うれしい
* 改善スピードの速い
    * 開発ロードマップが見える化されてる
* シンプル、UIお綺麗
* シンプルすぎて現時点ではほとんどの機能は自分で実装する必要がある。(絞り込み、検索など)
    * 開発予定のものも多い。今後に期待！！

### 参考記事
* [microCMSブログ(公式)](https://microcms.io/blog/)
* [国産Headless CMS 「Micro CMS」を試してみた](https://qiita.com/oimo23/items/fc2b36b5bf543b0f23cc)
* [最近話題のヘッドレスCMS「microCMS」+Nuxtでサイトを作った話](https://qiita.com/yutopia898/items/653068aa3d8237f3e89a)


## [strapi](https://strapi.io/)

### 特徴
* OSS
* 無料(ただし、サーバー代がかかる。)

### 管理画面のUI
#### データ構造作成
<img width="1280" alt="APIスキーマ作成" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/9c961382-9ba7-6de6-db9e-5f031810b0f2.png">

#### データの形式選択
<img width="1280" alt="strapi データの形式選択" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/e082f6ad-ba42-695e-74e9-67208f3402a9.png">

#### コンテンツ編集画面
<img width="1280" alt="スクリーンショット 2019-12-29 21.28.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/a7b4da23-1aef-23c9-77af-459397f20b19.png">

### 触ってみた感想
* 機能は多いイメージ、サービスが自由に作れそう
    * ユーザー登録、ユーザー登録後のメール、password管理など 
* 管理画面とターミナルを行き来して、何をどっちで設定しなきゃいけないかわからなくなった
* APIを叩いてみたら、`403`で返ってきて焦った
    * 権限など細かい設定が必要
* UIは使いづらい。。。

自分が求めてたものとは違いました...

### 参考記事
* [公式ドキュメント](https://strapi.io/documentation/3.0.0-beta.x/getting-started/introduction.html)
* [超簡単にAPIが作れる？Headless CMS “strapi” を触ってみる](https://www.hivelocity.co.jp/blog/45845/)

## [GraphCMS](https://graphcms.com/)
### 特徴
* 記事特化ではない。
* 無料枠 メンバー数 2人
* 無料枠 レコード数上限 500個
* 無料枠 権限 1種類
* もちろんだけどGraphSQLが使える。
    * graphiqlを叩いて、データを取得する

### 管理画面のUI
#### データ構造作成
<img width="1280" alt="スクリーンショット 2019-12-29 22.02.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/960880b3-6a19-7907-27ed-2d56f20d3c23.png">
#### データの形式選択
<img width="1280" alt="スクリーンショット 2019-12-29 22.02.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/bcbc29cb-4151-27b2-568a-ede1e82676d0.png">
#### コンテンツ編集画面
<img width="1280" alt="スクリーンショット 2019-12-29 22.07.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/3ba51737-3b7e-f161-f7e4-b16b2ad2369a.png">
#### graphiql
<img width="1280" alt="スクリーンショット 2019-12-29 22.06.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/832a73f3-976d-1727-e332-3a63209fe314.png">

### 触ってみた感想
* UIが綺麗！！すごく使いやすい。
* graphiqlを挟むため、すぐにAPIが叩ける訳ではない...？
* 記事の書き方がマークダウンのみに限られてる感があった。(最初間違えた)

### 参考記事
* [GraphCMS 公式ドキュメント](https://graphcms.com/docs/introduction/)
* [headlessCMSの1つGraphCMSについて](https://qiita.com/tomof/items/bf760008f4e96ea6ae50)

## さいごに
`Contentful`と`microCMS`でどちらを使おうかを迷いましたが、
サービスの成長への期待と、自分が作りたいものがいたってシンプルだったため、`microCMS`を使おうと思います！
機会があったら、別で`Contentful`も使ってみたいです。

英語つよくなりたい..........

### 12月30日 更新
`microCMS`はmarkdownのプレビューがなく、個人的に記事を残しづらかったため、`Contentful`にしました。。。
管理画面を使いあさって、使うものを選定すべきでした(反省)