OGPを使いたい

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を作りました 

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  - 上２つを使っているリポジトリ 

詰んだところ  - `vercel dev` コマンドで実行されない！！！  - Runtimeから `shouldServe` をexportしましょう 

詰んだところ  - どのファイルが実行されるの！！！  - `createLambda` で指定したもの 

詰んだところ  - 関数の引数には何が入ってくるの！！！  - AWS Lambdaのhandlerに入ってくるものです  - Lambdaのドキュメントを読みましょう 

DEMO 

使い方 

まとめ  - SPAでもOGPを扱える  - vercelのRuntimeはAWS Lambdaなので  そっちに詳しい人は作ってみると楽しいかも  - Javaとかdotnetとかも使えるらしい  -
公式ドキュメントはしっかり読みましょう  - ずっとわからんって言ってた部分の8割はドキュメントに書いてた  - あとでRuntimeの作り方の記事を書くから読んでね 

ご清聴ありがとうございました 

OGPを使いたい

OGPを使いたい

More Decks by uzimaru0000

Other Decks in Programming

Featured

Transcript