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
uzimaru0000
December 13, 2020
Programming
0
150
OGPを使いたい
#stdout2020
uzimaru0000
December 13, 2020
Tweet
Share
More Decks by uzimaru0000
See All by uzimaru0000
git入門
uzimaru0000
1
290
Webフロントエンド入門
uzimaru0000
1
410
WebフロントエンジニアはOSの夢を見る
uzimaru0000
0
340
BrainFuckをつくった
uzimaru0000
0
350
Elmで作るCLI
uzimaru0000
0
120
Blogを作った話 -Zli x DeNA-
uzimaru0000
1
160
Compression Vue App
uzimaru0000
0
110
好きなライブラリ_OSS
uzimaru0000
0
200
Other Decks in Programming
See All in Programming
Open Source Swiftc Workshop
kitasuke
1
290
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
2.1k
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
110
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
740
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
[スクリプト] Swiftの型推論を学ぼう
omochi
0
120
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2.3k
htmx is fun!
codehex
2
190
フロントエンドパフォーマンス 入門
shouta2
7
1.5k
Why 1 + 1 = 2 in Swift?
1plus4
1
250
TDDと今まで
kanayannet
0
140
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Design by the Numbers
sachag
274
18k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Navigating Team Friction
lara
177
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
The Pragmatic Product Professional
lauravandoore
24
5.7k
How to Ace a Technical Interview
jacobian
272
22k
It's Worth the Effort
3n
180
27k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
950
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
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の作り方の記事を書くから読んでね
ご清聴ありがとうございました