Shogo's Blog

Oct 28, 2012 - 1 minute read - togetter userscript

Togetterの編集作業便利にしたい

TogetterはTwitterの投稿をまとめられる非常に便利なサイトですが, 編集画面が異様に使いにくいです. そんなわけで前回は 自動的に検索ボタンを押してくれるブックマークレットを書いてみました.

それをユーザスクリプトにして, ついでに編集画面の不便なところを修正してみました.

編集を便利にするユーザスクリプト

スクリプトはGistにあげておきました.

Chrome拡張Tampermonkey で動作を確認しました. この拡張,ユーザスクリプトの管理ができてオススメです.

変更内容

ユーザスクリプトは編集画面に対して次のような変更をします.

  • 画面レイアウトの変更
  • 自動検索機能
  • 重複削除・ソートの高速化
  • 選択動作の変更
  • 元に戻す機能
  • ショートカットキーの追加

画面レイアウトの変更

Togetterの編集画面のレイアウト,非常に使いにくいです. ツイート一覧をスクロールしようとしたら画面全体がスクロールしてしまって, 編集用のボタンが隠れてしまう,ということが編集中に何度もあってイライラします.

** 余計なものでごちゃごちゃし過ぎなんだ! **

** 僕は編集に集中したいんだ! **

編集と関係の無いヘッダやナビゲーションは要らないので消えてもらうことにしました. ツイートの一覧が画面いっぱいに表示され, 編集用のボタンは常常に画面上に表示されます.

自動検索機能

前回ブックマークレットで実現した機能です. 検索キーワードと一回あたりの読み込み回数を設定し, 「自動検索開始」ボタンを押しましょう. すると,繰り返し間隔を聞いてくるので秒単位で時間を指定しましょう. カウントダウンが始まり,周期的に検索・ソート・重複削除が行われます.

重複削除.ソートの高速化

Togetterのソートのスピードはびっくりするほど遅いです. 例えば,「劇的ビフォーアフター佐世保高専ラグビー部部室をリフォーム」には 1190個のツイートが含まれています. これを時間順にソートしてみたところ, 三回の平均で9.978秒(それぞれの結果は10.118秒, 9.925秒, 9.892秒)かかりました. 1000ツイート程度のソートに約10秒です.遅い!

ソート自体は数ミリ秒で終わるのになんでこんなに遅いというと,結果を画面に反映するのにjQueryのセレクタを大量に呼び出しているから. ソートのときに一回読み込んだものをキャッシュしておけばもっと速くなるはず.

ってことで自前で実装してボタンを置き換えました. 結果0.171秒(0.174, 0.177, 0.161)まで短縮することができました. 約58倍の高速化!

高速化とは直接関係ないけど, 「選択したところだけソート」にしました. ツイートを内容ごとに分類してるときとかに, 一部分だけソートできます(例:ロボコン死亡かるた). 何も選択されてないときは何もしません. 全体をソートしたい時は明示的に全選択する必要があります.

重複削除とかも実装しなおしました. 約200ミリ秒かかってたのが約20ミリ秒に高速化!

選択動作の変更

もともとの編集画面では,ツイートをクリックするとクリックしたツイートの選択状態が切り替わります. 他に選択しているツイートがある場合,そのツイートは選択されたままです. Excelとかではセルをクリックすると他のセルは非選択状態になるので, それに慣れているとなんだか違和感があるんですよね. そういうわけで,ツイートをクリックしたときはクリックしたツイートのみ選択されるようにしました. 複数選択ができないのも困るので, Ctrlキーと同時クリックでクリックしたツイートを全部選択, Shiftキーと同時クリックで範囲内のツイートを全部選択にしました. Excelとかと一緒ですね.

元に戻す機能

ツイートの削除とか,時間順ソートとか,確認もなしにいきなりされるんですよ. ツイートの削除はまた検索しなおせばいいかもしれないけど, 時間順ソートは凶悪です. 「ロボコン死亡かるた」とかせっかくあいうえお順に並べたのに 全部時間順にソートされてしまうんです.酷い!

そういうわけで,元に戻す機能をつけておきました. 間違ってツイートを削除してしまっても,間違えてソートしてしまっても,ボタンひとつで元通りです.

ショートカットキーの追加

マウスだけでの操作とか面倒なので,ショートカットキーを設定しました.

  • Ctrl+S: 下書き保存
  • Ctrl+A: ツイートの全選択
  • Ctrl+Z: 元に戻す
  • Ctrl+Y: やり直す(元に戻すを取り消す)