HeadlessCMSのGraphCMSを使ってみる

2020.12.14に公開

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

HeadlessCMSって？

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

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

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

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

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

サービス	メリット・デメリット
Contentful	無料枠が大きく、作る側としてはとても使いやすかった。しかし管理画面が英語のみ、かつできることが多すぎて記事を編集する人に多少高い能力が求められてしまう気がした。
MicoCMS	機能面や見た目ではとても満足。何より日本語で良いので誰にでも使ってもらいやすい。しかし無料プランが一人のみで僕と編集する人を追加しようとすると一気に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を使って見る人は試して損はないと思います。