Twitter の引用 RT に関する仕様変更を元に戻す Chrome 拡張機能を作った【TwitterRevertRT】

10 月 20 日から始まった Twitter の RT(引用 RT)に関する仕様変更(改悪) Twitter のリツイート周りの仕様が変わり、リツイートボタンをクリックすると引用ツイートの入力画面が開くようになってしまったことは記憶に新しいかと思います。
当初は大統領選が終わるまでの臨時的措置のはずでしたが、「誤情報の拡散を抑制できた」ということで、この措置は当面の間継続となるようです。

私のように(Twitter 運営の目論見とは裏腹に)リツイートが面倒くさくなって煩わしく思っている、そんな人のために、Twitter のリツイート(RT)・引用ツイートの仕様変更を以前の挙動に戻す Chrome 用拡張機能、 TwitterRevertRT を作ってみました。

リツイートボタンをクリックするとコンテキストメニューが表示され、以前の Twitter 同様に通常リツイートか引用ツイートかを選択できます。
「リツイート」をクリックすると、引用ツイートの入力画面を見ることなくワンクリックでリツイートできます。
「引用ツイート」をクリックすれば引用ツイートも可能です。

10 月 20 日から公開していた V1 ではリツイートと引用ツイートは左クリック・右クリックで切り替えており、また動作が極めて不安定で不具合だらけでした。
11 月 25 日から公開している V2 では動作ロジックを大幅に改善したほか、リツイートと引用ツイートをコンテキストメニューから選択できるようになり、以前の挙動に近い安定した動作を実現しています(既に導入済みの方もアップデートを推奨します)。
私自身もデバッグも兼ねて使っていますが、見違えるほど快適になり QOL が向上しました(おすすめ)
一応「ツイートを拡散する前にもう一度考えていただくため」という趣旨らしいけど、「引用RTは引用元のアカウントにリプとほぼ同質のものとして通知される」のでクソリプが増えるだけなの、地獄みがある
そもそも日本国民なので、大統領選自体の結果に興味はあるけどアメリカの選挙権ないし知るかってお気持ち
Sponsored Link

注意

  • 不具合はできるだけ直したつもりですが、やむを得ず強引に実装しているため、予期しない不具合があるかもしれません。
    • Twitter 側の JavaScript には干渉できないため、外部から無理やり操作しようとゴリ押すほかない…
    • スマホ版の Twitter にも一応対応していますが、DOM を強引に操作する形で実装しており、PC 版よりも不安定です。
  • Twitter に関連する他の拡張機能や UserScript をインストールしている場合、競合して正常に動作しない可能性があります。
  • トランプの一部ツイート等で見られる「This claim about election fraud is disputed」と注意書きのあるツイートではうまく動作しませんが、これは仕様です(やろうと思えば動かせるだろうけどかなり面倒…)。
  • 言うまでもありませんが、アプリ版の Twitter では利用できません。
    • スマホ版 Chrome では拡張機能の概念自体がないため、そもそもインストール自体ができません。
    • よって、結果的に PC 版の Chrome でのみ使えるということになります。
    • この記事では Windows での手順で説明します( macOS でも動くことは確認済みです)。

インストール

Chrome ウェブストア を開き、[Chrome に追加]ボタンをクリックします。

「『TwitterRevertRT』を追加しますか?」というダイヤログが出るので、[拡張機能に追加]をクリックします。
これでインストールは完了です。設定画面等はありません。

インストール(旧)

以下の手順は Chrome ウェブストアへの公開以前に紹介していた「パッケージ化されていない拡張機能」としてインストールする方法で、手順が煩雑な上に自動更新されないため非推奨です。
以前に「パッケージ化されていない拡張機能」としてインストールした方は、一旦「パッケージ化されていない拡張機能」の方をアンインストールしてから Chrome ウェブストア版をインストールするようにしてください。パッケージ化されていない拡張機能の方をアンインストールせずに Chrome ウェブストア版もインストールすると、ID が異なるため重複してインストールされてしまいます。

ダウンロード・配置

GitHub にアクセスし、緑色の Code ボタン → [Download ZIP] をクリックして拡張機能をダウンロードします。

ダウンロードが終わったら解凍して、適当なフォルダに配置します。
多分 TwitterRevertRT-master とかいうフォルダ名になってるので、TwitterRevertRT とリネームしてください。
ドキュメント以下なりどこでもいいとは思いますが、Chrome に拡張機能を読み込ませた後にフォルダの場所を変更するとちょっと面倒なことになるので、後から動かさなさそうな場所がおすすめです。

また、C:\Program Files 以下は特殊な権限が指定されているので置かないほうが無難です。
私はインストーラーがない系のソフトを C:\ 直下に Applications フォルダを作ってそこに置くようにしているので、C:\Applications\TwitterRevertRT のようなパスに配置しています(特にこだわりがなければドキュメント以下とかでよいでしょう)。

Chrome にインストール

Chrome を開き、右上の ︙ ボタン → [その他のツール] → [拡張機能] に移動します。

[拡張機能] ページが開くので、右上の [デベロッパー モード] のスイッチをオンにします。

デベロッパー モードを有効にすると [パッケージ化されていない拡張機能を読み込む] というボタンがあるので、それをクリックします。

[拡張機能のディレクトリを選択してください] というフォルダ選択画面が表示されるので、先ほど TwitterRevertRT を配置したフォルダに移動して、[フォルダーの選択] をクリックします。

