はてなブックマークのhotentryをUserScriptでキー拡張する

はてなブックマークのhotentryをユーザスタイルシートで見やすくする 2に続き、Google ChromeのUserScript機能でj/kキーでの項目移動と、oキーでのバックグラウンドオープンに対応させてみました。

はてなブックマーク ホットエントリー UserScript適用後 はてなブックマーク ホットエントリー UserScript適用後

ホットエントリー用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;
}

おわりに

スクロール追随には対応していません。

関連記事

追記@2013/01/24

はてなブックマーク側の下記アップデートにより、上記スクリプトは正しく動作しなくなっています。

blog comments powered by Disqus