ニコニコ漫画
by
asannou
2013-09-03 [2013/09/03 18:45:41]
Flash Player がない環境でニコニコ漫画を見る
@@ -1,23 +1,85 @@
/*
* @title ニコニコ漫画
* @description Flash Player がない環境でニコニコ漫画を見る
- * @include http://seiga.nicovideo.jp/watch/*
+ * @include http://seiga.nicovideo.jp/watch/mg*
* @license MIT License
*/
jQuery(function($){
-var id = location.href.match(/http:\/\/seiga\.nicovideo\.jp\/watch\/mg([0-9]+)/);
-var url = [];
-var bgm = [];
-var i = 0;
+var id = location.href.match(/http:\/\/seiga\.nicovideo\.jp\/watch\/mg([0-9]+)/)[1];
+var images = [{}];
+var i = Number(location.hash.substring(1) || 1);
+
+var audios = {};
+var bgm;
+var se;
+
var img = $("<img></img>").css({ border: "solid 1px #000", width: "670px", height: "380px" });
var div = $("<div></div>").css({ border: "solid 1px #000", position: "absolute", "z-index": "100", "background-color": "#000", opacity: "0.5" }).appendTo("body");
-var audio = $("<audio></audio>").appendTo("body");
+
+var find_image = function () {
+ var url = $(this).find("source_url").text();
+ var bgm_id = $(this).find("bgm_id").text();
+ if (bgm_id == -1) {
+ bgm_id = undefined;
+ } else {
+ if (bgm_id) {
+ if (!audios[bgm_id]) {
+ var bgm_path = $(this).find("bgm_path").text();
+ var audio = new Audio("http://lohas.nicoseiga.jp" + bgm_path);
+ audio.load();
+ if ($(this).find("bgm_loop").text() == 1) {
+ audio.addEventListener("ended", function () {
+ this.currentTime = 0;
+ this.play();
+ }, false);
+ }
+ audio.volume = 0.2;
+ audios[bgm_id] = audio;
+ }
+ } else {
+ bgm_id = images[images.length - 1]["bgm_id"];
+ }
+ }
+ var se_id = $(this).find("se_id").text();
+ if (se_id) {
+ if (!audios[se_id]) {
+ var se_path = $(this).find("se_path").text();
+ var audio = new Audio("http://lohas.nicoseiga.jp" + se_path);
+ audio.load();
+ audio.volume = 0.2;
+ audios[se_id] = audio;
+ }
+ } else {
+ se_id = undefined;
+ }
+ images.push({ url: url, bgm_id: bgm_id, se_id: se_id });
+};
+
+var play = function (bgm_id) {
+ if (bgm != audios[bgm_id]) {
+ if (bgm) bgm.pause();
+ bgm = audios[bgm_id];
+ if (bgm) {
+ bgm.currentTime = 0;
+ bgm.play();
+ }
+ }
+};
+
+var effect = function (se_id) {
+ if (se) se.pause();
+ se = audios[se_id];
+ if (se) {
+ se.currentTime = 0;
+ se.play();
+ }
+};
var next = function () {
$.get(
- '/api/theme/next?id=' + id[1],
+ "/api/theme/next?id=" + id,
function (xml, status) {
if (status != 'success') return;
var next = $(xml).find("next");
@@ -29,52 +91,36 @@
);
};
-var play = function (url) {
- if (url) {
- if (url != audio.attr("src")) audio.attr("src", url);
- audio[0].play();
- } else {
- audio[0].pause();
- audio[0].currentTime = 0;
- }
-};
-
$.get(
- '/api/theme/data?theme_id=' + id[1],
+ "/api/theme/data?theme_id=" + id,
function (xml, status) {
if (status != 'success') return;
- $(xml).find("image").each(function () {
- url.push($(this).find("source_url").text());
- if ($(this).find("bgm_id").text() == "-1") {
- bgm.push("");
- } else {
- var bgm_path = $(this).find("bgm_path").text();
- bgm.push((bgm_path && "http://lohas.nicoseiga.jp" + bgm_path) || bgm[bgm.length - 1]);
- }
- });
+ $(xml).find("image").each(find_image);
$("#playerBody").empty().append(img);
- img.attr("src", url[i]);
+ img.attr("src", images[i]["url"]);
img.click(function (e) {
var w = $(this).width();
var x = e.pageX - $(this).offset().left;
if (x < w / 2) {
- if (url[i - 1]) i--;
+ if (1 < i) i--;
} else {
- if (url[i + 1]) {
+ if (images[i + 1]) {
i++;
} else {
next();
}
}
- $(this).attr("src", url[i]);
- play(bgm[i]);
+ $(this).attr("src", images[i]["url"]);
+ play(images[i]["bgm_id"]);
+ effect(images[i]["se_id"]);
+ location.hash = "#" + i;
});
div.offset(img.offset());
- div.width(img.width());
- div.height(img.height());
+ div.width(img.width()).height(img.height());
div.click(function () {
$(this).hide();
- play(bgm[i]);
+ play(images[i]["bgm_id"]);
+ effect(images[i]["se_id"]);
});
}
);
/*
* @title ニコニコ漫画
* @description Flash Player がない環境でニコニコ漫画を見る
* @include http://seiga.nicovideo.jp/watch/mg*
* @license MIT License
*/
jQuery(function($){
var id = location.href.match(/http:\/\/seiga\.nicovideo\.jp\/watch\/mg([0-9]+)/)[1];
var images = [{}];
var i = Number(location.hash.substring(1) || 1);
var audios = {};
var bgm;
var se;
var img = $("<img></img>").css({ border: "solid 1px #000", width: "670px", height: "380px" });
var div = $("<div></div>").css({ border: "solid 1px #000", position: "absolute", "z-index": "100", "background-color": "#000", opacity: "0.5" }).appendTo("body");
var find_image = function () {
var url = $(this).find("source_url").text();
var bgm_id = $(this).find("bgm_id").text();
if (bgm_id == -1) {
bgm_id = undefined;
} else {
if (bgm_id) {
if (!audios[bgm_id]) {
var bgm_path = $(this).find("bgm_path").text();
var audio = new Audio("http://lohas.nicoseiga.jp" + bgm_path);
audio.load();
if ($(this).find("bgm_loop").text() == 1) {
audio.addEventListener("ended", function () {
this.currentTime = 0;
this.play();
}, false);
}
audio.volume = 0.2;
audios[bgm_id] = audio;
}
} else {
bgm_id = images[images.length - 1]["bgm_id"];
}
}
var se_id = $(this).find("se_id").text();
if (se_id) {
if (!audios[se_id]) {
var se_path = $(this).find("se_path").text();
var audio = new Audio("http://lohas.nicoseiga.jp" + se_path);
audio.load();
audio.volume = 0.2;
audios[se_id] = audio;
}
} else {
se_id = undefined;
}
images.push({ url: url, bgm_id: bgm_id, se_id: se_id });
};
var play = function (bgm_id) {
if (bgm != audios[bgm_id]) {
if (bgm) bgm.pause();
bgm = audios[bgm_id];
if (bgm) {
bgm.currentTime = 0;
bgm.play();
}
}
};
var effect = function (se_id) {
if (se) se.pause();
se = audios[se_id];
if (se) {
se.currentTime = 0;
se.play();
}
};
var next = function () {
$.get(
"/api/theme/next?id=" + id,
function (xml, status) {
if (status != 'success') return;
var next = $(xml).find("next");
var title = next.find("title").text();
if (title && window.confirm(title)) {
location.href = "http://seiga.nicovideo.jp/watch/mg" + next.find("id").text();
}
}
);
};
$.get(
"/api/theme/data?theme_id=" + id,
function (xml, status) {
if (status != 'success') return;
$(xml).find("image").each(find_image);
$("#playerBody").empty().append(img);
img.attr("src", images[i]["url"]);
img.click(function (e) {
var w = $(this).width();
var x = e.pageX - $(this).offset().left;
if (x < w / 2) {
if (1 < i) i--;
} else {
if (images[i + 1]) {
i++;
} else {
next();
}
}
$(this).attr("src", images[i]["url"]);
play(images[i]["bgm_id"]);
effect(images[i]["se_id"]);
location.hash = "#" + i;
});
div.offset(img.offset());
div.width(img.width()).height(img.height());
div.click(function () {
$(this).hide();
play(images[i]["bgm_id"]);
effect(images[i]["se_id"]);
});
}
);
});
- Permalink
- このページへの個別リンクです。
- RAW
- 書かれたコードへの直接のリンクです。
- Packed
- 文字列が圧縮された書かれたコードへのリンクです。
- Userscript
- Greasemonkey 等で利用する場合の .user.js へのリンクです。
- Loader
- @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
- Metadata
- コード中にコメントで @xxx と書かれたメタデータの JSON です。