DashboardやLikeのページでポストをReblogできるキーボードショートカットを追加するシンプルなUser Script、Reblogableを0.0.4へ更新。

インストール

https://raw.github.com/gist/1609210/reblogable.user.js

ソースコード

Add shortcut key T for Reblog on Tumblr Dashboard. — Gist

0.0.3とのコードの差分

更新の概要

1. Tumblr側でReblogのキーボードショートカットが追加された時に、Reblogableのキーボードショートカットと重複した場合、二重投稿になる可能性を現状より小さくするように
2. Dashboard上のReblogボタンで「Alt(MacではOption) + 左クリック」するとfast_reblogできるようになっていた(taizoooさんより。 Missing eの記事は4/20～21投稿でtaizoooさんによると4/20には情報が出ていたようだけど、staffブログではまだ発表されていない?)ので、Reblogボタンに「Alt + 左クリック」の入力イベントを送ってReblogするように変更
3. 2により、Reblogableのエラー処理を削除
4. DashboardやLikeのページの最後のページで、底の方にあるポストをReblogできるようにページ下部を広げておくスタイルの修正を削除
5. 「Shift + T」などと入力した時にReblogしてしまっていたので、入力チェックをより厳しく

補足

1の変更について。Tumblr側でReblogのキーボードショートカットが追加された時に備えて、実際にTumblrではJ、K、Lのキーボードショートカットをどのように実装しているのかを改めて調べてみた。

以下の画像は、TumblrのDashboardで読み込まれるprototype_effects_application_tumblelog.js?804という、prototype.js(1.7)とscript.aculo.us(1.9.0)のeffects.jsの2つのライブラリに加えて、application.js、tumblelog.jsを連結したJavaScriptファイルの中の、application.jsにおけるキーボードショートカットの実装部分(12/05/08追記: 圧縮されていないapplication.jsはこちら。saitamanodorujiさんより)。

DashboardでChrome 18のデベロッパーツールを開き、Scriptsタブで上にある停止ボタンを押すとapplication.jsが展開されたものが表示される(参考)。表示されない事もあるみたい。表示されたら、押した停止ボタンは再生ボタンに変わっているのでそれを押し、下にある停止ボタンの隣にある「Pretty print」ボタンを押すと、画像のようにある程度綺麗に整えられてコードが表示される。

743行目の、prototype.jsにおけるaddEventListenerであるEvent.observeは、第1引数の対象となる要素がdocumentで、第2引数のイベントタイプはkeydownとなっている。Likeと同じようにReblogのキーボードショートカットがstart_observing_key_commands内に実装されるなら(もちろんコードが全く新しいものになる可能性もあるけど)、Reblogの重複を防ぐにはここを何とかすれば良い。そこで、イベントリスナの優先順位を利用してイベントの伝播を止めれば、キーボードショートカットが重複した場合にTumblr側が無効化され(Event.observeの第3引数に指定された関数が呼び出されない)、Reblogable側のみがReblogするようにできるのではと考えた。本来ならばReblogable側を止めてTumblr側が優先されるようにするべきだと思うけど、それを実現する簡単な方法が自分にはわからなかったので、そちらの方法を採ることにした。

「イベントリスナの優先順位を利用してイベントの伝播を止める」には、この状況では幾つか選択肢があるけど、自分の場合は、Reblogableで使用しているaddEventListenerが、対象とする要素がwindow、第1引数に指定したイベントタイプがkeydownだったので、第3引数の「useCapture」を「true」にし、第2引数に指定したコールバック関数内で適当なタイミングでevent.stopPropagationを呼び出して実現する事にした。

以上のようにして、1の変更で、Reblogが重複する可能性をより低くするようにできたと思うけど、完全な対策ではないし何らかの副作用もあるかもしれないので、問題があれば教えて頂けるとありがたい。

2、3の変更により、Tumblr側がfast_reblogを利用して実装した機能を利用する形になり、Reblogableはさらにシンプルな実装になった。Tumblr側の処理は以下のようになっている(参考)。記述されているファイルはstart_observing_key_commandsと同じ。

