ブックマークレット
Wikipedia
http://ja.wikipedia.org/wiki/%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88
ブックマークレットって実は最近まで注目していなかったのですが、フォームへの半自動入力で使えないかと、知り合いに頼まれて少し調べてみました。
ブックマークレットはブラウザのURL入力欄に書ける1行のjavascriptをブックマークしたものです。たった1行ですが、javascriptなのでDOM操作や、ajax通信などもできます。DOM操作ができるということは、ボタンを表示したり、scriptタグを生成してjavascriptのライブラリを読み込んだり、linkタグを生成してスタイルシートを読み込んだりもできるわけです。
「自分が管理していないが、よく利用しているちょっと不便なサイト」で、ブラウザ上にあるコンテンツを利用していろいろなことができます。
- 入力のインターフェースを変えたり、入力のチェックを行う
「javascriptを使えばそんなのできるの当たり前じゃん」と思われますが、自分の管理しているわけでないwebサイトのカスタマイズができちゃうわけです。
サンプルとして、pukiwikiのページの編集で、編集中文書の編集前との差分をExtJSのWindowで表示するブックマークレットを作成してみました。これは標準のpukiwikiにはない機能です。
サンプルの使い方
- １．まず下記のURL?をブックマーク(IEはお気に入り)に登録します。名前はなんでもいいです。(たとえば「pukiwiki Diff」)
※このブックマークレットサンプルは、本家のPukiWikiや、派生版のPukiWikiPlus等で、使用可能です。utf-8、EUCのどちらで構築されていても動くと思います。
ブックマークレットとスクリプトの解説
見やすさのために改行とインデントを入れると以下のようになります
javascript:(
function(){
var e=document.createElement('script');
e.charset='utf-8';
e.src='http://www123.ddo.jp/tools/edit00.js';
document.body.appendChild(e);
}
)()
見た通り、これでwww123.ddo.jpからedit.jsというスクリプトを読み込んで実行しているわけです。
読み込んだedit00.jsは下記のような動作をします。
- ExtJS 3.3.1を動かすために必要なライブラリやスタイルシートを読み込む
- 'write'という名前のサブミットボタン(ページの更新)があることを確認する
- 'wirte'ボタンの左に、押されたらdo_diffを実行するような「Diff」ボタンを生成する。
- do_diffはフォーム中の'original'と'msg'という、フィールドの値を比べ結果を表示する
edit00.jsのソースは最後に添付します。まあ、http://www123.ddo.jp/tools/edit00.js をDLしソースを確認すればその通りなのですが。
セキュリティについて
- http://www123.ddo.jp/tools/edit00.js を信じない方は賢明です。サイトが誰かに乗っ取られ、悪意のあるロジックを混入される恐れはいつでもあります。edit00.jsを信頼できるサイトにコピーして使用いただいて結構です。GPL ver3としますので、適当に改変してください。便利な機能を追加したなら公開していただくとありがたいです。
- edit00.dsで、cacheflyのサイトからExtJSのライブラリを読み込んでいます。より安全に使いたければ、上記と同様に自分の制御下のサーバに入れることを検討してください。
edit00.js ソースコード
// edit.js v 00 -- pukiwikiの編集を支援
// Bookmarklet example
// javascript:(function(){var%20e=document.createElement('script');e.charset='utf-8';e.src='http://www123.ddo.jp/tools/edit00.js?';document.body.appendChild(e);})()
// Copyright(c) 2010 mashiki
// License: GPL version 3
(function(){
var cf='http://extjs.cachefly.net/ext-3.3.1/';
addEl('style', {type:'text/css',innerHTML:'td {background-color:transparent}'});
addEl('link',{rel:'stylesheet',type:'text/css',href:cf+'resources/css/ext-all.css'});
addEl('script',{src:cf+'adapter/ext/ext-base.js'});
addEl('script',{src:cf+'ext-all.js'});
function addEl(tag, cfg) {
var e=document.createElement(tag);
for (var key in cfg) e[key]=cfg[key];
document.body.appendChild(e);
}
var id=setInterval(function(){
if(window.Ext && Ext.MessageBox){
clearInterval(id);
var pv = document.getElementsByName('write');
if (pv[0]) {
pv = pv[0];
} else {
Ext.Msg.alert(
'pukiwiki編集支援機能',
'「ページの更新」ボタンが見つかりません。
'
+'この機能はpukiwikiの編集画面でご使用ください'
);
return;
}
var df = document.createElement("input");
Ext.apply(df, {type:"button",value:"Diff",onclick:diff_click});
Ext.get(df).insertBefore(pv);
}
},100);
function diff_click() {
var msg = document.getElementsByName('msg');
var org = document.getElementsByName('original');
if (msg[0] && org[0]) {
msg = msg[0].value;
org = org[0].value;
} else {
Ext.Msg.alert(
'pukiwiki編集支援機能',
'"msg"または"original" フィールドが見つかりません。
'
+'この機能はpukiwikiの編集画面でご使用ください'
);
return;
}
if (msg===org) {
Ext.Msg.alert('pukiwiki編集支援機能', '変更箇所はありません');
} else {
var res = diff(
org.replace(/^\n+|\n+$/g,'').split("\n"),
msg.replace(/^\n+|\n+$/g,'').split("\n")
);
// 結果加工
var map = {
'-':{edit:'－',style:'background-color:#FFDDDD;'},
'+':{edit:'＋',style:'background-color:#DDDDFF;'},
'=':{edit:' ',style:'background-color:#FFFFFF;'}
}
var table = ['
']; for (var i=0; d=res[i]; ++i) { table.push("
| "+map[d.edit].edit+" | " + ""
+ d.arr[d.line].replace(//g,">")
+ " |
"); } table.push('
');
var win = new Ext.Window({
title:'pukiwiki編集支援機能',
html: table.join(''),
width:400,
height:400,
autoScroll:true,
closeAction:'close',
plain: true,
buttons: [{
text: 'Close',
handler: function(){
win.close();
}
}]
});
win.show();
}
}
function diff(arr1, arr2, rev) {
var len1=arr1.length,
len2=arr2.length;
// len1 <= len2でなければひっくり返す
if (!rev && len1>len2)
return diff(arr2, arr1, true);
// 変数宣言及び配列初期化
var k, p,
offset=len1+1,
delta =len2-len1,
fp=[], ed=[];
for (p=0; p
fp[p] = -1;
ed[p] = [];
}
// メインの処理
for (p=0; fp[delta + offset] != len2; p++) {
for(k = -p ; k < delta; ++k) snake(k);
for(k = delta + p; k >= delta; --k) snake(k);
}
return ed[delta + offset];
// snake
function snake(k) {
var x, y, e0, o,
y1=fp[k-1+offset],
y2=fp[k+1+offset];
if (y1>=y2) { // 経路選択
y = y1+1;
x = y-k;
e0 = ed[k-1+offset];
o = {edit:rev?'-':'+',arr:arr2, line:y-1}
} else {
y = y2;
x = y-k;
e0 = ed[k+1+offset];
o = {edit:rev?'+':'-',arr:arr1, line:x-1}
}
// 選択した経路を保存
if (o.line>=0) ed[k+offset] = e0.concat(o);
var max = len1-x>len2-y?len1-x:len2-y;
for (var i=0; i
// 経路追加
ed[k+offset].push({edit:'=', arr:arr1, line:x+i});
}
fp[k + offset] = y+i;
}
}
})();
