ニコニコ漫画

    @@ -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 です。

History

  1. 2013/09/03 18:45:41 - 2013-09-03
  2. 2013/08/09 20:20:17 - 2013-08-09
  3. 2013/08/09 19:17:46 - 2013-08-09
  4. 2013/08/08 20:26:36 - 2013-08-08
  5. 2013/08/08 01:06:01 - 2013-08-08
  6. 2013/08/07 18:25:39 - 2013-08-07
  7. 2013/08/06 20:40:48 - 2013-08-06
  8. 2013/08/06 19:32:03 - 2013-08-06
  9. 2013/08/05 19:01:10 - 2013-08-05
  10. 2013/08/05 02:00:30 - 2013-08-05
  11. 2013/08/03 23:55:44 - 2013-08-03
  12. 2013/08/03 23:48:24 - 2013-08-03
  13. 2013/08/03 22:44:22 - 2013-08-03