リツイート非表示を拡張機能化
- カテゴリ:
- ChromeExtension
- コメント数:
- Comments: 2
◆ Chrome の拡張機能になりました
この記事に書いた リツイートを非表示にする方法を お手軽に操作できるように拡張機能にしました
一応 公式でもリツイートの非表示機能はあります
ユーザページで フォロー中アイコンの左の歯車メニューの中です

ですが このメニューは フォローしてる人にしかでません
ということはログインしていないと 使えないです
フォローしてないとこうなってます

リツイート隠して本人のツイートだけをみたいって フォロー前の方が多いと思います
そういうわけで この拡張機能です
インストールするとボタンが右上に出るので Twitter のページでボタン押します
こんなウィンドウが出るので リツイートを隠したいか リツイートだけを見たいかで 右か左をクリックします

そうすると 条件にあわないツイートは非表示になります
Twitter以外のページでやっても何も起きません
(注意)
今のTwitterのデータの構造に合わせて作っているので デザイン変更などで動かなくなるかもしれないです
ダウンロード
ダウンロード
一応 Twitter の新しいページに対応はしたものの 新しいページの仕様上 以前ほど完全で安定したものにはなりませんでした
以前は HTML の属性で持っている情報が多くて 人が見てわかりやすく拡張機能でカスタマイズもしやすいものでした
しかし 今では React が使われてるようでフレームワーク系だとよくある HTML を見ても意味がわからないものになってます
コンポーネントのソースコードレベルであればコメントがあったり 条件によって表示されるものもあってわかりやすいとは思いますが出力された DOM を見ても全くわかりません
以前はあったどれがリツイートかという情報もなく 単純に「さんがリツイート」というテキストを含むかどうかの判断になってます
いかにも機械的に作られたような情報ばかりで class も css-1dbjc4n r-16y2uox r-1wbh5a2 r-1ny4l3l r-1udh08x r-1yt7n81 r-ry3cjt みたいなものです
どれが何を意味してるのかわからないので その要素がどういう意味を持って配置されてるかの推測もできないです
さらには 機械的に生成された文字列はビルドごとに変わると思うのでちょっとした修正などでも頻繁に変わります
いちいちそれに合わせて拡張機能の更新をしてられないので 残り寿命も短いです
こうしている間にもう動かなくなってる可能性もあります
それだけなら次の変更までは動くはずなのですが スクロールの仕組みも仮想的なものになっています
下の方に行くと上の方の要素はツリーからデタッチして ツイートが多くなっても快適なしくみです
実体が少ないとスクロールバーの位置がおかしくなるので ダミーの padding を入れて調整しています
この仕組みがあるせいで 外部から非表示にした場合にフレームワークの処理が想定してる画面の状態と実際の状態がずれて表示がおかしくなることがあります
謎の空白が出てきたりスクロールバーの位置が急に飛んだりします
非表示対象が多くなると安定して見れません
見る側に好き勝手にいじれられるとサービス提供側は困るので この方が嬉しいのかもしれませんが 個人的には web はサーバ側ではなくクライアント側のもので見る側が好きにカスタマイズできるべきだと思ってるので こういうカスタマイズ性の低い作りのサービスが増えてきてほしくないんですよねー
Twitter みたいに API が提供されてるサービスならそれを使って自分でクライアント自体を作ればいいじゃない となるので何も言えないと言えばそうなんですけどね
機能は リツイートの非表示とリツイートだけ表示の2つです
一応 公式でもリツイートの非表示機能はあります
ユーザページで フォロー中アイコンの左の歯車メニューの中です

ですが このメニューは フォローしてる人にしかでません
ということはログインしていないと 使えないです
フォローしてないとこうなってます

リツイート隠して本人のツイートだけをみたいって フォロー前の方が多いと思います
そういうわけで この拡張機能です
インストールするとボタンが右上に出るので Twitter のページでボタン押します
こんなウィンドウが出るので リツイートを隠したいか リツイートだけを見たいかで 右か左をクリックします

そうすると 条件にあわないツイートは非表示になります
Twitter以外のページでやっても何も起きません
(注意)
今のTwitterのデータの構造に合わせて作っているので デザイン変更などで動かなくなるかもしれないです
ダウンロード
追記 (2020/07/30)
コメントで更新要望いただいたので更新しましたダウンロード
一応 Twitter の新しいページに対応はしたものの 新しいページの仕様上 以前ほど完全で安定したものにはなりませんでした
以前は HTML の属性で持っている情報が多くて 人が見てわかりやすく拡張機能でカスタマイズもしやすいものでした
しかし 今では React が使われてるようでフレームワーク系だとよくある HTML を見ても意味がわからないものになってます
コンポーネントのソースコードレベルであればコメントがあったり 条件によって表示されるものもあってわかりやすいとは思いますが出力された DOM を見ても全くわかりません
以前はあったどれがリツイートかという情報もなく 単純に「さんがリツイート」というテキストを含むかどうかの判断になってます
いかにも機械的に作られたような情報ばかりで class も css-1dbjc4n r-16y2uox r-1wbh5a2 r-1ny4l3l r-1udh08x r-1yt7n81 r-ry3cjt みたいなものです
どれが何を意味してるのかわからないので その要素がどういう意味を持って配置されてるかの推測もできないです
さらには 機械的に生成された文字列はビルドごとに変わると思うのでちょっとした修正などでも頻繁に変わります
いちいちそれに合わせて拡張機能の更新をしてられないので 残り寿命も短いです
こうしている間にもう動かなくなってる可能性もあります
それだけなら次の変更までは動くはずなのですが スクロールの仕組みも仮想的なものになっています
下の方に行くと上の方の要素はツリーからデタッチして ツイートが多くなっても快適なしくみです
実体が少ないとスクロールバーの位置がおかしくなるので ダミーの padding を入れて調整しています
この仕組みがあるせいで 外部から非表示にした場合にフレームワークの処理が想定してる画面の状態と実際の状態がずれて表示がおかしくなることがあります
謎の空白が出てきたりスクロールバーの位置が急に飛んだりします
非表示対象が多くなると安定して見れません
見る側に好き勝手にいじれられるとサービス提供側は困るので この方が嬉しいのかもしれませんが 個人的には web はサーバ側ではなくクライアント側のもので見る側が好きにカスタマイズできるべきだと思ってるので こういうカスタマイズ性の低い作りのサービスが増えてきてほしくないんですよねー
Twitter みたいに API が提供されてるサービスならそれを使って自分でクライアント自体を作ればいいじゃない となるので何も言えないと言えばそうなんですけどね
COMMENT
コメント一覧 (2)
-
- 2020/07/27 12:19
- Twitterの仕様変更で拡張機能が機能しなくなったので、出来れば更新お願いします。
-
- 2020/07/30 18:42
-
>>1
一応更新しましたが Twitter の今の表示の仕組み上 安定しませんし すぐに使えなくなりそうな感じです
本文を追記してるので詳しくはそちらを見てください