ピクシブの Contentful 利用事情 (2021)

ピクシブの Contentful 利用事情 (2021) pixiv Inc. Hanakla (はなくら) 2021.5.13

2 お前誰やねん？ @hanak1a_ だよ！ • VRoid Hubチーム(フロントエンド/バックエンド) • React /
TypeScriptと戯れながらRailsで規約網引き回しの刑を受けています。たすけてください。 • 意思が強くて悪い顔なヤツらが好きです。 • 普段はオリキャラ系創作界隈で活動しています Hanakla VRoid Hub チーム

話すこと 3 - Contentfulってなに？ - 採用事例 - Contentfulの概観 - Content
Modelの設計話さないこと - 👆以外のContentfulとこの世の真理について

Contentfulってなに？ 4

Contentfulとは？ Headless CMSと呼ばれる、ヘッドレスなCMSの一つです。（情報量🈚） - エントリの編集画面をContentfulが用意してくれている - カスタムエディタを作ることでJSONに変換可能な任意のエディタとか作れる - 複雑エディタもエンジニアを生贄を捧げて召喚することが出来る -
Contentful Delivery APIを使うことで、エントリをAPIで取得できる - Content Management APIもあるので、”そういうこと”も出来るんじゃないすか？ - 多分社内ではまだ採用されていない 5

なぜContentful(CaaS)を使うのか - 頻繁に発生するLPとかニュースのコーディング。秒で終わって欲しいですよね。 - ブチアゲ花火なLPならとにかく、定常的に増えていくLPのコーディングはシュッと終わって欲しい - ビジネス職の人たちの手で全てが完結できると、原稿のやりとりなどの時間的ロスが減って楽、エンジニア職も安心して失職出来る -
でもCMSを自前で開発するの面倒じゃん（楽しいけど） - ちゅーかWordPressにしろ自前にしろ、インフラ整備もしんどい。やらなくていいならやりたくない。そんなあなたに、Contentful製薬のコンテントフール！ 6

ピクシブにおけるContentfulの導入事例社内ではpixivFACTORY / VRoid Hub / vroid.com で利用されています。 pixivFACTORY: グッズ別LP
/ 特設LP VRoid: VRoid Hub コンテストLP / vroid.com ニュース / VRoid Mobile お知らせ 7

Contentful 使い方 [検索] 8

Contentful 使い方 [検索] 9 流れ 1. Content Model(エントリのスキーマ)を設計します 2. Contentful側でエントリを書きます
3. contentful-任意-clientを使って記事を取得してレンダリングします。おわり！制作著作ゥ！！！

Content Modelの設計 10

Content Modelの設計 11 感覚としてはDBのテーブルを設計するのに近い。 1つの記事にどの様なデータが必要かの要件を洗い出してフィールド構造を設計する。

Content Modelの設計 12 フィールドには👉の様なデータ型があるので、いい感じにModelを設計。注意点として、Rich Textは俺たちWebおじさんズが想像するような RichなTextではない……

Content Modelの設計(Rich Textについて）現状、ContentfulのRich TextはWordpressみたいな感じではない。色付きテキストや画像リンク・埋め込み画像などは全て別のContent Modelを作ってEmbed Entryするか、生贄を捧げて拡張エディタを作るしかない。 (Slate.jsがよさげ） 13
Rich Textで使えるのは👆👉とH1~6くらい

実際のContent Modelの設計パターンを見る 14

比較的簡単めなやつ(VRoid NEWS記事) 15 タイトル(ja/en) 公開したことにする日時アイキャッチ(ja / en) 記事本文(ja /en)

比較的簡単めなやつ(VRoid NEWS記事) 16 Contentfulはフィールド毎にローカライゼーションを行うかどうかを指定できる 1. Settings ⇢ Locales ⇢ 有効にしたいLocaleとデフォルトLocaleを設定
2. フィールドのSettingsで「Enable localization of this ﬁeld」にチェック

比較的簡単めなやつ(VRoid NEWS記事) 他に、記事中に埋め込むためのボタンコンポーネントや、画像グリッドなどが Content Modelとして定義されていて、埋め込みEntryとしてRich Textの中に埋め込むことが出来る。 17

変わったContent Model(VRoid Hub) エントリのレンダリング時にAPIとの通信が必要なものは、エントリ側にエンティティへの IDだけ持たせて、フロントエンドでのレンダリング時に APIとの通信を行う。 VRoid Hubのコンテスト結果発表ページはそのような構成になっている。 18
IDを元にAPIからデータを取得 (フロントエンド)

複雑めなやつ(pixivFACTORY) 19 ここらへんは僕が開発したものではないので詳しくはわからない (詳しくは@f_subalへ） https://factory.pixiv.net/special/karadanote_moraeru_campaign

複雑めなやつ(pixivFACTORY) 20 ここらへんは僕が開発したものではないので詳しくはわからない (詳しくは@f_subalへ） https://factory.pixiv.net/special/karadanote_moraeru_campaign

複雑めなやつ(pixivFACTORY) f_subal曰く、ビジネス職の方たちがすぐに慣れてくれたので、若干項目の多いLPもうまく回っているようです！ 21

最高だね！！！！ 22

みんなも Contentfulになろう！ 23

クライアント側の使い方は公式ドキュメントを見てくれ 24 JS以外にもPHP, Java .NET, iOS, Ruby向けのSDKがあるぞ https://www.contentful.com/developers/docs/platforms

おわり 25

ピクシブの Contentful 利用事情 (2021)

ピクシブの Contentful 利用事情 (2021)

Hanakla

More Decks by Hanakla

Other Decks in Programming

Featured

Transcript