Twitter ツイートにウェブアプリを埋め込む

Twitter Card の Player だと iframe を使って埋め込めることを知ったので埋め込んでみた。（ツイートの埋め込みの中で埋め込んだものを再生できないので一旦ツイートを開く必要がある。）

https://t.co/RaPaDlGXw6

— o̞͑kä̝mo̞͑to̞͑ kä̝zʊ̠kɪ̟ (@kakkun61) 2020年7月28日

Player Card を使ってるのはよく見るのは YouTube だろう。WebGL を埋め込んでる人もいた。

ツイートに埋め込めるインタラクティブなシェーダープレイヤーを作りました！（WIP）
GLSLをそのまま表示しているのでマウスグリグリ出来るしエンコードで死んだりもしません

PCブラウザでクリックしてみてください。ChromeとFireFoxは動作確認済#Shader1weekCompo #S1C003https://t.co/3LgRKtU715

— 避雷 (@lucknknock) 2020年7月26日

実装

実装としてはメタタグを埋め込むだけ（diff）。

    <meta name="twitter:card" content="player" />
    <meta name="twitter:site" content="@kakkun61" />
    <meta name="twitter:title" content="Photo Film Dev" />
    <meta name="twitter:description" content="This is a timer app for developing monochrome negative photograph films." />
    <meta name="twitter:image" content="https://photo-film-dev.kakkun61.com/preview.png" />
    <meta name="twitter:player" content="https://photo-film-dev.kakkun61.com/index.html" />
    <meta name="twitter:player:width" content="400" />
    <meta name="twitter:player:height" content="650" />

埋め込むコンテンツにはルールがあるので注意しよう。

developer.twitter.com