はてなブックマークのhotentryをUserScriptでキー拡張する
はてなブックマークのhotentryをユーザスタイルシートで見やすくする 2に続き、Google ChromeのUserScript機能でj/kキーでの項目移動と、oキーでのバックグラウンドオープンに対応させてみました。
ホットエントリー用UserScript
// ==UserScript==
// @name はてなブックマーク ホットエントリー キー拡張
// @namespace http://n.blueblack.net/
// @include http://b.hatena.ne.jp/hotentry*
// @include http://b.hatena.ne.jp/video*
// @description j/kキーで項目移動。oキーでリンクをバックグラウンドで開く。
// ==/UserScript==
//How can I use jQuery in Greasemonkey scripts in Google Chrome? - Stack Overflow
//http://stackoverflow.com/questions/2246901/how-can-i-use-jquery-in-greasemonkey-scripts-in-google-chrome
function addJQuery(callback) {
var script = document.createElement("script");
script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js");
script.addEventListener('load', function() {
var script = document.createElement("script");
script.textContent = "window.jQ=jQuery.noConflict(true);(" + callback.toString() + ")();";
document.body.appendChild(script);
}, false);
document.body.appendChild(script);
}
function main() {
jQ.keys = {
DOWN : 'j',
UP : 'k',
OPEN : 'o',
}
jQ(document).keypress(function(event) {
if (jQ(event.target).is(':input'))
return;
switch(event.which) {
case jQ.keys.DOWN.charCodeAt():
var target = jQ('li.entry-unit.sc_current').nextAll(':not(li.ad-unit):first').length ? jQ('li.entry-unit.sc_current').nextAll(':not(li.ad-unit):first') : jQ('li.entry-unit:first');
if (target && !(jQ('li.entry-unit.sc_current').get(0) == jQ('li.entry-unit:last').get(0))) {
if (jQ('li.entry-unit.sc_current').length) {
jQ('li.entry-unit.sc_current').removeClass('sc_current');
}
target.addClass('sc_current');
var targetOffset = (parseInt(target.offset().top) - 44) + "px";
jQ('html,body').animate({scrollTop: targetOffset},"fast","swing");
return false;
}
break;
case jQ.keys.UP.charCodeAt():
var target = jQ('li.entry-unit.sc_current').prev().length ? jQ('li.entry-unit.sc_current').prev() : null;
if (target && target.hasClass('ad-unit')) {
target = target.prev();
}
if (target && !(jQ('li.entry-unit.sc_current').get(0) == jQ('li.entry-unit:first').get(0))) {
if (jQ('li.entry-unit.sc_current').length) {
jQ('li.entry-unit.sc_current').removeClass('sc_current');
}
target.addClass('sc_current');
var targetOffset = (parseInt(target.offset().top) - 44) + "px";
jQ('html,body').animate({scrollTop: targetOffset},"fast","swing");
return false;
}
break;
case jQ.keys.OPEN.charCodeAt():
if (jQ('li.entry-unit.sc_current h3 a').attr('href')) {
//Google Reader 任意の記事をバックグラウンドで新しいタブで開く in Google Chrome - ちぇ・ゲバ男のメモ
//http://d.hatena.ne.jp/revolutionary/20121110/p1
var a = document.createElement("a");
a.href = jQ('li.entry-unit.sc_current h3 a').attr('href');
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,true, false, false, false, 0, null);
a.dispatchEvent(evt);
}
break;
}
});
}
addJQuery(main);
UserScriptの設定方法
Google Chromeには標準でGreasemonkey相当のUserScript機能があります。
- 前述のスクリプトを「hotentry_key_mod.user.js」などの名前で保存(UTF-8)
- Chromeウィンドウ右上の設定ボタン→「ツール」→「拡張機能」を開く
- 拡張機能ウィンドウ内にファイルをドラッグ＆ドラップ
以上で反映されます。
ユーザスタイルシートは、はてなブックマークのhotentryをユーザスタイルシートで見やすくする 2に以下を追加して使用して下さい。
li.entry-unit.sc_current {
background: #FFFFE0 !important;
}
おわりに
スクロール追随には対応していません。
関連記事
- はてなブックマークのhotentryをユーザスタイルシートで見やすくする
- はてなブックマークのhotentryをユーザスタイルシートで見やすくする 2
- はてなブックマークのhotentryをUserScriptでキー拡張する
追記＠2013/01/24
はてなブックマーク側の下記アップデートにより、上記スクリプトは正しく動作しなくなっています。
