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
が発火しないのかは謎.不格好なので直したいが,とりあえず表示はされるので我慢して使っている.
babel実行時に「Support for the experimental syntax 'objectRestSpread' isn't currently enabled」と言われる場合の対応方法
古いパッケージをアップデートしたらエラーが起きたので書いた
スタイラスを使ってLooking Glassを直接的にポインティングする
スタイラスを使ってLooking Glassを直接的に操作するためのインタフェース,というものを作っています #LookingGlass #ルキグラス pic.twitter.com/QAWZ9GmqWY
— シエノリ (@sienori_firefox) July 12, 2019
というものを研究として最近作っている. スタイラスとそこから伸びる仮想レイの位置関係が一致するので,現実空間とLooking Glass内の仮想空間がシームレスにつながるような操作感を得られる,というのが売り.Looking Glassのアプリケーションでよく利用されているLeap Motionを使ったハンドトラッキングによる操作だと,実際の手と仮想の手の位置関係が相対的で不明瞭という欠点がある.虚空で手をふよふよ動かすのは直感的でないと感じこのような操作方法を考えた.
スタイラスは鉛筆に黒のフェルトを巻き,帯状に再帰性反射材のマーカを貼って作ったもの.市販のプレゼン用フィンガーマウス(を改造したもの)を取り付けてクリックできるようにしている.
トラッキングはLeap Motionのカメラ画像をOpenCVで解析して行っている. 大まかに言うとBlob検出と輪郭検出を使ってマーカの画像内座標を割り出し,左右のカメラ画像から三角測量で3D座標を計算している.
Looking GlassとLeap Motionの位置関係は3Dプリンタで出力したマウントを使って固定し,Unity上ではそれぞれのゲームオブジェクトを実際の配置と同じように設置する.実世界のスタイラスとLooking Glass内の仮想レイが一致するので直接的に操作できる.
現在ソースは非公開だが,将来的に公開する予定.
Javaで文字列に絵文字が含まれているか判定する
絵文字に苦しめられたので書いた
FirefoxでIndexedDBが利用できないときの対処法
という記事をQiitaに書いた。qiita.com