[No merge] Contentful API スキーマ検討及びデータ登録（タイムテーブル情報）

[inouetakuya]

やりたいこと

タイムテーブル情報を Contentful API から取得できるようにしたい。

関連

#157 (comment)

TODO

• Contentful API の仕様を確認する @inouetakuya
• データスキーマを検討する @inouetakuya
  • 行ごとにレビューしやすいようにするため、何らかのファイルに書き出す
• レビュー
  • メイン @aytdm
  • サブ @yinm @ryamakuchi
• データスキーマを Contentful に登録する @inouetakuya
• 既存のデータを Contentful に登録（Speaker / Session）@inouetakuya
• データを Contentful に登録する @ryamakuchi

期限

8/28（水）までに完了させる。

レビューポイント

タイムテーブルモデリングむずい...

• もっと良さそうなやつあるかもなので、ちょっと厳しめにレビューしてほしい
• TimeContainer とか TimeContainerPart に type のようなものを持たせず、content をクライアント側で判定するようにしている
  • API 側をシンプルに保つことで破綻しにくくするため
• Room をどのモデルに持たせるかに関する話題 #160 (comment)

モデル名...

• タイムテーブル関係に Time というプレフィクスを付けてみたがどうか？（無いほうが良い？または別案？）
• モデル名については #160 (comment) で議論しています 🤔

注意事項

データスキーマを検討するために、何らかのファイルにスキーマを書き出すが、あくまで検討用途なので、マージはしない。

[inouetakuya]

Contenful API の仕様

調べて分かったことをメモ。

(1) モデル同士の関連付け

Content modelling basics | Contentful
https://www.contentful.com/r/knowledgebase/content-modelling-basics/

Reference field basics

Contentful uses Reference fields to create relationships between content types.

例えば Session has many Speakers とかの関連付けができる

(2) 循環参照で死なない？

Session has many Speakers でかつ Speaker has many Sessions とかすると、データ取得時に無限に循環参照して死なない？か気になったので調べた。

結論: 死なない。

Contentful で、自分用に検証のための Space を作って試してみたところ、エラーにならずにデータを取得できたので OK

(3) Curl からお手軽にデータを取得してみたいのだが？

下記の記事にあるように、Curl から取得するのは結構面倒くさい。

How to quickly access API responses with curl and jq | Contentful
https://www.contentful.com/blog/2017/03/20/how-to-quick-access-api-responses-with-curl-and-jq/

代案としては、API の Access token を取得するページで boilerplate が置いてあったので使ってみた。

[inouetakuya]

@aytdm @yinm @ryamakuchi

遅くなりましたがレビューお願いします！🙇

• プールやスシローなどに行って夏を満喫していて遅れてしまったのですが、レスポンスのイメージを掴みやすいようにするために、皆さんがレビューしていただいている間にも Contentful にある程度データを登録して、レスポンスデータを出しちゃってペタッと貼ります
  • もちろん変更する可能性大ということを考慮しています
• レビューは 8/26（月） 23:59 くらいまでにしていただけると助かります 🙏

---

@masahirotanaka

Web 班のほうで API スキーマ定義＆レビューをしているのですが、特にタイムテーブル関係について最小限のデータしか持たないような感じにしています。

なので、もしかしたら、アプリ側で「この情報を API から返してくれないとタイムテーブルを表示できないよ〜」もしくは「この情報を API から返してくれたほうが圧倒的に良さそう」という場合があるかもしれません。

一旦 API の用意は進めますが、後のスキーマ変更の可能性も考慮しておりますので、アシアルさんのほうでの実装時に何かありましたら、遠慮無くおっしゃってください〜 ☺️

[inouetakuya]

現状の実装では string[] にして、中に <br> や   などを含めたりしています。

現状の実装を引き継がずに Markdown にしている理由は、下記です。

• アプリなどを考えると HTML タグを含めるべきではない
• stirng[] にすると、Contentful の仕様上、string 要素ひとつあたりの文字数が 255 に制限される

[yinm]

ここのTimeContentとSessionは複数になることはあるのでしょうか？？
各typeは以下のように理解してまして、複数になるものはTimeContainerPartに入るのかな？と思ってます。

• TimeContent: イベントの進行などの事柄 (e.g. 会場・受付)
• Session: セッション (e.g. フルセッション)
• TimeContainerPart: 切り替えがあるもの (e.g. ハーフセッション)

[inouetakuya]

各typeは以下のように理解してまして、複数になるものはTimeContainerPartに入るのかな？と思ってます。

