Headless CMS を導入する #3

inouetakuya · 2019-03-15T01:20:31Z

@ryamakuchi

Copy from: Headless CMS を導入する · Issue #365 · kazupon/vuefes

解決したい問題

Vue Fes Japan 2018 の際、スポンサー情報の追加、変更のたびにソースコードを変更する必要が発生して面倒だった

問題を解決するために

Headless CMS を導入して、スポンサー対応担当者が、スポンサー情報を CMS 上で編集すれば作業が完了できるようしたい
CMS が編集されたタイミングで Netlify へ webhook を飛ばして nuxt generate が実行されるようにする
nuxt generate 時に CMS の情報を API で取得し、最新のスポンサー情報がウェブ上に公開されるようになる

この Issue の完了条件

どのような Headless CMS があるか調査されていること

https://headlesscms.org/ あたり？

Headless CMS が選定されていること

上記「問題を解決するために」が実現できること
CMS での編集作業がしやすいこと
画像（スポンサーバナー）をアップロードできること
無料で利用できること
ある程度メジャーであること（のちに情報を公開することを視野に入れる）
Web サイト担当者のレビューを受けていること
スポンサー対応担当者のレビューを受けていること（CMS での編集作業がしやすいか？）

Headless CMS を利用して 2019年のスポンサー情報を更新できる状態になっていること

2018年のスポンサー情報を CMS に移動させる必要はない
master ブランチにマージされている必要はない。トピックブランチで動いていればよい

inouetakuya · 2019-05-11T13:55:37Z

スケジュールの目安

@ryamakuchi CC: @treby @positiveflat

このタスクにおいて、スケジュールの目安としては、

Headless CMS を利用して 2019年のスポンサー情報を更新できる状態になっていること

が 5月末 で完了するようアクションしてもらえると有り難いです 🙏

メモ:

スポンサーの募集が 5月下旬に開始される
スポンサー情報（バナー画像など）が 6月頭くらいから揃い始めると予想

@ryamakuchi へお願い

調査や選定など、いくつかの関連するタスクについて、どんな感じのスケジュールで進めていくか、決めて共有していただけると有り難いです 🙏

@448jp @hisako135 へお願い

スポンサー情報を、サイトにどのように掲載するか、デザイン作成・共有をお願いしたいですー 🙏

448jp · 2019-05-12T04:18:49Z

@inouetakuya
了解ですー、私の方でデザイン起こします！

treby · 2019-05-13T00:19:22Z

@inouetakuya 昨年の知見ありがとうございます。

スポンサー情報の追加、変更のたびにソースコードを変更する必要が発生して面倒

昨年このようなことがあったのですね、、、共有ありがとうございます。

Headless CMS を利用して 2019年のスポンサー情報を更新できる状態になっていること
が 5月末

こちら把握しました、よろしくお願いします

ryamakuchi · 2019-05-13T01:19:59Z

@inouetakuya
承知しました！対応が遅くなってしまいすみません。 🙇‍♀

5/15（水）までにどのような Headless CMS があるか調査完了させる
5/16（木）Headless CMS の選定
- この日にこちらの Issue で @inouetakuya @treby @positiveflat にレビュー依頼出します
5/19（日）Headless CMS を利用して 2019年のスポンサー情報を更新できる状態になっていること
- 選定した Headless CMS がトピックブランチで動いている状態

こちらのスケジュールで動いていきたいと思います。
よろしくお願いします！

inouetakuya · 2019-05-13T01:40:54Z

@ryamakuchi

スケジュールありがとうございます！結構、短期集中でガッとやっちゃう感じですね。了解しました。張り切って行きましょう！！:dash:

ryamakuchi · 2019-05-14T19:23:34Z

HeadlessCMS の調査

該当条件

Netlify への webhook があり、情報が更新された時点で nuxt generate が実行されること
ある程度メジャーであること（のちに情報を公開することを視野に入れる）
- Nuxt + Netlify + HeadlessCMS の組み合わせで検索して参考になりそうな記事が見つかること
無料で利用できること
画像（スポンサーバナー）をアップロードできること
CMS での編集作業がしやすいこと
- 直感的でドキュメントを見なくても分かりやすい UI であること

追加の条件

ホスト型の HeadlessCMS であること

などインストール型の HeadlessCMS があることが分かった。
しかし今回の要件から考えるとホスト型の HeadlessCMS が適切と考える。

参考 URL

https://headlesscms.org/
https://app.milanote.com/1H6AuB1sewUWaR

手順

参考にする URL からホスト型の HeadlessCMS を調査する
その中から該当条件を満たしているものをリストアップする

該当する HeadlessCMS 一覧

Oh... 結構ありますね...

HeadlessCMS の選定

上記の 7つの HeadlessCMS を実際に触ってみる予定です。

メリットとデメリットを探り今回の要件に最適か検討する
CMS での編集作業がしやすいか調査する
メジャーかどうか調査する

を行い、5/16（木） までに選定完了させますので、よろしくお願いします！ 🙇‍♀

ryamakuchi · 2019-05-16T17:31:12Z

@inouetakuya @treby @positiveflat