Tumblr側の実装ではエラーハンドリングもしてくれている。Reblogableが0.0.3でやっていたように、Reblogできなかった場合はalertでエラーを知らせるようになっている。また、通信中と成功でReblogボタンが変わるようになっている。但し、自分のポストでReblogボタンを「Alt + 左クリック」するとエラーになってReblogできないという不具合がある模様。これは、自分のポストのReblogボタンの要素に「data-fast-reblog-url」属性が無い為に起こっているようだ。

4の変更は、Tumblr Lifeの実装をよく見てみたところ、Dashboardに存在している不具合が1つだけではない事がわかり(今更すぎる…)、さらに先述の「Alt + 左クリック」のfast_reblogにも問題がある事がわかったので、それら不具合を修正するだけのTumblr Dashboard bugfixというUser Scriptを別に作り、Reblogableのスタイル修正は削除する事にした。Tumblr Dashboard bugfixについては別ポストにて紹介。現在把握できている不具合を以下にまとめておく。

• JキーによりDashboardやLikeのページの最後のページで底の方にあるポストに移動できない
• Preferencesの「Enable endless scrolling」を有効にしていたり、AutoPagerizeやAutoPatchWorkを利用している時、showページで読み込まれる次のページが正しくない
• 自分のポストでReblogボタンを「Alt + 左クリック」するとエラーになってReblogできない

上記の不具合は、複数のユーザーをフォローしていて、Dashboardしか見ないというユーザーにはあまり大きな問題にならないかもしれない。とはいえ、将来的にReblogableが不要になったとしても、Dashboardの不具合は残るかもしれないので、無駄にはならないと思う。

そもそも、Dashboardの底は意識的に見ようとしなければほぼ見ることは無いんじゃないかと思うので、4の変更のデザイン修正の削除だけを見るとDashboardの利用に対して与える影響は殆ど無いはず。それでも困る場合にはTumblr Dashboard bugfixをインストールすると良いと思う。

5の変更は単純なミスの修正。こうした不具合はまだ存在してしまっているかもしれない。

0.0.1から処理工程が結構変わっているので、0.0.4における処理工程を以下にまとめておく。

1. ポストがなければ処理を終える
2. どのキーを入力したらReblogするのかを決める
3. キーボードの入力を監視
4. Tキーが入力されて、入力された場所がページ全体であるかを確認
5. 確認がとれたらJ、Kキーで選択されているポストを特定する
6. 特定したポストからReblogボタンを取得
7. 取得できたらイベントの伝播を止める
8. 次のポストを特定する
9. 次のポストがあればそのポストに移動する
10. 「Alt + 左クリック」の入力イベントを作成し、6のReblogボタンへイベントをdispatchする

既知の問題

• ポストの投稿ページで「Send to Twitter」を無効にしているにもかかわらず、ReblogしたポストのリンクがTwitterに流れてしまう
  • fast_reblogによってReblogする事が原因らしい。http://www.tumblr.com/blog/ユーザ名/settings の「Twitter」で「Share posts on your Twitter」を無効にするか、Twitter連携自体をやめると良いかもしれない。この方法による解決が適切でなければ、fast_reblogから従来方式へ戻す事も検討する。

今後の予定(Tumblr側で実装されるまで)

• event.stopPropagationを、DOM Level 3 Eventsのevent.stopImmediatePropagationに変える(Operaの対応待ち)
• 「Alt + 左クリック」イベントの発行と、次のポストへの移動をDOM4のEvent Constructorによって行うようにする(Safariの更新待ち、WebKit r112531では使用可能)(12/10/14追記: 残念ながらUser ScriptではEvent Constructorによって作成され変更を加えたイベントが要素に正しく伝播しない環境がある事がわかったので、取り止めにする事にした)

先日、DashboardやLikeのページで、これまでのJ、Kキーによるポスト間移動に加えて、LキーからLikeできるようになったので、TキーでReblogできるだけのシンプルなUser Scriptをつくってみた。いずれは公式でも実装されるかもしれないので、それまでの繋ぎになれば。

インストールはこちら。

https://raw.github.com/gist/1609210/reblogable.user.js

ソースコードはこちら。

Add shortcut key T for Reblog on Tumblr Dashboard. — Gist

RキーやHキーでReblogしたいという人はコードを参考に書き換えると良いかも。コードはメタデータをあわせても90行に満たないほど小さいので、似たようなUser Scriptを自作したい人の参考になると良い。

