ニコニコ漫画

by asannou 2013-09-03 [2013/09/03 18:45:41]

Flash Player がない環境でニコニコ漫画を見る

@@ -11,14 +11,20 @@
 var images = [{}];
 var i = Number(location.hash.substring(1) || 1);
 
+var comments = {};
+
 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 img = $("<img></img>").css({ float: "left", width: "670px", height: "380px", border: "solid 1px #000" });
+var mask = $("<div></div>").css({ position: "absolute", border: "solid 1px #000", "background-color": "#000", "z-index": "100", opacity: "0.5" }).appendTo("body");
+var div = $("<div></div>").css({ float: "left", width: "200px", height: "380px", border: "solid 1px #000", overflow: "scroll" });
+var ol = $("<ol></ol>");
 
 var find_image = function () {
+    var id = $(this).find("id").text();
+    comments[id] = [];
     var url = $(this).find("source_url").text();
     var bgm_id = $(this).find("bgm_id").text();
     if (bgm_id == -1) {
@@ -54,31 +60,47 @@
     } else {
         se_id = undefined;
     }
-    images.push({ url: url, bgm_id: bgm_id, se_id: se_id  });
+    images.push({ id: id, url: url, bgm_id: bgm_id, se_id: se_id });
+};
+
+var find_comment = function () {
+    var image_id = $(this).find("image_id").text();
+    var content = $(this).find("content").text();
+    var frame = $(this).find("frame").text();
+    comments[image_id].push({ content: content, frame: frame  });
 };
 
-var play = function (bgm_id) {
+var append_comment = function (image_id) {
+    ol.empty();
+    $.each(comments[image_id], function () {
+        ol.append($("<li></li>").text(this["content"]));
+    });
+};
+
+var play_bgm = function (bgm_id) {
     if (bgm != audios[bgm_id]) {
         if (bgm) bgm.pause();
         bgm = audios[bgm_id];
         if (bgm) {
             try { bgm.currentTime = 0.1; } catch (e) {};
+            bgm.load();
             bgm.play();
         }
     }
 };
 
-var effect = function (se_id) {
+var play_se = function (se_id) {
     if (se) se.pause();
     se = audios[se_id];
     if (se) {
         if (bgm) se.addEventListener("ended", function () { bgm.play(); });
         try { se.currentTime = 0.1; } catch (e) {};
+        se.load();
         se.play();
     }
 };
 
-var next = function () {
+var go_next = function () {
     $.get(
         "/api/theme/next?id=" + id,
         function (xml, status) {
@@ -92,38 +114,55 @@
     );
 };
 
-$.get(
-    "/api/theme/data?theme_id=" + id,
-    function (xml, status) {
+$.ajax({
+    url: "/api/theme/data?theme_id=" + id,
+    converters: {
+        "text xml": function (res) {
+            res = res.replace(/[\x00-\x1f]/g, "");
+            return $.parseXML(res);
+        }
+    },
+    success: 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++;
+        $(xml).find("comment").each(find_comment);
+        $("#playerBody")
+            .empty()
+            .width(900)
+            .append(img)
+            .append(div);
+        img
+            .attr("src", images[i]["url"])
+            .click(function (e) {
+                var w = $(this).width();
+                var x = e.pageX - $(this).offset().left;
+                if (x < w / 2) {
+                    if (1 < i) i--;
                 } else {
-                    next();
+                    if (images[i + 1]) {
+                        i++;
+                    } else {
+                        go_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"]);
-        });
+                $(this).attr("src", images[i]["url"]);
+                append_comment(images[i]["id"]);
+                play_bgm(images[i]["bgm_id"]);
+                play_se(images[i]["se_id"]);
+                location.hash = "#" + i;
+            });
+        div.append(ol);
+        append_comment(images[i]["id"]);
+        mask
+            .offset(img.offset())
+            .width(img.width())
+            .height(img.height())
+            .click(function () {
+                $(this).hide();
+                play_bgm(images[i]["bgm_id"]);
+                play_se(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 comments = {};
  
  var audios = {};
  var bgm;
  var se;
  
  var img = $("<img></img>").css({ float: "left", width: "670px", height: "380px", border: "solid 1px #000" });
  var mask = $("<div></div>").css({ position: "absolute", border: "solid 1px #000", "background-color": "#000", "z-index": "100", opacity: "0.5" }).appendTo("body");
  var div = $("<div></div>").css({ float: "left", width: "200px", height: "380px", border: "solid 1px #000", overflow: "scroll" });
  var ol = $("<ol></ol>");
  
  var find_image = function () {
      var id = $(this).find("id").text();
      comments[id] = [];
      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();
                      });
                  }
                  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({ id: id, url: url, bgm_id: bgm_id, se_id: se_id });
  };
  
  var find_comment = function () {
      var image_id = $(this).find("image_id").text();
      var content = $(this).find("content").text();
      var frame = $(this).find("frame").text();
      comments[image_id].push({ content: content, frame: frame  });
  };
  
  var append_comment = function (image_id) {
      ol.empty();
      $.each(comments[image_id], function () {
          ol.append($("<li></li>").text(this["content"]));
      });
  };
  
  var play_bgm = function (bgm_id) {
      if (bgm != audios[bgm_id]) {
          if (bgm) bgm.pause();
          bgm = audios[bgm_id];
          if (bgm) {
              try { bgm.currentTime = 0.1; } catch (e) {};
              bgm.load();
              bgm.play();
          }
      }
  };
  
  var play_se = function (se_id) {
      if (se) se.pause();
      se = audios[se_id];
      if (se) {
          if (bgm) se.addEventListener("ended", function () { bgm.play(); });
          try { se.currentTime = 0.1; } catch (e) {};
          se.load();
          se.play();
      }
  };
  
  var go_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();
              }
          }
      );
  };
  
  $.ajax({
      url: "/api/theme/data?theme_id=" + id,
      converters: {
          "text xml": function (res) {
              res = res.replace(/[\x00-\x1f]/g, "");
              return $.parseXML(res);
          }
      },
      success: function (xml, status) {
          if (status != "success") return;
          $(xml).find("image").each(find_image);
          $(xml).find("comment").each(find_comment);
          $("#playerBody")
              .empty()
              .width(900)
              .append(img)
              .append(div);
          img
              .attr("src", images[i]["url"])
              .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 {
                          go_next();
                      }
                  }
                  $(this).attr("src", images[i]["url"]);
                  append_comment(images[i]["id"]);
                  play_bgm(images[i]["bgm_id"]);
                  play_se(images[i]["se_id"]);
                  location.hash = "#" + i;
              });
          div.append(ol);
          append_comment(images[i]["id"]);
          mask
              .offset(img.offset())
              .width(img.width())
              .height(img.height())
              .click(function () {
                  $(this).hide();
                  play_bgm(images[i]["bgm_id"]);
                  play_se(images[i]["se_id"]);
              });
      }
  });
  
  });

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。