twitterがinstagramになってる…
そんな日曜の朝を迎えた私は、ゲームをするか、この問題に取り組むか考えつつコーヒーを入れました。
結果として取り組んだのですが、これはtwitterライフを満喫するためにChrome拡張を作った話になります。
ネタ投稿です、あしからず。
起こった問題
twitterのデザイン変更があり、PC上で画像が正方形表示になりました。
フィードにおいて画像が正方形に表示されると、PC画面が1枚の画像で埋め尽くされ、一度の画面に表示される投稿量が少なくなってしまいます。(1〜2ツイートのみ)
個人的なtwitterの使い方として、タブキーで画面スクロールを行い、1画面単位で投稿内容を確認しています。
つまり何度もタブキーをクリックしなければいけなくなりました。
開発の決意
私もサービスを提供する一人としてデザインが変更されるのは分かります。
ABテストの結果か広告のお金のためかどちらかだろう…
とはいえ、1ユーザーとしては耐えられるものではない。
ということでChrome拡張を開発しようと思った次第です。
実際の開発
Chrome拡張を始めて作ろうと思い軽く調べてみたところ、どうやら思った以上に必要な知識が多いようです。
ただ、(ゲームの世界の)ヒロインが僕に「お願い…早く世界を救って」と囁いてきているので、それほど時間はかけられません。
どうせ次のバージョンアップには使えなくなる可能性(開発後の問題点1)があるのでサクッと開発していきます。
作ったファイルはこの二つです。
同フォルダに保存し、 chrome://extensions/ の「パッケージ化されていない拡張機能を読み込む」から読み込みます。
{
"name": "twitter-rollback",
"version": "1.0",
"manifest_version": 3,
"content_scripts": [
{
"matches": ["https://twitter.com/home"],
"js": ["script.js"]
}
]
}
setInterval(() => {
// ツイート画像のクラス名を取得
const tweets = document.getElementsByClassName("r-1udh08x r-1adg3ll");
for (t of tweets) {
// 高さを250pxに変更
t.style.height = "250px";
}
}, 1 * 1000);
その後 https://twitter.com/を開くとあら不思議！
画像の縦幅が半分程度になり、僕は幸せになれました。
開発後の問題点
現時点でこのChrome拡張には多くの問題点があります。
-
twitterがバージョンアップすると使えない (たぶん)
class名が難読化された結果の名前だと思われるので、次バージョンがリリースされた際には別名に変わっている可能性があります。
もう明日には使えなくなっているかもしれません。 -
フィード再読み込みが走らないことがある
フィードの高さを変更してしまっているため、フィードの再読み込みが走らない場合があります。
ちょっと画面を上に戻し、また下にスクロールすると読み込まれます。 -
アイコンが崩れる
classのターゲット指定にアイコンが入ってしまっています。
アイコンがバグりますが、アイコンは普段見ないからいいこととします… -
1秒に1回スクリプトを走る処理はエンジニアとしてどうなんだ
「Chromeタブがアクティブな時のみ動作」など何かしら処理が軽くなるやり方があるはず。
ただ、僕には救わなければいけない(ゲームの)世界が待っているので(略
最後に
ネタ投稿ですが、この問題点を解決してくれる方を熱望しています。
素敵なtwitterライフを満喫したい。
閲覧いただきありがとうございました：）
こちらの記事が楽しめた方がいればフォローお願いします。
https://twitter.com/iminux