Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ピクシブの Contentful 利用事情 (2021)
Search
Hanakla
May 13, 2021
Programming
2
420
ピクシブの Contentful 利用事情 (2021)
Hanakla
May 13, 2021
Tweet
Share
More Decks by Hanakla
See All by Hanakla
Reactルーター選定術 2020年のファイナルアンサー
hanakla
2
4.9k
動画編集ソフトを作るための基礎知識
hanakla
1
410
Research and Development of "Delir" at Nov, 2016
hanakla
0
150
Other Decks in Programming
See All in Programming
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
550
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
0
300
ニーリーにおけるプロダクトエンジニア
nealle
0
730
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
PipeCDのプラグイン化で目指すところ
warashi
1
250
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
730
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
190
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
300
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
680
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.8k
5つのアンチパターンから学ぶLT設計
narihara
1
150
Featured
See All Featured
Visualization
eitanlees
146
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Side Projects
sachag
455
42k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Building an army of robots
kneath
306
45k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Why Our Code Smells
bkeepers
PRO
337
57k
Fireside Chat
paigeccino
37
3.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Documentation Writing (for coders)
carmenintech
72
4.9k
Transcript
ピクシブの 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 field」にチェック
比較的簡単めなやつ(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