読者です 読者をやめる 読者になる 読者になる

凹みTips

C++、JavaScript、Unity、ガジェット等の Tips について雑多に書いています。

ニコニコ動画でキーボードショートカットを使えるようにするgreasemonkeyスクリプト

JavaScript

最新版

最新版はこちら:d:id:hecomi:20110327

はじめに

過度な期待はしないでください。
ニコニコ動画にてキーボードショートカットを可能にするグリモンスクリプトです.機能は以下になります.

ランキング画面:

  • j: 次の動画へフォーカス
  • k: 前の動画へフォーカス
  • a: 先頭の動画へフォーカス
  • o: リンクを新しいタブで開く
  • w: 検索バーへフォーカスを移す

動画視聴画面:

  • s: 動画位置までスクロール

インストール: http://userscripts.org/scripts/show/82616

仕組み

動画のリンクのaタグは全て「.watch」クラスとなっていることを利用しています.これをjQueryで取得してフォーカスしていくだけです.

併せてどうぞ

自動ログインスクリプトです.職場 / 自宅でニコ動を見ると一方がログアウトしてしまうのが面倒くさかったので書きました.中身は,目的のフォームでsubmitするだけです.

インストール: http://userscripts.org/scripts/show/78324
仕様変更により動作しないです.

ソースコード

最新版はhttp://userscripts.org/scripts/show/78324から御覧ください。

// ==UserScript==
// @name           Nico2 Keyboard Shortcut
// @version        v0.1 (2010/07/30)
// @namespace      http://d.hatena.ne.jp/hecomi/
// @description    ニコニコ動画でキーボードショートカットを使えるようにします.
// @require        http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js
// @include        http://www.nicovideo.jp/*
// ==/UserScript==

(function(){
var i = -1;
var d;
var isInput = false;
document.addEventListener('keydown',
	function(event) {
		if (isInput) return;
		switch (event.keyCode) {
			case 83:	// 's' key
				$(".__nicopedia_loaded")[0].name = "scroll_to";
				location.href = location.href + "#scroll_to";
				isInput = true;
				break;
				
			case 79:	// 'o' key
				if (i >= 0) {
					var url = $("a.watch")[i].href;
					window.open(url, "_balnk");
				}
				break;
				
			case 65:	// 'a' key
				// 前の要素は色を戻す
				if ($("a.watch")[i]) {
					$("a.watch")[i].style.background	= "";
					$("a.watch")[i].style.color			= "";
				}
				i = -1;
				d = 1;
				// このままbreakしないで下へ
				
			case 74: case 75:	// 'j' or 'k' key
				// 進む / 戻る
				if (event.keyCode == 74) d = 1;		// j: 進む
				if (event.keyCode == 75) d = -1;	// k: 戻る
				
				// 次の選択箇所
				i += d;
				
				if ($("a.watch")[i]) {
					// 選択したaタグの色を反転
					$("a.watch")[i].style.background	= "#555";
					$("a.watch")[i].style.color			= "#fff";
					
					// フォーカス
					if ($("a.watch")[i+d]) {
						$("a.watch")[i+d].focus();
					}
					$("a.watch")[i].focus();
					if (i == 0) { // 一番上の場合
						window.scroll(0,0);
					}
					
					// 前の要素は色を戻す
					if ($("a.watch")[i-d]) {
						$("a.watch")[i-d].style.background	= "";
						$("a.watch")[i-d].style.color		= "";
					}
				} else {	// 次がない場合
					i -= d;
				}
				break;
		}
	},
	false);

// 検索
document.addEventListener('keyup',
	function(event) {
		if (isInput) return;
		if (event.keyCode == 87 && !event.ctrlKey) {	// 'w' key
			isInput = true;
			$("#bar_search").focus();
		}
	}, false);
})();