OGPを使いたい

#stdout2020

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

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. ご清聴ありがとうございました