TweetDeckでツイートに含まれるリンク先の内容を表示するユーザスクリプト
Twitterでリンクを含むツイートをすると,リンク先の内容がカードとして表示されることがある.これはTwitter Cardと呼ばれており,リンク先のページが対応している場合に表示される.
しかし,公式クライアントであるTweetDeckではカードが表示されないので不便.
そこで,TweetDeckでツイートにカードを表示するためのユーザスクリプトを書いた.
Greasemonkeyなどのブラウザ拡張機能にこのスクリプトを追加するとカードが表示されるようになる.
仕組みとしては,MutationObserver
を利用してカラム上のツイートの追加を監視し,追加されたツイートにURLが含まれる場合はカードの内容をiframeとして追加する.カードの内容はhttps://twitter.com/i/cards/tfw/v1/ツイートID
というURLで得られる.このiframeは,読み込まれるとカードの情報をpostMessage
で親フレームに通知する.具体的には,読み込みが開始されるとready
というメッセージを送り,描画されるとresizeCard
というメッセージでコンテンツの高さを送る.ユーザスクリプトからiframeの中身にアクセスすることは出来ないので,ここで得られた高さ情報をもとにiframeのリサイズを行っている.……のだが,場合によってresizeCard
のメッセージが送られてこないことがあり,リサイズできず高さが初期値のままとなる.なぜresizeCard
が発火しないのかは謎.不格好なので直したいが,とりあえず表示はされるので我慢して使っている.