Upgrade to Pro — share decks privately, control downloads, hide ads and more …

OGPを使いたい

 OGPを使いたい

9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=128

uzimaru0000

December 13, 2020
Tweet

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

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