ゲスト紹介

• kengo.miyamae
  • '20 New Graduate
  • Front-End Dev 6 Team
  • LINE 公式アカウントのフロントエンド開発
  • UIT INSIDE の埋め込みプレイヤーを開発

UIT INSIDE の埋め込みプレイヤー対応

【PR】 UIT INSIDE が Twitter 埋め込みでの再生に対応しました！

• エピソードの URL をツイートすることで、 Twitter の埋め込み内で再生が可能に
  • https://uit-inside.linecorp.com/episode/59 などを呟くとプレビューされる

Twitter で再生できる Web ページの作り方

• HTML の meta タグ twitter:player を定義することで、任意の Web サイトを埋め込むことが可能
  • https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/player-card
• 今回は /episode/:id にアクセスされたとき、 /embed/:id を参照するように実装
• これによってツイートした際、 /embed/:id の内容が表示される

実装していてのハマりや学び

• Twitter の OGP チェッカーで確認する都合上、外部からアクセス可能な状態で開発をする必要がある
  • 今回は ngrok を利用して検証
  • 動作検証では OGP のキャッシュパージにも利用される Card Validator を利用
    • https://cards-dev.twitter.com/validator
  • OGP 検証時でも HMR などは動作するため、極端に開発体験が悪いわけではなかった
• 専用の画面サイズ上での動作となる

Refs

• BGM&SE
  • 魔王魂/騒音のない世界/OtoLogic