ContentfulとヘッドレスCMS
Qiita
やりたいこと
海外アーティストのプロフィールをまとめたサイトを作りたい
まとまった日本語文献がなく、一定の需要があると見た
Webサイトの企画と運営、マーケティングとSEO対策、ウェブ広告とマネタイズなどFE以外でも勉強になる
この手のサイトはWordPressで作るのがデファクトスタンダード
コンテンツ登録、サイト構築、デザイン変更など一通りのことはできる
しかし個人的にはWordPressを今から積極的に採用したくない
静的コンテンツ生成、自由度の高い画面実装、移植しやすいデータベース…
そこでヘッドレスCMS＋静的サイトジェネレーターの組み合わせを検討
Contentful + Gatsby.js
contentful-cli がひとまとめで提供
ヘッドレスCMSとは
ヘッドレスCMS（Headless CMS）
APIベースのCMS
CMS（Contents Management System）
コンテンツ管理システム
この記事の図が丁寧
従来のCMS（WordPress）
データベースとその管理画面、またそこから動的に生成されるコンテンツおよびそれを表示するウェブページを包括的に提供
https://images.ctfassets.net/eebw0y2sorkq/01EEsrlQGqwxax3iqQlupW/d003064b4599e4e469856decc4e03ee8/wordpress_arch.png
ヘッドレスCMS（Contentful）
データベースとその管理画面のみを提供
コンテンツ生成およびウェブサイト構築には関わらない
より柔軟なウェブサイト設計が可能
https://images.ctfassets.net/eebw0y2sorkq/4V1tCwFt7uxCLTDt2sdfeC/8dee66900cde26f7d1f6fa4e94e83001/contentful_arch.png
API設計
API reference | Contentful
APIには6種類ある
Content Delivery API
JSONを取得
Content Management API
JSONで作成・編集
Content Preview API
下書きも取得
Images API
画像の取得・加工
GraphQL Content API
GraphQLで取得
SCIM API
権限の編集
JSONの取得
Content Delivery API
エンドポイント
Spaces
リクエスト
code:curl
curl --include \
--request GET \
レスポンス
code:json
{
"sys": {
"type": "Space",
"id": "yadj1kx9rmg0"
},
"locales": [
{
"code": "en-US",
"default": true,
"name": "U.S. English",
"fallbackCode": null
}
]
}
Entries collection
リクエスト
code:curl
curl --include \
--request GET \
レスポンス
code:json
{
"sys": {
"type": "Array"
},
"total": 13,
"skip": 0,
"limit": 100,
"items": [
{
"sys": {
"space": {
"sys": {
"type": "Link",
"linkType": "Space",
"id": "yadj1kx9rmg0"
}
},
"id": "4BqrajvA8E6qwgkieoqmqO",
"type": "Entry",
"createdAt": "2017-02-20T17:18:50.023Z",
"updatedAt": "2017-02-21T14:29:12.672Z",
"environment": {
"sys": {
"id": "master",
"type": "Link",
"linkType": "Environment"
}
},
"revision": 2,
"contentType": {
"sys": {
"type": "Link",
"linkType": "ContentType",
"id": "2PqfXUJwE8qSYKuM0U6w8M"
}
},
"locale": "en-US"
},
"fields": {
"productName": "SoSo Wall Clock",
"slug": "soso-wall-clock",
"productDescription": "The newly released SoSo Clock from Lemnos marries simple, clean design and bold, striking features. Its saturated marigold face is a lively pop of color to white or grey walls, but would also pair nicely with navy and maroon. Where most clocks feature numbers at the border of the clock, the SoSo brings them in tight to the middle, leaving a wide space between the numbers and the slight frame. The hour hand provides a nice interruption to the black and yellow of the clock - it is featured in a brilliant white. Despite its bold color and contrast, the SoSo maintains a clean, pure aesthetic that is suitable to a variety of contemporary interiors.",
"sizetypecolor": "10\" x 2.2\"",
"image": [
{
"sys": {
"type": "Link",
"linkType": "Asset",
"id": "KTRF62Q4gg60q6WCsWKw8"
}
}
],
"tags": [
"home décor",
"clocks",
"interior design",
"yellow",
"gifts"
],
"categories": [
{
"sys": {
"type": "Link",
"linkType": "Entry",
"id": "7LAnCobuuWYSqks6wAwY2a"
}
}
],
"price": 120,
"brand": {
"sys": {
"type": "Link",
"linkType": "Entry",
"id": "4LgMotpNF6W20YKmuemW0a"
}
},
"quantity": 3,
"sku": "B00MG4ULK2",
}
},
}
}
チュートリアル
インストール手順
code:bash
$ yarn global add contentful-cli
$ contentful guide
? Open a browser window now? Yes
? Paste your token here: {token_hash}
? Create your new Space now? Yes
? Do you want to confirm the space creation? Yes
? Populate the Content model to your Space now? Yes
? The directory should be called: (contentful-gatsby-blog)
? Where should the 'contentful-gatsby-blog' directory be located?
? Run Gatsby Starter Blog locally in development mode now? Yes
触ってみた感想
リファレンスが読みづらい
管理画面がそんなに使いやすくない
一度決めたコンテンツモデルを変更するのがめんどい
まとめ：使いこなすまでに時間がかかりそう
ヘッドレスCMSは既存のCMSを置き換えるか？
少なくとも短中期的には disagree と予想
日本におけるCMS利用は主に以下の二つ（推測）
企業運営のコーポレートサイト
中小規模の企業が多い
情報量はそれほど多くなく、DBの分離や静的サイト化の恩恵が少ない
扱い慣れたインターフェースを好む
モデルを前面に押し出す、専門性の高いUI/UXは敬遠される
個人運営の情報まとめサイト
ユーザーに非エンジニアが多い
APIが分離されるとコーディングが必須に
アイデアをすぐ形にすることが重要
静的なモデル構築は試行錯誤しながらサイトの構想を練るのには向かない
現時点でのContentfulの問題点
日本語未翻訳
CLIほぼ必須
自由度が高すぎる
長期的に見れば部分的に成功しうる
大規模サイトに関して言えばデファクトスタンダードになっていくのでは
ユーザー全体のプログラミングスキルが向上すれば…？