☰

MOD_Seiga

ニコニコ静画のUIをいじる

目前为 2017-10-02 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        MOD_Seiga
  3. // @namespace   https://github.com/segabito/
  4. // @description ニコニコ静画のUIをいじる
  5. // @include     *://seiga.nicovideo.jp/seiga/*
  6. // @include     *://seiga.nicovideo.jp/tag/*
  7. // @include     *://seiga.nicovideo.jp/illust/*
  8. // @include     *://lohas.nicoseiga.jp/o/*
  9. // @version     0.4.1
  10. // @grant       none
  11. // @require     https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  12. // ==/UserScript==
  13.  
  14. // ver 0.2.20
  15. // ver 0.2.21
  16. // - 新バージョンに対応
  17.  
  18. // ver 0.2.13
  19. // - クリップの向きが変わったので、クリップメニューの位置を設定できるようにした
  20.  
  21. // ver 0.2.12
  22. // - コメント一覧で一番下のコメントが見きれる問題二を勝手に直す
  23. // - タグ検索時にキーワード検索フォームに自動でタグのテキストを入れる
  24.  
  25. // ver 0.2.11
  26. // - コメント中の動画・静画IDやURLへのリンクに対応
  27. // - 春画でも説明文のURL自動リンクに対応
  28. // - 切れないサムネをAutopagerizeに対応
  29.  
  30. // ver 0.2.10
  31. // - ヘッダ固定の時の自動スクロール修正
  32. // - タグ検索時にカウンターが常時表示されるように変更
  33. // - ページ下側の投稿者アイコンを隠す設定 (右上だけあればいい人用)
  34.  
  35. // ver 0.2.9
  36. // - 動画タイトルの位置に自動スクロールする対応
  37. // - おもにwindows等、縦ホイールしかない環境で横スクロールしやすくする。Firefoxでうまくいかない
  38. // - ウィンドウ幅が狭いときはページ一番上に戻るボタンを出さなくする設定
  39.  
  40. // ver 0.2.8
  41. // - クリップボタンの位置を上にしてみる
  42. // - 右上の投稿者アイコンを大きくしてみる
  43.  
  44. // ver 0.2.7
  45. // - 全画面表示時に画像クリックでズームが切り替わる対応
  46.  
  47. // ver 0.2.6
  48. // - サムネイルがカットされなくする対応をタグ検索とイラストトップにも適用
  49.  
  50. // ver 0.2.5
  51. // - サムネイルがカットされなくする対応。 設定で無効にも出来ます
  52.  
  53. // ver 0.2.4
  54. // - 右カラム広告のせいで無駄に横スクロールが発生しているのを勝手に直す
  55.  
  56. // ver 0.2.3
  57. // - 市場を近づけた
  58.  
  59. // ver 0.2.2
  60. // - ホバーしなくてもタイトルと説明文が出るように
  61.  
  62. // ver 0.2.1
  63. // - タグを説明文の下・説明文の右に置けるように
  64.  
  65. // ver 0.2.0
  66. // - 動かなくなっていたのでとりあえずまた動くようにした
  67.  
  68. // ver 0.1.0
  69. // - 設定パネルを追加
  70. // - 投稿者を右上に出せるようにした
  71.  
  72. // ver 0.0.2
  73. // - ホバーしなくてもタイトルと説明文が出るように
  74. // - 見えないところでタグが増殖していたのを修正
  75.  
  76. // ver 0.0.1 最初のバージョン
  77.  
  78. (function() {
  79.   var monkey = (function(){
  80.     'use strict';
  81.     var $ = window.jQuery;
  82.  
  83.     var A4_WIDTH = 210, A4_HEIGHT = 297;
  84.  
  85.  
  86.     window.MOD_Seiga = {
  87.       initialize: function() {
  88.         this.initializeUserConfig();
  89.         var path = location.pathname;
  90.         if (path.indexOf('/seiga/') === 0) {
  91.           this.initializeSeigaView();
  92.         } else
  93.         if (path.indexOf('/illust/') === 0 && path.indexOf('ranking') < 0) {
  94.           this.initializeIllustTop();
  95.         } else
  96.         if (path.indexOf('/tag/') === 0) {
  97.           this.initializeTagSearch();
  98.         } else
  99.         if (path.indexOf('/o/') === 0) {
  100.           this.initializeFullView();
  101.         }
  102.  
  103.       },
  104.       initializeSeigaView: function() {
  105.         if ($('#content').length > 0) {
  106.           this.initializeBaseLayout();
  107.  
  108.           this.initializeScrollTop();
  109.           this.initializeDescription();
  110.           this.initializeCommentLink();
  111.           this.initializeThumbnail();
  112.           this.initializePageTopButton();
  113.           this.initializeKnockout();
  114.           this.initializeFullScreenRequest();
  115.           this.initializeSaveScreenshotRequest();
  116.  
  117.           this.initializeOther();
  118.           this.initializeSettingPanel();
  119.  
  120.           $('body').addClass('MOD_Seiga_View');
  121.           this.initializeCss();
  122.         } else {
  123.           // 春画っぽい。説明文の自動リンクだけやる
  124.           this.initializeDescription();
  125.         }
  126.  
  127.       },
  128.       initializeIllustTop: function() {
  129.         this.initializeThumbnail();
  130.         this.initializeSettingPanel();
  131.  
  132.         this.initializePageTopButton();
  133.         $('body').addClass('MOD_Seiga_Top');
  134.         this.initializeCss();
  135.       },
  136.       initializeTagSearch: function() {
  137.         this.initializeThumbnail();
  138.         this.initializeSettingPanel();
  139.  
  140.         this.initializePageTopButton();
  141.         setTimeout(function() {
  142.           var $search = $('#bar_search');
  143.           if (
  144.             $search.val() === 'イラストを検索' ||
  145.             $search.val() === '春画を検索') {
  146.             $search.val($('#ko_tagwatch_min').attr('data-query')).addClass('edited').css({color: '#000'});
  147.           }
  148.         }, 1000);
  149.         $('body').addClass('MOD_Seiga_TagSearch');
  150.         this.initializeCss();
  151.       },
  152.       initializeFullView: function() {
  153.         $('body').addClass('MOD_Seiga_FullView');
  154.         this.initializeFullscreenImage();
  155.         this.initializeSaveScreenshot();
  156.         this.initializeCss();
  157.       },
  158.       addStyle: function(styles, id) {
  159.         var elm = document.createElement('style');
  160.         elm.type = 'text/css';
  161.         if (id) { elm.id = id; }
  162.  
  163.         var text = styles.toString();
  164.         text = document.createTextNode(text);
  165.         elm.appendChild(text);
  166.         var head = document.getElementsByTagName('head');
  167.         head = head[0];
  168.         head.appendChild(elm);
  169.         return elm;
  170.       },
  171.       fullScreen: {
  172.         now: function() {
  173.           if (document.fullScreenElement || document.mozFullScreen || document.webkitIsFullScreen) {
  174.             return true;
  175.           }
  176.           return false;
  177.         },
  178.         request: function(target) {
  179.           var elm = typeof target === 'string' ? document.getElementById(target) : target;
  180.           if (!elm) { return; }
  181.           if (elm.requestFullScreen) {
  182.             elm.requestFullScreen();
  183.           } else if (elm.webkitRequestFullScreen) {
  184.             elm.webkitRequestFullScreen();
  185.           } else if (elm.mozRequestFullScreen) {
  186.             elm.mozRequestFullScreen();
  187.           }
  188.         },
  189.         cancel: function() {
  190.           if (document.cancelFullScreen) {
  191.             document.cancelFullScreen();
  192.           } else if (document.webkitCancelFullScreen) {
  193.             document.webkitCancelFullScreen();
  194.           } else if (document.mozCancelFullScreen) {
  195.             document.mozCancelFullScreen();
  196.           }
  197.         }
  198.       },
  199.       initializeCss: function() {
  200.         var __common_css__ = (`
  201.           .MOD_SeigaSettingMenu a {
  202.             font-weight: bolder; color: darkblue !important;
  203.           }
  204.           #MOD_SeigaSettingPanel {
  205.             position: fixed;
  206.             bottom: 2000px; right: 8px;
  207.             z-index: -1;
  208.             width: 500px;
  209.             background: #f0f0f0; border: 1px solid black;
  210.             padding: 8px;
  211.             transition: bottom 0.4s ease-out;
  212.             text-align: left;
  213.           }
  214.           #MOD_SeigaSettingPanel.open {
  215.             display: block;
  216.             bottom: 8px;
  217.             box-shadow: 0 0 8px black;
  218.             z-index: 10000;
  219.           }
  220.           #MOD_SeigaSettingPanel .close {
  221.             position: absolute;
  222.             cursor: pointer;
  223.             right: 8px; top: 8px;
  224.           }
  225.           #MOD_SeigaSettingPanel .panelInner {
  226.             background: #fff;
  227.             border: 1px inset;
  228.             padding: 8px;
  229.             min-height: 300px;
  230.             overflow-y: scroll;
  231.             max-height: 500px;
  232.           }
  233.           #MOD_SeigaSettingPanel .panelInner .item {
  234.             border-bottom: 1px dotted #888;
  235.             margin-bottom: 8px;
  236.             padding-bottom: 8px;
  237.           }
  238.           #MOD_SeigaSettingPanel .panelInner .item:hover {
  239.             background: #eef;
  240.           }
  241.           #MOD_SeigaSettingPanel .windowTitle {
  242.             font-size: 150%;
  243.           }
  244.           #MOD_SeigaSettingPanel .itemTitle {
  245.           }
  246.           #MOD_SeigaSettingPanel label {
  247.             margin-right: 12px;
  248.           }
  249.           #MOD_SeigaSettingPanel small {
  250.             color: #666;
  251.           }
  252.           #MOD_SeigaSettingPanel .expert {
  253.             margin: 32px 0 16px;
  254.             font-size: 150%;
  255.             background: #ccc;
  256.           }
  257.  
  258.           .comment_info .mod_link, .description .otherSite {
  259.             text-decoration: underline;
  260.             font-weight: bolder;
  261.           }
  262.  
  263.           /* 画面が狭いときに操作不能になる部分などを直す */
  264.           @media screen and (max-width: 1023px) {
  265.             .mod_hidePageTopButton.MOD_Seiga .comment_all .comment_all_inner .illust_main .illust_side .illust_comment .comment_list {
  266.               position: fixed;
  267.               right: 25px;
  268.               top: 105px; bottom: 105px; overflow-y: auto;
  269.             }
  270.             .mod_hidePageTopButton.MOD_Seiga .comment_all .comment_all_inner .illust_main .illust_side .illust_comment .comment_list .text {
  271.               margin: 0 16px 0 0;
  272.             }
  273.             .mod_hidePageTopButton.MOD_Seiga .comment_all .comment_all_inner .illust_main .illust_side .illust_comment .res .inner {
  274.               position: fixed;
  275.               bottom: 0; right: 5px;
  276.             }
  277.             .mod_hidePageTopButton.MOD_Seiga .comment_all .comment_all_header .control{
  278.               position: fixed; top: 35px; right: 25px; /* 横幅が狭いと閉じるを押せない問題の対応 */
  279.             }
  280.           }
  281.           @media screen and (max-width: 1183px) {
  282.             .mod_hidePageTopButton #pagetop { display: none !important; }
  283.           }
  284.  
  285.           @media print {
  286.  
  287.             body {
  288.               background: #000 !important; /* 背景を黒にしたい場合は「背景画像を印刷」にチェック */
  289.               margin: 0;
  290.               padding: 0;
  291.               overflow: hidden;
  292.               width: 210mm;
  293.                  /* height: calc(297mm - 19mm); */ /* 19mmは印刷マージン */
  294.             }
  295.             body.landscape {
  296.               width: 297mm;
  297.                      /* height: calc(210mm - 19mm); */
  298.             }
  299.             .toggleFullScreen, .control {
  300.               display: none !important;
  301.               opacity: 0 !important;
  302.             }
  303.  
  304.             .MOD_Seiga_FullView .illust_view_big img {
  305.               top: 0 !important;
  306.               left: 0 !important;
  307.               transform: inherit !important;
  308.               -webkit-transform: inherit !important;
  309.             }
  310.  
  311.             .MOD_Seiga_FullView:not(.landscape) .illust_view_big img {
  312.               width: auto;
  313.               height: auto;
  314.             }
  315.             .MOD_Seiga_FullView:not(.landscape).fitV .illust_view_big img {
  316.               /*width: auto;
  317.               height: calc(297mm - 19mm); */
  318.             }
  319.             .MOD_Seiga_FullView.landscape .illust_view_big img {
  320.               /*width: 297mm;
  321.               height: auto; */
  322.             }
  323.             .MOD_Seiga_FullView.landscape.fitV .illust_view_big img {
  324.               /*width: auto;
  325.               height: calc(210mm - 19mm); */
  326.               margin-top: 0;
  327.             }
  328.           }
  329.  
  330.  
  331.         `).trim();
  332.  
  333.         var __css__ = (`
  334.  
  335.  
  336.         /* マイページや投稿へのリンクがあっても、すぐ上にniconico共通のヘッダーがあるのでいらないと思う。ということで省スペース優先で消す。*/
  337.         #header { background: #fff; }
  338.         #header .sg_global_bar {
  339.           display: none;
  340.         }
  341.         #header_cnt { width: 1004px; }
  342.  
  343.         /* サムネのホバー調整 */
  344.         .list_item_cutout.middle {
  345.           height: 154px;
  346.           text-align: center;
  347.         }
  348.         .list_item_cutout.middle a {
  349.           height: 100%;
  350.           overflow: visible;
  351.         }
  352.         .list_item_cutout.middle a .illust_info, .list_item_cutout.middle a .illust_info:hover {
  353.           bottom: 0;
  354.         }
  355.  
  356.         /* サムネのカットなくすやつ。 */
  357.         .list_item_cutout.mod_no_trim  .thum img {
  358.           display: none;
  359.         }
  360.  
  361.  
  362.         .list_item_cutout.mod_no_trim  .thum {
  363.           display: block;
  364.           width: 100%;
  365.           height: calc(100% - 40px);
  366.           background-repeat: no-repeat;
  367.           background-position: center center;
  368.           background-size: contain;
  369.           -moz-background-size: contain;
  370.           -webkit-background-size: contain;
  371.           -o-background-size: contain;
  372.           -ms-background-size: contain;
  373.          }
  374.  
  375.         .list_item.mod_no_trim  .thum img {
  376.           display: none;
  377.         }
  378.  
  379.         .list_item.mod_no_trim  .thum {
  380.           display: block;
  381.           width: 100%;
  382.           height: 0;
  383.           background-repeat: no-repeat;
  384.           background-position: center center;
  385.           background-size: contain;
  386.           -moz-background-size: contain;
  387.           -webkit-background-size: contain;
  388.           -o-background-size: contain;
  389.           -ms-background-size: contain;
  390.         }
  391.         .MOD_Seiga_View .list_item.mod_no_trim  .thum {
  392.         }
  393.         .list_item.mod_no_trim .thum:hover, .list_item_cutout.mod_no_trim .thum:hover {
  394.           background-size: cover;
  395.         }
  396.  
  397.         .MOD_Seiga_Top .list_item_cutout.mod_no_trim  .thum {
  398.           height: calc(100% - 50px);
  399.         }
  400.         .MOD_Seiga_Top .list_item_cutout.mod_no_trim a {
  401.           height: 100%;
  402.           width: 100%;
  403.         }
  404.         .MOD_Seiga_Top .list_item_cutout.mod_no_trim.large a .illust_info {
  405.           bottom: 0px !important;
  406.           background-color: rgba(60, 60, 60, 1);
  407.           padding: 10px 40px;
  408.         }
  409.         .MOD_Seiga_Top .list_item_cutout.mod_no_trim.large {
  410.           width: 190px;
  411.           height: 190px;
  412.         }
  413.         .MOD_Seiga_Top .rank_box .item_list.mod_no_trim .more_link a {
  414.           width: 190px;
  415.         }
  416.  
  417.         /* タグ検索時、カウンタなどが常時見えるように修正 */
  418.         .MOD_Seiga_TagSearch .list_item.large a .illust_count {
  419.           opacity: 1;
  420.         }
  421.         .MOD_Seiga_TagSearch .list_item.large a {
  422.           height: 321px;
  423.         }
  424.         .MOD_Seiga_TagSearch .list_item.large {
  425.           height: 351px;
  426.         }
  427.  
  428.         /* タイトルと説明文・投稿者アイコンだけコンクリートの地面に置いてあるように感じたので絨毯を敷いた */
  429.         .MOD_Seiga .im_head_bar .inner {
  430.           background-color: #FFFFFF;
  431.           border-color: #E8E8E8;
  432.           border-radius: 5px;
  433.           border-style: solid;
  434.           border-width: 0 0 1px;
  435.           box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  436.           display: block;
  437.           margin-top: 20px;
  438.           /*margin-bottom: 20px;*/
  439.           margin-left: auto;
  440.           margin-right: auto;
  441.           padding: 15px;
  442.           position: relative;
  443.           width: 974px;
  444.         }
  445.  
  446.  
  447.         /* タグの位置調整 */
  448.         .illust_main .mod_tag-top.illust_sub_info {
  449.           padding-bottom: 25px;
  450.           padding-top: 0;
  451.         }
  452.  
  453.  
  454.         .illust_sub_info.mod_tag-description-bottom {
  455.           margin-top: 15px;
  456.         }
  457.         .im_head_bar .illust_tag h2 {
  458.           float: left;
  459.           font-size: 116.7%;
  460.           line-height: 120%;
  461.           margin: 4px 10px 0 -2px;
  462.           overflow: hidden;
  463.         }
  464.         .im_head_bar .illust_sub_info  input#tags {
  465.           margin-bottom: 15px;
  466.           margin-top: 5px;
  467.           padding: 4px 10px;
  468.           width: 280px;
  469.         }
  470.         .im_head_bar .illust_sub_info ul li.btn {
  471.           bottom: 15px;
  472.           position: absolute;
  473.           right: 15px;
  474.         }
  475.  
  476.         /* タグ右上 */
  477.         .description.mod_tag-description-right {
  478.           float: left;
  479.         }
  480.         .illust_sub_info.mod_tag-description-right {
  481.           width: 300px;
  482.           float: right;
  483.           margin: 0;
  484.         }
  485.         .mod_tag-description-right .tag {
  486.           background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  487.           border: medium none;
  488.           margin: 0;
  489.         }
  490.         .mod_tag-description-right .tag a {
  491.           padding: 0 5px;
  492.         }
  493.         .mod_tag-description-right .tag li {
  494.         }
  495.         .mod_tag-description-right .tag li a {
  496.           padding: 0 5px 0 0;
  497.           border: 0;
  498.         }
  499.         .im_head_bar .illust_sub_info.mod_tag-description-right ul li.btn.active {
  500.         }
  501.         /* 右下だと被ることがあるので仕方なく */
  502.         .im_head_bar .illust_sub_info.mod_tag-description-right ul li.btn {
  503.           display: inline-block;
  504.           position: relative;
  505.           bottom: auto; right: auto;
  506.         }
  507.  
  508.         #ichiba_box {
  509.           width: 1004px;
  510.           margin: 0 auto 20px;
  511.           border: 1px solid #ddd;
  512.           border-radius: 8px;
  513.         }
  514.  
  515.         #content.illust { padding: 0; }
  516.  
  517.         #related_info .ad_tag { display: none;}
  518.  
  519.         /* 右カラム広告のせいで無駄に横スクロールが発生しているのを修正 */
  520.         .related_info .sub_info_side {
  521.           overflow-x: hidden;
  522.         }
  523.  
  524.  
  525.         .illust_main .illust_side .clip.mod_top {
  526.           padding: 10px 10px 0;
  527.         }
  528.  
  529.  
  530.         .MOD_Seiga_FullView #content.illust_big .illust_view_big {
  531.           margin: 0 auto;
  532.         }
  533.  
  534.         .MOD_Seiga_FullView .control {
  535.           position: absolute;
  536.           right: 0;
  537.           top: 0;
  538.           z-index: 1000;
  539.           opacity: 0;
  540.           transition: opacity 0.5s ease;
  541.         }
  542.  
  543.         .MOD_Seiga_FullView:hover .control {
  544.           opacity: 1;
  545.         }
  546.  
  547.         .MOD_Seiga_FullView .illust_view_big img {
  548.           /*transform: scale(1); -webkit-transform: scale(1);
  549.           transition: transform 0.3s ease, -webkit-transform 0.3s ease;*/
  550.         }
  551.  
  552.         .MOD_Seiga_FullView:not(.mod_noScale) .illust_view_big img {
  553.           position: absolute;
  554.           top: 0;
  555.           left: 0;
  556.                   transform-origin: 0 0 0;
  557.           -webkit-transform-origin: 0 0 0;
  558.         }
  559.  
  560.         .MOD_Seiga_FullView.mod_contain {
  561.           overflow: hidden;
  562.         }
  563.         .MOD_Seiga_FullView.mod_cover {
  564.         }
  565.         .MOD_Seiga_FullView.mod_contain .illust_view_big img,
  566.         .MOD_Seiga_FullView.mod_cover   .illust_view_big img {
  567.           /*display: none;*/
  568.         }
  569.  
  570.         .MOD_Seiga_FullView             .illust_view_big {
  571.           background-repeat: no-repeat;
  572.           background-position: center center;
  573.         }
  574.         .MOD_Seiga_FullView.mod_contain .illust_view_big {
  575.           background-size: contain;
  576.         }
  577.         .MOD_Seiga_FullView.mod_cover   .illust_view_big {
  578.           background-size: cover;
  579.         }
  580.  
  581.         .MOD_Seiga .toggleFullScreen,
  582.         .MOD_Seiga .saveScreenshot {
  583.           display: block;
  584.           width: 200px;
  585.           margin: 8px auto;
  586.           transition: 0.4s opacity, 0.4s box-shadow;
  587.         }
  588.         .MOD_Seiga_FullView .toggleFullScreen {
  589.           position: fixed;
  590.           top: 0;
  591.           left: 0;
  592.           z-index: 1000;
  593.           margin: 0;
  594.           padding: 4px;
  595.           cursor: pointer;
  596.           border: none;
  597.           background: transparent;
  598.           color: #0CA5D2;
  599.           font-weight: bolder;
  600.         }
  601.         .MOD_Seiga .toggleFullScreen:hover,
  602.         .MOD_Seiga .saveScreenshot:hover {
  603.           box-shadow: 2px 2px 2px #333;
  604.         }
  605.  
  606.         .MOD_Seiga_FullView .toggleFullScreen button,
  607.         .MOD_Seiga_FullView .saveScreenshot   button {
  608.           opacity: 0;
  609.           margin: 0;
  610.           padding: 0;
  611.           cursor: pointer;
  612.           transition: 0.4s opacity, 0.4s box-shadow;
  613.           border: 1px solid #000;
  614.           background: #fff;
  615.           color: #0CA5D2;
  616.           font-weight: bolder;
  617.         }
  618.         .MOD_Seiga_FullView .toggleFullScreen.show button,
  619.         .MOD_Seiga_FullView .toggleFullScreen button:hover {
  620.           opacity: 1;
  621.           box-shadow: 2px 2px 2px #333;
  622.         }
  623.         .MOD_Seiga_FullView:fullscreen .toggleFullScreen {
  624.           display: none;
  625.         }
  626.  
  627.         #ko_watchlist_info.mod_hide { display: none !important; }
  628.  
  629.         .saveScreenShotFrame,
  630.         .fullScreenRequestFrame {
  631.           position: fixed;
  632.           width: 100px;
  633.           height: 100px;
  634.           left: -999px;
  635.           top: -999px;
  636.         }
  637.  
  638.         .MOD_Seiga_FullView  .closeButton {
  639.           opacity: 0;
  640.           transition: 0.4s opacity ease;
  641.         }
  642.  
  643.         .MOD_Seiga_FullView  .closeButton:hover {
  644.           opacity: 1;
  645.         }
  646.  
  647.         body.fullScreenFrame {
  648.           background: #000;
  649.         }
  650.  
  651.         body.MOD_Seiga_FullView img {
  652.           cursor: none;
  653.         }
  654.  
  655.         body.MOD_Seiga_FullView.mouseMoving img{
  656.           cursor: default;
  657.         }
  658.  
  659.  
  660. `).trim();
  661.  
  662.  
  663.           this.addStyle(__common_css__);
  664.  
  665.         if (this.config.get('applyCss')) {
  666.           this.addStyle(__css__);
  667.         }
  668.       },
  669.       initializeUserConfig: function() {
  670.         var prefix = 'MOD_Seiga_';
  671.         var conf = {
  672.           applyCss: true,
  673.           topUserInfo: true,
  674.           tagPosition: 'description-bottom',
  675.           noTrim: true,
  676.           hidePageTopButton: true,
  677.           clipPosition: 'bottom',
  678.           hideBottomUserInfo: false
  679.         };
  680.  
  681.         this.config = {
  682.           get: function(key) {
  683.             try {
  684.               if (window.localStorage.hasOwnProperty(prefix + key)) {
  685.                 return JSON.parse(window.localStorage.getItem(prefix + key));
  686.               }
  687.               return conf[key];
  688.             } catch (e) {
  689.               return conf[key];
  690.             }
  691.           },
  692.           set: function(key, value) {
  693.             window.localStorage.setItem(prefix + key, JSON.stringify(value));
  694.           }
  695.         };
  696.       },
  697.       initializeBaseLayout: function() {
  698.         var $description = $('#content .description, #content .discription').addClass('description');
  699.         $('.controll').addClass('control');
  700.  
  701.         $('#related_info').after($('#ichiba_box'));
  702.  
  703.         if (this.config.get('hideBottomUserInfo') === true) {
  704.           $('#ko_watchlist_info').addClass('mod_hide');
  705.         }
  706.  
  707.       },
  708.       initializeScrollTop: function() {
  709.         var $document = $(document), $body = $('body'); //, $bar = $('#bar');
  710.  
  711.         var reset = this.resetScrollTop = function() {
  712.           var nofix = $body.hasClass('nofix');
  713.           var commonHeaderHeight = nofix ? 0 : 36; //$bar.outerHeight();
  714.           $document.scrollTop(Math.max(
  715.             $document.scrollTop(),
  716.             $('#content .im_head_bar').offset().top -commonHeaderHeight
  717.           ));
  718.         };
  719.         setTimeout(reset, 100);
  720.         reset();
  721.       },
  722.       initializeDescription: function() {
  723.         var $description = $('#content .description, #content .discription, .illust_user_exp');
  724.         if ($description.length < 1) { return; }
  725.         var html = $description.html();
  726.  
  727.         // 説明文中のURLの自動リンク
  728.         var linkmatch = /<a.*?<\/a>/, links = [], n;
  729.         html = html.split('<br />').join(' <br /> ');
  730.         while ((n = linkmatch.exec(html)) !== null) {
  731.           links.push(n);
  732.           html = html.replace(n, ' <!----> ');
  733.         }
  734.         html = html.replace(/(https?:\/\/[\x21-\x3b\x3d-\x7e]+)/gi, '<a href="$1" target="_blank" class="otherSite">$1</a>');
  735.         for (var i = 0, len = links.length; i < len; i++) {
  736.           html = html.replace(' <!----> ', links[i]);
  737.         }
  738.         html = html.split(' <br /> ').join('<br />');
  739.  
  740.         var $desc = $('<div>' +  html + '</div>');
  741.         $description.empty().append($desc);
  742.  
  743.       },
  744.       initializeCommentLink: function() {
  745.         var videoReg = /((sm|nm|so)\d+)/g;
  746.         var seigaReg = /(im\d+)/g;
  747.         var bookReg  = /((bk|mg)\d+)/g;
  748.         var urlReg   = /(https?:\/\/[\x21-\x3b\x3d-\x7e]+)/gi;
  749.  
  750.         var autoLink = function(text) {
  751.           text = text
  752.             .replace(videoReg, '<a href="//www.nicovideo.jp/watch/$1" class="video mod_link">$1</a>')
  753.             .replace(seigaReg, '<a href="/seiga/$1" class="illust mod_link">$1</a>')
  754.             .replace(bookReg,  '<a href="/watch/$1" class="book mod_link">$1</a>')
  755.             .replace(urlReg,   '<a href="$1" target="_blank" class="otherSite mod_link">$1</a>');
  756.           return text;
  757.         };
  758.         var commentLink = function(selector) {
  759.           $(selector).each(function() {
  760.             var $this = $(this);
  761.             var html = $this.html(), linked = autoLink(html);
  762.             if (html !== linked) {
  763.               $this.html(linked);
  764.             }
  765.             $this.addClass('mod_linked');
  766.           });
  767.         };
  768.  
  769.         setTimeout(function() {
  770.           commentLink('#comment_list .comment_info .text:not(.mod_linked)');
  771.           var updateTimer = null;
  772.           document.body.addEventListener('DOMNodeInserted', function(e) {
  773.             if (e.target.className && e.target.className.indexOf('comment_list_item') >= 0) {
  774.               if (updateTimer) {
  775.                 updateTimer = clearTimeout(updateTimer);
  776.               }
  777.               updateTimer = setTimeout(function() {
  778.                 updateTimer = clearTimeout(updateTimer);
  779.                 commentLink('#comment_list .comment_info .text:not(.mod_linked)');
  780.                 //var $text = $(e.target).find('.text');
  781.                 //if (!$text.hasClass('mod_linked')) $text.html(autoLink($text.text())).addClass('mod_linked');
  782.               }, 100);
  783.             }
  784.           });
  785.  
  786.         }, 100);
  787.       },
  788.       initializeThumbnail: function() {
  789.         if (this.config.get('noTrim') !== true) { return; }
  790.  
  791.         var treg = /^(http:\/\/lohas.nicoseiga.jp\/+thumb\/+.\d+)([a-z\?]*)/;
  792.         var noTrim = function() {
  793.           $('.list_item_cutout, #main .list_item:not(.mod_no_trim)').each(function() {
  794.             var $this = $(this);
  795.             var $thum = $this.find('.thum');
  796.             var $img  = $thum.find('img');
  797.             var src   = $img.attr('src') || '';
  798.             if ($thum.length * $img.length < 1 || !treg.test(src)) return;
  799.             // TODO: 静画のサムネの種類を調べる
  800.             var url = RegExp.$1 + 'q?';//RegExp.$2 === 't' ? src : RegExp.$1 + 'q?';
  801.             $thum.css({'background-image': 'url("' + url + '")'});
  802.             $this.addClass('mod_no_trim');
  803.           });
  804.         };
  805.         noTrim();
  806.         document.body.addEventListener('AutoPagerize_DOMNodeInserted', function() {
  807.           setTimeout(function() {
  808.             noTrim();
  809.           }, 500);
  810.         });
  811.       },
  812.       initializePageTopButton: function() {
  813.         $('body').toggleClass('mod_hidePageTopButton', this.config.get('hidePageTopButton'));
  814.       },
  815.       initializeKnockout: function() {
  816.       },
  817.       initializeFullScreenRequest: function() {
  818.         var $body = $('body');
  819.         var $iframe = $('<iframe allowfullscreen="on" class="fullScreenRequestFrame" name="fullScreenRequestFrame"></iframe>');
  820.  
  821.         $body.append($iframe);
  822.  
  823.         var $fullScreenButton = $([
  824.           '<button class="toggleFullScreen btn normal" title="フルスクリーン表示に切り換えます(Fキー)">',
  825.             '<span>フルスクリーン</span>',
  826.           '</button>',
  827.           ''].join(''));
  828.         $('.illust_main .illust_wrapper .inner .thum_large:first').append($fullScreenButton);
  829.         var toggleFullScreen = $.proxy(function() {
  830.           if (this.fullScreen.now()) {
  831.             this.fullScreen.cancel();
  832.           } else {
  833.             $iframe[0].contentWindow.location.replace($('#illust_link').attr('href'));
  834.             this.fullScreen.request($iframe[0]);
  835.           }
  836.         }, this);
  837.         $fullScreenButton.on('click', function(e) {
  838.           e.preventDefault();
  839.           e.stopPropagation();
  840.           toggleFullScreen();
  841.         });
  842.  
  843.         var onMessage = function(event) {
  844.           if (event.origin.indexOf('nicoseiga.jp') < 0) return;
  845.           try {
  846.             var data = JSON.parse(event.data);
  847.             if (data.id !== 'MOD_Seiga') { return; }
  848.             if (data.command === 'toggleFullScreen') {
  849.               toggleFullScreen();
  850.             }
  851.           } catch (e) {
  852.             console.log('Exception', e);
  853.             console.trace();
  854.           }
  855.         };
  856.  
  857.         window.addEventListener('message', onMessage);
  858.         $body.on('keydown.watchItLater', function(e) {
  859.           if (e.target.tagName === 'SELECT' || e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
  860.             return;
  861.           }
  862.           if (e.keyCode === 70) {  // F
  863.             toggleFullScreen();
  864.           }
  865.         });
  866.  
  867.       },
  868.       initializeOther: function() {
  869.         $('body').addClass('MOD_Seiga');
  870.       },
  871.       initializeSettingPanel: function() {
  872.         var $menu   = $('<li class="MOD_SeigaSettingMenu"><a href="javascript:;" title="MOD_Seigaの設定変更">MOD_Seiga設定</a></li>');
  873.         var $panel  = $('<div id="MOD_SeigaSettingPanel" />');//.addClass('open');
  874.         var $button = $('<button class="toggleSetting playerBottomButton">設定</botton>');
  875.  
  876.         $button.on('click', function(e) {
  877.           e.stopPropagation(); e.preventDefault();
  878.           $panel.toggleClass('open');
  879.         });
  880.  
  881.         var config = this.config;
  882.         $menu.find('a').on('click', function() { $panel.toggleClass('open'); });
  883.  
  884.         var __tpl__ = (`
  885.           <div class="panelHeader">
  886.           <h1 class="windowTitle">MOD_Seigaの設定</h1>
  887.           <p>設定はリロード後に反映されます</p>
  888.           <button class="close" title="閉じる">×</button>
  889.           </div>
  890.           <div class="panelInner">
  891.             <!--<div class="item" data-setting-name="topUserInfo" data-menu-type="radio">
  892.               <h3 class="itemTitle">投稿者情報を右上に移動 </h3>
  893.               <label><input type="radio" value="true" > する</label>
  894.               <label><input type="radio" value="false"> しない</label>
  895.             </div>-->
  896.  
  897.             <div class="item" data-setting-name="noTrim" data-menu-type="radio">
  898.               <h3 class="itemTitle">サムネイルの左右カットをやめる </h3>
  899.               <label><input type="radio" value="true" >やめる</label>
  900.               <label><input type="radio" value="false">やめない</label>
  901.             </div>
  902.  
  903.             <div class="item" data-setting-name="hidePageTopButton" data-menu-type="radio">
  904.               <h3 class="itemTitle">ウィンドウ幅が狭いときはページトップに戻るボタンを隠す</h3>
  905.               <label><input type="radio" value="true" >隠す</label>
  906.               <label><input type="radio" value="false">隠さない</label>
  907.             </div>
  908.  
  909.             <div class="item" data-setting-name="hideBottomUserInfo" data-menu-type="radio">
  910.               <h3 class="itemTitle">ページ下側の投稿者情報を隠す</h3>
  911.               <small>右上だけでいい場合など</small><br>
  912.               <label><input type="radio" value="true" >隠す</label>
  913.               <label><input type="radio" value="false">隠さない</label>
  914.             </div>
  915.  
  916.             <div class="item" data-setting-name="clipPosition" data-menu-type="radio">
  917.               <h3 class="itemTitle">クリップ登録メニューの位置(旧verのみ)</h3>
  918.               <label><input type="radio" value="&quot;top&quot;" >上</label>
  919.               <label><input type="radio" value="&quot;bottom&quot;">下</label>
  920.             </div>
  921.             <!--
  922.             <div class="item" data-setting-name="tagPosition" data-menu-type="radio">
  923.               <h3 class="itemTitle">タグの位置(旧verのみ) </h3>
  924.               <label><input type="radio" value="&quot;description-bottom&quot;">説明文の下</label>
  925.               <label><input type="radio" value="&quot;description-right&quot;">説明文の右</label>
  926.               <label><input type="radio" value="&quot;top&quot;">画像の上</label>
  927.               <label><input type="radio" value="&quot;default&quot;">画像の下(標準)</label>
  928.             </div>
  929.             -->
  930.  
  931.             <div class="expert">
  932.               <h2>上級者向け設定</h2>
  933.             </div>
  934.             <div class="item" data-setting-name="applyCss" data-menu-type="radio">
  935.               <h3 class="itemTitle">MOD_Seiga標準のCSSを使用する</h3>
  936.               <small>他のuserstyleを使用する場合は「しない」を選択してください</small><br>
  937.               <label><input type="radio" value="true" > する</label>
  938.               <label><input type="radio" value="false"> しない</label>
  939.             </div>
  940.           </div>
  941.         `).trim();
  942.         $panel.html(__tpl__);
  943.         $panel.find('.item').on('click', function(e) {
  944.           var $this = $(this);
  945.           var settingName = $this.attr('data-setting-name');
  946.           var value = JSON.parse($this.find('input:checked').val());
  947.           console.log('seting-name', settingName, 'value', value);
  948.           config.set(settingName, value);
  949.         }).each(function(e) {
  950.           var $this = $(this);
  951.           var settingName = $this.attr('data-setting-name');
  952.           var value = config.get(settingName);
  953.           $this.addClass(settingName);
  954.           $this.find('input').attr('name', settingName).val([JSON.stringify(value)]);
  955.         });
  956.         $panel.find('.close').click(function() {
  957.           $panel.removeClass('open');
  958.         });
  959.  
  960.  
  961.         $('#siteHeaderRightMenuFix').after($menu);
  962.         $('body').append($panel);
  963.       },
  964.       initializeFullscreenImage: function() {
  965.         var $body = $('body'), $container = $('.illust_view_big'), $img = $container.find('img'), scale = 1;
  966.         var $fullScreenButton = $([
  967.           '<div class="toggleFullScreen show">',
  968.            '<button title="フルスクリーン表示に切り換えます">',
  969.               '<span>フルスクリーン</span>',
  970.             '</button>',
  971.           '</div>',
  972.           ''].join(''));
  973.         var $window = $(window);
  974.         $('.controll').addClass('control');
  975.  
  976.         var clearCss = function() {
  977.           $body.removeClass('mod_contain mod_cover mod_noScale');
  978.           $container.css({width: '', height: ''});
  979.           $img.css({'transform': '', '-webkit-transform': '', top: '', left: ''});
  980.         };
  981.  
  982.         // ウィンドウの内枠フィット (画面におさまる範囲で最大化)
  983.         var contain = function() {
  984.           clearCss();
  985.           $body.addClass('mod_contain');
  986.           scale = Math.min(
  987.             $window.innerWidth() / $img.outerWidth(),
  988.             $window.innerHeight() / $img.outerHeight()
  989.           );
  990.           scale = Math.min(scale, 10);
  991.           $img.css({
  992.             'transform':         'scale(' + scale + ')',
  993.             '-webkit-transform': 'scale(' + scale + ')',
  994.             'left':  ($window.innerWidth()  - $img.outerWidth()  * scale) / 2 + 'px',
  995.             'top':   ($window.innerHeight() - $img.outerHeight() * scale) / 2 + 'px'
  996.           });
  997.           $container.width($window.innerWidth());
  998.           $container.height($window.innerHeight());
  999. //          $container.css('background-image', 'url("' + $img.attr('src') + '")');
  1000.         };
  1001.  
  1002.         // ウィンドウの外枠フィット
  1003.         var cover = function() {
  1004.           clearCss();
  1005.           $body.addClass('mod_cover').css('overflow', 'scroll');
  1006.           scale = Math.max(
  1007.             $window.innerWidth() / $img.outerWidth(),
  1008.             $window.innerHeight() / $img.outerHeight()
  1009.           );
  1010.           scale = Math.min(scale, 10);
  1011.           $img.css({
  1012.             'transform':         'scale(' + scale + ')',
  1013.             '-webkit-transform': 'scale(' + scale + ')',
  1014.           });
  1015.           // ウィンドウサイズの計算にスクロールバーの幅を含めるための措置 おもにwindows用
  1016.           $body.css('overflow', '');
  1017.         };
  1018.  
  1019.         // 原寸大表示
  1020.         var noScale = function() {
  1021.           clearCss();
  1022.           $body.addClass('mod_noScale');
  1023.           scale = 1;
  1024.           $container.css('background-image', '');
  1025.         };
  1026.  
  1027.         // クリックごとに表示を切り替える処理
  1028.         var onClick = function(e) {
  1029.           if (e.button > 0) { return; }
  1030.           // TODO: クリックした位置が中心になるようにスクロール
  1031.           if ($body.hasClass('mod_noScale')) {
  1032.             contain();
  1033.           } else
  1034.           if ($body.hasClass('mod_contain')) {
  1035.             cover();
  1036.           } else {
  1037.             noScale();
  1038.           }
  1039.         };
  1040.         // ウィンドウがリサイズされた時などの再計算用
  1041.         var update = function() {
  1042.           if ($body.hasClass('mod_contain')) {
  1043.             contain();
  1044.           } else
  1045.           if ($body.hasClass('mod_cover')) {
  1046.             cover();
  1047.           }
  1048.         };
  1049.  
  1050.         // モニターいっぱい表示を切り換える
  1051.         var toggleFullScreen = $.proxy(function() {
  1052.           if (window.name === 'fullScreenRequestFrame') {
  1053.             parent.postMessage(JSON.stringify({
  1054.               id: 'MOD_Seiga',
  1055.               command: 'toggleFullScreen'
  1056.             }),
  1057.             'http://seiga.nicovideo.jp');
  1058.             return;
  1059.           }
  1060.  
  1061.           if (this.fullScreen.now()) {
  1062.             this.fullScreen.cancel(document.documentElement);
  1063.           } else {
  1064.             this.fullScreen.request(document.documentElement);
  1065.           }
  1066.         }, this);
  1067.  
  1068.         window.setTimeout($.proxy(function() {
  1069.           $fullScreenButton.removeClass('show');
  1070.         }, this), 2000);
  1071.  
  1072.         // /seiga/imXXXXXXからiframeで呼ばれてる時の処理
  1073.         if (window.name === 'fullScreenRequestFrame') {
  1074.           $('img[src$="btn_close.png"]')
  1075.             .addClass('closeButton')
  1076.             .off()
  1077.             .on('click', function() {
  1078.               toggleFullScreen();
  1079.             });
  1080.           $('body').addClass('fullScreenFrame');
  1081.         }
  1082.  
  1083.         $fullScreenButton.on('click', function(e) {
  1084.           e.preventDefault();
  1085.           e.stopPropagation();
  1086.           toggleFullScreen();
  1087.         });
  1088.         $body.append($fullScreenButton);
  1089.  
  1090.  
  1091.         // マウスを動かさない時はカーソルを消す
  1092.         var mousemoveStopTimer = null;
  1093.         var showMouseNsec = function() {
  1094.           $body.addClass('mouseMoving');
  1095.           if (mousemoveStopTimer) {
  1096.             window.clearTimeout(mousemoveStopTimer);
  1097.             mousemoveStopTimer = null;
  1098.           }
  1099.           mousemoveStopTimer = window.setTimeout(function() {
  1100.             $body.removeClass('mouseMoving');
  1101.             mousemoveStopTimer = null;
  1102.           }, 1000);
  1103.         };
  1104.         $body
  1105.           .on('mousemove.MOD_Seiga', showMouseNsec)
  1106.           .on('mousedown.MOD_Seiga', showMouseNsec);
  1107.  
  1108.  
  1109.         contain();
  1110.         $img.on('click', onClick);
  1111.         $window.on('resize', update);
  1112.         var onImageLoad = $.proxy(function() {
  1113.           this.initializePrintCss($img.clone());
  1114.           contain();
  1115.           $img.off('load.MOD_Seiga');
  1116.         }, this);
  1117.  
  1118.         if ($img[0] && $img[0].complete) {
  1119.           onImageLoad();
  1120.         } else {
  1121.           $img.on('load.MOD_Seiga', onImageLoad);
  1122.         }
  1123.  
  1124.  
  1125.         // おもにwindows等、縦ホイールしかない環境で横スクロールしやすくする
  1126.         // Firefoxでうまくいかない
  1127.         var hasWheelDeltaX = false;
  1128.         $(document).on('mousewheel', function(e) {
  1129.           var delta = 0;
  1130.  
  1131.           if ($body.hasClass('mod_contain')) { return; }
  1132.  
  1133.           if (document.body.scrollHeight > window.innerHeight) { return; }
  1134.  
  1135.           if (hasWheelDeltaX) { return; }
  1136.  
  1137.           if (!e.originalEvent) { return; }
  1138.           var oe = e.originalEvent;
  1139.  
  1140.           if (typeof oe.wheelDelta === 'number') {
  1141.             if (typeof oe.wheelDeltaX === 'number' && oe.wheelDeltaX !== 0) {
  1142.               hasWheelDeltaX = true;
  1143.               return; // ホイールで横スクロールできる環境だとかえって邪魔なのでなにもしない
  1144.             }
  1145.  
  1146.             delta = e.originalEvent.wheelDelta / Math.abs(e.originalEvent.wheelDelta);
  1147.           }
  1148.           if (delta === 0) return;
  1149.  
  1150.           e.preventDefault();
  1151.           e.stopPropagation();
  1152.  
  1153.           var scrollLeft = $body.scrollLeft() - (delta * $window.innerWidth() / 10);
  1154.           $body.scrollLeft(Math.max(scrollLeft, 0));
  1155.         });
  1156.       },
  1157.       initializeSaveScreenshot: function() {
  1158.         $('body').on('keydown', (e) => {
  1159.           if (e.target.tagName === 'SELECT' || e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
  1160.             return;
  1161.           }
  1162.           if (e.keyCode === 83) {  // S
  1163.             window.MOD_Seiga.saveScreenshot();
  1164.           }
  1165.         });
  1166.       },
  1167.       initializeSaveScreenshotRequest: function() {
  1168.         const $body = $('body');
  1169.         const $iframe = $('<iframe allowfullscreen="on" class="saveScreenshotFrame" name="saveScreenshotFrame"></iframe>');
  1170.         $iframe[0].srcdoc = '';
  1171.         $body.append($iframe);
  1172.  
  1173.         const $saveButton = $([
  1174.           '<button class="saveScreenshot btn normal" title="画像を保存(Sキー)">',
  1175.             '<span>画像を保存</span>',
  1176.           '</button>',
  1177.           ''].join(''));
  1178.         $('.illust_main .illust_wrapper .inner .thum_large:first').append($saveButton);
  1179.  
  1180.         $saveButton.on('click', (e) => {
  1181.           e.preventDefault();
  1182.           e.stopPropagation();
  1183.           $iframe[0].contentWindow.location.replace($('#illust_link').attr('href'));
  1184.           //window.open(
  1185.           //  $('#illust_link').attr('href'),
  1186.           //  'saveScreenshotFrame',
  1187.           //  'width=400, height=300, personalbar=0, toolbar=0, scrollbars=1, sizable=1');
  1188.         });
  1189.         $(window).on('beforeunload', () => {
  1190.           $iframe.remove();
  1191.           $iframe[0].srcdoc = '';
  1192.         });
  1193.  
  1194.         $('body').on('keydown', (e) => {
  1195.           if (e.target.tagName === 'SELECT' || e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
  1196.             return;
  1197.           }
  1198.           if (e.keyCode === 83) {  // S
  1199.             $saveButton.click();
  1200.           }
  1201.         });
  1202.       },
  1203.       initializePrintCss: function($img) {
  1204.         this.initializePrintCss = function() {};
  1205.         var self = this;
  1206.  
  1207.         $img.css({
  1208.           width: 'auto', height: 'auto',
  1209.           transform: '', left: '100%', top: '100%', opacity: 0, position: 'fixed'
  1210.         });
  1211.  
  1212.         var $body = $('body');
  1213.         $body.append($img);
  1214.  
  1215.         window.setTimeout(function() {
  1216.           var width = $img.outerWidth(), height = $img.outerHeight();
  1217.           $img.remove();
  1218.  
  1219.           // TODO: 用紙サイズ変更
  1220.           var paperMarginV = 0.1; // 19; // 紙送りマージン？
  1221.           var imageRatio = height / Math.max(width, 1);
  1222.           var paperRatio     = (A4_HEIGHT - paperMarginV) / A4_WIDTH;
  1223.           var landscapeRatio = (A4_WIDTH  - paperMarginV) / A4_HEIGHT;
  1224.           var isLandscape =
  1225.             Math.abs(paperRatio - imageRatio) > Math.abs(landscapeRatio - imageRatio);
  1226.  
  1227.           paperRatio = isLandscape ? landscapeRatio : paperRatio;
  1228.  
  1229.           var isFitV = paperRatio < imageRatio;
  1230.           var paperWidth  = isLandscape ? A4_HEIGHT : A4_WIDTH;
  1231.           var paperHeight = (isLandscape ? A4_WIDTH : A4_HEIGHT) - paperMarginV;
  1232.           var marginLeft = 0, marginTop = 0, imageWidth = paperWidth, imageHeight = paperHeight;
  1233.  
  1234.           if (isFitV) { // タテ合わせ
  1235.             imageWidth = paperHeight / imageRatio;
  1236.             marginLeft = (paperWidth - imageWidth) / 2;
  1237.           } else { // ヨコ合わせ
  1238.             imageHeight = paperWidth * imageRatio;
  1239.             marginTop = (paperHeight - imageHeight) / 2;
  1240.           }
  1241.           var pageSize = isLandscape ? 'A4 lanscape' : 'A4';
  1242.           var css = [
  1243.               '@page { margin: 0; size: ', pageSize, '; }\n\n ',
  1244.               '@media print {\n',
  1245.                 '\t.MOD_Seiga_FullView .illust_view_big img {\n  ',
  1246.                   '\t\tmargin-left: ', marginLeft, 'mm; ',
  1247.                   '\t\tmargin-top: ', marginTop, 'mm; ',
  1248.                   '\t\twidth:',  imageWidth,  'mm !important; ',
  1249.                   '\t\theight:', imageHeight, 'mm !important;',
  1250.                 '\t\n}\n',
  1251.               '}',
  1252.             ].join('');
  1253.  
  1254.           //console.log('paper?', paperWidth, paperHeight, imageWidth, imageHeight);
  1255.           //console.log('ratio?', width, height, isLandscape, paperRatio, imageRatio);
  1256.           console.log('print css\n', css);
  1257.  
  1258.           self._printCss = self.addStyle(css, 'MOD_Seiga_print');
  1259.           $body
  1260.             .toggleClass('landscape', isLandscape)
  1261.             .toggleClass('fitV', isFitV);
  1262.         }, 100);
  1263.       }
  1264.     };
  1265.  
  1266.     const toSafeName = function(text) {
  1267.       text = text.trim()
  1268.         .replace(/</g, '＜')
  1269.         .replace(/>/g, '＞')
  1270.         .replace(/\?/g, '？')
  1271.         .replace(/:/g, '：')
  1272.         .replace(/\|/g, '｜')
  1273.         .replace(/\//g, '／')
  1274.         .replace(/\\/g, '￥')
  1275.         .replace(/"/g, '”')
  1276.         .replace(/\./g, '．')
  1277.         ;
  1278.       return text;
  1279.     };
  1280.  
  1281.     window.MOD_Seiga.saveScreenshot = function() {
  1282.       const div = document.querySelector('.illust_view_big');
  1283.       const img = div.querySelector('.illust_view_big img');
  1284.       window.console.info('img', img, div, document.querySelectorAll('img'));
  1285.       const illustId =
  1286.         (div.getAttribute('data-watch_url') || '').split('/')[4];
  1287.       window.console.info('illustId', illustId);
  1288.       const title = toSafeName(document.title);
  1289.       const fileName = `${illustId}-${title}`;
  1290.       window.console.info('fileName', fileName);
  1291.  
  1292.       const link = document.createElement('a');
  1293.       link.download = fileName;
  1294.       link.href = img.src;
  1295.       link.textContent = 'save image';
  1296.       document.body.appendChild(link);
  1297.       link.click();
  1298.        link.remove();
  1299.       window.setTimeout(() => {
  1300.         if (window.name === 'saveScreenshotFrame') {
  1301.           location.replace('/favicon.ico');
  1302.         }
  1303.       }, 0);
  1304.     };
  1305.  
  1306.     window.MOD_Seiga.initialize();
  1307.     if (window.name === 'saveScreenshotFrame') {
  1308.       window.console.info('saveScreenshot', window.name);
  1309.       window.MOD_Seiga.saveScreenshot();
  1310.     }
  1311.   });
  1312.  
  1313.   var script = document.createElement("script");
  1314.   script.id = "MOD_SeigaLoader";
  1315.   script.setAttribute("type", "text/javascript");
  1316.   script.setAttribute("charset", "UTF-8");
  1317.   script.appendChild(document.createTextNode("(" + monkey + ")()"));
  1318.   document.body.appendChild(script);
  1319.  
  1320. })();