TweetDeckでツイートに含まれるリンク先の内容を表示するユーザスクリプト

Twitterでリンクを含むツイートをすると，リンク先の内容がカードとして表示されることがある．これはTwitter Cardと呼ばれており，リンク先のページが対応している場合に表示される．

f:id:sienori:20200624004341p:plain

しかし，公式クライアントであるTweetDeckではカードが表示されないので不便．

f:id:sienori:20200624004643p:plain

そこで，TweetDeckでツイートにカードを表示するためのユーザスクリプトを書いた．

gist.github.com

Greasemonkeyなどのブラウザ拡張機能にこのスクリプトを追加するとカードが表示されるようになる．

f:id:sienori:20200624004553p:plain

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

スタイラスを使ってLooking Glassを直接的にポインティングする

というものを研究として最近作っている． スタイラスとそこから伸びる仮想レイの位置関係が一致するので，現実空間とLooking Glass内の仮想空間がシームレスにつながるような操作感を得られる，というのが売り．Looking Glassのアプリケーションでよく利用されているLeap Motionを使ったハンドトラッキングによる操作だと，実際の手と仮想の手の位置関係が相対的で不明瞭という欠点がある．虚空で手をふよふよ動かすのは直感的でないと感じこのような操作方法を考えた．

スタイラスは鉛筆に黒のフェルトを巻き，帯状に再帰性反射材のマーカを貼って作ったもの．市販のプレゼン用フィンガーマウス(を改造したもの)を取り付けてクリックできるようにしている．

トラッキングはLeap Motionのカメラ画像をOpenCVで解析して行っている． 大まかに言うとBlob検出と輪郭検出を使ってマーカの画像内座標を割り出し，左右のカメラ画像から三角測量で3D座標を計算している． f:id:sienori:20190713013526p:plain

Looking GlassとLeap Motionの位置関係は3Dプリンタで出力したマウントを使って固定し，Unity上ではそれぞれのゲームオブジェクトを実際の配置と同じように設置する．実世界のスタイラスとLooking Glass内の仮想レイが一致するので直接的に操作できる．

現在ソースは非公開だが，将来的に公開する予定．