home/Web会議室/

20210803_ OpenWikiのOGPを表示できるようにする

OpenWikiのOGPを表示できるようにする

ストーリー

GW-6995 OpenWiki を共有した時に OGP を表示できる external_link

概要

  • Open な Wiki を Twitter や Slack などに共有したときに OGP を表示できるようにする
  • GROWI App 名と Wiki のページ名を 動的に表示させる
  • OGP に表示できる文字数を制限して、文字数を超過したら .... みたいにする
  • デザインはコスモレナ社と相談 or 自分で作成する

仕様

  • OGP 生成方法
    • プランA
    • プランB
      • 別途 OGP生成用サーバーを立ち上げる（GROWI ユーザーが自分で立ち上げる）
        • vercel/og-image external_link
          • fork してデプロイして使う
          • クエリパラメータに文字を含めることで、生成される画像の文字を変化させることができる
          • growi/packages 配下に置く？
          • OGP 生成用サーバーはリクエストすると OGP が返ってくるだけなので、リクエストの有無は GROWI 側で制御する必要がある
  • OGP を生成するページ
    • public な GROWI かつ public なページ
    • slack bot を使ったページ作成、検索では上記にプラスして private な GROWI かつ public なページ（今回のスプリントではここまではいけないと思う）
  • OGP 生成タイミング
    • プランAの場合
      • ページのアクティビティを監視（作成、更新、非公開など...）
    • プランBの場合
      • OGPサーバーへのリクエスト時（URLを共有した際に共有したwebサービスがURLに対してリクエストを行った際？）
  • OGP 埋め込み方法

アーキテクチャー

::: drawio 1VhNc9owFPw1PpKxLMsfR0hS2pl2kmkOaY+KLUAzBlMjAvTX9wlL2JINdagJ6QWsJ+lZ3t23ku3g2/l2XNDl7Fuesszx3HTr4DvH80ISwK8M7MoAQrIpI9OCpypWBZ74b6aCroquecpWxkCR55ngSzOY5IsFS4QRo0WRb8xhkzwz77qkU9YIPCU0a0afeSpmZTTywir+mfHpTN8ZBXHZM6d6sHqS1Yym+aYWwvcOvi3yXJRX8+0tyyR4Gpdy3qcjvYeFFWwhukxQuL/SbK2ebfz94fmLXBl7ZYVapNjpJ4fZADI0RpsZF+xpSRPZswGeITYT8wxaCC6bC1Frg6yCbWshtbAxy+dMFDsYonsDBZKSCdagbSrMkY7NanhHKkYVzdND6goJuFBgtAODG8A8jB/3sBTXxgXHV8TFb+CSZFw+yzUR8UITET96R0QQaUDieEEGdxhNcglMDZXg1zrXHYPV3teGMACFy23VCVfT/f+958TIGSKdDlZSZlT9DcgX6VC6G7SSjK5WPDGRZlsufsC1e+P6nmr/3LexR1T7TkLq6sau1nhkBQdwQPxl7ChvLLXcc5Wvi4TV9HOUSFiJiyJT3Q0mSQuROlawjAr+at6/jV21hMec7yk6IiTiWgIpH0XNqvuqnQhZinQ9M5GgxZSJRiLgj+5qw5ZywOrEgn3rPsTwe7goM1qzdfp8Mlkx4dhqPxDTrQCClgI4W5pBEBrSjKPozdIERRa7Mp3nRjpQ5kMI60CVcN/a1Vud1V4SaZjjyQLw2gvgnfRtb6nxufqOPctx/U76PkdeYQ/yOgjCFAMOLicG3CqGqzEfWcyTM5nH2EpkW2R/zLccwvSeSJoSAJy/0hd40zCYpxmfLqQsgCrJ30ieKjgc5YeqY87TVOYYFQw2ZPqyzydJVtYLycnIIXdq11YvIyhsl4HWqn10ObyLqBs49eN+2044AOsivm9AjXpRQmxO6GcLiPqs0ZuYWKYdnlentQMPiYxdJcRv31U6Vb3XYQvA1zQCHMVm/dpn4K5G4GMrEb6cETRfU7UR4A9qBLog/tkIQLsoxL1QPwiRwRi5hBVof2nhKvg4XHXmpY3WU6btYtITWf4lyGl7Vz3Xp1Hdo9Ff/PmILXZx06s5pXfkq8Kbj0z254kLOmXLRqyqz//vq69U7ymnJJbDDfqpRfOLBLLYO6cyoVl95C2HV5/K8f0f :::

  1. ページの URL を共有
  2. Client（web サービス）が リクエスト
  3. pageId から path を解決、OGP の表示の可否判断、可であれば view に OGP server からのレスポンスを pipe するエンドポイントを挿入
  4. レンダリングされた HTML をパース、meta tag（og:image） を探す
  5. ${parmaLink}.ogp にリクエスト
  6. 画像生成
  7. レスポンス