はてブのページでキーボードショートカットを使う

口あけてインターネット流しこむにはキーボードショートカットが大事だと思ったので、とりあえずはてなブックマークで使えるように適当なJavascriptを書いて動かしてみた。自分で書いたUserScriptみたいなやつをどう動かせば良いのか分からなかったので、とりあえずjsshellというChrome拡張を使って、特定のパターンに一致するURLで任意のJSコードを実行するようにしてる(jsshellだとアイコン押して js.custom.edit('hatena-bookmark') とか入力して実行するとそういう画面が出る)。
コードは結構頑張らないといけないと思ってたけど、書いてみたらそうでも無かった。リンクをバックグラウンドのタブで開くのどうするんだろうと思ってたけど、適当なa要素を中ボタンクリックしたことにしたら上手く動いてちょっと幸せになった。似たようなコードをニコニコ動画のランキングとかにも適用して使ってる。増えてきたらルールを決めてキーボードショートカット集みたいなの作りたい。新しいサイト行ったらネットの先の誰かが既にキーボードショートカットを書いてくれてて、有効化したら幸せになれるみたいな仕組みになると便利そう。

こんな感じで動く。最初にjsshell開いて設定して、そのあと適当にj/k/a/vで操作してる。

(function(){ var keyMap = { 'a': 65, // 先頭へ 'j': 74, // 下へ 'k': 75, // 上へ 'v': 86, // バックグラウンドの新しいタブでリンクを開く }; var margin = 400; var i = -1; var getItem = function(i) { return $('.entry-title .entry-link').eq(i) }; var moveTo = function(i) { getItem(i).focus(); $('html,body').scrollTop(getItem(i).offset().top - margin); }; var openLinkInBackground = function(url) { var clickEvent = document.createEvent('MouseEvents'); clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 0, false, false, false, false, 1, null); var a = document.createElement('a'); a.href = url; a.dispatchEvent(clickEvent); return false; }; document.addEventListener( 'keydown', function(event) { if (event.ctrlKey) return; switch (event.keyCode) { case keyMap['a']: i = 0; moveTo(i); break; case keyMap['j']: if (getItem(i+1).size()) moveTo(++i); break; case keyMap['k']: if (getItem(i-1).size()) moveTo(--i); break; case keyMap['v']: if (i \>= 0) openLinkInBackground(getItem(i).attr('href')); break; } }, false ); })();