Zenn
🔥

朝からtwitterのデザイン変更を対応した話

2022/08/14に公開
Chrome拡張
Twitter
#
ネタ
tech

twitterがinstagramになってる…
そんな日曜の朝を迎えた私は、ゲームをするか、この問題に取り組むか考えつつコーヒーを入れました。

結果として取り組んだのですが、これはtwitterライフを満喫するためにChrome拡張を作った話になります。

ネタ投稿です、あしからず。

起こった問題

twitterのデザイン変更があり、PC上で画像が正方形表示になりました。
フィードにおいて画像が正方形に表示されると、PC画面が1枚の画像で埋め尽くされ、一度の画面に表示される投稿量が少なくなってしまいます。(1〜2ツイートのみ)

個人的なtwitterの使い方として、タブキーで画面スクロールを行い、1画面単位で投稿内容を確認しています。
つまり何度もタブキーをクリックしなければいけなくなりました。

開発の決意

私もサービスを提供する一人としてデザインが変更されるのは分かります。
ABテストの結果か広告のお金のためかどちらかだろう…

とはいえ、1ユーザーとしては耐えられるものではない。
ということでChrome拡張を開発しようと思った次第です。

実際の開発

Chrome拡張を始めて作ろうと思い軽く調べてみたところ、どうやら思った以上に必要な知識が多いようです。
ただ、(ゲームの世界の)ヒロインが僕に「お願い…早く世界を救って」と囁いてきているので、それほど時間はかけられません。

どうせ次のバージョンアップには使えなくなる可能性(開発後の問題点1)があるのでサクッと開発していきます。

作ったファイルはこの二つです。
同フォルダに保存し、 chrome://extensions/ の「パッケージ化されていない拡張機能を読み込む」から読み込みます。

manifest.json

{
  "name": "twitter-rollback",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["https://twitter.com/home"],
      "js": ["script.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拡張には多くの問題点があります。

  1. twitterがバージョンアップすると使えない (たぶん)
    class名が難読化された結果の名前だと思われるので、次バージョンがリリースされた際には別名に変わっている可能性があります。
    もう明日には使えなくなっているかもしれません。

  2. フィード再読み込みが走らないことがある
    フィードの高さを変更してしまっているため、フィードの再読み込みが走らない場合があります。
    ちょっと画面を上に戻し、また下にスクロールすると読み込まれます。

  3. アイコンが崩れる
    classのターゲット指定にアイコンが入ってしまっています。
    アイコンがバグりますが、アイコンは普段見ないからいいこととします…

  4. 1秒に1回スクリプトを走る処理はエンジニアとしてどうなんだ
    「Chromeタブがアクティブな時のみ動作」など何かしら処理が軽くなるやり方があるはず。
    ただ、僕には救わなければいけない(ゲームの)世界が待っているので(略

最後に

ネタ投稿ですが、この問題点を解決してくれる方を熱望しています。
素敵なtwitterライフを満喫したい。

閲覧いただきありがとうございました：）

こちらの記事が楽しめた方がいればフォローお願いします。
https://twitter.com/iminux

Discussion