動作確認はWindows 7 Home Premium SP1 64bit上のFirefox 9.0.1(Scriptish 0.1.6)、Chrome 16.0.912.75、Safari 5.1.2(NinjaKit 0.8.5)、Opera 11.60で行った。不具合があれば@syoichiまで。

Tumblr LifeやCursedTumblrなどの多機能なUser Scriptはいくつかあるみたいだけど、Reblogできるだけの単機能なUser ScriptはReblogCommandやTumblr Dashboard Quick ReblogのようにMinibufferに依存するものぐらいしか見当たらなかったのと、DashboardやLikeのページでReblogするにはどのような処理をすれば良いのかを知りたかったというのもつくってみた理由。

J、K、T、Lがあれば良いという人なら、Preferencesの「Enable endless scrolling」を有効にしていれば、Reblogableをインストールするだけで高速にReblog/Likeできる環境を構築できると思う。

Reblogableの主な処理工程は以下。

1. 初めにどのキーを入力したらReblogするのかを決める
2. Reblogに必要なデータを予め取得
3. DashboardやLikeのページの最後のページで底の方にあるポストをReblogできるようにページ下部を広げておく
4. 準備ができたらキーボードの入力を監視
5. Tキーが入力されたら J、Kキーで選択されているポストを特定する
6. 特定したポストからReblogのページのリンクを取得
7. リンクがあれば次のポストを特定する
8. 次のポストがあればそのポストに移動する
9. ここから、6で取得したリンクからURLを取り出し、Reblogする為の通信を開始する
10. Reblogのページにおける入力フォームのデータを送信するやり方を再現して、9で取り出したURLに向けて、2で取得したReblogに必要なデータを送信する

上記の処理に関して幾つか補足を。

ReblogのページからReblogした時、以下のデータが送信されているみたい。

この内、Reblogするのに最低限送信しなければいけないデータが、ポスト(この場合ではReblogしたポスト)を公開するか下書きにするかなどの状態を示す「post[state]」と「form_key」らしい。

Reblogableでは「post[state]」と「form_key」に加えて「redirect_to」も送信している。これはReblogした後に、リダイレクトによりDashboardのページを取得してしまうのを防ぐ為。

防いでおかないとReblogする度に不必要な通信が発生してしまう(ChromeではXMLHttpRequest.responseTextに取得してしまったDashboardのページのソースが入っていた)。リダイレクトを無効にする事はできないみたいだったので、代わりに空のテキストを示す「data:text/plain,」というData URIを指定してみた。

エラーが発生している(XMLHttpRequestProgressEvent.typeがerror)ので良くないやり方ではあるが、これで少なくとも不必要な通信の発生は回避できた。

ちなみに、Preferencesの「Edit posts using」で「rich text editor」を選択している時、空のTextポストなどを作れてしまうのだけど、このポストをReblogするにはさらに「is_rich_text[two]=1」というデータも必要になるようだった。しかし、「Edit posts using」でその他のエディターを選択していて、空のTextポストなどをReblogしようとすると「Post cannot be empty.」と表示される。なので、ここはTumblrの挙動に合わせて、「is_rich_text[two]=1」を送信せず、空のTextポストなどはReblogしないようにしてある。

また、10の後にちゃんとReblogされたか確認する処理をしていないのは、できる限りTumblr側と通信する回数を減らす為とLikeの挙動に合わせた為。LikeはLikeできていない時も赤くなったままなので、Likeが成功したかどうかはその時点でのDashboardではわからなくなっている。

逆に、8ではLikeの挙動とは異なる処理をしている。Reblogした後にすぐ次のポストに移動するのは、Tumblr LifeやCursedTumblrなどの挙動とも異なるので良くないかもしれないが、これはTキーを押した事をわかるようにし、また、Reblogした後にすぐ次のポストもReblogできるようにしてみたかったから。これだと、良いポストが連続で来た時に「TTT」とJキーを押さずに連打できる。

5の部分は、かなりおおまかな当たりを付けてポストを特定しているので、User ScriptやUser CSSでDashboardのデザインを改変していたりすると、ここで何らかの不具合が発生するかもしれない。デザインの改変をせずにJ、Kキーで移動していればたぶん問題ないと思う…。

更新

• 0.0.5
• 0.0.4
• 0.0.3
• 0.0.2