Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Headless CMS を導入する #3

Closed
inouetakuya opened this issue Mar 15, 2019 · 9 comments · Fixed by #55
Closed

Headless CMS を導入する #3

inouetakuya opened this issue Mar 15, 2019 · 9 comments · Fixed by #55

Comments

@inouetakuya
Copy link
Contributor

@inouetakuya inouetakuya commented Mar 15, 2019

@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 があるか調査されていること

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

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

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

  • 2018年のスポンサー情報を CMS に移動させる必要はない
  • master ブランチにマージされている必要はない。トピックブランチで動いていればよい
@inouetakuya inouetakuya added this to To do in ティザーサイト via automation Mar 15, 2019
@inouetakuya inouetakuya moved this from To do(未アサイン) to To do(アサイン済み) in ティザーサイト Apr 8, 2019
@inouetakuya inouetakuya added this to To do in ティザーサイト Phase 2 via automation May 11, 2019
@inouetakuya inouetakuya removed this from To do(アサイン済み) in ティザーサイト May 11, 2019
@inouetakuya

This comment has been minimized.

Copy link
Contributor Author

@inouetakuya inouetakuya commented May 11, 2019

スケジュールの目安

@ryamakuchi CC: @treby @positiveflat

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

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

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

メモ:

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

@ryamakuchi へお願い

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

@448jp @hisako135 へお願い

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

@448jp

This comment has been minimized.

Copy link
Contributor

@448jp 448jp commented May 12, 2019

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

@treby

This comment has been minimized.

Copy link

@treby treby commented May 13, 2019

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

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

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

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

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

@ryamakuchi

This comment has been minimized.

Copy link
Collaborator

@ryamakuchi ryamakuchi commented May 13, 2019

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

  • 5/15(水)までにどのような Headless CMS があるか調査完了させる
  • 5/16(木)Headless CMS の選定
  • 5/19(日)Headless CMS を利用して 2019年のスポンサー情報を更新できる状態になっていること
    • 選定した Headless CMS がトピックブランチで動いている状態

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

@inouetakuya

This comment has been minimized.

Copy link
Contributor Author

@inouetakuya inouetakuya commented May 13, 2019

@ryamakuchi

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

@ryamakuchi

This comment has been minimized.

Copy link
Collaborator

@ryamakuchi ryamakuchi commented May 14, 2019

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

This comment has been minimized.

Copy link
Collaborator

@ryamakuchi ryamakuchi commented May 16, 2019

@inouetakuya @treby @positiveflat

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

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

HeadlessCMS の選定

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

選定基準

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

選定メモ

選定内容のまとめ

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

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

@treby @positiveflat

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

@kazupon

This comment has been minimized.

Copy link
Member

@kazupon kazupon commented May 16, 2019

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

@ryamakuchi

This comment has been minimized.

Copy link
Collaborator

@ryamakuchi ryamakuchi commented May 16, 2019

対決

  • Contentful
  • Netlify CMS
    • GraphQL に対応している?
    • そもそも 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
画面の操作感の参考までに、招待メール送りました ✉️

  1. 招待メールが届いているので Accept the invite してください
  2. ログイン画面から GitHub を使ってログインできます
  3. Sponsor から画像とタイトルを追加することができます
  • コンテンツを追加すると、自動でコミットされ、その変更を Netlify が検知してデプロイされる、という仕組みです

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

@inouetakuya inouetakuya moved this from To do to In progress in ティザーサイト Phase 2 Jun 10, 2019
ティザーサイト Phase 2 automation moved this from In progress to Done Jun 24, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
5 participants
You can’t perform that action at this time.