レビュー依頼が遅くなってしまいすみません 🙇‍♀ 💦

今のところ候補が2つ挙がりました。
最終的な決めとしてはもう少し時間がかかりそうなため、一旦今分かっている情報を出したいと思います。

HeadlessCMS の選定

上記の 7つの HeadlessCMS を実際に触ってみました。

選定基準

メリットとデメリットを探り要件に最適か検討する
- GraphQL に対応しているか
CMS での編集作業がしやすいか調査する
- 管理画面は使いやすいか
- 無料枠で複数ユーザーが一つのコンテンツを管理できるかどうか
メジャーかどうか調査する
- Nuxt.js + Netlify + HeadlessCMS で検索しどれくらいサンプル記事が引っかかるか

選定メモ

Contentful
- GraphQL に対応している
  - https://www.contentful.com/developers/docs/javascript/tutorials/using-contentful-graphql-with-javascript/
- 管理画面が分かりやすい
- 無料枠で 10ユーザー使える
- 日本で一番メジャー
  - Google で検索したときのサンプル記事が多い
- 👑 今のところ王者
Storyblok
- GraphQL に対応している
  - Gatsby.js でのサンプル記事を見つけた
    - https://www.storyblok.com/tp/gatsby-multilanguage-website-tutorial
  - しかし Vue.js でのサンプル記事は見つからなかった
- コンポーネントごとにリソースを管理できる
  - ⚠️ しかし管理画面は分かりやすくはない
    - https://markus.oberlehner.net/blog/building-a-pre-rendered-website-with-nuxt-and-storyblok/
- ⚠️ 無料枠で1ユーザーまでしか使えない
- ⚠️ Nuxt + Netlify + Storyblok での日本語のサンプル記事がない
- ❌ 管理画面が想定していたものとは若干違っていた
Prismic
- GraphQL に対応している。だたし beta 期間であり利用するにはサポートに連絡する必要がある
  - https://prismic.io/docs/graphql/getting-started/intro-to-the-graphql-api
- 管理画面は使いやすい
- ⚠️ 無料枠で1ユーザーまでしか使えない
- 日本語でのサンプル記事が、Contentful ほどではないがいくつかある
  - https://blog.qrac.jp/posts/third-setting/
- ❌ Contentful よりも優れた点が見つからなかった
Netlify CMS
- 🙇‍♀️ これについては、他の CMS とは少し仕組みが違うようで、実際に環境構築しながらメリットデメリットを比較する必要がある
GraphCMS
- Api Explorer なるもので GraphQL の結果を確認できる
  - https://qiita.com/r4k9/items/aa3c37d29eb57a48e8ac
- 管理画面は使いやすい
- 無料枠では2ユーザー利用可能
  - https://graphcms.com/pricing/
- Tokyo リージョンを選べる
  - 19ms くらいの速さ
  - Europe や US なら 200ms くらいかかる
- ⚠️ 無料プランだと Webhook がない
  - meta タグに情報を埋め込むことができない
  - スポンサー個別ページなどを作成するときに困る
  - スポンサー以外の、例えばスピーカー情報を CMS で管理するとかいうときに困る
- 日本語でのサンプル記事が、Contentful ほどではないがいくつかある
  - https://www.slideshare.net/kunichan/jamstack-106680339
- ❌ Webhook がないのはキビシい
Sanity.io
- GraphQL に対応している（Public Beta）
  - https://www.sanity.io/docs/data-store/graphql
- 無料枠で3ユーザーまで利用可能
- ⚠️ スキーマの定義をするには json ファイルを手元に持ってきて（git clone）、ローカルで編集する必要がある
  - ⚠️ データの追加/編集も同様に git clone が必要
- ⚠️ Nuxt + Netlify + Sanity での日本語のサンプル記事がない
- ❌ データの追加/編集が使いづらい
DatoCMS
- GraphQL 対応している
  - https://www.datocms.com/docs/content-delivery-api/first-request
- 管理画面は使いやすい
- ⚠️ 無料枠で1ユーザーまでしか使えない
- ⚠️ Nuxt + Netlify + DatoCMS での日本語のサンプル記事がない
- ❌ Contentful よりも優れた点が見つからなかった

選定内容のまとめ

今のところ Contentful が有力候補
Netlify CMS については、Netlify との連携方法が特殊で Document を見ただけでは理解できず、実際に触ってみる必要があったため、調査を後回しにした（すみません）
他の HeadlessCMS は Contentful には敵わなかった

ということで、Netlify CMS と Contentful との比較になりました。

@treby @positiveflat

Netlify CMS と Contentful のサンプル管理画面を用意するので、操作感を見てもらいたいと思っています。
こちらは遅くとも 5/17（金） までに用意しますので、できあがり次第レビューしていただけるとうれしいです 🙏
遅くなってすみませんがよろしくお願いします！

kazupon · 2019-05-16T17:37:49Z

Netlify CMS 、もしかしたら最近 Netlify にジョインした Sarah さんが教えてくれるかもしれない。
。。。と思ったら時間がないか。

ryamakuchi · 2019-05-16T21:29:52Z

