OGPを使いたい

Transcript

1. OGPを使いたい
 うじまる


2. 自己紹介
 - B4
 - うじまる
 - Webフロントエンド
 - TypeScript
 -

   Elm
 - 最近Rustをやってます。
 - Twitter
 - @uzimaru0000
 - GitHub
 - @uzimaru0000


3. 今回話すこと


4. OGPについて


5. OGPとは？


6. Open Graph protocol
 > Facebook、TwitterなどのSNS上でシェアされた時やシェアされたい時に、ページのタイ トル、URL、概要、画像（サムネイル）を正しく伝えるためにHTMLソースに記述するタグ 情報です。
 
 こんな感じのやつ →


7. OGPの問題点


8. OGPの問題点
 - Twitter, FacebookのクローラーはJSを解釈してくれない
 - JSを使って動的にmetaタグの変更をする場合は反映されない
 SPAだとOGPが使えない！！！！


9. 解決策
 - SSRをする
 - SSRをすればmetaタグをリクエストに応じて変えれる
 - 諦める
 - SPAで耐えうるコンテンツはクローラーを気にしてないよね☆


10. 結論


11. SSRをする！


12. 諦める！


13. おわり


14. SPAでもOGPを使いたい
 うじまる


15. 解決策


16. metaタグの部分だけSSRする


17. metaタグの部分だけSSRする
 HTML
 普通のSPA


18. metaタグの部分だけSSRする
 HTML
 今回やったこと
 meta


19. 使ったもの


20. 使ったもの
 - vercel
 - デプロイ先
 - 今回はFunctionsを利用
 - ejs
 -

    HTMLの生成に利用
 - TypeScript
 - JavaScript?しらんな


21. vercel
 おなじみのホスティングサービス
 Next.jsを作ってる
 functionsという機能がある
 （FaaSみたいなやつ（というよりAWS LambdaのラップなのでFaaS））
 これを使って部分的にSSRをする


22. ソースコード


23. ソースコード


24. ソースコード


25. これ毎回やるのめんどくない？


26. ejs使いたくなくない？


27. React使いたくない？


28. というわけで


29. Runtimeを作りました


30. None

31. Runtime??
 - VercelのfunctionsはRuntimeというものがある
 - 公式で node, Go, python, ruby が出ている


    - 準公式で deno, bash などがある
 - 一応自分でも作れる
 - なのでつくった


32. やったこと
 - tsxを投げるとそれをもとにSSRをしてくれるRuntimeを作成
 - tsxをJSにcompile
 - compileされたJSを使って renderToStaticMarkup をする
 -

    Responseのbodyにrenderした結果を返す
 これだけ！！


33. 開発に使ったライブラリ等
 - @vercel/build-utils
 - Runtimeを作るutilな関数が入ってるpackage
 - TooTallNate/vercel-dev-runtime
 - publishしないでもRuntimeを使えるようにするpackage
 参考にしたもの


    - TooTallNate/vercel-deno, importpw/vercel-bash
 - 上２つを使っているリポジトリ


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


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


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


37. DEMO


38. 使い方


39. まとめ
 - SPAでもOGPを扱える
 - vercelのRuntimeはAWS Lambdaなので
 そっちに詳しい人は作ってみると楽しいかも
 - Javaとかdotnetとかも使えるらしい
 -

    公式ドキュメントはしっかり読みましょう
 - ずっとわからんって言ってた部分の8割はドキュメントに書いてた
 - あとでRuntimeの作り方の記事を書くから読んでね


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