僕も当初はそのように理解していたですが、Session が複数入る例が先ほど発生しましたw

https://vuejs-jp.slack.com/archives/GENQVSDT3/p1566723367284000?thread_ts=1566723081.281800&cid=GENQVSDT3

TimeContent が複数入る例はまだ発生していないですが、まあ揃えておいてよいかなという考えです。

---

補足すると、

• 複数かつ時間を持つもの -> TimeContainerPart[]
• 複数でも時間を持たないもの -> Session[] or TimeContent[]

となります。

[aytdm]

最初の要素の sys.contentType.sys.id によって
TimeContent なのか Session なのか TimeContainerPart なのかを判定する

念のため確認ですが、このsys.contentType.sys.idは各タイプで共通の固定値にする、（可変ではない）という理解で合っているでしょうか？（もし、共通の固定値でないならtype: Stringみたいな値を持ってもいいのかな...と思います）

[inouetakuya]

念のため確認ですが、このsys.contentType.sys.idは各タイプで共通の固定値にする、（可変ではない）という理解で合っているでしょうか？

はい、合っています。Contentful が用意してくれるパラメータで、

• 'timeContent'
• 'session'
• 'timeContentPart'

のいずれかが自動的に固定で入ります。

[inouetakuya]

cd scripts/contentful/debug
yarn install
cd ../../..

node scripts/contentful/debug/index.js で Conentful API から値を取得して遊べるようにしてみましたが、どうでしょう？

Welcome to the Contentful JS Boilerplate

This is a simplified example to demonstrate the usage of the Contentful CDA

Fetching and displaying Content Types ...
Fetching and displaying Entries ...
hese are the first 100 Entries for Content Type timeSection:

