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
2018-09-29.okayama.pdf
Search
Okamuuu
September 29, 2018
Technology
83
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
2018-09-29.okayama.pdf
Okamuuu
September 29, 2018
More Decks by Okamuuu
See All by Okamuuu
2018-08-04.js-beer-bash.pdf
okamuuu
0
93
hachiojipm#72
okamuuu
0
48
チームで取り組む Singe Page Application
okamuuu
0
850
Other Decks in Technology
See All in Technology
Nav2、Nav3 ... はたまた自作?〜 作って理解する Nav3 の設計意図 〜 / Nav2, Nav3 ... or Build Your Own? — Understanding Nav3's design intent by building it from scratch
yanzm
0
230
#jawssonic2026 あの時代が悪かった ~動かなかったSageMakerと共に迎えたイベント当日~
ktkn1129
0
130
[RSJ26] Building a VLA Model Based on Self-Distilled Classification
keio_smilab
PRO
0
190
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
lycorptech_jp
PRO
0
190
AI時代に、プロダクトの数だけ積み上がる所有コストをどうエンジニアリングするか / Engineering the Cost of Ownership
kzkmaeda
0
1k
Genie Code ワークショップ 応用編 / Genie-Code-Workshop-advanced
databricksjapan
PRO
0
330
Driving AI Adoption Using In-House GPUs to Serve Qwen
po3rin
2
450
AI活用の現在地、 ちゃんと見えてますか?/XPfest-2026
visional_engineering_and_design
0
150
AIとペアプロを始める。人とのペアプロをやめる。ペアプロの良さを改めて知る。もっと好きになった。 / Rediscovering Pair Programming
honyanya
1
230
[DroidKaigi 2026] Making UI specifications visible: Android UI development in the AI agent era supported by Compose Screenshot Testing and galleries
syarihu
0
570
多摩川(.dev)ランニング入門 / Tamagawa.dev#3
fujiwara3
3
350
Bet AI Day 2026丨バクラク Autopilot、業務システムの再設計
layerx
PRO
2
1.2k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.5k
Why Our Code Smells
bkeepers
PRO
340
58k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
370
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
1k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
2.1k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
380
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
260
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
320
Into the Great Unknown - MozCon
thekraken
41
2.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.8k
How GitHub (no longer) Works
holman
316
150k
Fireside Chat
paigeccino
42
4k
Transcript
Contentful を使ってみました 岡山城 天守閣 2018-09-29 okamuuu 1 / 17
あくまで個人の感想です。 2 / 17
Contentful とは? いわゆる Headless CMS です。 Contentful ButterCMS storyblok GraphCMS
など 3 / 17
CMS vs Headless CMS ざっくり説明すると Response を HTML で返すのが CMS
Response を JSON で返すのが Headless CMS わかりやすく言うと WordPress は CMS Contentful は Headless CMS 4 / 17
Contentful の特徴 型を自由に定義できる 型に沿ったオブジェクトを出し入れできる CRUD 画面が現れる REST API も生える 位置情報検索もできる
個人で開発する時にとても便利 5 / 17
Contentful を使ってみた感想 CRUD 画面が自動生成される。気持ちいい。 API にちょっと癖がある。 リレーションできない? 通信回数がN+1 にならないように工夫が必要? 6
/ 17
CRUD 画面が自動生成される 7 / 17
CRUD 画面が自動生成される users という型を管理画面で作成する この時点で CRUD 画面が用意される。 そこに user object
を追加する /entries?content_type=users で一覧取得できる 8 / 17
API にちょっと癖がある 9 / 17
API にちょっと癖がある 期待している Response { "id": 2073765716208129 "name": " 神牛前3
丁目", "state: " 東京", } 10 / 17
API にちょっと癖がある { "fields": { "id": { "en-US": 2073765716208129 },
"name": { "en-US": " 神牛前3 丁目" }, "state": { "en-US": " 東京" } }, "sys": { "id": "5KsDBWseXY6QegucYAoacS", "type": "Entry", "createdAt": "2016-12-20T10:43:35.772Z", "updatedAt": "2016-12-20T10:43:35.772Z", "revision": 1 } 11 / 17
リレーションできない? 12 / 17
リレーションできない? Entry 取得した場合、関連する型の sys.id しか取得 できない。ドキュメントには include を指定するよ うに書いているが... //
console.log(user.fields.status) { sys: { type: 'Link', linkType: 'Entry', id: '6Bw3NLBDJ6KEyOc2YwucYk' } } 13 / 17
通信回数がN+1 にならないよう にする 14 / 17
通信回数がN+1 にならないよう にする リレーションができないのであれば、の話ですが 一覧表示画面を実装するときにあえて非正規化す る場面がでてくるかも Promise.all してももっさりしがちなのでできれ ば API
の向こう側で解決したい 15 / 17
まとめ Contentful はかなり便利だった なんだけどリレーションができない? ドキュメントを分かりやすくして欲しい example がもっと欲しい Cognito と Contentful
があれば色々できる予感 16 / 17
おしまい 17 / 17