☰

LibImgDown

WEBのダウンロードライブラリ

As of 2025-03-25. See the latest version.

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greatest.deepsurf.us/scripts/528949/1559807/LibImgDown.js 

  1. /*
  2.  * Dependencies:
  3.  
  4.  * GM_info(optional)
  5.  * Docs: https://violentmonkey.github.io/api/gm/#gm_info
  6.  
  7.  * GM_xmlhttpRequest(optional)
  8.  * Docs: https://violentmonkey.github.io/api/gm/#gm_xmlhttprequest
  9.  
  10.  * JSZIP
  11.  * Github: https://github.com/Stuk/jszip
  12.  * CDN: https://unpkg.com/jszip@3.7.1/dist/jszip.min.js
  13.  
  14.  * FileSaver
  15.  * Github: https://github.com/eligrey/FileSaver.js
  16.  * CDN: https://unpkg.com/file-saver@2.0.5/dist/FileSaver.min.js
  17.  */
  18. ;
  19. const ImageDownloader = (({ JSZip, saveAs }) => {
  20.     let maxNum = 0;
  21.     let promiseCount = 0;
  22.     let fulfillCount = 0;
  23.     let isErrorOccurred = false;
  24.     let createFolder = false;
  25.     let folderName = "images";
  26.     let zipFileName = "download.zip";
  27.     let zip = null; // ZIPオブジェクトの初期化
  28.     let imageDataArray = []; //imageDataArrayの初期化
  29.     // elements
  30.     let startNumInputElement = null;
  31.     let endNumInputElement = null;
  32.     let downloadButtonElement = null;
  33.     let panelElement = null;
  34.     let folderRadioYes = null;
  35.     let folderRadioNo = null;
  36.     let folderNameInput = null;
  37.     let zipFileNameInput = null;
  38.  
  39.     // 初期化関数
  40.     function init({
  41.         maxImageAmount,
  42.         getImagePromises,
  43.         title = `package_${Date.now()}`,
  44.         WidthText = 0,
  45.         HeightText = 0,
  46.         imageSuffix = 'jpg',
  47.         zipOptions = {},
  48.         positionOptions = {}
  49.     }) {
  50.         // 値を割り当てる
  51.         maxNum = maxImageAmount;
  52.         // UIをセットアップする
  53.         setupUI(positionOptions, title, WidthText, HeightText);
  54.         // ダウンロードボタンにクリックイベントリスナーを追加
  55.         downloadButtonElement.onclick = function () {
  56.             if (!isOKToDownload()) return;
  57.  
  58.             this.disabled = true;
  59.             this.textContent = "処理中"; // Processing → 処理中
  60.             this.style.backgroundColor = '#aaa';
  61.             this.style.cursor = 'not-allowed';
  62.  
  63.             download(getImagePromises, title, imageSuffix, zipOptions);
  64.         };
  65.     }
  66.  
  67. // スタイルを定義
  68. const style = document.createElement('style');
  69. style.textContent = `
  70.     .input-element {
  71.         box-sizing: content-box;
  72.         padding: 1px 1px;
  73.         width: 34px;
  74.         height: 26px;
  75.         border: 1px solid #aaa;
  76.         border-radius: 4px;
  77.         font-family: 'Consolas', 'Monaco';
  78.         font-size: 14px;
  79.         text-align: center;
  80.     }
  81.     .button-element {
  82.         margin-top: 8px;
  83.         margin-left: auto;
  84.         width: 128px;
  85.         height: 48px;
  86.         padding: 5px 5px;
  87.         display: block;
  88.         justify-content: center;
  89.         align-items: center;
  90.         font-size: 14px;
  91.         font-family: 'BIZ UDPゴシック', 'Arial';
  92.         color: #fff;
  93.         line-height: 1.2;
  94.         background-color: #0984e3;
  95.         border: 3px solidrgb(0, 0, 0);
  96.         border-radius: 4px;
  97.         cursor: pointer;
  98.     }
  99.     .toggle-button {
  100.         position: fixed;
  101.         top: 45px;
  102.         left: 5px;
  103.         z-index: 999999999;
  104.         padding: 2px 5px;
  105.         font-size: 14px;
  106.         font-weight: bold;
  107.         font-family: 'Monaco', 'Microsoft YaHei';
  108.         color: #fff;
  109.         background-color: #000000;
  110.         border: 1px solid #aaa;
  111.         border-radius: 4px;
  112.         cursor: pointer;
  113.     }
  114.     .panel-element {
  115.         position: fixed;
  116.         top: 80px;
  117.         left: 5px;
  118.         z-index: 999999999;
  119.         box-sizing: border-box;
  120.         padding: 0px;
  121.         width: auto;
  122.         min-width: 400px;
  123.         max-width: 600px;
  124.         height: auto;
  125.         display: none;
  126.         flex-direction: column;
  127.         justify-content: center;
  128.         align-items: baseline;
  129.         font-size: 14px;
  130.         font-family: 'Consolas', 'Monaco', 'Microsoft YaHei';
  131.         letter-spacing: normal;
  132.         background-color: #f1f1f1;
  133.         border: 1px solid #aaa;
  134.         border-radius: 4px;
  135.     }
  136.     .range-container, .radio-container {
  137.         display: flex;
  138.         justify-content: center;
  139.         align-items: baseline;
  140.     }
  141.     .textarea-element {
  142.         box-sizing: content-box;
  143.         padding: 1px 0px;
  144.         width: 99%;
  145.         min-height: 45px;
  146.         max-height: 200px;
  147.         border: 1px solid #aaa;
  148.         border-radius: 1px;
  149.         font-size: 11px;
  150.         font-family: 'Consolas', 'Monaco', 'Microsoft YaHei';
  151.         text-align: left;
  152.         resize: vertical;
  153.         height: auto;
  154.     }
  155.     .to-span {
  156.         margin: 0 6px;
  157.         color: black;
  158.         line-height: 1;
  159.         word-break: keep-all;
  160.         user-select: none;
  161.     }
  162. `;
  163. document.head.appendChild(style);
  164.  
  165. // UIセットアップ関数
  166. function setupUI(positionOptions, title, WidthText, HeightText) {
  167.     title = sanitizeFileName(title);
  168.  
  169.     // トグルボタンの作成
  170.     const toggleButton = document.createElement('button');
  171.     toggleButton.id = 'ImageDownloader-ToggleButton';
  172.     toggleButton.className = 'toggle-button';
  173.     toggleButton.textContent = 'UI OPEN';
  174.     document.body.appendChild(toggleButton);
  175.     let isUIVisible = false; // 初期状態を非表示に設定
  176.     function toggleUI() {
  177.         if (isUIVisible) {
  178.             panelElement.style.display = 'none';
  179.             toggleButton.textContent = 'UI OPEN';
  180.         } else {
  181.             panelElement.style.display = 'flex';
  182.             toggleButton.textContent = 'UI CLOSE';
  183.         }
  184.         isUIVisible = !isUIVisible;
  185.     }
  186.     toggleButton.addEventListener('click', toggleUI);
  187.  
  188.     // パネル要素の作成
  189.     panelElement = document.createElement('div');
  190.     panelElement.id = 'ImageDownloader-Panel';
  191.     panelElement.className = 'panel-element';
  192.     // 「positionOptions」に従ってパネルの位置を変更する。
  193.     for (const [key, value] of Object.entries(positionOptions)) {
  194.         if (key === 'top' || key === 'bottom' || key === 'left' || key === 'right') {
  195.             panelElement.style[key] = value;
  196.         }
  197.     }
  198.  
  199.     // 開始番号入力欄の作成
  200.     startNumInputElement = document.createElement('input');
  201.     startNumInputElement.id = 'ImageDownloader-StartNumInput';
  202.     startNumInputElement.className = 'input-element';
  203.     startNumInputElement.type = 'text';
  204.     startNumInputElement.value = 1;
  205.  
  206.     // 終了番号入力欄の作成
  207.     endNumInputElement = document.createElement('input');
  208.     endNumInputElement.id = 'ImageDownloader-EndNumInput';
  209.     endNumInputElement.className = 'input-element';
  210.     endNumInputElement.type = 'text';
  211.     endNumInputElement.value = maxNum;
  212.  
  213.     // キーボード入力がブロックされないようにする
  214.     startNumInputElement.onkeydown = (e) => e.stopPropagation();
  215.     endNumInputElement.onkeydown = (e) => e.stopPropagation();
  216.  
  217.     // 「to」スパン要素の作成
  218.     const toSpanElement = document.createElement('span');
  219.     toSpanElement.id = 'ImageDownloader-ToSpan';
  220.     toSpanElement.className = 'to-span';
  221.     toSpanElement.textContent = 'から'; // to → から
  222.  
  223.     // ダウンロードボタン要素の作成
  224.     downloadButtonElement = document.createElement('button');
  225.     downloadButtonElement.id = 'ImageDownloader-DownloadButton';
  226.     downloadButtonElement.className = 'button-element';
  227.     downloadButtonElement.textContent = 'ダウンロード'; // Download → ダウンロード
  228.  
  229.     // 範囲入力コンテナ要素の作成
  230.     const rangeInputContainerElement = document.createElement('div');
  231.     rangeInputContainerElement.id = 'ImageDownloader-RangeInputContainer';
  232.     rangeInputContainerElement.className = 'range-container';
  233.  
  234.     // ラジオボタンコンテナ要素の作成
  235.     const rangeInputRadioElement = document.createElement('div');
  236.     rangeInputRadioElement.id = 'ImageDownloader-RadioChecker';
  237.     rangeInputRadioElement.className = 'radio-container';
  238.  
  239.     // ラジオボタンを作成(フォルダ選択用'YES')
  240.     folderRadioYes = document.createElement('input');
  241.     folderRadioYes.type = 'radio';
  242.     folderRadioYes.name = 'createFolder';
  243.     folderRadioYes.value = 'yes';
  244.     folderRadioYes.id = 'createFolderYes';
  245.  
  246.      // ラジオボタンを作成(フォルダ選択用'No')
  247.     folderRadioNo = document.createElement('input');
  248.     folderRadioNo.type = 'radio';
  249.     folderRadioNo.name = 'createFolder';
  250.     folderRadioNo.value = 'no';
  251.     folderRadioNo.id = 'createFolderNo';
  252.     folderRadioNo.checked = true;
  253.  
  254.     // フォルダ名入力欄の作成
  255.     folderNameInput = document.createElement('textarea');
  256.     folderNameInput.id = 'folderNameInput';
  257.     folderNameInput.className = 'textarea-element';
  258.     folderNameInput.value = title; // 初期値としてタイトルを使用
  259.     folderNameInput.disabled = true;
  260.  
  261.     // ZIPファイル名入力欄の作成
  262.     zipFileNameInput = document.createElement('textarea');
  263.     zipFileNameInput.id = 'zipFileNameInput';
  264.     zipFileNameInput.className = 'textarea-element';
  265.     zipFileNameInput.value = `${title}.zip`; // titleを使用してZIPファイル名を設定
  266.     
  267.     // ラジオボタンのイベントリスナーを追加
  268.     folderRadioYes.addEventListener('change', () => {
  269.         createFolder = true;
  270.         folderNameInput.disabled = false; // フォルダ名入力欄を有効化
  271.     });
  272.     folderRadioNo.addEventListener('change', () => {
  273.         createFolder = false;
  274.         folderNameInput.disabled = true; // フォルダ名入力欄を無効化
  275.     });
  276.  
  277.     // 組み立ててドキュメントに挿入
  278.     rangeInputContainerElement.appendChild(startNumInputElement);
  279.     rangeInputContainerElement.appendChild(toSpanElement);
  280.     rangeInputContainerElement.appendChild(endNumInputElement);
  281.     panelElement.appendChild(rangeInputContainerElement);
  282.     rangeInputRadioElement.appendChild(document.createTextNode('フォルダ作成:'));
  283.     rangeInputRadioElement.appendChild(folderRadioYes);
  284.     rangeInputRadioElement.appendChild(document.createTextNode('する '));
  285.     rangeInputRadioElement.appendChild(folderRadioNo);
  286.     rangeInputRadioElement.appendChild(document.createTextNode('しない'));
  287.     panelElement.appendChild(rangeInputRadioElement);
  288.     panelElement.appendChild(document.createTextNode('フォルダ名: '));
  289.     panelElement.appendChild(folderNameInput);
  290.     panelElement.appendChild(document.createTextNode('ZIPファイル名: '));
  291.     panelElement.appendChild(zipFileNameInput);
  292.     // サイズ情報の追加（条件付き）
  293.     if (WidthText > 0 && HeightText > 0) {
  294.         panelElement.appendChild(document.createTextNode(` サイズ: ${WidthText} x ${HeightText}`));
  295.     }
  296.     panelElement.appendChild(downloadButtonElement);
  297.     document.body.appendChild(panelElement);
  298. }
  299.  
  300.     // ページ番号が正しいか確認する関数
  301.     function isOKToDownload() {
  302.         const startNum = Number(startNumInputElement.value);
  303.         const endNum = Number(endNumInputElement.value);
  304.  
  305.         if (Number.isNaN(startNum) || Number.isNaN(endNum)) {
  306.             alert("正しい値を入力してください。\nPlease enter page numbers correctly.");
  307.             return false;
  308.         }
  309.         if (!Number.isInteger(startNum) || !Number.isInteger(endNum)) {
  310.             alert("ページ番号は整数である必要があります。\nPage numbers must be integers.");
  311.             return false;
  312.         }
  313.         if (startNum < 1 || endNum < 1) {
  314.             alert("ページ番号は1以上である必要があります。\nPage numbers must be greater than or equal to 1.");
  315.             return false;
  316.         }
  317.         if (startNum > maxNum || endNum > maxNum) {
  318.             alert(`ページ番号は最大値(${maxNum})以下である必要があります。\nPage numbers must not exceed ${maxNum}.`);
  319.             return false;
  320.         }
  321.         if (startNum > endNum) {
  322.             alert("開始ページ番号は終了ページ番号以下である必要があります。\nStart page number must not exceed end page number.");
  323.             return false;
  324.         }
  325.  
  326.         return true; // 全ての条件が満たされている場合、trueを返す
  327.     }
  328.  
  329.  
  330.     // ダウンロード処理の開始
  331.     async function download(getImagePromises, title, imageSuffix, zipOptions) {
  332.         const startNum = Number(startNumInputElement.value);
  333.         const endNum = Number(endNumInputElement.value);
  334.         promiseCount = endNum - startNum + 1;
  335.         // 画像のダウンロードを開始、同時リクエスト数の上限は4
  336.         let images = [];
  337.         for (let num = startNum; num <= endNum; num += 4) {
  338.             const from = num;
  339.             const to = Math.min(num + 3, endNum);
  340.             try {
  341.                 const result = await Promise.all(getImagePromises(from, to));
  342.                 images = images.concat(result);
  343.             } catch (error) {
  344.                 return; // cancel downloading
  345.             }
  346.         }
  347.  
  348.         // ZIPアーカイブのファイル構造を設定
  349.         JSZip.defaults.date = new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000);
  350.         zip = new JSZip();
  351.         const { folderName, zipFileName } = sanitizeInputs(folderNameInput, zipFileNameInput);
  352.         if (createFolder) {
  353.             const folder = zip.folder(folderName);
  354.             for (const [index, image] of images.entries()) {
  355.                 const filename = `${String(index + 1).padStart(3, '0')}.${imageSuffix}`;
  356.                 folder.file(filename, image, zipOptions);
  357.             }
  358.         } else {
  359.             for (const [index, image] of images.entries()) {
  360.                 const filename = `${String(index + 1).padStart(3, '0')}.${imageSuffix}`;
  361.                 zip.file(filename, image, zipOptions);
  362.             }
  363.         }
  364.  
  365.         // ZIP化を開始し、進捗状況を表示
  366.         const zipProgressHandler = (metadata) => { downloadButtonElement.innerHTML = `ZIP書庫作成中(${metadata.percent.toFixed()}%)`; };
  367.         const content = await zip.generateAsync({ type: "blob" }, zipProgressHandler);
  368.         // 「名前を付けて保存」ウィンドウを開く
  369.         saveAs(content, zipFileName);
  370.         // 全て完了
  371.         downloadButtonElement.textContent = "完了しました"; // Completed → 完了しました
  372.         downloadButtonElement.disabled = false;
  373.         downloadButtonElement.style.backgroundColor = '#0984e3';
  374.         downloadButtonElement.style.cursor = 'pointer';
  375.     }
  376.  
  377.     // ファイル名整形用の関数
  378.     function sanitizeFileName(str) {
  379.         return str.trim()
  380.             // 全角英数字を半角に変換
  381.             .replace(/[Ａ-Ｚａ-ｚ０-９]/g, s => String.fromCharCode(s.charCodeAt(0) - 0xFEE0))
  382.             // 連続する空白（全角含む）を半角スペース1つに統一
  383.             .replace(/[\s\u3000]+/g, ' ')
  384.             // 「!?」または「?!」を「⁉」に置換
  385.             .replace(/[!?][!?]/g, '⁉')
  386.             // 特定の全角記号を対応する半角記号に変換
  387.             .replace(/[！＃＄％＆’，．（）＋－＝＠＾＿｛｝]/g, s => {
  388.                 const from = '！＃＄％＆’，．（）＋－＝＠＾＿｛｝';
  389.                 const to = "!#$%&',.()+-=@^_{}";
  390.                 return to[from.indexOf(s)];
  391.             })
  392.             // ファイル名に使えない文字をハイフンに置換
  393.             .replace(/[\\/:*?"<>|]/g, '-');
  394.     }
  395.  
  396.     // folderNameとzipFileNameの整形処理関数
  397.     function sanitizeInputs(folderNameInput, zipFileNameInput) {
  398.         const folderName = sanitizeFileName(folderNameInput.value);
  399.         const zipFileName = sanitizeFileName(zipFileNameInput.value);
  400.         return { folderName, zipFileName };
  401.     }
  402.  
  403.     // プロミスが成功した場合の処理
  404.     function fulfillHandler(res) {
  405.         if (!isErrorOccurred) {
  406.             fulfillCount++;
  407.             downloadButtonElement.innerHTML = `処理中(${fulfillCount}/${promiseCount})`;
  408.         }
  409.         return res;
  410.     }
  411.  
  412.     // プロミスが失敗した場合の処理
  413.     function rejectHandler(err) {
  414.         isErrorOccurred = true;
  415.         console.error(err);
  416.         downloadButtonElement.textContent = 'エラーが発生しました'; // Error Occurred → エラーが発生しました
  417.         downloadButtonElement.style.backgroundColor = 'red';
  418.         return Promise.reject(err);
  419.     }
  420.  
  421.     return { init, fulfillHandler, rejectHandler };
  422. })(window);