Home

GraphCMSとGatsbyでブログ開設

update: 2019-04-22

GraphCMS

GraphCMSとは

今話題のHeadlessCMSの一つです。無料プランあります!本ブログでもリソース置き場として使用しています。
APIドリブンの同様のサービスではContentfulが人気ですが、GraphCMSの特徴としてはやはりapiがGraphQL(query、mutation)をサポートしていることです。というかGraphQLしか使えません笑
GatsbyがなんでもかんでもGraphQL化してくれますが、それはqueryにおいてのみ(のはず)です。mutationでもGraphQLが使えるのは、自前の投稿画面を作成する上でメリットなのではないでしょうか?自分は実装してませんが🙄

WebUI

ブログをGraphQLのTypeとしてGUIで定義します。これがなかなか面白い。
Enumも用意されてるので、自分はカテゴリをEnumで定義してます。

マークダウンでブログを書くことができます。プレビューを横に分割表示できないのがつらい。 GraphiQLの画面も用意されてるので、一々gatsby developで立てる必要もありません。

欠点

無料プランにおいてです

Integration

なんと、WebHookが使えません😂 なのでNetlifyへのデプロイはiPhoneユーザーならSiriを使いましょう(各自判断)。Netlifyのbuild用apiを叩くショートカットを作成してあげれば🙆‍♂️これで半自動化!
※静的ページのSSRのため、記事を更新したら都度buildが必要

resource

レコードが500件までしか保存出来ません。画像も1レコードにカウントされるため、本記事のように1つの記事に画像を2つ使った場合、約150件までしか登録できません。冷静に考えると十分か🤔
画像もAssetというGraphQLの1Typeとして扱われるため1レコードと換算されるのは合点がいきます。

Gatsbyとの兼ね合い

Gatsby自体の説明はここではしません。そこまで詳しくないので(ぇ
GraphCMS上のリソースはgatsby-source-graphqlというgraphql用の汎用プラグインのurlに自分のGraphCMSエンドポイトをセットすることで取得できます。 restのみ提供しているサービスだと、graphqlに変換するプラグインも設定する必要がありますが、GraphCMSは以下略。
実際のコーディングはこちらが参考になります。注意点として、ご紹介した記事ではgatsby-source-graphcmsを使用していますが、GitHubにも書かれている通り、前述したgatsby-source-graphqlを使うようにしましょう。

補足

さらっと冒頭でAPIドリブンと言いましたが、Netlify CMSというGitドリブンのCMSサービスもあります。こちらは各自用意したgitリポジトリを記事の保管場所とします。さらにNetlifyがgitのpushをトリガーにしてデプロイするため、投稿->デプロイが自動で行われるとのこと。流れが綺麗すぎる。無駄がない。
こちらでサービスの登録からNetlifyへのデプロイまでの流れが紹介されてます。
尚調査したところ、BETAではありますが、ContentfulもGraphQLのAPIを提供しているようです。。

ぼくはGraphCMSを応援しています✊