HeadlessCMSのGraphCMSを使ってみる

2020/11 から始まった、ものづくりをする高校生のための新しい団体、Palettteが主催する Palettte Advent Calendar 2020 の 14 日目の記事となります。

HeadlessCMS って？

MicroCMS 公式の記事をご覧になったほうがわかりやすいと思うのでリンクを張っておきます。
ヘッドレス CMS とは何か？従来 CMS との違いやメリデメを解説！

読むのが面倒というひとのためにざっくり説明すると表示部分をもたず、API 的にコンテンツを取得できる CMS です。

Contentful や MicroCMS、Strapi などが有名でしょうか。

つい最近、コンテンツを簡単に編集できるようにしたいけど Wordpress は大変だよな～、というようなタイミングがあったので何がいいのかいろいろ触ってみました。

状況によりけりだとは思いますが、以下のようなイメージ。

サービス	メリット・デメリット
Contentful	無料枠が大きく、作る側としてはとても使いやすかった。しかし管理画面が英語のみ、かつできることが多すぎて記事を編集する人に多少高い能力が求められてしまう気がした。
microCMS	機能面や見た目ではとても満足。何より日本語で良いので誰にでも使ってもらいやすい。しかし無料プランが一人のみで、編集者を追加しようとすると一気に 4,900円/月 になってしまい断念。個人ならこれが一番よさそうだった。
Strapi	オープンソースのやつ。全体的にとても良くできており、見た目も一番好みだった。しかしセルフホストした場合の管理が面倒だったため今回は見送り。
GraphCMS	これから触る

そこで、調べていて見つけたGraphCMSを触ってみる。

結論から言うと無料範囲で十分使え、見た目もよくとても使いやすかった。英語のみではあるが直感的にわかるので大丈夫そう。

プロジェクト作成

「Sign up for free」から登録し、プロジェクトを作成します。
(GitHub 等の連携の場合も下の利用規約への同意のチェックボックスにチェックしないと登録できないので注意。)

途中、プロジェクト名とリージョンを選ぶところがありますが、なんと東京リージョンがあるので東京を選択。
プランは「Free forever」を選択します。

モデル作成

Schema から新規モデルを作成します。

ここでは適当にタイトルと Markdown の本文のフィールドを追加しました。

記事追加

作成が完了したら「Content」から記事を追加します。

こんな感じに編集して公開。

動かしてみる

記事の作成が終わったので、実際に使ってみます。
例にもれず今日も当日 18 時になってから自分の担当日であることに気づき課題が終わっていないため実装してる時間はありません。

「Postman」というシンプルに API 叩いたりやテストしたり、認証やモックの作成までできちゃう便利なアプリを使って楽をします。
→ そういえば試しに使える Playground がありました。あほですね。

query MyQuery {
  tests {
    body
    createdAt
    title
  }
}

という感じで記事データの取得ができました。

まとめ

GraphQL が使えちゃうのも最高だし、サポートもよくてとても使いやすかったです。
これから HeadlessCMS を使って見る人は試して損はないと思います。