拡張機能ページの中に TwitterRevertRT が表示されていて、スイッチが有効(青色)になっていれば拡張機能のインストールは完了です。

更新方法

インストール同様に GitHub の  [Download ZIP] からダウンロードして、中のファイルを TwitterRevertRT を配置したフォルダに移動(上書き)してください。
その後 Chrome を再起動するか、拡張機能ページのスイッチの横にある更新ボタンをクリックすると更新が反映されます。

使い方

さっそく Twitter のページを開いてみましょう!すでに開いている方は一度リロードしてください(👈重要)

今回の仕様変更で、ツイート内のリツイートアイコンをクリックすると通常リツイートか引用ツイートかのコンテキストメニューが表示されず、直で引用ツイートの画面が表示されるように変更されてしまいました(コメントを入れずに引用ツイート画面内の [リツイート] ボタンを押すと通常のリツイート扱いになるような仕様に変わっています)。

この拡張機能をインストールすると、リツイートボタンをクリックした後にコンテキストメニューが表示されるようになり、以前の Twitter 同様に通常リツイートか引用ツイートかを選択できます。

「リツイート」をクリックすると、引用ツイートの入力画面を表示することなくワンクリックでリツイートできます。「引用ツイート」をクリックすると、通常通り引用ツイートのコメント入力画面を開きます。

おそらく、一度試していただいた方が早いです。
V1 では左クリックで通常リツイート、右クリックで引用ツイートと操作が直感的でなく、通常リツイートも一瞬引用ツイート画面が表示されるなど完全に以前の挙動にできずにいました。
現行の V2 ではコンテキストメニューから通常リツイートと引用ツイートを選択できるようにし、一瞬たりとも引用ツイート画面を表示することなく通常リツイートできるようになるなど、10 月 20 日以前の Twitter の挙動に極力近づいているかと思います。

動作を無効にしたい場合は拡張機能自体を無効にしてください。
拡張機能の有効 ⇔ 無効は chrome://extensions 内のスイッチから切り替えられます。

V2 ではコンテキストメニューが表示できるようになったため右クリックで引用ツイートを開く機能は廃止していますが、頻度も少なくさほど問題にはならないと思います。
スマホ用(704px 以下)のブラウザ版 Twitter にも一応対応していますが、これは PC ブラウザ版の Twitter をウインドウ幅を細めて使っているケースを想定しています。
ただし、スマホ版はリツイートボタンを押すとツイートフォームの DOM で以前の画面の DOM が上書きされてしまう関係で上書きされる前に DOM をコピーして一時的に配置するなどかなり強引に実装している部分があり、動作が PC ブラウザ版よりも不安定になっています。できるだけブラウザの幅を PC ブラウザ版となる 705px 以上にしておくことを推奨します。

仕組み・余談

V1 では MutationObserver という  DOM の変化を監視する API を用いて実装していましたが、DOM の変化が多すぎる上に Twitter が React で実装されているため CSS クラスがランダムな文字列で要素の判別が困難だったりと、 判定漏れや二重実行が起きやすく、かなり不具合を抱えていました。

V2 では MutationObserver を使うことを諦め、0.5 秒ごとに DOM 上に存在する全てのリツイートボタンに onclick イベントを設定し、リツイートボタンをクリックした時にコンテキストメニューが表示される状態にしています。このとき引用ツイートのフォームも DOM 上には表示されていますが、CSS に opacity: 0; を設定することで不可視になっています。

つまり、コンテキストメニューが表示されている間は引用ツイートのフォームも透明になっているだけで存在します。URL が /compose/tweet に変わるのもそのためです。

コンテキストメニュー以外の領域がクリックされたときは、引用ツイートのフォームの半透明になっている部分を  click() し、ツイート画面に戻ります。
「リツイート」がクリックされると、透明状態のまま引用ツイートのフォーム内の「リツイート」ボタンを click() し、先ほど同様ツイート画面に戻ります。
「引用ツイート」がクリックされると、一度透明にした引用ツイートのフォームを opacity: 0; を解除して表示し、コメントを入力できる状態にします。
コンテキストメニューは独自で HTML やスタイルを組んでいますが、極力他のコンテキストメニューとの違和感がないよう調整しています(登場時のアニメーションを他とあわせてあるのがこだわりポイント)。

おわりに

 Twitter改悪!?ありえない話し!! 謝れ!! 謝れ!! 謝れ!!

あと!もしよかったら!!下のボタンからシェア!!!してね!!!!(宣伝)

Sponsored Link
Sponsored Link
Web
tsukumiをフォローする
Sponsored Link
つくみ島だより

コメント

  1. 個人的には左クリックでRTした後でも右クリックで引用ページが開けるようになったら便利だと思います…

    • それは私も思いますが、引用含め一度 RT してしまうと RT ボタンが unretweet ボタンに変わってしまうので拡張機能からはどうしようもないです…
      この拡張機能は 引用 RT のモーダルが表示されたときにマウスの代わりに自動で RT ボタンを押す程度の機能しか持っておらず、Twitter 内の JavaScript に干渉できない以上、拡張機能側から独自に引用 RT モーダルを呼び出すのは不可能です。 どうにかしたいのは山々なのですが…。
      これがまともな HTML をしていればともかく、React で書かれているせいで CSS クラスがランダム化されていたり、HTML 構造もめちゃくちゃだったりとなかなか…