{ sys:
   { space: { sys: [Object] },
     id: '3xmkE2iZ4Zq6VobkcaUTY9',
     type: 'Entry',
     createdAt: '2019-08-25T11:29:29.522Z',
     updatedAt: '2019-08-25T11:39:23.212Z',
     environment: { sys: [Object] },
     revision: 4,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields:
   { titleForContentful: 'Section 1',
     startAt: '2019-10-12T09:30+09:00',
     endAt: '2019-10-12T10:30+09:00',
     timeContainers: [Getter] } }
{ sys:
   { space: { sys: [Object] },
     id: '5cy8nT9HQ0IVPld8oux622',
     type: 'Entry',
     createdAt: '2019-08-25T12:30:30.585Z',
     updatedAt: '2019-08-25T12:30:30.585Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields:
   { titleForContentful: 'Section 7',
     startAt: '2019-10-12T13:30+09:00',
     endAt: '2019-10-12T14:10+09:00',
     timeContainers: [Getter] } }
hese are the first 100 Entries for Content Type room:

{ sys:
   { space: { sys: [Object] },
     id: '4MMzyRoKhtw4BlxWnCHbW9',
     type: 'Entry',
     createdAt: '2019-08-25T10:51:28.574Z',
     updatedAt: '2019-08-25T10:51:28.574Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields: { name: 'PLAID ルーム' } }
{ sys:
   { space: { sys: [Object] },
     id: '1rnDVEsknx6MhhPgMAS9Gj',
     type: 'Entry',
     createdAt: '2019-08-25T10:51:56.475Z',
     updatedAt: '2019-08-25T10:51:56.475Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields: { name: 'イエソドルーム' } }
{ sys:
   { space: { sys: [Object] },
     id: '6DXe9VnLT91YWE9UkVgkep',
     type: 'Entry',
     createdAt: '2019-08-25T10:51:45.572Z',
     updatedAt: '2019-08-25T10:51:45.572Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields: { name: 'YUMEMI ルーム' } }
hese are the first 100 Entries for Content Type speaker:

{ sys:
   { space: { sys: [Object] },
     id: '4XnF0Cp1piQFkVEjUnCrci',
     type: 'Entry',
     createdAt: '2019-08-25T11:08:14.423Z',
     updatedAt: '2019-08-25T11:08:14.423Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields:
   { name: 'Sébastien Chopin',
     title: 'Nuxt.js 共同クリエーター',
     avatar: [Getter],
     avatar2x: [Getter],
     twitter: 'Atinux',
     github: 'Atinux',
     description:
      '14歳から Web デベロッパーです。8年ほど前に Node.js を使い始めてからは、JavaScript だけを書いています。ユニバーサルアプリケーションを簡単に作ることができる Nuxt.js を共同で作っています。',
     sessions: [Getter] } }
{ sys:
   { space: { sys: [Object] },
     id: '2wJP0k4TL8blmOvUsiOswb',
     type: 'Entry',
     createdAt: '2019-08-25T11:11:01.751Z',
     updatedAt: '2019-08-25T11:11:01.751Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields:
   { name: 'Alexandre Chopin',
     title: 'Nuxt.js 共同クリエーター',
     avatar: [Getter],
     avatar2x: [Getter],
     twitter: 'IamNuxt',
     github: 'alexchopin',
     description:
      'Web デベロッパーであり、講師であり、スピーカーでもあります。デベロッパーライフに喜びをもたらすため、Nuxt.js の共同クリエーターとしてフルタイムで働いています。',
     sessions: [Getter] } }
{ sys:
   { space: { sys: [Object] },
     id: '7aHzCP1a1rYpR6KbWENRmB',
     type: 'Entry',
     createdAt: '2019-08-25T11:01:43.811Z',
     updatedAt: '2019-08-25T11:01:43.811Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields:
   { name: 'Evan You',
     title: 'Vue.js クリエーター',
     avatar: [Getter],
     avatar2x: [Getter],
     twitter: 'youyuxi',
     github: 'yyx990803',
     description:
      'Evan は開発者、デザイナー、そしてクリエイティブコーダーです。彼は、リアクティブなコンポーネントでモダンな Web インターフェイスを構築するための JavaScript フレームワーク、Vue.js の作者です。\n\nかつて、GitHub で最もスターを集めたフルスタック JavaScript フレームワークであった Meteor の開発グループでも働いていました。Google Creative Lab で、さまざまな Google プロダクト向けの実験的な UI プロトタイプに、2年間取り組んでいた経験もあります。',
     sessions: [Getter] } }
hese are the first 100 Entries for Content Type timeContent:

{ sys:
   { space: { sys: [Object] },
     id: '1Jq2HSYWldMBFf5Csj06JP',
     type: 'Entry',
     createdAt: '2019-08-25T11:11:59.629Z',
     updatedAt: '2019-08-25T11:11:59.629Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields: { title: '開場・受付' } }
{ sys:
   { space: { sys: [Object] },
     id: '3YtLPhuO8zcJWszYzZc545',
     type: 'Entry',
     createdAt: '2019-08-25T11:12:56.609Z',
     updatedAt: '2019-08-25T11:12:56.609Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields: { title: 'ランチブレーク' } }
{ sys:
   { space: { sys: [Object] },
     id: '3euCAqVSfMKkcxEi89RS9J',
     type: 'Entry',
     createdAt: '2019-08-25T11:13:23.574Z',
     updatedAt: '2019-08-25T11:13:23.574Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields: { title: 'アフターパーティー' } }
{ sys:
   { space: { sys: [Object] },
     id: '5pkp4aWaH6mCpJzMTVlaHr',
     type: 'Entry',
     createdAt: '2019-08-25T11:12:12.767Z',
     updatedAt: '2019-08-25T11:12:12.767Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields: { title: 'オープニング' } }
{ sys:
   { space: { sys: [Object] },
     id: '7BfgBCMOMar8AK7ir9acO5',
     type: 'Entry',
     createdAt: '2019-08-25T11:47:31.381Z',
     updatedAt: '2019-08-25T11:47:31.381Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields: { title: 'ハーフセッション' } }
{ sys:
   { space: { sys: [Object] },
     id: '6tmGgP88EHSwrSSiftghdY',
     type: 'Entry',
     createdAt: '2019-08-25T11:12:36.784Z',
     updatedAt: '2019-08-25T11:12:36.784Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields: { title: 'Platinum スポンサーセッション' } }
{ sys:
   { space: { sys: [Object] },
     id: '2d54Z9F3JJOLJn5s3xJS6J',
     type: 'Entry',
     createdAt: '2019-08-25T11:47:18.696Z',
     updatedAt: '2019-08-25T11:47:18.696Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields: { title: 'セッション' } }
{ sys:
   { space: { sys: [Object] },
     id: 'LxBqrZ3sSn4wtmPMo3noy',
     type: 'Entry',
     createdAt: '2019-08-25T11:13:12.067Z',
     updatedAt: '2019-08-25T11:13:12.067Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields: { title: '会場転換' } }
hese are the first 100 Entries for Content Type timeContainer:

{ sys:
   { space: { sys: [Object] },
     id: '1VrnD87PWtyJsd3jVM6cD9',
     type: 'Entry',
     createdAt: '2019-08-25T11:27:57.325Z',
     updatedAt: '2019-08-25T11:43:46.273Z',
     environment: { sys: [Object] },
     revision: 2,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields:
   { titleForContentful: '7-y', room: [Getter], contents: [Getter] } }
{ sys:
   { space: { sys: [Object] },
     id: '6kvoyQODdlqtQl4mntLPQr',
     type: 'Entry',
     createdAt: '2019-08-25T11:32:43.021Z',
     updatedAt: '2019-08-25T11:42:27.877Z',
     environment: { sys: [Object] },
     revision: 2,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields: { titleForContentful: '1', contents: [Getter] } }
{ sys:
   { space: { sys: [Object] },
     id: '1xbk24tiYmdSwqEhPaYycq',
     type: 'Entry',
     createdAt: '2019-08-25T11:21:49.022Z',
     updatedAt: '2019-08-25T12:29:17.754Z',
     environment: { sys: [Object] },
     revision: 3,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields:
   { titleForContentful: '7-ye',
     room: [Getter],
     contents: [Getter] } }
{ sys:
   { space: { sys: [Object] },
     id: '38lSdeOdkWij7xoIwr5w36',
     type: 'Entry',
     createdAt: '2019-08-25T11:49:17.640Z',
     updatedAt: '2019-08-25T12:32:53.954Z',
     environment: { sys: [Object] },
     revision: 3,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields:
   { titleForContentful: '7-pl',
     room: [Getter],
     contents: [Getter] } }
{ sys:
   { space: { sys: [Object] },
     id: '2LvPxLtSKxV3oOr6emFsci',
     type: 'Entry',
     createdAt: '2019-08-25T11:49:41.951Z',
     updatedAt: '2019-08-25T11:52:08.920Z',
     environment: { sys: [Object] },
     revision: 2,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields:
   { titleForContentful: '7-yu',
     room: [Getter],
     contents: [Getter] } }
hese are the first 100 Entries for Content Type timeContainerPart:

{ sys:
   { space: { sys: [Object] },
     id: '2Hvjhxa1JbSavrzgvTBy5L',
     type: 'Entry',
     createdAt: '2019-08-25T11:14:58.509Z',
     updatedAt: '2019-08-25T11:52:49.654Z',
     environment: { sys: [Object] },
     revision: 4,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields:
   { titleForContentful: '7-ye-1',
     startAt: '2019-10-12T13:30+09:00',
     endAt: '2019-10-12T13:50+09:00',
     content: [Getter] } }
{ sys:
   { space: { sys: [Object] },
     id: 'Kl0vnWivyAewKQvwHNOY8',
     type: 'Entry',
     createdAt: '2019-08-25T11:19:45.142Z',
     updatedAt: '2019-08-25T11:53:00.261Z',
     environment: { sys: [Object] },
     revision: 4,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields:
   { titleForContentful: '7-ye-2',
     startAt: '2019-10-12T13:50+09:00',
     endAt: '2019-10-12T14:10+09:00',
     content: [Getter] } }
hese are the first 100 Entries for Content Type session:

{ sys:
   { space: { sys: [Object] },
     id: '6o9an6K6nq1xemJ84oIfXq',
     type: 'Entry',
     createdAt: '2019-08-25T11:10:54.039Z',
     updatedAt: '2019-08-25T11:10:54.039Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields:
   { title: 'What\'s Nuxt?',
     time: 40,
     description:
      'Discover the story and philosophy of Nuxt.js and his team. Where does it come from and where do we wish to go in the future.',
     ogImage: [Getter],
     speakers: [Getter] } }
{ sys:
   { space: { sys: [Object] },
     id: '52xcLDNWOkF7s46q93hGQs',
     type: 'Entry',
     createdAt: '2019-08-25T11:07:40.630Z',
     updatedAt: '2019-08-25T11:07:40.630Z',
     environment: { sys: [Object] },
     revision: 1,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields:
   { title: 'Introduction to Nuxt 3',
     time: 40,
     description:
      'This talk will introduce Nuxt 3, what are the changes and what benefits it brings for Web development and Developer Experience.',
     ogImage: [Getter],
     speakers: [Getter] } }
{ sys:
   { space: { sys: [Object] },
     id: '7xvdef2fny01iVD0ra03Iz',
     type: 'Entry',
     createdAt: '2019-08-25T11:00:38.634Z',
     updatedAt: '2019-08-25T11:06:14.946Z',
     environment: { sys: [Object] },
     revision: 2,
     contentType: { sys: [Object] },
     locale: 'en-US' },
  fields:
   { title: 'Keynote',
     time: 50,
     description: 'Keynote',
     ogImage: [Getter],
     speakers: [Getter] } }
Want to go further? Feel free to check out this guide:
https://www.contentful.com/developers/docs/javascript/tutorials/using-js-cda-sdk/

[aytdm]

分かりやすくサンプルを追加してくださってありがとうございます！（とても助かりました）2点コメントしました

[aytdm]

最初の要素の sys.contentType.sys.id によって
TimeContent なのか Session なのか TimeContainerPart なのかを判定する

念のため確認ですが、このsys.contentType.sys.idは各タイプで共通の固定値にする、（可変ではない）という理解で合っているでしょうか？（もし、共通の固定値でないならtype: Stringみたいな値を持ってもいいのかな...と思います）

[inouetakuya]

@masahirotanaka

お待たせしました！Contentful へのデータ登録が終わり、API が使えるようになったのでお知らせします！

• モデルスキーマは下記です
  • https://github.com/kazupon/vuefes-2019/blob/473ed165be22fbf4c2ae87f4a66c77a04dc71dfc/docs/schema.ts
• 各モデル（contentType）は英小文字はじまりのキャメルケース（timeTableSection など）なので、ご注意ください 🙏

不明点や変更依頼などありましたら、この Issue にお気軽にコメントください〜 ☺️

[aytdm]

遅くなりましたが了解しました

[masahirotanaka]

@inouetakuya @みなさま

頂いたタイムテーブルデータをアプリに組み込んでみました（添付ファイル）。アプリの利用を考慮いただいた形式で、ほぼ大丈夫そうです！

細かい点なのですが、各セッションのスピーカーがスポンサー企業に所属しているかを表すスポンサータグを表示させるかを判定するための情報が、追加で必要そうです。セッションやスピーカーが今後追加されなければ、ハードコードでも対応できるかもしれないですが、可能ならContentfulのSpeakerにスポンサー企業に所属しているかかどうかの情報を追加いただきたいです。（例：sponsorPlan:”GOLD”)

今後Webサイトやアプリで、スポンサー枠だという表示を出さないようにする予定でしたら、今のContentfulの内容で問題ございません！

[inouetakuya]

@masahirotanaka

頂いたタイムテーブルデータをアプリに組み込んでみました（添付ファイル）。アプリの利用を考慮いただいた形式で、ほぼ大丈夫そうです！

はっや！アシアルさん凄すぎる...

スポンサー枠を表示させるか否か

#160 (comment)

今後Webサイトやアプリで、スポンサー枠だという表示を出さないようにする予定でしたら、今のContentfulの内容で問題ございません！

（もしかしたら、今後、やっぱり表示させようということになるかもしれませんが）

8/30（金）現在では、スポンサー枠であると示す予定はないです〜（下記）

• https://www.figma.com/file/BpIgcZdusbS3CgPHQhhK79T7/Vue-Fes-Japan-2019-Web?node-id=2%3A4

---

@hisako135 @448jp @kazupon

何か補足などがあればコメントください〜

[448jp]

@masahirotanaka @inouetakuya
セッションがスポンサー提供のものかどうかは、Platinum スポンサーセッションとランチセッションのみですので、そういう意味ではハードコーディングでいいのかな、と思いますー。

[inouetakuya]

@masahirotanaka CC: 皆さん

同時通訳の有無を表すフラグを追加します

https://vuejs-jp.slack.com/archives/GENQVSDT3/p1568784911101800?thread_ts=1568781815.099500&cid=GENQVSDT3

同時通訳の予算を確保できたので、同時通訳の有無を表示させるようにします。

したがって、下記のように Session モデルに hasTranslation というフラグを持たせるようにしましたので共有します（たぶん削除や変更などではなく追加なので、アプリ側は大丈夫だと予想）

c438691

[inouetakuya]

• Contentful からデータを取得するようにしたアプリが無事に公開された
  • kazupon/vuefes#470 (comment)
• Web サイトがタイムテーブルを Contentful からデータを取得するようにして表示するようにした
  • feat: タイムテーブル情報を Contentful から取得＆描画するよう変更 by inouetakuya · Pull Request #177 · kazupon/vuefes-2019

よってクローズします。

[inouetakuya]

https://vuejs-jp.slack.com/archives/GENQVSDT3/p1570358015336500?thread_ts=1570344756.323000&cid=GENQVSDT3

ちょっと別件でスポンサーのバナーを一括ダウンロードしたくなったので Reopen します。

[inouetakuya]

ちょっと別件でスポンサーのバナーを一括ダウンロードしたくなったので Reopen します。

この件が解決したのでクローズします。