{"id":15158,"date":"2026-10-08T23:44:50","date_gmt":"2026-10-08T14:44:50","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?page_id=15158"},"modified":"2026-10-20T20:08:43","modified_gmt":"2026-10-20T11:08:43","slug":"imagetrim-converter","status":"publish","type":"page","link":"https:\/\/code-plus.jp\/gp\/tools\/imagetrim-converter\/","title":{"rendered":"\u753b\u50cf\u30c8\u30ea\u30df\u30f3\u30b0\u30c4\u30fc\u30eb\uff5c\u8907\u6570\u753b\u50cf\u306e\u4f59\u767d\u3092\u4e00\u62ec\u81ea\u52d5\u30c8\u30ea\u30df\u30f3\u30b0"},"content":{"rendered":"<!-- \u0f3b\u273f\ud835\udc0f\ud835\udc00\ud835\udc06\ud835\udc04\u0f3a -->\r\n\r\n<!-- \u0f3b.mezzala\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0a\uff09\u0f3a -->\r\n<hr class=\"spacer-mediano\" \/>\r\n\r\n<hr id=\"ch-TextConverter\" anchor \/>\r\n<div class=\"pg-saracnvtvkaa bg-hackingGate\">\r\n\r\n  <header class=\"page-header mx-auto\">\r\n    <!-- \u2756\u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8 --><div><!-- breadcrumb.php -->\n<style>\n\/* \u2756breadcrumb.leckermaul\uff08\u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8\uff09\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u0f1a\u0f36\u22b0\u27e1\u22b1\u0f36\u0f1a\u0f3a*\/\n.zaratan .breadcrumb.leckermaul {\n\twidth: 100%;\n\tmax-width: calc(var(--zvw,1vw) * 92.5);\n\tmargin-inline: auto;\n}\n\n.zaratan .breadcrumb.leckermaul :is(ul, ol) {\n\tmin-height: 3rem;\n\tline-height: initial;\n\tfont-size: 0;\n\tletter-spacing: 0;\n\toverflow: hidden;\n}\n\n.zaratan .breadcrumb.leckermaul li {\n\tdisplay: inline;\n\tline-height: 1.6;\n\tfont-size: clamp(0.775rem, calc(0.775rem + ((1vw - 0.225rem) * 0.1563)), 0.8750rem);\n}\n\n.zaratan .breadcrumb.leckermaul li>*,\n.zaratan .breadcrumb.leckermaul li::before {\n\tposition: relative;\n\ttop: 0.125em;\n\tdisplay: inline-flex;\n\talign-items: center;\n}\n\n.zaratan .breadcrumb.leckermaul a {\n\tdisplay: inline;\n\tcolor: var(--c-notice-600, hsl(240, 32%, 53%));\n\tmargin-right: .5em;\n}\n\n.zaratan .breadcrumb.leckermaul li:nth-of-type(n+2) a {\n\tmargin-left: .5em;\n}\n\n\/* \u73fe\u5728\u306e\u30da\u30fc\u30b8\uff08\u30ea\u30f3\u30af\u306a\u3057\u3002<span aria-current=\"page\">\uff09 *\/\n.zaratan .breadcrumb.leckermaul [aria-current=\"page\"] {\n\tdisplay: inline;\n\tmargin-inline: .5em;\n\tcolor: var(--c-base-600, hsl(224, 6%, 43%));\n}\n\n@media (any-hover:hover) {\n\t.zaratan .breadcrumb.leckermaul a:hover {\n\t\tcolor: var(--c-notice-600, hsl(240, 32%, 53%));\n\t}\n}\n\n\/* .ma-home *\/\n.zaratan .breadcrumb.leckermaul .ma-home {\n\tvertical-align: top;\n}\n\n\/* .separator *\/\n.zaratan .breadcrumb.leckermaul li:nth-of-type(n+2)::before,\n.zaratan .breadcrumb.leckermaul.chevron-right li:nth-of-type(n+2)::before {\n\tcontent: \">\";\n\tcolor: var(--c-notice-600, hsl(240, 32%, 53%))\n}\n\n.zaratan .breadcrumb.leckermaul.slash li:nth-of-type(n+2)::before {\n\tcontent: \"\/\";\n}\n\n.zaratan .breadcrumb.leckermaul.trigon-bullet li:nth-of-type(n+2)::before {\n\tcontent: \"\u2023\";\n}\n<\/style>\n\n\n<nav class=\"breadcrumb leckermaul py-0.5r mx-auto\" aria-label=\"\u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8\">\n  <ul class=\"breadcrumb-wrapper\">\n    <!-- \u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u3092\u8868\u793a -->\n    <li><a href=\"https:\/\/code-plus.jp\/gp\/\"><i><\/i>\u30c8\u30c3\u30d7<\/a><\/li>\n\n          <!-- \u56fa\u5b9a\u30da\u30fc\u30b8\uff08\u305d\u308c\u4ee5\u5916\uff09\uff1a \u5148\u7956\u30da\u30fc\u30b8\u540d\u3068\u3001\u73fe\u5728\u306e\u30da\u30fc\u30b8\u540d\u3092\u8868\u793a -->\n      <li><a href=\"https:\/\/code-plus.jp\/gp\/tools\/\">Web\u30c4\u30fc\u30eb\u4e00\u89a7\uff5cHTML\/CSS\u30fb\u6587\u66f8\u7de8\u96c6\u30fb\u753b\u50cf\u7de8\u96c6<\/a><\/li><li class=\"current_page_item\"><span aria-current=\"page\">\u753b\u50cf\u30c8\u30ea\u30df\u30f3\u30b0\u30c4\u30fc\u30eb\uff5c\u8907\u6570\u753b\u50cf\u306e\u4f59\u767d\u3092\u4e00\u62ec\u81ea\u52d5\u30c8\u30ea\u30df\u30f3\u30b0<\/span><\/li>    <!-- \/\/\/if (is_page()) -->\n\n  <\/ul>\n<\/nav><\/div>\r\n  <\/header><!-- \/\/\/.inheader -->\r\n\r\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\r\n  <section class=\"sect-cnvtVkaA-Intro\">\r\n    <header class=\"section__inheader mx-auto\">\r\n      <div class=\"hgroup-wrapper mb-0.5r\">\r\n        <h1 class=\"hdg-page d-iblock w-auto fz-xxl mb-0.25pc\"><span>\u753b\u50cf\u30c8\u30ea\u30df\u30f3\u30b0\u30c4\u30fc\u30eb\uff5c\u8907\u6570\u753b\u50cf\u306e\u4f59\u767d\u3092\u4e00\u62ec\u81ea\u52d5\u30c8\u30ea\u30df\u30f3\u30b0<\/span><\/h1>\r\n\r\n        <p class=\"rowgroup fl-right bdrs-0.25r mt-0.25r\">\r\n          <a class=\"badge is-outlined is-gray fz-xs\" href=\"#ch-Explanation\"><i class=\"icon mas ma-help\"><\/i>&nbsp;<span>\u4f7f\u3044\u65b9<\/span><\/a>\r\n          <a class=\"badge is-outlined is-gray fz-xs\" href=\"https:\/\/code-plus.jp\/gp\/tools\/imageext-converter\/\"><span>\u753b\u50cf\u5f62\u5f0f\u5909\u63db<\/span><\/a>\r\n          <a class=\"badge is-outlined is-gray fz-xs\" href=\"https:\/\/code-plus.jp\/gp\/tools\/imagetone-converter\/\"><span>\u30c8\u30fc\u30f3\u88dc\u6b63<\/span><\/a>\r\n          <a class=\"badge is-outlined is-gray fz-xs\" href=\"https:\/\/code-plus.jp\/gp\/tools\/imagetrim-converter\/\"><span>\u30c8\u30ea\u30df\u30f3\u30b0<\/span><\/a>\r\n          <a class=\"badge is-outlined is-gray fz-xs\" href=\"https:\/\/code-plus.jp\/gp\/tools\/imageupscale-converter\/\"><span>Lanczos\u62e1\u5927<\/span><\/a>\r\n        <\/p>\r\n\r\n        <p class=\"page-foreword fz-ss\">\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0&amp;\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3060\u3051\u3067\u3001\u80cc\u666f\u306e\u4f59\u767d\u3092\u81ea\u52d5\u3067\u30c8\u30ea\u30df\u30f3\u30b0\u3002<br>\u30d7\u30ec\u30d3\u30e5\u30fc\u3067\u4ed5\u4e0a\u304c\u308a\u3092\u78ba\u8a8d\u3057\u306a\u304c\u3089\u3001\u95be\u5024\u306e\u8abf\u6574\u30fb\u80cc\u666f\u306e\u900f\u904e\u5207\u308a\u629c\u304d\u30fb\u30ad\u30e3\u30f3\u30d0\u30b9\u306e px \u7e2e\u5c0f\u304c\u3067\u304d\u307e\u3059\u3002\u8907\u6570\u30d5\u30a1\u30a4\u30eb\u3092\u4e00\u62ec\u51e6\u7406\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3002<\/p>\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n    <\/header><!-- \/\/\/.inheader -->\r\n  <\/section>\r\n\r\n\r\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\r\n  <hr id=\"ch-Converter\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Converter contvis-auto\" style=\"contain-intrinsic-size:800px;\">\r\n    <div class=\"section__interior innerA fxd-row mx-auto\">\r\n      <figure class=\"section__leftlane\">\r\n        <div class=\"hgroup-wrapper\">\r\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30ed\u30c3\u30d7\u3057\u3066\u304f\u3060\u3055\u3044<\/span><\/h3>\r\n        <\/div><!-- \/\/\/.hgroup -->\r\n\r\n        <div class=\"chest-wrapper relatived\">\r\n          <div id=\"endropArea\" class=\"endrop-area\" style=\"height:17.5pc;\">\r\n            <div class=\"endrop-inner\">\r\n              <i class=\"endrop-icon\"><\/i>\r\n              <p class=\"endrop-text\">\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0&amp;\u30c9\u30ed\u30c3\u30d7<\/p>\r\n              <small class=\"endrop-smock\">\u307e\u305f\u306f \u30af\u30ea\u30c3\u30af\u3057\u3066\u9078\u629e\uff08\u8907\u6570\u53ef\uff09<\/small>\r\n            <\/div>\r\n            <input type=\"file\" id=\"fileInput\" class=\"file-input\" accept=\"image\/jpeg,image\/png,image\/webp\" multiple>\r\n          <\/div>\r\n          <ins id=\"decodedMessage\"><\/ins>\r\n        <\/div><!-- \/\/\/.chest -->\r\n\r\n        <!-- \u30aa\u30d7\u30b7\u30e7\u30f3 -->\r\n        <div class=\"colgroup w-full mt-1r\">\r\n          <h4 class=\"title is-outlined fz-sm\">\u51e6\u7406\u5185\u5bb9<\/h4>\r\n          <label class=\"label is-outlined fz-sm\"><input type=\"checkbox\" class=\"checkbox\" id=\"optTrim\" checked>\u4f59\u767d\u3092\u30c8\u30ea\u30df\u30f3\u30b0<\/label>\r\n          <label class=\"label is-outlined fz-sm\"><input type=\"checkbox\" class=\"checkbox\" id=\"optCutout\">\u80cc\u666f\u3092\u900f\u904e\u306b\u3059\u308b\uff08\u5207\u308a\u629c\u304d\uff09<\/label>\r\n        <\/div><!-- \/\/\/.colgroup -->\r\n\r\n        <div class=\"colgroup w-full mt-1r\">\r\n          <h4 class=\"title is-outlined fz-sm\">\u80cc\u666f\u306e\u5224\u5b9a<\/h4>\r\n          <label class=\"label is-outlined fz-sm\">\r\n            <p class=\"fz-sm\">\u80cc\u666f\u8272\uff1a<\/p>\r\n            <select id=\"bgMode\" class=\"select w-10e\">\r\n              <option value=\"auto\" selected>\u81ea\u52d5\uff08\u56db\u9685\u306e\u8272\uff09<\/option>\r\n              <option value=\"custom\">\u8272\u3092\u6307\u5b9a<\/option>\r\n            <\/select>\r\n            <input type=\"color\" id=\"bgColor\" value=\"#ffffff\" style=\"display:none;vertical-align:middle;\">\r\n          <\/label>\r\n          <label class=\"label is-outlined fz-sm\">\r\n            <p class=\"fz-sm\">\u95be\u5024\uff08\u8a31\u5bb9\u5dee\uff09\uff1a<\/p>\r\n            <input type=\"range\" id=\"toleranceRange\" min=\"0\" max=\"128\" value=\"10\" style=\"width:9em;vertical-align:middle;\">\r\n            <input type=\"number\" id=\"tolerance\" class=\"input w-5e\" value=\"10\" min=\"0\" max=\"255\">\r\n            <small class=\"fz-xs\" style=\"color:#999;\"> \u5927\u304d\u3044\u307b\u3069\u3001\u80cc\u666f\u306b\u8fd1\u3044\u8272\uff08\u5f71\u306a\u3069\uff09\u3082\u4f59\u767d\u3068\u307f\u306a\u3059<\/small>\r\n          <\/label>\r\n          <label class=\"label is-outlined fz-sm\">\r\n            <p class=\"fz-sm\">\u30ad\u30e3\u30f3\u30d0\u30b9\u7e2e\u5c0f\uff08px\uff09\uff1a<\/p>\r\n            <input type=\"number\" id=\"shrinkPx\" class=\"input w-5e\" value=\"0\" min=\"0\">&nbsp;px\r\n            <small class=\"fz-xs\" style=\"color:#999;\"> \u4e0a\u4e0b\u5de6\u53f3\u3092\u5185\u5074\u3078\u8a70\u3081\u308b<\/small>\r\n          <\/label>\r\n        <\/div><!-- \/\/\/.colgroup -->\r\n\r\n        <div class=\"colgroup w-full mt-1r\">\r\n          <h4 class=\"title is-outlined fz-sm\">\u51fa\u529b\u8a2d\u5b9a<\/h4>\r\n          <label class=\"label is-outlined fz-sm\">\r\n            <p class=\"fz-sm\">\u5f62\u5f0f\uff1a<\/p>\r\n            <select id=\"outFormat\" class=\"select w-10e\">\r\n              <option value=\"keep\" selected>\u5143\u306e\u5f62\u5f0f\u306e\u307e\u307e<\/option>\r\n              <option value=\"png\">PNG<\/option>\r\n              <option value=\"jpg\">JPG<\/option>\r\n              <option value=\"webp\">WebP<\/option>\r\n            <\/select>\r\n          <\/label>\r\n          <label class=\"label is-outlined fz-sm\">\r\n            <p class=\"fz-sm\">JPG \/ WebP \u54c1\u8cea\uff1a<\/p>\r\n            <select id=\"qualitySelect\" class=\"select w-10e\">\r\n              <option value=\"1.0\">100%\uff08\u6700\u9ad8\u753b\u8cea\uff09<\/option>\r\n              <option value=\"0.92\" selected>92%\uff08\u9ad8\u753b\u8cea\uff09<\/option>\r\n              <option value=\"0.85\">85%\uff08\u6a19\u6e96\uff09<\/option>\r\n              <option value=\"0.75\">75%\uff08\u3084\u3084\u5727\u7e2e\uff09<\/option>\r\n              <option value=\"0.60\">60%\uff08\u5727\u7e2e\u512a\u5148\uff09<\/option>\r\n            <\/select>\r\n          <\/label>\r\n          <label class=\"label is-outlined fz-sm\">\r\n            <p class=\"fz-sm\">\u30d5\u30a1\u30a4\u30eb\u540d\u306e\u672b\u5c3e\uff1a<\/p>\r\n            <input type=\"text\" id=\"nameSuffix\" class=\"input w-10e\" value=\"\" placeholder=\"\u4f8b: _trim\">\r\n          <\/label>\r\n          <label class=\"label is-outlined fz-sm\"><input type=\"checkbox\" class=\"checkbox\" id=\"optAutoDl\">\u30c9\u30ed\u30c3\u30d7\u3057\u305f\u3089\u3059\u3050\u81ea\u52d5\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\uff08\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u898b\u305a\u306b\u4fdd\u5b58\uff09<\/label>\r\n        <\/div><!-- \/\/\/.colgroup -->\r\n      <\/figure><!-- \/\/\/.leftlane -->\r\n\r\n      <figure class=\"section__centerlane\">\r\n        <aside class=\"sticky-sidebar fxd-column pc-center\" style=\"height:22rem;\">\r\n        <\/aside>\r\n      <\/figure><!-- \/\/\/.centerlane -->\r\n\r\n\r\n      <figure class=\"section__rightlane\">\r\n        <div class=\"chest-wrapper relatived\">\r\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u30d7\u30ec\u30d3\u30e5\u30fc<\/span><\/h3>\r\n          <div id=\"previewControls\" style=\"display:none;\" class=\"mb-0.5r\">\r\n            <label class=\"label is-outlined fz-sm\">\r\n              <p class=\"fz-sm\">\u8868\u793a\uff1a<\/p>\r\n              <select id=\"previewMode\" class=\"select w-10e\">\r\n                <option value=\"result\" selected>\u4ed5\u4e0a\u304c\u308a<\/option>\r\n                <option value=\"range\">\u5143\u753b\u50cf\uff0b\u5207\u308a\u53d6\u308a\u7bc4\u56f2<\/option>\r\n              <\/select>\r\n              <small class=\"fz-xs\" style=\"color:#999;\"> \u8a2d\u5b9a\u3092\u5909\u3048\u308b\u3068\u3001\u3059\u3050\u53cd\u6620\u3055\u308c\u307e\u3059<\/small>\r\n            <\/label>\r\n          <\/div>\r\n          <div id=\"resultArea\" style=\"min-height:17.5pc;overflow-y:auto;background:var(--color-bg-input,#f7f8f9);border:1px solid var(--color-border,#ddd);border-radius:4px;padding:0;\">\r\n            <div id=\"resultPlaceholder\" style=\"display:flex;align-items:center;justify-content:center;height:17.5pc;color:var(--color-text-muted,#aaa);font-size:14px;\">\r\n              \u753b\u50cf\u3092\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3068\u30d7\u30ec\u30d3\u30e5\u30fc\u304c\u8868\u793a\u3055\u308c\u307e\u3059\r\n            <\/div>\r\n            <div id=\"processingList\" style=\"display:none;\"><\/div>\r\n          <\/div>\r\n          <ins id=\"encodedMessage\"><\/ins>\r\n        <\/div><!-- \/\/\/.chest -->\r\n\r\n        <p id=\"downloadControls\" class=\"ta-center mt-1r\" style=\"display:none;\">\r\n          <button type=\"button\" id=\"downloadBtn\" class=\"button is-solided is-primary\">\u3059\u3079\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/button>\r\n        <\/p>\r\n      <\/figure><!-- \/\/\/.rightlane -->\r\n    <\/div><!-- \/\/\/.interior.fxd-row -->\r\n  <\/section>\r\n\r\n\r\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\r\n  <hr id=\"ch-Explanation\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Explanation pt-3r contvis-auto\" style=\"contain-intrinsic-size:800px;\">\r\n    <div class=\"section__interior innerA mx-auto scroll-fadeIn\">\r\n      <div class=\"box is-broad is-solided c-base-900\">\r\n        <h4 class=\"hdg-explanation fz-md mb-0.25pc\">\u4f7f\u3044\u65b9<\/h4>\r\n        <p class=\"fz-ss mb-1r\">\r\n          \u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0&amp;\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3068\u3001\u80cc\u666f\u306e\u4f59\u767d\u3092\u81ea\u52d5\u3067\u30c8\u30ea\u30df\u30f3\u30b0\u3057\u305f\u4ed5\u4e0a\u304c\u308a\u304c\u30d7\u30ec\u30d3\u30e5\u30fc\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u95be\u5024\u306a\u3069\u306e\u8a2d\u5b9a\u3092\u5909\u3048\u308b\u3068\u30d7\u30ec\u30d3\u30e5\u30fc\u306b\u3059\u3050\u53cd\u6620\u3055\u308c\u308b\u306e\u3067\u3001\u7d50\u679c\u3092\u78ba\u8a8d\u3057\u3066\u304b\u3089\u300c\u3059\u3079\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u300d\u3067\u4fdd\u5b58\u3057\u3066\u304f\u3060\u3055\u3044\u3002\r\n        <\/p>\r\n\r\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc mt-1r\">\ud83d\udca1 \u4e3b\u306a\u6a5f\u80fd<\/h5>\r\n        <ul class=\"fz-ss mb-1r\">\r\n          <li><b class=\"fw-600\">\u81ea\u52d5\u30c8\u30ea\u30df\u30f3\u30b0\uff1a<\/b> \u753b\u50cf\u306e\u56db\u9685\u306e\u8272\u3092\u80cc\u666f\u3068\u3057\u3066\u3001\u80cc\u666f\u4ee5\u5916\u304c\u5199\u3063\u3066\u3044\u308b\u7bc4\u56f2\u3060\u3051\u3092\u6b8b\u3057\u307e\u3059<\/li>\r\n          <li><b class=\"fw-600\">\u95be\u5024\uff08\u8a31\u5bb9\u5dee\uff09\uff1a<\/b> \u80cc\u666f\u8272\u3068\u306e\u5dee\u304c\u3053\u306e\u5024\u4ee5\u5185\u306a\u3089\u300c\u80cc\u666f\u300d\u3068\u307f\u306a\u3057\u307e\u3059\u3002\u5f71\u3084\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u304c\u3042\u3063\u3066\u5207\u308a\u6b8b\u3057\u304c\u51fa\u308b\u3068\u304d\u306f\u3001\u5024\u3092\u4e0a\u3052\u3066\u304f\u3060\u3055\u3044<\/li>\r\n          <li><b class=\"fw-600\">\u80cc\u666f\u306e\u5207\u308a\u629c\u304d\uff1a<\/b> \u753b\u50cf\u306e\u5916\u5468\u306b\u3064\u306a\u304c\u3063\u3066\u3044\u308b\u80cc\u666f\u3092\u900f\u660e\u306b\u3057\u3066\u3001PNG \/ WebP \u3067\u51fa\u529b\u3057\u307e\u3059<\/li>\r\n          <li><b class=\"fw-600\">\u30ad\u30e3\u30f3\u30d0\u30b9\u7e2e\u5c0f\uff08px\uff09\uff1a<\/b> \u30c8\u30ea\u30df\u30f3\u30b0\u5f8c\u306b\u3001\u4e0a\u4e0b\u5de6\u53f3\u3092\u6307\u5b9a\u3057\u305f px \u3060\u3051\u5185\u5074\u3078\u8a70\u3081\u307e\u3059\u3002\u5207\u308a\u629c\u304d\u5f8c\u306b\u6b8b\u308b\u7d30\u3044\u4f59\u767d\u306e\u9664\u53bb\u306b<\/li>\r\n          <li><b class=\"fw-600\">\u30d7\u30ec\u30d3\u30e5\u30fc\uff1a<\/b> \u4ed5\u4e0a\u304c\u308a\u3092\u3001\u900f\u904e\u90e8\u5206\u304c\u308f\u304b\u308b\u5e02\u677e\u6a21\u69d8\u306e\u4e0a\u306b\u8868\u793a\u3057\u307e\u3059\u3002\u300c\u5143\u753b\u50cf\uff0b\u5207\u308a\u53d6\u308a\u7bc4\u56f2\u300d\u306b\u5207\u308a\u66ff\u3048\u308b\u3068\u3001\u3069\u3053\u3092\u5207\u308a\u53d6\u308b\u304b\uff08\u8d64\u3044\u67a0\u306e\u5916\u5074\uff09\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059<\/li>\r\n          <li><b class=\"fw-600\">\u4e00\u62ec\u51e6\u7406\uff1a<\/b> \u8907\u6570\u30d5\u30a1\u30a4\u30eb\u3092\u307e\u3068\u3081\u3066\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3060\u3051\u3067\u3001\u3059\u3079\u3066\u540c\u3058\u8a2d\u5b9a\u3067\u51e6\u7406\u3057\u307e\u3059\u3002\u753b\u50cf\u3054\u3068\u306b\u300c\u3053\u306e\u753b\u50cf\u3060\u3051\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u300d\u3082\u3067\u304d\u307e\u3059<\/li>\r\n        <\/ul>\r\n\r\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc\">\ud83c\udf9a\ufe0f \u95be\u5024\u306e\u76ee\u5b89<\/h5>\r\n        <ul class=\"fz-ss mb-1r\">\r\n          <li><b class=\"fw-600\">0\u301c10\uff1a<\/b> \u5358\u8272\u306e\u80cc\u666f\uff08PNG \u306e\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u306a\u3069\uff09\u3002JPG \u306f\u30ce\u30a4\u30ba\u304c\u3042\u308b\u305f\u3081\u300110\u524d\u5f8c\u304c\u304a\u3059\u3059\u3081<\/li>\r\n          <li><b class=\"fw-600\">20\u301c50\uff1a<\/b> \u30a6\u30a3\u30f3\u30c9\u30a6\u306e\u5f71\u304c\u8584\u304f\u4ed8\u3044\u305f\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u3002\u5f71\u306e\u7aef\u3060\u3051\u524a\u308a\u305f\u3044\u3068\u304d<\/li>\r\n          <li><b class=\"fw-600\">50\u301c100\uff1a<\/b> \u6fc3\u3044\u5f71\u3054\u3068\u524a\u308a\u305f\u3044\u3068\u304d\u3002\u5927\u304d\u304f\u3057\u3059\u304e\u308b\u3068\u3001\u753b\u50cf\u306e\u7aef\u304c\u80cc\u666f\u306b\u8fd1\u3044\u8272\u306e\u5834\u5408\u306b\u3001\u305d\u3053\u3082\u524a\u308c\u307e\u3059<\/li>\r\n          <li>\u80cc\u666f\u8272\u3092\u81ea\u52d5\u3067\u5224\u5b9a\u3067\u304d\u306a\u3044\u3068\u304d\u306f\u3001\u300c\u80cc\u666f\u8272\u300d\u3067\u8272\u3092\u6307\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044<\/li>\r\n        <\/ul>\r\n\r\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc\">\ud83c\udfaf \u6d3b\u7528\u4f8b<\/h5>\r\n        <ul class=\"fz-ss mb-1r\">\r\n          <li><b class=\"fw-600\">\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u306e\u4f59\u767d\u30ab\u30c3\u30c8\uff1a<\/b> Photoshop \u30671\u679a\u305a\u3064\u958b\u3044\u3066\u300c\u30c8\u30ea\u30df\u30f3\u30b0\u300d\u3057\u3066\u3044\u305f\u4f5c\u696d\u3092\u3001\u30c9\u30ed\u30c3\u30d7\u3060\u3051\u3067\u4e00\u62ec\u51e6\u7406<\/li>\r\n          <li><b class=\"fw-600\">\u5f71\u4ed8\u304d\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\uff1a<\/b> \u95be\u5024\u3092\u4e0a\u3052\u3066\u5f71\u3054\u3068\u30c8\u30ea\u30df\u30f3\u30b0\u3001\u3055\u3089\u306b\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u6570 px \u7e2e\u3081\u3066\u7aef\u3092\u304d\u308c\u3044\u306b<\/li>\r\n          <li><b class=\"fw-600\">\u30ed\u30b4\u30fb\u5546\u54c1\u753b\u50cf\u306e\u5207\u308a\u629c\u304d\uff1a<\/b> \u5358\u8272\u80cc\u666f\u3092\u900f\u660e\u306b\u3057\u3066\u3001\u4f59\u767d\u3082\u307e\u3068\u3081\u3066\u9664\u53bb<\/li>\r\n        <\/ul>\r\n\r\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc\">\u26a0\ufe0f \u6ce8\u610f\u4e8b\u9805<\/h5>\r\n        <ul class=\"fz-ss\">\r\n          <li><b class=\"fw-600\">\u30d6\u30e9\u30a6\u30b6\u51e6\u7406\uff1a<\/b> \u3059\u3079\u3066\u306e\u51e6\u7406\u306f\u30d6\u30e9\u30a6\u30b6\u5185\u3067\u5b8c\u7d50\u3057\u307e\u3059\uff08\u30b5\u30fc\u30d0\u30fc\u306b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3055\u308c\u307e\u305b\u3093\uff09<\/li>\r\n          <li><b class=\"fw-600\">\u51e6\u7406\u306e\u9806\u5e8f\uff1a<\/b> \u80cc\u666f\u306e\u5207\u308a\u629c\u304d \u2192 \u30c8\u30ea\u30df\u30f3\u30b0 \u2192 \u30ad\u30e3\u30f3\u30d0\u30b9\u7e2e\u5c0f \u306e\u9806\u306b\u5b9f\u884c\u3057\u307e\u3059<\/li>\r\n          <li><b class=\"fw-600\">\u5bfe\u5fdc\u5165\u529b\u5f62\u5f0f\uff1a<\/b> JPG \/ PNG \/ WebP\uff08SVG \u306f\u975e\u5bfe\u5fdc\u3067\u3059\uff09<\/li>\r\n          <li><b class=\"fw-600\">\u5207\u308a\u629c\u304d\u306e\u7bc4\u56f2\uff1a<\/b> \u753b\u50cf\u306e\u5916\u5468\u306b\u3064\u306a\u304c\u3063\u3066\u3044\u308b\u80cc\u666f\u3060\u3051\u3092\u900f\u660e\u306b\u3057\u307e\u3059\u3002\u88ab\u5199\u4f53\u306e\u5185\u5074\u306b\u3042\u308b\u80cc\u666f\u8272\uff08\u7a74\u306e\u90e8\u5206\u306a\u3069\uff09\u306f\u6b8b\u308a\u307e\u3059\u3002\u5199\u771f\u306e\u3088\u3046\u306b\u80cc\u666f\u304c\u5358\u8272\u3067\u306a\u3044\u753b\u50cf\u306f\u3001AI \u306b\u3088\u308b\u80cc\u666f\u9664\u53bb\u304c\u5fc5\u8981\u3067\u3059<\/li>\r\n          <li><b class=\"fw-600\">JPG \u51fa\u529b\uff1a<\/b> JPG \u306f\u900f\u904e\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u306a\u3044\u305f\u3081\u3001\u80cc\u666f\u3092\u5207\u308a\u629c\u304f\u3068\u304d\u306f\u81ea\u52d5\u7684\u306b PNG \u3067\u51fa\u529b\u3057\u307e\u3059<\/li>\r\n          <li><b class=\"fw-600\">\u5909\u66f4\u304c\u306a\u3044\u753b\u50cf\uff1a<\/b> \u4f59\u767d\u304c\u306a\u304f\u3001\u5f62\u5f0f\u3082\u5909\u308f\u3089\u306a\u3044\u5834\u5408\u306f\u3001\u5143\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u305d\u306e\u307e\u307e\u51fa\u529b\u3057\u307e\u3059\uff08\u518d\u5727\u7e2e\u306b\u3088\u308b\u52a3\u5316\u306f\u3042\u308a\u307e\u305b\u3093\uff09<\/li>\r\n          <li><b class=\"fw-600\">\u30d5\u30a1\u30a4\u30eb\u540d\uff1a<\/b> \u5143\u306e\u540d\u524d\u3067\u51fa\u529b\u3057\u307e\u3059\u3002\u91cd\u8907\u3092\u907f\u3051\u305f\u3044\u3068\u304d\u306f\u300c\u30d5\u30a1\u30a4\u30eb\u540d\u306e\u672b\u5c3e\u300d\u306b\u6587\u5b57\u3092\u5165\u308c\u3066\u304f\u3060\u3055\u3044<\/li>\r\n          <li><b class=\"fw-600\">\u81ea\u52d5\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\uff1a<\/b> \u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u898b\u305a\u306b\u3001\u30c9\u30ed\u30c3\u30d7\u3057\u305f\u3089\u3059\u3050\u4fdd\u5b58\u3057\u305f\u3044\u3068\u304d\u306f\u300c\u30c9\u30ed\u30c3\u30d7\u3057\u305f\u3089\u3059\u3050\u81ea\u52d5\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u300d\u3092\u30aa\u30f3\u306b\u3057\u3066\u304f\u3060\u3055\u3044<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\r\n  <hr id=\"ch-Relation\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Relation\" style=\"contain-intrinsic-size:1000px;\">\r\n    <div class=\"section__interior innerA mx-auto scroll-fadeIn\">\r\n      <div class=\"hgroup-wrapper hgroupA mb-0.5pc\">\r\n        <h5 class=\"hdg-relation fz-rg\"><span>\u95a2\u9023\u30c4\u30fc\u30eb<\/span><\/h5>\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n\r\n      <ul class=\"shelf-wrapper_pc\" data-cols_pc=\"2\">\r\n        <li class=\"slide\">\r\n          <a href=\"https:\/\/code-plus.jp\/gp\/tools\/imagetone-converter\/\" class=\"linkbox my-1.5r\">\r\n            <h4 class=\"linkbox-title fz-md\">\u753b\u50cf\u30c8\u30fc\u30f3\u88dc\u6b63\u30c4\u30fc\u30eb | \u660e\u5ea6\u30fb\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u30fb\u8272\u8abf\u30fb\u5f69\u5ea6\u3092\u4e00\u62ec\u8abf\u6574<\/h4>\r\n            <picture class=\"linkbox-thumbnail\">\r\n              <img decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/26b03f372b188caaeb4d77ea5a76d0b4.jpg?ver=20261020200843\" alt=\"\u753b\u50cf\u30c8\u30fc\u30f3\u88dc\u6b63\u30c4\u30fc\u30eb | \u660e\u5ea6\u30fb\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u30fb\u8272\u8abf\u30fb\u5f69\u5ea6\u3092\u4e00\u62ec\u8abf\u6574\" loading=\"lazy\" \/>\r\n            <\/picture>\r\n            <span class=\"linkbox-excerpt\">\u8907\u6570\u306e\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0&amp;\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3060\u3051\u3067\u3001\u660e\u5ea6\u30fb\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u30fb\u8272\u8abf\u30fb\u5f69\u5ea6\u3092\u500b\u5225\u306b\u30d7\u30ec\u30d3\u30e5\u30fc\u8abf\u6574\u3002\u81ea\u52d5\u30c8\u30fc\u30f3\u88dc\u6b63\u306b\u3082\u5bfe\u5fdc\u3002JPG \/ PNG \/ WebP \u5f62\u5f0f\u3067\u4e00\u62ec\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3002\r\n            <\/span>\r\n          <\/a>\r\n        <\/li>\r\n        <li class=\"slide\">\r\n          <a href=\"https:\/\/code-plus.jp\/gp\/tools\/imageext-converter\/\" class=\"linkbox my-1.5r\">\r\n            <h4 class=\"linkbox-title fz-md\">\u753b\u50cf\u5f62\u5f0f\u5909\u63db\u30c4\u30fc\u30eb | JPG \/ PNG \/ WebP \/ SVG \u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u3001\u6307\u5b9a\u3057\u305f\u5f62\u5f0f\u306b\u4e00\u62ec\u5909\u63db<\/h4>\r\n            <picture class=\"linkbox-thumbnail\">\r\n              <img decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/fda82bfb-a6b5-4687-a4d2-3eb6c63678c9.jpeg?ver=20261020200843\" alt=\"\u753b\u50cf\u5f62\u5f0f\u5909\u63db\u30c4\u30fc\u30eb | JPG \/ PNG \/ WebP \/ SVG \u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u3001\u6307\u5b9a\u3057\u305f\u5f62\u5f0f\u306b\u4e00\u62ec\u5909\u63db\" loading=\"lazy\" \/>\r\n            <\/picture>\r\n            <span class=\"linkbox-excerpt\">JPG \/ PNG \/ WebP \/ SVG \u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0&amp;\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3060\u3051\u3067\u3001\u6307\u5b9a\u3057\u305f\u5f62\u5f0f\u306b\u4e00\u62ec\u5909\u63db\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3002\r\n            <\/span>\r\n          <\/a>\r\n        <\/li>\r\n      <\/ul><!-- \/\/\/.shelf -->\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n  <!-- \u0f3b\u00a7\ud835\udc03\ud835\udc04\ud835\udc0f\ud835\udc00\ud835\udc11\ud835\udc13\ud835\udc0c\ud835\udc04\ud835\udc0d\ud835\udc13\u0f3a -->\r\n\r\n  <section class=\"sect-cnvtVkaA-Relation2 pt-3r contvis-auto\" style=\"contain-intrinsic-size:800px;\">\r\n    <div class=\"section__interior innerA mx-auto scroll-fadeIn\">\r\n      <div class=\"hgroup-wrapper hgroupA mb-0.5pc\">\r\n\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n\r\n\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n  <!-- \u0f3b.mediano\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0b\uff09\u0f3a -->\r\n  <hr class=\"spacer-mezzala\" \/>\r\n\r\n<\/div><!-- \/\/\/\u25b2.page  -->\r\n\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  const endropArea = document.getElementById('endropArea');\r\n  const fileInput = document.getElementById('fileInput');\r\n  const resultPlaceholder = document.getElementById('resultPlaceholder');\r\n  const processingList = document.getElementById('processingList');\r\n  const previewControls = document.getElementById('previewControls');\r\n  const previewMode = document.getElementById('previewMode');\r\n  const downloadControls = document.getElementById('downloadControls');\r\n  const downloadBtn = document.getElementById('downloadBtn');\r\n  const encodedMessage = document.getElementById('encodedMessage');\r\n  const bgMode = document.getElementById('bgMode');\r\n  const bgColorInput = document.getElementById('bgColor');\r\n  const toleranceRange = document.getElementById('toleranceRange');\r\n  const toleranceInput = document.getElementById('tolerance');\r\n\r\n  if (!endropArea) return;\r\n\r\n  fileInput.style.display = 'none';\r\n  endropArea.style.cursor = 'pointer';\r\n\r\n  const PREVIEW_MAX_WIDTH = 640;\r\n\r\n  let items = [];          \/\/ \u8aad\u307f\u8fbc\u3093\u3060\u753b\u50cf { file, orig, data, w, h, card, ... }\r\n  let runToken = 0;        \/\/ \u53e4\u3044\u51e6\u7406\u3092\u6253\u3061\u5207\u308b\u305f\u3081\u306e\u756a\u53f7\r\n  let debounceTimer = null;\r\n\r\n\r\n  \/\/ ====================================\r\n  \/\/ \u30aa\u30d7\u30b7\u30e7\u30f3UI\uff08\u5909\u66f4\u3059\u308b\u3068\u3001\u30d7\u30ec\u30d3\u30e5\u30fc\u3078\u3059\u3050\u53cd\u6620\uff09\r\n  \/\/ ====================================\r\n\r\n  bgMode.addEventListener('change', function () {\r\n    bgColorInput.style.display = bgMode.value === 'custom' ? '' : 'none';\r\n  });\r\n\r\n  \/\/ \u95be\u5024\uff1a\u30b9\u30e9\u30a4\u30c0\u30fc\u3068\u6570\u5024\u5165\u529b\u3092\u540c\u671f\r\n  toleranceRange.addEventListener('input', function () {\r\n    toleranceInput.value = toleranceRange.value;\r\n  });\r\n  toleranceInput.addEventListener('input', function () {\r\n    const v = parseInt(toleranceInput.value, 10);\r\n    if (!isNaN(v)) toleranceRange.value = Math.min(v, parseInt(toleranceRange.max, 10));\r\n  });\r\n\r\n  ['optTrim', 'optCutout', 'bgMode', 'bgColor', 'toleranceRange', 'tolerance',\r\n   'shrinkPx', 'outFormat', 'nameSuffix', 'previewMode'].forEach(function (id) {\r\n    const el = document.getElementById(id);\r\n    el.addEventListener('input', scheduleUpdate);\r\n    el.addEventListener('change', scheduleUpdate);\r\n  });\r\n\r\n  function scheduleUpdate() {\r\n    if (items.length === 0) return;\r\n    clearTimeout(debounceTimer);\r\n    debounceTimer = setTimeout(function () { updateAll(); }, 120);\r\n  }\r\n\r\n\r\n  \/\/ ====================================\r\n  \/\/ \u30d5\u30a1\u30a4\u30eb\u5165\u529b\u30fb\u30c9\u30e9\u30c3\u30b0&\u30c9\u30ed\u30c3\u30d7\r\n  \/\/ ====================================\r\n\r\n  endropArea.addEventListener('click', function () { fileInput.click(); });\r\n\r\n  fileInput.addEventListener('change', function (e) {\r\n    if (e.target.files.length > 0) handleFiles(e.target.files);\r\n    fileInput.value = '';\r\n  });\r\n\r\n  endropArea.addEventListener('dragover', function (e) {\r\n    e.preventDefault(); e.stopPropagation();\r\n    this.style.backgroundColor = '#f0f0f0';\r\n    this.style.borderColor = '#999';\r\n  });\r\n  endropArea.addEventListener('dragleave', function (e) {\r\n    e.preventDefault(); e.stopPropagation();\r\n    this.style.backgroundColor = '';\r\n    this.style.borderColor = '';\r\n  });\r\n  endropArea.addEventListener('dragenter', function (e) {\r\n    e.preventDefault(); e.stopPropagation();\r\n  });\r\n  endropArea.addEventListener('drop', function (e) {\r\n    e.preventDefault(); e.stopPropagation();\r\n    this.style.backgroundColor = '';\r\n    this.style.borderColor = '';\r\n    if (e.dataTransfer.files.length > 0) handleFiles(e.dataTransfer.files);\r\n  });\r\n\r\n  downloadBtn.addEventListener('click', function () {\r\n    downloadAll();\r\n  });\r\n\r\n  async function handleFiles(files) {\r\n    const imageFiles = Array.from(files).filter(isImageFile);\r\n    if (imageFiles.length === 0) {\r\n      alert('\u5bfe\u5fdc\u3059\u308b\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\uff08JPG \/ PNG \/ WebP\uff09\u3092\u30c9\u30ed\u30c3\u30d7\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\r\n      return;\r\n    }\r\n\r\n    const myItems = imageFiles.map(function (file) {\r\n      return { file: file, orig: null, data: null, w: 0, h: 0, res: null, maskKey: '', error: '' };\r\n    });\r\n    items = myItems;\r\n    ++runToken;\r\n\r\n    processingList.innerHTML = '';\r\n    resultPlaceholder.style.display = 'none';\r\n    processingList.style.display = 'block';\r\n    previewControls.style.display = '';\r\n    downloadControls.style.display = 'none';\r\n\r\n    myItems.forEach(function (item) { createCard(item); });\r\n\r\n    const dropInner = endropArea.querySelector('.endrop-inner');\r\n    const originalContent = dropInner.innerHTML;\r\n    dropInner.innerHTML = '<p style=\"padding:20px;\">\u8aad\u307f\u8fbc\u307f\u4e2d...<\/p>';\r\n\r\n    \/\/ \u753b\u50cf\u30921\u679a\u305a\u3064\u8aad\u307f\u8fbc\u3080\r\n    for (const item of myItems) {\r\n      try {\r\n        await loadOriginal(item);\r\n      } catch (err) {\r\n        item.error = err && err.message ? err.message : '\u8aad\u307f\u8fbc\u307f\u306b\u5931\u6557\u3057\u307e\u3057\u305f';\r\n      }\r\n      if (items !== myItems) return; \/\/ \u65b0\u3057\u304f\u30c9\u30ed\u30c3\u30d7\u3055\u308c\u305f\r\n    }\r\n\r\n    await updateAll();\r\n    if (items !== myItems) return;\r\n\r\n    const okCount = myItems.filter(function (it) { return it.res && !it.res.error; }).length;\r\n    const ngCount = myItems.length - okCount;\r\n    downloadControls.style.display = okCount > 0 ? '' : 'none';\r\n\r\n    dropInner.innerHTML =\r\n      '<div style=\"padding:20px;\">' +\r\n      '<p style=\"color:#4CAF50;font-weight:bold;\">' + myItems.length + '\u500b\u306e\u753b\u50cf\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3057\u305f<\/p>' +\r\n      '<small style=\"color:#666;\">\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u78ba\u8a8d\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u304f\u3060\u3055\u3044<\/small><\/div>';\r\n    setTimeout(function () { dropInner.innerHTML = originalContent; }, 3000);\r\n\r\n    if (ngCount > 0) showMessage(ngCount + '\u500b\u306e\u753b\u50cf\u306f\u51e6\u7406\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f', false);\r\n\r\n    if (document.getElementById('optAutoDl').checked && okCount > 0) {\r\n      downloadAll();\r\n    }\r\n  }\r\n\r\n\r\n  \/\/ ====================================\r\n  \/\/ \u8a2d\u5b9a\u306e\u8aad\u307f\u53d6\u308a\r\n  \/\/ ====================================\r\n\r\n  function readOptions() {\r\n    const tol = parseInt(toleranceInput.value, 10);\r\n    const shrink = parseInt(document.getElementById('shrinkPx').value, 10);\r\n    const hex = bgColorInput.value || '#ffffff';\r\n    return {\r\n      trim: document.getElementById('optTrim').checked,\r\n      cutout: document.getElementById('optCutout').checked,\r\n      bgMode: bgMode.value,\r\n      bgColor: {\r\n        r: parseInt(hex.slice(1, 3), 16),\r\n        g: parseInt(hex.slice(3, 5), 16),\r\n        b: parseInt(hex.slice(5, 7), 16),\r\n        a: 255\r\n      },\r\n      tol: isNaN(tol) ? 10 : Math.max(0, Math.min(255, tol)),\r\n      shrink: isNaN(shrink) ? 0 : Math.max(0, shrink),\r\n      format: document.getElementById('outFormat').value,\r\n      quality: parseFloat(document.getElementById('qualitySelect').value),\r\n      suffix: document.getElementById('nameSuffix').value.trim(),\r\n      view: previewMode.value\r\n    };\r\n  }\r\n\r\n\r\n  \/\/ ====================================\r\n  \/\/ \u5168\u753b\u50cf\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u66f4\u65b0\r\n  \/\/ ====================================\r\n\r\n  async function updateAll() {\r\n    const myItems = items;\r\n    const token = ++runToken;\r\n    const o = readOptions();\r\n\r\n    for (const item of myItems) {\r\n      if (item.orig) {\r\n        try {\r\n          item.res = computeResult(item, o);\r\n        } catch (err) {\r\n          item.res = { error: err && err.message ? err.message : '\u51e6\u7406\u306b\u5931\u6557\u3057\u307e\u3057\u305f' };\r\n        }\r\n      }\r\n      renderCard(item, o);\r\n      \/\/ \u753b\u9762\u66f4\u65b0\u306e\u9699\u9593\u3092\u3064\u304f\u308b\r\n      await new Promise(function (r) { setTimeout(r, 0); });\r\n      if (token !== runToken || items !== myItems) return;\r\n    }\r\n  }\r\n\r\n\r\n  \/\/ ====================================\r\n  \/\/ \u753b\u50cf1\u679a\u306e\u51e6\u7406\uff08\u80cc\u666f\u5224\u5b9a \u2192 \u30c8\u30ea\u30df\u30f3\u30b0 \u2192 \u7e2e\u5c0f \u2192 \u5207\u308a\u629c\u304d\uff09\r\n  \/\/ ====================================\r\n\r\n  function loadOriginal(item) {\r\n    return loadImageFromFile(item.file).then(function (img) {\r\n      const w = img.naturalWidth;\r\n      const h = img.naturalHeight;\r\n      if (!w || !h) throw new Error('\u753b\u50cf\u30b5\u30a4\u30ba\u3092\u53d6\u5f97\u3067\u304d\u307e\u305b\u3093');\r\n      const canvas = document.createElement('canvas');\r\n      canvas.width = w;\r\n      canvas.height = h;\r\n      const ctx = canvas.getContext('2d', { willReadFrequently: true });\r\n      ctx.drawImage(img, 0, 0);\r\n      item.orig = canvas;\r\n      item.w = w;\r\n      item.h = h;\r\n      item.data = ctx.getImageData(0, 0, w, h).data; \/\/ \u5143\u306e\u30d4\u30af\u30bb\u30eb\uff08\u5909\u66f4\u3057\u306a\u3044\uff09\r\n    });\r\n  }\r\n\r\n  function computeResult(item, o) {\r\n    const w = item.w;\r\n    const h = item.h;\r\n\r\n    \/\/ \u80cc\u666f\u8272\u3068\u80cc\u666f\u9818\u57df\uff08\u80cc\u666f\u8272\u30fb\u95be\u5024\u304c\u540c\u3058\u306a\u3089\u3001\u524d\u56de\u306e\u7d50\u679c\u3092\u518d\u5229\u7528\uff09\r\n    const key = o.bgMode === 'auto'\r\n      ? 'auto|' + o.tol\r\n      : 'custom|' + o.bgColor.r + ',' + o.bgColor.g + ',' + o.bgColor.b + '|' + o.tol;\r\n    if (item.maskKey !== key) {\r\n      item.bg = o.bgMode === 'auto' ? detectBackground(item.data, w, h, o.tol) : o.bgColor;\r\n      item.mask = floodBackground(item.data, w, h, item.bg, o.tol);\r\n      item.bounds = findContentBounds(item.mask, w, h);\r\n      item.maskKey = key;\r\n    }\r\n    const bg = item.bg;\r\n    const bounds = item.bounds;\r\n    if (!bounds) {\r\n      return { error: '\u80cc\u666f\u4ee5\u5916\u306e\u9818\u57df\u304c\u3042\u308a\u307e\u305b\u3093\uff08\u95be\u5024\u304c\u5927\u304d\u3059\u304e\u308b\u53ef\u80fd\u6027\uff09', bg: bg };\r\n    }\r\n\r\n    \/\/ \u7bc4\u56f2\u306e\u6c7a\u5b9a\uff08\u30c8\u30ea\u30df\u30f3\u30b0 \u2192 \u7e2e\u5c0f\uff09\r\n    let box = o.trim ? bounds : { x: 0, y: 0, w: w, h: h };\r\n    if (o.shrink > 0) {\r\n      box = {\r\n        x: box.x + o.shrink,\r\n        y: box.y + o.shrink,\r\n        w: box.w - o.shrink * 2,\r\n        h: box.h - o.shrink * 2\r\n      };\r\n      if (box.w < 1 || box.h < 1) {\r\n        return { error: '\u7e2e\u5c0f\u91cf\u304c\u5927\u304d\u3059\u304e\u307e\u3059', bg: bg };\r\n      }\r\n    }\r\n\r\n    \/\/ \u51fa\u529b\u5f62\u5f0f\r\n    const origFormat = formatFromFile(item.file);\r\n    let format = o.format === 'keep' ? origFormat : o.format;\r\n    let note = '';\r\n    if (o.cutout && format === 'jpg') {\r\n      format = 'png';\r\n      note = 'JPG\u306f\u900f\u904e\u975e\u5bfe\u5fdc\u306e\u305f\u3081PNG\u3067\u51fa\u529b\u3057\u307e\u3059';\r\n    }\r\n\r\n    const baseName = item.file.name.replace(\/\\.[^.]+$\/, '');\r\n    const filename = baseName + o.suffix + '.' + format;\r\n    const changed = o.cutout || box.x !== 0 || box.y !== 0 || box.w !== w || box.h !== h;\r\n    const passthrough = !changed && format === origFormat;\r\n\r\n    if (!changed && !o.trim && !o.cutout && o.shrink === 0) {\r\n      note = note || '\u51e6\u7406\u5185\u5bb9\u304c\u9078\u3070\u308c\u3066\u3044\u307e\u305b\u3093';\r\n    } else if (passthrough) {\r\n      note = note || '\u4f59\u767d\u306a\u3057\uff08\u5143\u30d5\u30a1\u30a4\u30eb\u306e\u307e\u307e\u51fa\u529b\uff09';\r\n    }\r\n\r\n    const res = {\r\n      bg: bg, box: box, format: format, filename: filename, note: note,\r\n      passthrough: passthrough, out: null\r\n    };\r\n    if (passthrough) return res;\r\n\r\n    \/\/ \u51fa\u529b\u7528\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u4f5c\u308b\r\n    const out = document.createElement('canvas');\r\n    out.width = box.w;\r\n    out.height = box.h;\r\n    const octx = out.getContext('2d', { willReadFrequently: true });\r\n    if (format === 'jpg') {\r\n      octx.fillStyle = '#ffffff';\r\n      octx.fillRect(0, 0, box.w, box.h);\r\n    }\r\n    octx.drawImage(item.orig, box.x, box.y, box.w, box.h, 0, 0, box.w, box.h);\r\n\r\n    \/\/ \u5207\u308a\u629c\u304d\uff1a\u80cc\u666f\u3092\u900f\u660e\u306b\u3059\u308b\r\n    if (o.cutout) {\r\n      const od = octx.getImageData(0, 0, box.w, box.h);\r\n      const d = od.data;\r\n      const mask = item.mask;\r\n      for (let y = 0; y < box.h; y++) {\r\n        const maskRow = (box.y + y) * w + box.x;\r\n        const outRow = y * box.w;\r\n        for (let x = 0; x < box.w; x++) {\r\n          if (mask[maskRow + x]) d[(outRow + x) * 4 + 3] = 0;\r\n        }\r\n      }\r\n      octx.putImageData(od, 0, 0);\r\n    }\r\n    res.out = out;\r\n    return res;\r\n  }\r\n\r\n\r\n  \/\/ ====================================\r\n  \/\/ \u80cc\u666f\u5224\u5b9a\u30a2\u30eb\u30b4\u30ea\u30ba\u30e0\r\n  \/\/ ====================================\r\n\r\n  \/\/ 2\u3064\u306e\u8272\u306e\u5dee\uff08RGBA \u306e\u5404\u30c1\u30e3\u30f3\u30cd\u30eb\u5dee\u306e\u6700\u5927\u5024\uff09\r\n  function colorDiff(data, i, bg) {\r\n    const a = data[i + 3];\r\n    if (a === 0 && bg.a === 0) return 0; \/\/ \u3069\u3061\u3089\u3082\u5b8c\u5168\u900f\u660e\u306a\u3089\u540c\u8272\r\n    const dr = Math.abs(data[i] - bg.r);\r\n    const dg = Math.abs(data[i + 1] - bg.g);\r\n    const db = Math.abs(data[i + 2] - bg.b);\r\n    const da = Math.abs(a - bg.a);\r\n    return Math.max(dr, dg, db, da);\r\n  }\r\n\r\n  \/\/ \u56db\u9685\u306e\u3046\u3061\u3001\u3044\u3061\u3070\u3093\u591a\u304f\u306e\u9685\u3068\u4e00\u81f4\u3059\u308b\u8272\u3092\u80cc\u666f\u3068\u3059\u308b\r\n  function detectBackground(data, w, h, tol) {\r\n    const corners = [\r\n      0,\r\n      (w - 1) * 4,\r\n      ((h - 1) * w) * 4,\r\n      ((h - 1) * w + (w - 1)) * 4\r\n    ].map(function (i) {\r\n      return { r: data[i], g: data[i + 1], b: data[i + 2], a: data[i + 3], i: i };\r\n    });\r\n\r\n    let best = corners[0];\r\n    let bestCount = -1;\r\n    corners.forEach(function (c) {\r\n      let count = 0;\r\n      corners.forEach(function (d) {\r\n        if (colorDiff(data, d.i, c) <= tol) count++;\r\n      });\r\n      if (count > bestCount) { best = c; bestCount = count; }\r\n    });\r\n    return { r: best.r, g: best.g, b: best.b, a: best.a };\r\n  }\r\n\r\n  \/\/ \u753b\u50cf\u306e\u5916\u5468\u304b\u3089\u3001\u80cc\u666f\u8272\u306b\u8fd1\u3044\uff08\u8a31\u5bb9\u5dee\u4ee5\u5185\uff09\u30d4\u30af\u30bb\u30eb\u3092\u305f\u3069\u3063\u3066\u5857\u308a\u3064\u3076\u3059\r\n  function floodBackground(data, w, h, bg, tol) {\r\n    const total = w * h;\r\n    const mask = new Uint8Array(total);   \/\/ 1 = \u80cc\u666f\r\n    const stack = new Int32Array(total);  \/\/ 1\u30d4\u30af\u30bb\u30eb\u306f\u6700\u59271\u56de\u3060\u3051\u7a4d\u307e\u308c\u308b\r\n    let sp = 0;\r\n\r\n    function seed(p) {\r\n      if (mask[p] === 0 && colorDiff(data, p * 4, bg) <= tol) {\r\n        mask[p] = 1;\r\n        stack[sp++] = p;\r\n      }\r\n    }\r\n\r\n    for (let x = 0; x < w; x++) { seed(x); seed((h - 1) * w + x); }\r\n    for (let y = 0; y < h; y++) { seed(y * w); seed(y * w + (w - 1)); }\r\n\r\n    while (sp > 0) {\r\n      const p = stack[--sp];\r\n      const x = p % w;\r\n      if (x > 0) seed(p - 1);\r\n      if (x < w - 1) seed(p + 1);\r\n      if (p >= w) seed(p - w);\r\n      if (p < total - w) seed(p + w);\r\n    }\r\n    return mask;\r\n  }\r\n\r\n  \/\/ \u80cc\u666f\u4ee5\u5916\u306e\u30d4\u30af\u30bb\u30eb\u3092\u56f2\u3080\u6700\u5c0f\u306e\u77e9\u5f62\r\n  function findContentBounds(mask, w, h) {\r\n    let minX = w, minY = h, maxX = -1, maxY = -1;\r\n    for (let y = 0; y < h; y++) {\r\n      const row = y * w;\r\n      for (let x = 0; x < w; x++) {\r\n        if (mask[row + x] === 0) {\r\n          if (x < minX) minX = x;\r\n          if (x > maxX) maxX = x;\r\n          if (y < minY) minY = y;\r\n          if (y > maxY) maxY = y;\r\n        }\r\n      }\r\n    }\r\n    if (maxX < 0) return null;\r\n    return { x: minX, y: minY, w: maxX - minX + 1, h: maxY - minY + 1 };\r\n  }\r\n\r\n\r\n  \/\/ ====================================\r\n  \/\/ \u30d7\u30ec\u30d3\u30e5\u30fc\u30ab\u30fc\u30c9\r\n  \/\/ ====================================\r\n\r\n  function createCard(item) {\r\n    const card = document.createElement('div');\r\n    card.style.cssText = 'padding:12px;border-bottom:1px solid #e0e0e0;';\r\n\r\n    const nameEl = document.createElement('p');\r\n    nameEl.style.cssText = 'font-size:12px;font-weight:500;color:#555;margin:0 0 4px;word-break:break-all;';\r\n    nameEl.textContent = item.file.name;\r\n    card.appendChild(nameEl);\r\n\r\n    \/\/ \u900f\u904e\u304c\u308f\u304b\u308b\u3088\u3046\u306b\u3001\u5e02\u677e\u6a21\u69d8\u306e\u4e0a\u306b\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u7f6e\u304f\r\n    const frame = document.createElement('div');\r\n    frame.style.cssText = 'display:inline-block;max-width:100%;line-height:0;border-radius:3px;overflow:hidden;' +\r\n      'background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%),linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%);' +\r\n      'background-size:12px 12px;background-position:0 0,6px 6px;';\r\n    const canvas = document.createElement('canvas');\r\n    canvas.width = 1;\r\n    canvas.height = 1;\r\n    canvas.style.cssText = 'max-width:100%;height:auto;display:block;';\r\n    frame.appendChild(canvas);\r\n    card.appendChild(frame);\r\n\r\n    const info = document.createElement('div');\r\n    info.style.cssText = 'margin-top:6px;font-size:12px;color:#777;';\r\n    info.textContent = '\u8aad\u307f\u8fbc\u307f\u4e2d...';\r\n    card.appendChild(info);\r\n\r\n    const dlRow = document.createElement('div');\r\n    dlRow.style.cssText = 'margin-top:4px;font-size:12px;';\r\n    const dlLink = document.createElement('a');\r\n    dlLink.href = 'javascript:void(0);';\r\n    dlLink.textContent = '\u3053\u306e\u753b\u50cf\u3060\u3051\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9';\r\n    dlLink.style.cssText = 'text-decoration:underline;';\r\n    dlLink.addEventListener('click', function () {\r\n      downloadItems([item]);\r\n    });\r\n    dlRow.appendChild(dlLink);\r\n    card.appendChild(dlRow);\r\n\r\n    processingList.appendChild(card);\r\n    item.card = { root: card, frame: frame, canvas: canvas, info: info, dlRow: dlRow };\r\n  }\r\n\r\n  function renderCard(item, o) {\r\n    const c = item.card;\r\n    if (!c) return;\r\n\r\n    \/\/ \u8aad\u307f\u8fbc\u307f\u5931\u6557\r\n    if (item.error) {\r\n      c.frame.style.display = 'none';\r\n      c.dlRow.style.display = 'none';\r\n      c.info.innerHTML = '<span style=\"color:#e74c3c;\">\u274c ' + escapeHtml(item.error) + '<\/span>';\r\n      return;\r\n    }\r\n    const res = item.res;\r\n    if (!res) return;\r\n\r\n    c.frame.style.display = 'inline-block';\r\n\r\n    \/\/ \u51e6\u7406\u30a8\u30e9\u30fc\uff08\u80cc\u666f\u4ee5\u5916\u304c\u306a\u3044\u3001\u7e2e\u5c0f\u91cf\u304c\u5927\u304d\u3044 \u306a\u3069\uff09\r\n    if (res.error) {\r\n      drawBlank(c.canvas);\r\n      c.dlRow.style.display = 'none';\r\n      c.info.innerHTML = '<span style=\"color:#e74c3c;\">\u274c ' + escapeHtml(res.error) + '<\/span>';\r\n      return;\r\n    }\r\n\r\n    c.dlRow.style.display = '';\r\n    if (o.view === 'range') {\r\n      drawRange(c.canvas, item, res.box);\r\n    } else {\r\n      drawScaled(c.canvas, res.passthrough ? item.orig : res.out);\r\n    }\r\n\r\n    const sameSize = res.box.w === item.w && res.box.h === item.h;\r\n    const sizeText = sameSize\r\n      ? res.box.w + ' \u00d7 ' + res.box.h + ' px\uff08\u30b5\u30a4\u30ba\u5909\u66f4\u306a\u3057\uff09'\r\n      : item.w + ' \u00d7 ' + item.h + ' \u2192 <b>' + res.box.w + ' \u00d7 ' + res.box.h + '<\/b> px';\r\n    c.info.innerHTML =\r\n      '<span style=\"color:#27ae60;\">\u2705<\/span> ' + sizeText + '\u3000' + res.format.toUpperCase() +\r\n      '<br>\u80cc\u666f\u8272 <span style=\"display:inline-block;width:10px;height:10px;vertical-align:middle;border:1px solid #bbb;background:' +\r\n      (res.bg.a === 0 ? 'transparent' : 'rgb(' + res.bg.r + ',' + res.bg.g + ',' + res.bg.b + ')') + ';\"><\/span> ' + toHex(res.bg) +\r\n      (res.note ? '<br><span style=\"color:#999;\">' + escapeHtml(res.note) + '<\/span>' : '');\r\n  }\r\n\r\n  \/\/ \u4ed5\u4e0a\u304c\u308a\u753b\u50cf\u3092\u7e2e\u5c0f\u3057\u3066\u8868\u793a\r\n  function drawScaled(canvas, src) {\r\n    const scale = Math.min(1, PREVIEW_MAX_WIDTH \/ src.width);\r\n    canvas.width = Math.max(1, Math.round(src.width * scale));\r\n    canvas.height = Math.max(1, Math.round(src.height * scale));\r\n    const ctx = canvas.getContext('2d');\r\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n    ctx.imageSmoothingQuality = 'high';\r\n    ctx.drawImage(src, 0, 0, canvas.width, canvas.height);\r\n  }\r\n\r\n  \/\/ \u5143\u753b\u50cf\u306b\u5207\u308a\u53d6\u308a\u7bc4\u56f2\u3092\u91cd\u306d\u3066\u8868\u793a\uff08\u5916\u5074\u3092\u6697\u304f\u3057\u3066\u3001\u67a0\u7dda\u3092\u5f15\u304f\uff09\r\n  function drawRange(canvas, item, box) {\r\n    const scale = Math.min(1, PREVIEW_MAX_WIDTH \/ item.w);\r\n    const cw = Math.max(1, Math.round(item.w * scale));\r\n    const ch = Math.max(1, Math.round(item.h * scale));\r\n    canvas.width = cw;\r\n    canvas.height = ch;\r\n    const ctx = canvas.getContext('2d');\r\n    ctx.clearRect(0, 0, cw, ch);\r\n    ctx.imageSmoothingQuality = 'high';\r\n    ctx.drawImage(item.orig, 0, 0, cw, ch);\r\n\r\n    const bx = box.x * scale;\r\n    const by = box.y * scale;\r\n    const bw = box.w * scale;\r\n    const bh = box.h * scale;\r\n\r\n    ctx.fillStyle = 'rgba(0,0,0,0.55)';\r\n    ctx.fillRect(0, 0, cw, by);                         \/\/ \u4e0a\r\n    ctx.fillRect(0, by + bh, cw, ch - (by + bh));       \/\/ \u4e0b\r\n    ctx.fillRect(0, by, bx, bh);                        \/\/ \u5de6\r\n    ctx.fillRect(bx + bw, by, cw - (bx + bw), bh);      \/\/ \u53f3\r\n\r\n    ctx.strokeStyle = '#ff3b30';\r\n    ctx.lineWidth = 2;\r\n    ctx.setLineDash([6, 4]);\r\n    ctx.strokeRect(bx, by, bw, bh);\r\n    ctx.setLineDash([]);\r\n  }\r\n\r\n  function drawBlank(canvas) {\r\n    canvas.width = 240;\r\n    canvas.height = 60;\r\n    canvas.getContext('2d').clearRect(0, 0, 240, 60);\r\n  }\r\n\r\n\r\n  \/\/ ====================================\r\n  \/\/ \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\r\n  \/\/ ====================================\r\n\r\n  function downloadAll() {\r\n    downloadItems(items);\r\n  }\r\n\r\n  async function downloadItems(list) {\r\n    const o = readOptions();\r\n    const queue = [];\r\n    for (const item of list) {\r\n      const res = item.res;\r\n      if (!item.orig || !res || res.error) continue;\r\n      try {\r\n        let blob;\r\n        if (res.passthrough) {\r\n          blob = item.file; \/\/ \u5909\u66f4\u306a\u3057 \u2192 \u5143\u30d5\u30a1\u30a4\u30eb\u306e\u307e\u307e\uff08\u518d\u5727\u7e2e\u3057\u306a\u3044\uff09\r\n        } else {\r\n          const useQuality = (res.format === 'jpg' || res.format === 'webp') ? o.quality : undefined;\r\n          blob = await canvasToBlob(res.out, getMimeType(res.format), useQuality);\r\n        }\r\n        queue.push({ blob: blob, filename: res.filename });\r\n      } catch (err) {\r\n        console.error('\u66f8\u304d\u51fa\u3057\u30a8\u30e9\u30fc:', err);\r\n      }\r\n    }\r\n    if (queue.length === 0) {\r\n      showMessage('\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u308b\u753b\u50cf\u304c\u3042\u308a\u307e\u305b\u3093', false);\r\n      return;\r\n    }\r\n    sequentialDownload(queue, 0, function () {\r\n      showMessage(queue.length + '\u500b\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u307e\u3057\u305f', true);\r\n    });\r\n  }\r\n\r\n  \/\/ \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u30921\u4ef6\u305a\u3064\u9593\u9694\u3092\u3042\u3051\u3066\u5b9f\u884c\uff08\u30d6\u30e9\u30a6\u30b6\u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u5236\u9650\u56de\u907f\uff09\r\n  function sequentialDownload(queue, index, callback) {\r\n    if (index >= queue.length) {\r\n      if (callback) callback();\r\n      return;\r\n    }\r\n    downloadBlob(queue[index].blob, queue[index].filename);\r\n    setTimeout(function () {\r\n      sequentialDownload(queue, index + 1, callback);\r\n    }, 300);\r\n  }\r\n\r\n  function downloadBlob(blob, filename) {\r\n    const url = URL.createObjectURL(blob);\r\n    const a = document.createElement('a');\r\n    a.href = url;\r\n    a.download = filename;\r\n    document.body.appendChild(a);\r\n    a.click();\r\n    document.body.removeChild(a);\r\n    setTimeout(function () { URL.revokeObjectURL(url); }, 1000);\r\n  }\r\n\r\n\r\n  \/\/ ====================================\r\n  \/\/ \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\r\n  \/\/ ====================================\r\n\r\n  function loadImageFromFile(file) {\r\n    return new Promise(function (resolve, reject) {\r\n      const url = URL.createObjectURL(file);\r\n      const img = new Image();\r\n      img.onload = function () { URL.revokeObjectURL(url); resolve(img); };\r\n      img.onerror = function () { URL.revokeObjectURL(url); reject(new Error('\u753b\u50cf\u306e\u8aad\u307f\u8fbc\u307f\u306b\u5931\u6557\u3057\u307e\u3057\u305f')); };\r\n      img.src = url;\r\n    });\r\n  }\r\n\r\n  function canvasToBlob(canvas, mime, quality) {\r\n    return new Promise(function (resolve, reject) {\r\n      canvas.toBlob(function (blob) {\r\n        blob ? resolve(blob) : reject(new Error('\u753b\u50cf\u306e\u66f8\u304d\u51fa\u3057\u306b\u5931\u6557\u3057\u307e\u3057\u305f'));\r\n      }, mime, quality);\r\n    });\r\n  }\r\n\r\n  function isImageFile(file) {\r\n    return \/^image\\\/(jpeg|png|webp)$\/.test(file.type) ||\r\n      \/\\.(jpe?g|png|webp)$\/i.test(file.name);\r\n  }\r\n\r\n  function formatFromFile(file) {\r\n    if (file.type === 'image\/png' || \/\\.png$\/i.test(file.name)) return 'png';\r\n    if (file.type === 'image\/webp' || \/\\.webp$\/i.test(file.name)) return 'webp';\r\n    return 'jpg';\r\n  }\r\n\r\n  function getMimeType(format) {\r\n    return format === 'jpg' ? 'image\/jpeg' : format === 'webp' ? 'image\/webp' : 'image\/png';\r\n  }\r\n\r\n  function toHex(c) {\r\n    function h2(n) { return ('0' + n.toString(16)).slice(-2); }\r\n    return c.a === 0 ? '\u900f\u660e' : '#' + (h2(c.r) + h2(c.g) + h2(c.b)).toUpperCase();\r\n  }\r\n\r\n  function escapeHtml(str) {\r\n    return str.replace(\/&\/g, '&amp;').replace(\/<\/g, '&lt;').replace(\/>\/g, '&gt;').replace(\/\"\/g, '&quot;');\r\n  }\r\n\r\n  function showMessage(msg, isSuccess) {\r\n    if (!encodedMessage) return;\r\n\r\n    const cls = isSuccess ? 'is-primary' : 'is-caution';\r\n    const icon = isSuccess ? 'ma-check_circle' : 'ma-error';\r\n    const color = isSuccess ? 'primary' : 'error';\r\n\r\n    encodedMessage.innerHTML =\r\n      '<p class=\"alert is-ghosted ' + cls + ' mt-0.5r\">' +\r\n      '<i class=\"icon mas ' + icon + ' c-' + color + ' mr-0.5r\"><\/i>' +\r\n      '<span>' + msg + '<\/span><\/p>';\r\n\r\n    setTimeout(function () {\r\n      encodedMessage.innerHTML = '';\r\n    }, 3000);\r\n  }\r\n});\r\n<\/script>","protected":false},"excerpt":{"rendered":"\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0&#038;\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3060\u3051\u3067\u3001\u80cc\u666f\u306e\u4f59\u767d\u3092\u81ea\u52d5\u3067\u30c8\u30ea\u30df\u30f3\u30b0\u3002\u5f71\u304c\u3042\u3063\u3066\u3082\u95be\u5024\u3067\u8abf\u6574\u3067\u304d\u3001\u80cc\u666f\u306e\u900f\u904e\u5207\u308a\u629c\u304d\u3084\u30ad\u30e3\u30f3\u30d0\u30b9\u306e px \u7e2e\u5c0f\u306b\u3082\u5bfe\u5fdc\u3002\u8907\u6570\u30d5\u30a1\u30a4\u30eb\u3092\u4e00\u62ec\u51e6\u7406\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9","protected":false},"author":1,"featured_media":0,"parent":173,"menu_order":58,"comment_status":"closed","ping_status":"closed","template":"templates\/page-converter.php","meta":{"_acf_changed":false,"_exclude_from_list_pages":"","footnotes":"","vk-ltc-link":"","vk-ltc-target":"0"},"categories":[958,21],"tags":[],"group":[],"pg":[],"class_list":["post-15158","page","type-page","status-publish","category-mediaedit","category-tool"],"acf":[],"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/15158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=15158"}],"version-history":[{"count":6,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/15158\/revisions"}],"predecessor-version":[{"id":15505,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/15158\/revisions\/15505"}],"up":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/173"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=15158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=15158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=15158"},{"taxonomy":"group","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/group?post=15158"},{"taxonomy":"pg","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pg?post=15158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}