ニコニコサムネイルをちょっぴり更新しました。
ニコニコサムネイル
今までの記事
Ver. 1.0.0 : 拡張機能:ニコニコサムネイル
Ver. 1.1.0 : ニコニコサムネイル更新(前編)
Ver. 1.2.0, 1.2.1 : ニコニコサムネイル更新(後編)
Ver. 1.2.2
今回の更新は
・ ユーザーページヘのリンクに対応
のみです。
ついでにちょっぴりコードの整形とかしました。
ニコニコサムネイル
今までの記事
Ver. 1.0.0 : 拡張機能:ニコニコサムネイル
Ver. 1.1.0 : ニコニコサムネイル更新(前編)
Ver. 1.2.0, 1.2.1 : ニコニコサムネイル更新(後編)
Ver. 1.2.2
今回の更新は
・ ユーザーページヘのリンクに対応
のみです。
ついでにちょっぴりコードの整形とかしました。
nico_thumbnail.js
サムネイル用のHTMLを jQuery で作ったりしました。
ユーザーページリンクへの対応は、オプション・URLの配列に値を追加して分岐を増やすだけです。
background.js の初期化でも配列に値を追加します。
options.js は変更なしです。
options.html は、設定用のチェックボックスを追加します。
ついでに html5 っぽくしました。
style.css
CSS で書けば上書きできるようです。
list-style:none にしておけば変なマークとかは出ません。
以上、今回の更新おわり。
公式動画の 「so数字」 でも動作するようにしたいんですが、
公式動画の URL は実際には 「watch/数字」 の形式(数字の部分は別の数字)になっており、
「so数字」 ではサムネイルが取得出来ません。
「watch/数字」 と 「so数字」 との対応が分からないので、このリンクで動作することができない状況です。
この対応を取得できる方法が分かる方は教えて下さい。
$(function () {
// URLの文字列定義
var thumbnailUrl = [];
thumbnailUrl["watch"] = 'http://ext.nicovideo.jp/thumb/';
thumbnailUrl["mylist"] = 'http://ext.nicovideo.jp/thumb_';
thumbnailUrl["user"] = 'http://ext.nicovideo.jp/thumb_';
thumbnailUrl["community"] = 'http://ext.nicovideo.jp/thumb_community/';
thumbnailUrl["seiga"] = 'http://ext.seiga.nicovideo.jp/thumb/';
var thumbnail;
var thumbnailBase =
$(document.createElement("iframe")).attr({
width: 312,
height: 176,
scrolling: "no",
frameborder: 0
});
var isValid = [];
var isShowed = false;
var connection = chrome.extension.connect();
connection.onMessage.addListener(function (info) {
isValid["watch"] = info.watch;
isValid["mylist"] = info.mylist;
isValid["user"] = info.user;
isValid["community"] = info.community;
isValid["seiga"] = info.seiga;
isValid["click"] = info.removeClick;
});
connection.postMessage();
// マウスオーバー時サムネイル作成
$(document).on("mouseover", "a", function (e) {
createThumbnail(e.target, e.pageX + 5, e.pageY + 5);
});
// マウスアウト時サムネイル消去(設定による)
$(document).on("mouseout", "a", function (e) {
if (!isValid["click"]) {
removeThumbnail();
}
});
// マウスダウン時サムネイル消去(設定による)
$(document).mousedown(function (e) {
if (isValid["click"]) {
removeThumbnail();
}
});
// サムネイル消去
function removeThumbnail() {
if (isShowed) {
$(thumbnail).css("display", "none");
isShowed = false;
}
}
// サムネイルの作成
function createThumbnail(link, x, y) {
// リンクの文字列からURLを作成
var kind;
var id = link.innerText;
var matchResult;
if (id == null) return;
if (isValid["watch"] && (matchResult = id.match(/([sn]m[0-9]+)/))) {
kind = "watch";
id = matchResult[1];
}
else if (isValid["watch"] && (matchResult = id.match(/^watch\/([0-9]+)$/))) {
kind = "watch";
id = matchResult[1];
}
else if (isValid["mylist"] && id.match(/^mylist\/[0-9]+$/)) {
kind = "mylist";
}
else if (isValid["user"] && id.match(/^user\/[0-9]+$/)) {
kind = "user";
}
else if (isValid["community"] && id.match(/^co[0-9]+$/)) {
kind = "community";
}
else if (isValid["seiga"] && id.match(/^im[0-9]+$/)) {
kind = "seiga";
}
else {
return;
}
removeThumbnail();
// サムネイルのスタイル設定
thumbnail = $(thumbnailBase).clone();
$(thumbnail).attr("src", thumbnailUrl[kind] + id)
.css({
position: "absolute",
zIndex: 2147483647,
left: x + "px",
top: y + "px"
})
.appendTo(document.body);
isShowed = true;
}
});URLの変数を配列にしたり。オプションをまとめて配列にしたり、サムネイル用のHTMLを jQuery で作ったりしました。
ユーザーページリンクへの対応は、オプション・URLの配列に値を追加して分岐を増やすだけです。
background.js の初期化でも配列に値を追加します。
options.js は変更なしです。
options.html は、設定用のチェックボックスを追加します。
ついでに html5 っぽくしました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ニコニコサムネイル オプション</title>
<link rel="stylesheet" href="/style.css" type="text/css" />
<script type="text/javascript" src="/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/options.js"></script>
</head>
<body>
<ul>
<li><strong>動作するリンクの選択</strong></li>
<li><input type="checkbox" id="watch" />動画 (sm0000 or nm0000 or watch/0000)</li>
<li><input type="checkbox" id="mylist" />マイリスト (mylist/0000)</li>
<li><input type="checkbox" id="user" />ユーザー (user/0000)</li>
<li><input type="checkbox" id="community" />コミュニティ (co0000)</li>
<li><input type="checkbox" id="seiga" />静画 (im0000)</li>
</ul>
<ul>
<li><strong>動作設定</strong></li>
<li><input type="checkbox" id="removeClick" />他のサムネイルを表示するかマウスクリックするまでサムネイルを表示し続ける</li>
</ul>
<p>
<button id="save">保存</button>
</p>
<p id="status">
</p>
</body>
</html>li がそのままだと箇条書のマークを表示していたのでスタイルを変えるため CSS を書いています。style.css
@charset "utf-8";
body {
margin:0;
padding:1em 0 0 1em;
}
ul {
margin:0;
padding:0 0 1em 0;
}
li {
margin:0;
padding:0.1em;
list-style:none;
}Chrome 側(多分)ですでに宣言されている要素がいくつかあるみたいですが、CSS で書けば上書きできるようです。
list-style:none にしておけば変なマークとかは出ません。
以上、今回の更新おわり。
公式動画の 「so数字」 でも動作するようにしたいんですが、
公式動画の URL は実際には 「watch/数字」 の形式(数字の部分は別の数字)になっており、
「so数字」 ではサムネイルが取得出来ません。
「watch/数字」 と 「so数字」 との対応が分からないので、このリンクで動作することができない状況です。
この対応を取得できる方法が分かる方は教えて下さい。