長文をマルチカラム化して読む汎用的な方法 その２
DOM Rangeを使う北村さんの方法（全文または選択範囲をマルチカラム化(Firefox用) — Gist）を使って、自分なりにユーザビリティを追求してみた。
まず、ポインティングデバイスで選択範囲を作成する（ことが多い）のだから、操作はポインティングデバイスで完結するのがベストだ。しかもそれは作成した選択範囲を扱っていると認知されるような適切な操作でなければならない。思い浮かぶのは次の二つ：
どちらも大差はないだろうが、所謂ブックマークバーなどからスクリプトレットを選択するような操作は、選択範囲の喪失という誤操作を招きやすく、緊張感を伴うので駄目だが、何らかの事情を考慮し選択肢として用意しておくことは重要だ。
マウスジェスチャーに登録
個人的にはすでに拡張機能をインストールしてあるのでマウスジェスチャーが実装しやすい。大抵のマウスジェスチャー拡張には、カスタムジェスチャーという項目があり、ここにスクリプトレットを登録して具体的なジェスチャーに紐づけするだけだ。特に説明は必要ない。
俺はとりあえずマルチカラムの「Ｍ」の文字をジェスチャとして紐づけてみた。覚えられれば何でもいい。
コードを改変
①webkitに対応させ、②著者スタイルを尊重し、③document.open / window.openで作成した場合にマウスジェスチャが効かなくなるなどの問題を回避したのが次のコード。
(function(){
var COLUMN_WIDTH = "25em";
var PREFIX = "webkit"; // or "Moz" where Mozilla
var sel = window.getSelection(),
body;
if (!sel.isCollapsed){
body = document.createElement("body");
body.appendChild(sel.getRangeAt(0).cloneContents());
document.documentElement.replaceChild(body, document.body);
} else
body = document.body;
body.style[PREFIX + 'ColumnWidth'] = COLUMN_WIDTH;
})()
var HEADER = '\
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">\
<title>マルチカラム化された【' + document.title + '】</title>\
<script type="text/javascript"></script>\
<style type="text/css">\
body{-moz-column-width: 25em; -webkit-column-width: 25em;}\
</style>\
';
var sel = window.getSelection(),
srz = new XMLSerializer(),
body;
if (sel.isCollapsed)
body = document.body;
else {
body = document.createElement(body);
body.appendChild(sel.getRangeAt(0).cloneContents());
}
location.assign(dataURI(HEADER+srz.serializeToString(body)));
function dataURI(str){
return "data:text/html;charset=utf-8;base64," + base64encode(str);
}
function utf16to8(str) {
var i, len, c;
var cc = String.fromCharCode;
var buf = [];
len = str.length;
for(i = 0; i < len; i++){
c = str.charCodeAt(i);
((c >= 0x0001) && (c <= 0x007F)) ?
buf.push(str.charAt(i)) :
(c > 0x07FF) ?
buf.push(
cc(0xE0 | ((c >> 12) & 0x0F)),
cc(0x80 | ((c >> 6) & 0x3F)),
cc(0x80 | ((c >> 0) & 0x3F))
)
:
buf.push(
cc(0xC0 | ((c >> 6) & 0x1F)),
cc(0x80 | ((c >> 0) & 0x3F))
)
}
return buf.join("");
}
function base64encode(str) {
var i, len;
var c1, c2, c3;
var Chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split("");
var buf = [];
str = utf16to8(str);
len = str.length;
i = 0;
while(i < len) {
c1 = str.charCodeAt(i++) & 0xff;
if(i == len){
buf.push(
Chars[(c1 >> 2)],
Chars[(c1 & 0x3) << 4],
"=="
)
break;
}
c2 = str.charCodeAt(i++);
if(i == len){
buf.push(
Chars[(c1 >> 2)],
Chars[((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4)],
Chars[(c2 & 0xF) << 2],
"="
)
break;
}
c3 = str.charCodeAt(i++);
buf.push(
Chars[(c1 >> 2)],
Chars[((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4)],
Chars[((c2 & 0xF) << 2) | ((c3 & 0xC0) >>6)],
Chars[(c3 & 0x3F)]
)
}
return buf.join("")
}
