Mediawikiの日本語の修正箇所をわかりやすくするbookmarklet

これは何？

Mediawikiの履歴の差分表示は、日本語の場合、単語の区切りがないために、修正箇所がよくわからなくなることがあります。例えば、この差分表示でどこが修正されたかわかるでしょうか。

http://completewaveguide.com/index.php?title=もっと深く_Wave_を使う&diff=2165&oldid=2088

そこで、このページに対してbookmarkletを実行すると、次のようになります。

使い方


下記のリンクをブックマークに登録し、Mediawikiの履歴の差分表示のページでブックマークを選択します。


注意

あまりテストしていません。

コード

javascript:(function(){function%20load(url){var%20e=document.createElement("script");e.src=url;e.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(e);}load("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js");load("http://google-diff-match-patch.googlecode.com/svn/trunk/javascript/diff_match_patch.js");setTimeout(function(){var%20dmp=new%20diff_match_patch();$("table.diff%20tr").each(function(){var%20da=$(this).find(".diff-deletedline,%20.diff-addedline");if(da.length==2){var%20t1=$(da.get(0)).text();var%20t2=$(da.get(1)).text();var%20d=dmp.diff_main(t1,t2);var%20html=dmp.diff_prettyHtml(d);$(this).after("<tr><td></td><td%20colspan=3>"+html+"</td></tr>");}});},2000);})();
整形するとこんな感じです。 
function load(url)
{
   var e = document.createElement("script");
   e.src = url;
   e.type="text/javascript";
   document.getElementsByTagName("head")[0].appendChild(e); 
}
load("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js");
load("http://google-diff-match-patch.googlecode.com/svn/trunk/javascript/diff_match_patch.js");
setTimeout(function() {
  var dmp = new diff_match_patch();
  $("table.diff tr").each(function() {
    var da = $(this).find(".diff-deletedline, .diff-addedline");
    if (da.length == 2) {
      var t1 = $(da.get(0)).text();
      var t2 = $(da.get(1)).text();
      var d = dmp.diff_main(t1, t2);
      var html = dmp.diff_prettyHtml(d);
      $(this).after("<tr><td></td><td colspan=3>"+html+"</td></tr>");
    }
  });
},2000);
解説
  • load関数はDOMを使って、script要素を追加することにより、JavaScriptのライブラリを動的に（ページ表示後に）読み込むための関数
  • jQueryとgoogle-diff-match-patchのライブラリを読み込む
  • ロードするのに時間がかかることがあるので、setTimeoutで2秒待っている。（本当は何らかの方法でロード完了を確認した方がいい）
  • <table class="diff">の<tr>に対して、<td class="diff-deletedline">または<td class="diff-addedline">が２つあったら、２つのテキストのdiffを計算し、その結果をhtmlに直して、その<tr>の次（after）に<tr><td></td><td colspan=3>"+html+"</td></tr>として挿入する。

フォーマットされたコードを1行のbookmarkletにするのに、下記のページを利用しました。

http://ted.mielczarek.org/code/mozilla/bookmarklet.html

email: tatsuya.aoyagi@google.com
twitter: tatsuya_aoyagi