学ぶ、考える、書き出す。

Twitterの右サイドバーを非表示にする

Twitter のトレンドを見ると、イラつきを覚えるようになりました。そんなにイラつきを覚えるようなら見なければいいし、そもそも Twitter やめろという話はあります。
ただ次のツイートにある通り、ある意味で期待通りの報酬を得られる行為で、正直なところ常習化していました。

そのため Twitter のトレンドを見てしまうことが多く、トレンドを見るたびに後悔していました。

Twitter のトレンドが目に入ってくる

Twitter のページを見ると自然とトレンドが目に入ってきます。
普段見ている Twitter の画面は次の通りだと思います。

CSSを調整する前のTwitterは3カラムになっている

左サイドバーにナビゲーションがあって、中央にツイート一覧、そして右サイドバーに Twitter 内の回遊リンク一覧がある構成になっています。

この構成だと右サイドバーの Twitter 内の回遊リンク一覧が目に入ります。
特にいまどうしてる?というタイトルが付けられた Twitter 内のトレンド一覧が目に入ります。

これは Twitter 側で、トレンドを見てもらうことで Twitter 内を回遊してくれて、結果として追っている KPI を達成できる確率が高まるというデータがあるのでしょう。
なので一番目に入る位置にトレンドがありますし、トレンドの先頭は広告枠になっているのだと思います。

Twitter のトレンドを視界から消す

そんな Twitter のトレンドを視界から消すために、Stylusを使って、Twitter 側で定義されている CSS を上書きし、Twitter のトレンドを非表示にしました。

トレンドを削除するときの課題

Twitter では次のツイートにある通り、React Native for Web を使っています。

これは今も変わってなさそうで、HTML に定義されているクラス名はランダムな文字列となっています。
このためクラス名を元にスタイル定義をすると、将来の変更でスタイルが適用されなくなることが容易に想像できます。

解決策

そのため自分が書いた CSS を注入する際 data-* 属性のセレクタに対してスタイル定義をすれば、将来的に壊れにくくなりそうという考えを持ちました。
それに従って書いた CSS は次の通りです。

[data-testid='primaryColumn'] {
  max-width: 600px;
}

[data-testid='sidebarColumn'] {
  display: none;
}

この CSS を適用した Twitter を見てみましょう。見事に今回の目的である右サイドバーを非表示にできています。

CSSを調整した後のTwitterは2カラム表示になっている。右サイドバーは非表示になっている

まとめ

本来なら Twitter を見ないようにしたり、アカウントを削除して何もかも見れなくしたりしたほうが手っ取り早いでしょう。

ただ他サービスのログインに使っていたり、DM でやり取りしている人がいたり、そもそも Twitter に割と依存しがちだったりとやめられない状況です。
なので今回は妥協案として、右サイドバーを非表示にしました。

Twitter には有料機能でもいいので、トレンドなどを削除する機能を作ってほしいですが、それが叶うことはないでしょう……

記事を共有する

関連記事