戻りやすくする:jetback
長いドキュメントを読み終わったあと、マウスカーソルはどこにあるだろうか。スクロールバーを多用する人にとってはスクロールバーの近くに、マウスホイールでスクロールをする人にとってはドキュメントのどこかにマウスカーソルはありそうである。ところで、”戻る”ボタンはブラウザのどこにあるだろうか。およそブラウザの左上に頑なに鎮座していると思われる。遠い。ならば、もっとカーソルの近いところにこの機能を持ってきてはどうだろうか。
てっとりばやく、ドキュメントの一番下にこの機能を追加してみる。
実装の目次
- ドキュメント読み込み完了のイベントを取る。
- history があるか検査する。
- ボタンを追加する。
- 右側へ。
- 色気を出す。
ドキュメント読み込み完了のイベントを取る。
ここはいつもと同じです。(説明はこちらをご参照くださいませ)
jetpack.tabs.onReady(function(targetDocument) {
if (targetDocument.defaultView.frameElement) {
return;
}
});
history があるか検査する。
“戻る”ボタンですので、閲覧履歴がないと意味がありません。そこで閲覧履歴の有無を検査します。具体的には window.history を検査しますが、window と書くだけでは Jetpack の名前空間内の window になってしまいます。読み込んだドキュメントの window を見るためには引数 targetDocument の defaultView にアクセスする必要があります。
jetpack.tabs.onReady(function(targetDocument) {
var contentWindow = targetDocument.defaultView;
if (contentWindow.frameElement) {
return;
}
//履歴があるかどうか検査する
if (! contentWindow.history.previous) {
return;//無いようだ。
}
});
ボタンを追加する。
ボタンとなる div 要素をドキュメントの一番最後に追加します。また、クリックイベントを取得して、一つ前のページへ戻します。
jetpack.tabs.onReady(function(targetDocument) {
var contentWindow = targetDocument.defaultView;
if (contentWindow.frameElement) {
return;
}
//履歴があるかどうか検査する
if (! contentWindow.history.previous) {
return;//無いようだ。
}
//ボタン要素
var back = targetDocument.createElement("div");
back.textContent = "戻る";
//戻る機能を付ける。jQueryオブジェクトにしています
var jback = jQuery(back);
jback.click(function() {
contentWindow.history.back();
});
//ドキュメントに追加
targetDocument.body.appendChild(back);
});
右側へ。
左側にボタンがあると、スクロールバーから遠いので、右側にもってくる。
jetpack.tabs.onReady(function(targetDocument) {
var contentWindow = targetDocument.defaultView;
if (contentWindow.frameElement) {
return;
}
//履歴があるかどうか検査する
if (! contentWindow.history.previous) {
return;//無いようだ。
}
//ボタンの下のdivを用意して、右側に寄せる。
var backdiv = targetDocument.createElement("div");
//ボタン要素
var back = targetDocument.createElement("div");
back.textContent = "戻る";
//右側に配置。あとで微調整ができるように absolute にしてある
back.setAttribute("style", "position:absolute; right: 10px;");
//div にボタンを追加
backdiv.appendChild(back);
//戻る機能を付ける。jQueryオブジェクトにしています
var jback = jQuery(back);
jback.click(function() {
contentWindow.history.back();
});
//ドキュメントに追加
targetDocument.body.appendChild(backdiv);
});
色気を出す。
あまりにもさっぱりしているのでイメージを利用してちゃんとボタンっぽくしてみます。現状(ver 0.6)の Jetpack では外部ファイルを同一パッケージにすることができません。イメージも同様です。そこで、イメージを Base64 でエンコードして javascript ファイルに組み込みます。
利用イメージ:
jetpack.tabs.onReady(function(targetDocument) {
var contentWindow = targetDocument.defaultView;
if (contentWindow.frameElement) {
return;
}
//履歴があるかどうか検査する
if (! contentWindow.history.previous) {
return;//無いようだ。
}
//ボタンの下のdivを用意して、右側に寄せる。
var backdiv = targetDocument.createElement("div");
//ボタン要素
var back = targetDocument.createElement("div");
//イメージを付ける
//右側に配置。あとで微調整ができるように absolute にしてある
back.setAttribute("style", "background: url('data:image/png;base64,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'); width: 128px; height: 128px; position:absolute; right: 10px;"); //div にボタンを追加
backdiv.appendChild(back);
//戻る機能を付ける。jQueryオブジェクトにしています
var jback = jQuery(back);
jback.click(function() {
contentWindow.history.back();
});
//ボタンを押したときのイメージへ
jback.mousedown(function() {
jback.css({"background-position":"right"});
});
//もとのイメージへ
jback.mouseup(function() {
jback.css({"background-position":"left"});
});
//ドキュメントに追加
targetDocument.body.appendChild(backdiv);
});
これで完成です。ドキュメントを読み終えると戻るボタンが目に入るようになり、サイズもかなり大きくしてあるのでかなり戻りやすくなっていると思います。ただし、このボタンは常にこれを押さなければならないというものではなく、マウスの位置に応じ、ブラウザの戻るボタンを使うなど、選択しながら利用すればよいのかと思います。
最後に
このソースコードおよび install html を固めてこちらにおきます。このコードではさらに、履歴の一番始めまで戻る機能もあわせて実装してみました。