Twitterの右側サイドバーを消す

Twitterのトレンドは見るたびにイラつきを覚えます。そんなにイラつきを覚えるようなら見なければいいし、そもそもTwitterをやめろという話かもしれません。

ただ次のツイートにあるようにある意味で期待通りの報酬を得られる行為となります。

インターネットでQOLを1番下げる行為は、間違いなく「嫌いな人間/集団/コンテンツを自分から見に行って、嫌なものを見つけて、嫌なのを確認する」事なんだけど、これはある意味で「期待通りの報酬を得られる」行為なので、常習化を招きやすいんだよな。人生には得てはいけない成功体験があるというな。

— rei@生きてるだけで疲労困憊発売延期 (@rei10830349) September 30, 2019

そのためTwitterのトレンドを見てしまうことが多くトレンドを見るたびに後悔していました。ただやめられなくなっていて正直なところ常習化していました。

なぜTwitterのトレンドを見てしまうのか

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

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

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

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

ただTwitterのトレンドを目に入れたくない立場からすればとにかく消えてほしいものです。あとついでにおすすめユーザーも邪魔な気がしてきました。

Twitterのトレンドを視界から消す(ついでにおすすめユーザーも)

ということでTwitterのトレンドを視界から消します。

今回はStylusを使って、Twitter側で定義されているCSSを上書きしてTwitterのトレンドのみならず右サイドバーごと非表示にしました。

なおTwitterのトレンドを消す方法として、Chrome向けのTwitter拡張機能であるおだやかTwitterやSimplified Twitterを入れる方法や、地域を変更してトレンドのみ表示できないようにする方法もあります。

Twitterの右サイドバーを削除するときの課題と解決方法

TwitterはReact Native for Webを使っています。

If you use Twitter Lite you're now using a web app rendered by React Native for Web

— Nicolas (@necolas) September 29, 2017

これは今も変わってなさそうでHTMLに定義されているクラス名はランダムな文字列です。

このためクラス名を元にスタイル定義をすると、将来の変更でスタイルが適用されなくなりそうです。

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

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

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

このCSSを適用したTwitterのスクリーンショットを見てみましょう。

見事にTwitterの右サイドバーを非表示にできています。今回の目的を達成しました。

まとめ

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

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

Twitter Blueにトレンドなどを削除する機能を作ってほしいですが、広告枠の扱いなども考えると難しそうです。