Twitterの画像をオリジナルの解像度で開くやつをつくった

技術

2019-12-10-23-44-24.png

usagiga/Lupe: Once open link of posted images on Twitter, then Lupe changes its url to original resolutions one.

Twitterはアップロードした画像を適切な解像度に圧縮した上で配信しています。画像のURLの &name=small みたいなので解像度を指定しているわけですが、 &name=orig ってやるとオリジナルの解像度になります。で、画像を開いたら勝手にオリジナルの解像度にするスクリプトというのが Lupe です。各自、壁紙だったり今晩のおかずだったりの画像をササッとオリジナルの解像度で保存するのに役立ててください。

まあ概要とかインストール方法とか使い方はGitHubに書いたので各自読んでもらうとして、ここではなんでそんなもんができた?みたいな話をしたいなと思っています。

なんでそんなもんができた?

ぼくはよくTwitterの画像を保存しています。

ケースはさまざまですが、PCの壁紙に使いやすい神社や森の画像だったり、ドえっちな画像だったり、動画投稿していた時代では描いてもらった支援絵だったりです。

そもそもぼくには必要以上にデータを貯め込む癖があります。ぼくの推しがツイ消しやらブログを消すやらの常習犯しかいねーからです。有益な情報の損失が日常的に発生している環境下では人間は蒐集癖を身につけるようですし、スリープしているモバイルデバイスのポーリング感覚が渋すぎて通知が遅れてやってきたりすると殺意が湧くようになるようです。サ終とかInternet Archive のWayback Machineが巡回してないとかで情報を失わなくなったのはいいのですが、代わりに何か大切なものを失っている気がします。倫理観とか?これ実質ネトストだもんな。

そんな蒐集癖がためにTwitterの画像を保存する頻度も多いのですが、必然、手動でのダウンロードで毎回 orig ってのをつけることにもなるわけで、自動化もやむを得まいというわけです。

DIY!DIY!

Lupeは、TampermonkeyっていうUserScript界隈では有名なブラウザ拡張のスクリプトとしてリリースしています。特定のページにフックしてJSを走らせることができます。ブラウザの拡張を作るより手軽ですし、細かい要望をその場で叶えることができるのは悪くないです。

とはいえ、コードを書いて自動化!って、かかる時間の割に時短はあんまできてないなと思っています。どういうフローで、どの技術で要望を実現するかを考えて、コード書いてバグ取りもするわけなので、時間がかかるのも仕方ないという感じなんですが、一回数秒の作業の自動化にそれだけの時間を払うべき?って考えると何も作れなくなりませんか?ぼくはなります。

ただ、今回のLupeなんかは5分ちょいの作業時間でめんどくささがめっちゃ低減されてQoL爆上がりって感じでした。コードもすごい短い。

let pageUrl = new URL(window.location.href);
let pageUrlParams = pageUrl.searchParams;

if(pageUrlParams.get("name") != "orig") {
    pageUrlParams.set("name", "orig");

    window.location.assign(pageUrl.toString());
}

これだけ。

LupeはURLクラス(とそのプロパティ)のメソッドを一生叩いているだけです。作業前の見積もりでは「正規表現のルールとかどう書こうかな〜」とかダラダラ考えてたんですが、ブラウザの実装があまりにも優秀過ぎて作業時間が短くなる方に誤算しました。

これくらい楽だとDIYって呼べますよね。

たのしいものづくりの地平にぼくは立っている。

オブジェクト指向

URLSearchParams の実装とかめっちゃイケメンじゃないですか?クエリパラメータの構造がどうなってるかは知る必要がなくて、あとはメソッド叩けばいい感じにいい感じしてくれるわけです。こういう実装のおかげで、ぼくらはだいぶ上のレイヤーでクラスだけ叩いていれば開発できるわけです。科学の力ってすげぇ。

いろんな環境にインストールするついでにGitHubで放流したわけですが、インストールもハチャメチャ楽ですしね。Tampermonkeyもすげぇ。

結局、オブジェクト指向ってことなんですよね。ちがう?

結論

Lupeを書くよりLupeについての記事を書くほうが数倍時間がかかりました。さっさと完成してすげーーーーーってなってたので、その感動を共有したかったのですが、その間ぼくは何枚の画像を保存することができたでしょうか?

あと、休憩時間に数枚画像落とすだけだったのに時間こんなに吸われて、明日納期のプロダクトは上がるんですか?

最近マウスホイールがぜんぜん回んなくて中クリックや左クリックを暴発してつらいんですが、最近出た方のIntelli Mouseの開け方って誰か知らないですか?

そういう感じです。さようなら。