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

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

ただ次の投稿にある通り、ある意味で期待通りの報酬を得られる行為となります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

If you use X（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を適用したX（Twitter）のスクリーンショットを見てみましょう。

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

まとめ

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

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

プレミアム会員向けにトレンドなどを削除する機能を作ってほしいですが、広告枠の扱いなども考えると難しそうです。