対決

Contentful
- GraphQL 対応
  - https://www.contentful.com/developers/docs/javascript/tutorials/using-contentful-graphql-with-javascript/
- 管理画面が直感的で分かりやすい
- 無料枠で 10ユーザー使える
- 日本で一番メジャー
  - Google で検索したときのサンプル記事が多い
- 👑 GraphQL も使うのであれば、王者 🎉
Netlify CMS
- GraphQL に対応している？
  - Gatsby.js でのスターターキットを見つけた
    - https://github.com/FranzMoreno/gatsby-graphql-netlify-cms
  - しかし Vue.js でのサンプル記事は見つからなかった
- そもそも GraphQL を使う必要がなさそう（下記参照）
- 管理画面は使いやすい
- 無料枠で5ユーザーまで可能
- ⚠️ Nuxt + Netlify + Netlify CMS での日本語のサンプル記事が少ない
- ❌ 一般的な HeadlessCMS とは仕組みが異なるため、他の HeadlessCMS に乗り換えたいと考えたときに障壁になりそう

Netlify CMS の仕組み

Netlify の Identity 機能を使って GitHub のアカウントに権限をつけることができる
- 権限がある人のみデータの編集ができる
画像や文字などのデータを追加すると、GitHub のリポジトリに自動でコミットされる
- データの保存先は GitHub のリポジトリ

ということが分かりました。

そもそも GraphQL を使う必要がなさそう（下記参照）

データは GitHub のリポジトリにあるため、GraphQL を使う必要がなさそうと思いました。

試しに Playground リポジトリを作ってみました。

https://github.com/ryamakuchi/netlify-cms-playground

@inouetakuya @treby @kazupon
画面の操作感の参考までに、招待メール送りました ✉️

招待メールが届いているので Accept the invite してください
ログイン画面から GitHub を使ってログインできます
Sponsor から画像とタイトルを追加することができます

コンテンツを追加すると、自動でコミットされ、その変更を Netlify が検知してデプロイされる、という仕組みです

※ 画面側は作っていないため、管理画面側のみの操作感の確認となります

inouetakuya added the 👍 welcome contribution label Mar 15, 2019

inouetakuya added this to To do in ティザーサイト via automation Mar 15, 2019

inouetakuya assigned ryamakuchi Mar 15, 2019

inouetakuya moved this from To do（未アサイン） to To do（アサイン済み） in ティザーサイト Apr 8, 2019

inouetakuya added this to To do in ティザーサイト Phase 2 via automation May 11, 2019

inouetakuya removed this from To do（アサイン済み） in ティザーサイト May 11, 2019

ryamakuchi mentioned this issue May 19, 2019

Contentful から Sponsor データを取得する #55

Merged

9 tasks

inouetakuya added help wanted Extra attention is needed and removed 👍 welcome contribution labels May 29, 2019

inouetakuya moved this from To do to In progress in ティザーサイト Phase 2 Jun 10, 2019

inouetakuya closed this as completed in #55 Jun 24, 2019

ティザーサイト Phase 2 automation moved this from In progress to Done Jun 24, 2019

kazupon unassigned ryamakuchi Dec 11, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Headless CMS を導入する #3

Headless CMS を導入する #3

inouetakuya commented Mar 15, 2019

inouetakuya commented May 11, 2019

448jp commented May 12, 2019

treby commented May 13, 2019

ryamakuchi commented May 13, 2019

inouetakuya commented May 13, 2019 •

edited

Loading

ryamakuchi commented May 14, 2019 •

edited

Loading

ryamakuchi commented May 16, 2019 •

edited

Loading

kazupon commented May 16, 2019

ryamakuchi commented May 16, 2019 •

edited

Loading

Headless CMS を導入する #3

Headless CMS を導入する #3

Comments

inouetakuya commented Mar 15, 2019

解決したい問題

問題を解決するために

この Issue の完了条件

どのような Headless CMS があるか調査されていること

Headless CMS が選定されていること

Headless CMS を利用して 2019年のスポンサー情報を更新できる状態になっていること

inouetakuya commented May 11, 2019

スケジュールの目安

@ryamakuchi へお願い

@448jp @hisako135 へお願い

448jp commented May 12, 2019

treby commented May 13, 2019

ryamakuchi commented May 13, 2019

inouetakuya commented May 13, 2019 • edited Loading

ryamakuchi commented May 14, 2019 • edited Loading

HeadlessCMS の調査

該当条件

追加の条件

参考 URL

手順

該当する HeadlessCMS 一覧

HeadlessCMS の選定

ryamakuchi commented May 16, 2019 • edited Loading

HeadlessCMS の選定

選定基準

選定メモ

選定内容のまとめ

kazupon commented May 16, 2019

ryamakuchi commented May 16, 2019 • edited Loading

対決

Netlify CMS の仕組み

inouetakuya commented May 13, 2019 •

edited

Loading

ryamakuchi commented May 14, 2019 •

edited

Loading

ryamakuchi commented May 16, 2019 •

edited

Loading

ryamakuchi commented May 16, 2019 •

edited

Loading