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
OGPを使いたい
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
uzimaru0000
December 13, 2020
Programming
0
170
OGPを使いたい
#stdout2020
uzimaru0000
December 13, 2020
Tweet
Share
More Decks by uzimaru0000
See All by uzimaru0000
git入門
uzimaru0000
1
350
Webフロントエンド入門
uzimaru0000
1
450
WebフロントエンジニアはOSの夢を見る
uzimaru0000
0
360
BrainFuckをつくった
uzimaru0000
0
550
Elmで作るCLI
uzimaru0000
0
140
Blogを作った話 -Zli x DeNA-
uzimaru0000
1
200
Compression Vue App
uzimaru0000
0
130
好きなライブラリ_OSS
uzimaru0000
0
230
Other Decks in Programming
See All in Programming
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
700
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
180
CSC307 Lecture 07
javiergs
PRO
0
550
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
120
AIと一緒にレガシーに向き合ってみた
nyafunta9858
0
230
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
petamoriken
0
200
AI前提で考えるiOSアプリのモダナイズ設計
yuukiw00w
0
230
AtCoder Conference 2025
shindannin
0
1.1k
CSC307 Lecture 03
javiergs
PRO
1
490
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
kamina_zzz
0
400
Best-Practices-for-Cortex-Analyst-and-AI-Agent
ryotaroikeda
1
100
Lambda のコードストレージ容量に気をつけましょう
tattwan718
0
130
Featured
See All Featured
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
57
50k
Why Our Code Smells
bkeepers
PRO
340
58k
GraphQLの誤解/rethinking-graphql
sonatard
74
11k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
76
How to Think Like a Performance Engineer
csswizardry
28
2.4k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
A Modern Web Designer's Workflow
chriscoyier
698
190k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
1.9k
Chasing Engaging Ingredients in Design
codingconduct
0
110
The Invisible Side of Design
smashingmag
302
51k
30 Presentation Tips
portentint
PRO
1
210
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Transcript
OGPを使いたい うじまる
自己紹介 - B4 - うじまる - Webフロントエンド - TypeScript -
Elm - 最近Rustをやってます。 - Twitter - @uzimaru0000 - GitHub - @uzimaru0000
今回話すこと
OGPについて
OGPとは?
Open Graph protocol > Facebook、TwitterなどのSNS上でシェアされた時やシェアされたい時に、ページのタイ トル、URL、概要、画像(サムネイル)を正しく伝えるためにHTMLソースに記述するタグ 情報です。 こんな感じのやつ →
OGPの問題点
OGPの問題点 - Twitter, FacebookのクローラーはJSを解釈してくれない - JSを使って動的にmetaタグの変更をする場合は反映されない SPAだとOGPが使えない!!!!
解決策 - SSRをする - SSRをすればmetaタグをリクエストに応じて変えれる - 諦める - SPAで耐えうるコンテンツはクローラーを気にしてないよね☆
結論
SSRをする!
諦める!
おわり
SPAでもOGPを使いたい うじまる
解決策
metaタグの部分だけSSRする
metaタグの部分だけSSRする HTML 普通のSPA
metaタグの部分だけSSRする HTML 今回やったこと meta
使ったもの
使ったもの - vercel - デプロイ先 - 今回はFunctionsを利用 - ejs -
HTMLの生成に利用 - TypeScript - JavaScript?しらんな
vercel おなじみのホスティングサービス Next.jsを作ってる functionsという機能がある (FaaSみたいなやつ(というよりAWS LambdaのラップなのでFaaS)) これを使って部分的にSSRをする
ソースコード
ソースコード
ソースコード
これ毎回やるのめんどくない?
ejs使いたくなくない?
React使いたくない?
というわけで
Runtimeを作りました
None
Runtime?? - VercelのfunctionsはRuntimeというものがある - 公式で node, Go, python, ruby が出ている
- 準公式で deno, bash などがある - 一応自分でも作れる - なのでつくった
やったこと - tsxを投げるとそれをもとにSSRをしてくれるRuntimeを作成 - tsxをJSにcompile - compileされたJSを使って renderToStaticMarkup をする -
Responseのbodyにrenderした結果を返す これだけ!!
開発に使ったライブラリ等 - @vercel/build-utils - Runtimeを作るutilな関数が入ってるpackage - TooTallNate/vercel-dev-runtime - publishしないでもRuntimeを使えるようにするpackage 参考にしたもの
- TooTallNate/vercel-deno, importpw/vercel-bash - 上2つを使っているリポジトリ
詰んだところ - `vercel dev` コマンドで実行されない!!! - Runtimeから `shouldServe` をexportしましょう
詰んだところ - どのファイルが実行されるの!!! - `createLambda` で指定したもの
詰んだところ - 関数の引数には何が入ってくるの!!! - AWS Lambdaのhandlerに入ってくるものです - Lambdaのドキュメントを読みましょう
DEMO
使い方
まとめ - SPAでもOGPを扱える - vercelのRuntimeはAWS Lambdaなので そっちに詳しい人は作ってみると楽しいかも - Javaとかdotnetとかも使えるらしい -
公式ドキュメントはしっかり読みましょう - ずっとわからんって言ってた部分の8割はドキュメントに書いてた - あとでRuntimeの作り方の記事を書くから読んでね
ご清聴ありがとうございました