{"id":11073,"date":"2026-02-14T23:14:29","date_gmt":"2026-02-14T14:14:29","guid":{"rendered":"https:\/\/labo.com\/CraftBand\/?page_id=11073"},"modified":"2026-03-17T01:14:16","modified_gmt":"2026-03-16T16:14:16","slug":"square45-calc","status":"publish","type":"page","link":"https:\/\/labo.com\/CraftBand\/sharing\/square45-calc\/","title":{"rendered":"\u659c\u3081\u7de8\u307f(\u5317\u6b27\u7de8\u307f)\u306e\u30b5\u30a4\u30ba\u8a08\u7b97"},"content":{"rendered":"\n<ol class=\"wp-block-list\">\n<li>[B5\u6a2a][A4\u6a2a][B4\u6a2a]\u306e\u30dc\u30bf\u30f3\u3067\u304a\u304a\u3088\u305d\u306e\u30b5\u30a4\u30ba\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044\u3002<\/li>\n\n\n\n<li>\u305d\u306e\u30b5\u30a4\u30ba\u306b\u5fc5\u8981\u306a\u672c\u6570\u3084\u9577\u3055\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u5404\u6570\u5024\u3092Up\/Down\u3057\u3001\u4f5c\u308a\u305f\u3044\u30b5\u30a4\u30ba\u306b\u5408\u308f\u305b\u3066\u304f\u3060\u3055\u3044\u3002<\/li>\n\n\n\n<li>[\u5c55\u958b\u56f3\u3092\u66f4\u65b0]\u30dc\u30bf\u30f3\u3067\u56f3\u304c\u8868\u793a\u3055\u308c\u3001PDF\u3068\u3057\u3066\u53d6\u308a\u51fa\u305b\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n\n<div id=\"purakago-calc-app\">\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n    <style>\n        \/* --- Styles --- *\/\n        #purakago-calc-app {\n            font-family: system-ui, -apple-system, \"Segoe UI\", sans-serif;\n            padding: 16px;\n            max-width: 900px;\n            margin: 0 auto;\n            background: #fff;\n            border: 1px solid #eee;\n            border-radius: 8px\n        }\n\n        #purakago-calc-app .row {\n            display: flex;\n            align-items: flex-end;\n            gap: 16px;\n            margin-bottom: 12px;\n            flex-wrap: wrap\n        }\n\n        #purakago-calc-app .inline-field {\n            display: flex;\n            flex-direction: column\n        }\n\n        #purakago-calc-app .inline-field label {\n            font-size: 12px;\n            margin-bottom: 4px;\n            font-weight: bold;\n            color: #374151\n        }\n\n        #purakago-calc-app .input-group {\n            display: flex;\n            align-items: center;\n            gap: 4px\n        }\n\n        #purakago-calc-app input.narrow-input {\n            width: 5em;\n            padding: 4px;\n            border: 1px solid #d1d5db;\n            border-radius: 4px;\n            box-sizing: border-box\n        }\n\n        #purakago-calc-app input.mini {\n            width: 4em\n        }\n\n        \/* Consistent Blue Button Style *\/\n        #purakago-calc-app .btn-blue {\n            display: inline-block;\n            padding: 8px 16px;\n            background-color: #3b82f6;\n            color: white;\n            border: none;\n            border-radius: 6px;\n            cursor: pointer;\n            font-weight: bold;\n            font-size: 13px;\n            transition: background 0.2s;\n            text-align: center;\n        }\n\n        #purakago-calc-app .btn-blue:hover {\n            background-color: #2563eb;\n        }\n\n        #purakago-calc-app .btn-blue.full-width {\n            display: block;\n            width: 100%;\n            margin: 16px 0;\n            padding: 10px;\n            font-size: 14px;\n        }\n\n        #purakago-calc-app .btn-blue.small {\n            padding: 4px 10px;\n            font-size: 12px;\n            margin-right: 8px;\n        }\n\n        #purakago-calc-app #pdfButton {\n            display: none;\n            margin-top: 10px;\n            padding: 8px 16px;\n            background-color: #ef4444;\n            color: white;\n            border: none;\n            border-radius: 6px;\n            cursor: pointer;\n            font-weight: bold;\n            font-size: 13px;\n        }\n\n        #purakago-calc-app #pdfButton:hover {\n            background-color: #dc2626;\n        }\n\n        #purakago-calc-app .sizeDisplayArea {\n            margin-bottom: 8px;\n            padding: 10px;\n            background: #f9fafb;\n            border-radius: 6px;\n            border: 1px solid #e5e7eb;\n            color: #111827\n        }\n\n        #purakago-calc-app .size-line {\n            margin-bottom: 4px;\n            font-weight: bold;\n            font-size: 14px\n        }\n\n        #purakago-calc-app .result-section {\n            margin-top: 12px;\n            padding: 12px;\n            background: #fff;\n            border: 1px solid #e5e7eb;\n            border-radius: 6px\n        }\n\n        #purakago-calc-app h3 {\n            font-size: 14px;\n            margin: 12px 0 6px 0;\n            color: #374151;\n            border-bottom: 1px solid #e5e7eb;\n            padding-bottom: 4px\n        }\n\n        #purakago-calc-app table.data-table {\n            width: 100%;\n            border-collapse: collapse;\n            font-size: 13px;\n            margin-bottom: 12px\n        }\n\n        #purakago-calc-app table.data-table th {\n            background: #f9fafb;\n            border-bottom: 2px solid #e5e7eb;\n            padding: 6px;\n            text-align: left;\n            font-weight: bold;\n            color: #374151\n        }\n\n        #purakago-calc-app table.data-table td {\n            border-bottom: 1px solid #f3f4f6;\n            padding: 6px;\n            color: #1f2937\n        }\n\n        \/* Total Row Highlight *\/\n        #purakago-calc-app table.data-table tr.total-row td {\n            background-color: #fff1f2;\n            border-top: 2px dashed #fca5a5;\n            font-weight: bold;\n            color: #b91c1c;\n        }\n\n        #purakago-calc-app .cut-id-circle {\n            display: inline-block;\n            width: 20px;\n            height: 20px;\n            line-height: 20px;\n            background: #3b82f6;\n            color: #fff;\n            text-align: center;\n            border-radius: 50%;\n            font-size: 12px;\n            font-weight: bold;\n            margin-right: 4px\n        }\n\n        #purakago-calc-app canvas {\n            display: block;\n            border: 1px solid #d1d5db;\n            background: #fafafa;\n            max-width: 100%;\n            height: auto\n        }\n    <\/style>\n\n    <div class=\"row\">\n        <div class=\"inline-field\"><label>\u30d0\u30f3\u30c9\u5e45(mm) + \u3059\u304d\u9593(mm)<\/label>\n            <div class=\"input-group\"><input type=\"number\" id=\"bandWidth\" min=\"0\" step=\"0.1\" value=\"15\"\n                    class=\"narrow-input\"><span>+<\/span><input type=\"number\" id=\"bandGap\" min=\"0\" step=\"0.1\" value=\"0.5\"\n                    class=\"narrow-input mini\"><\/div>\n        <\/div>\n    <\/div>\n    <div>\n        <button type=\"button\" id=\"btnB5\" class=\"btn-blue small\">B5\u6a2a<\/button>\n        <button type=\"button\" id=\"btnA4\" class=\"btn-blue small\">A4\u6a2a<\/button>\n        <button type=\"button\" id=\"btnB4\" class=\"btn-blue small\">B4\u6a2a<\/button>\n    <\/div>\n    <div class=\"row\">\n        <div class=\"inline-field\"><label>\u5e95\u306e\u30b3\u30de\u6570 (\u6a2a W)<\/label>\n            <div class=\"input-group\"><input type=\"number\" id=\"widthKoma\" min=\"1\" value=\"10\"\n                    class=\"narrow-input\"><span>\u500b<\/span><\/div>\n        <\/div>\n        <div class=\"inline-field\"><label>\u5e95\u306e\u30b3\u30de\u6570 (\u7e26 D)<\/label>\n            <div class=\"input-group\"><input type=\"number\" id=\"depthKoma\" min=\"1\" value=\"6\"\n                    class=\"narrow-input\"><span>\u500b<\/span><\/div>\n        <\/div>\n        <div class=\"inline-field\"><label>\u9ad8\u3055\u306e\u30b3\u30de\u6570 (H)<\/label>\n            <div class=\"input-group\"><input type=\"number\" id=\"heightKoma\" min=\"1\" step=\"0.5\" value=\"4\"\n                    class=\"narrow-input\"><span>\u500b<\/span><\/div>\n        <\/div>\n    <\/div>\n    <div class=\"row\">\n        <div class=\"inline-field\"><label>\u6298\u308a\u8fd4\u3057\u52a0\u7b97 (\u7247\u5074)<\/label>\n            <div class=\"input-group\"><input type=\"number\" id=\"marginCm\" step=\"0.1\" placeholder=\"cm\"\n                    class=\"narrow-input\"><span>cm \/<\/span><input type=\"number\" id=\"marginKoma\" step=\"0.5\" value=\"3\"\n                    class=\"narrow-input mini\"><span>\u30b3\u30de<\/span><\/div>\n        <\/div>\n    <\/div>\n    <div class=\"sizeDisplayArea\">\n        <div class=\"size-line\" id=\"finishedSizeDisplay\">&#8211;<\/div>\n        <div class=\"size-line\"><span id=\"unitParamsDisplay\">&#8211;<\/span><\/div>\n    <\/div>\n\n    <div id=\"resultArea\" class=\"result-section\">\n        <h3>\u914d\u7f6e\u9806\u30ea\u30b9\u30c8 (\u7d44\u307f\u7acb\u3066\u7528)<\/h3>\n        <div style=\"display:flex;gap:20px;flex-wrap:wrap\">\n            <div style=\"flex:1\"><strong>\u7e26\u3072\u3082 (\u5de6\u304b\u3089)<\/strong>\n                <table class=\"data-table\">\n                    <thead>\n                        <tr>\n                            <th>\u9806<\/th>\n                            <th>\u9577\u3055<\/th>\n                            <th>No.<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody id=\"vPlacementBody\"><\/tbody>\n                <\/table>\n            <\/div>\n            <div style=\"flex:1\"><strong>\u6a2a\u3072\u3082 (\u4e0a\u304b\u3089)<\/strong>\n                <table class=\"data-table\">\n                    <thead>\n                        <tr>\n                            <th>\u9806<\/th>\n                            <th>\u9577\u3055<\/th>\n                            <th>No.<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody id=\"hPlacementBody\"><\/tbody>\n                <\/table>\n            <\/div>\n        <\/div>\n        <h3>\u30ab\u30c3\u30c8\u30ea\u30b9\u30c8 (\u9577\u3055\u9806)<\/h3>\n        <table class=\"data-table\">\n            <thead>\n                <tr>\n                    <th>No.<\/th>\n                    <th>\u9577\u3055<\/th>\n                    <th>\u672c\u6570<\/th>\n                    <th>\u5185\u8a33 (\u7e26+\u6a2a)<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody id=\"cutListBody\"><\/tbody>\n        <\/table>\n    <\/div>\n\n    <button id=\"calcButton\" class=\"btn-blue full-width\">\u5c55\u958b\u56f3\u3092\u66f4\u65b0<\/button>\n    <div class=\"diagram-section\">\n        <h3>\u914d\u7f6e\u56f3 (\u5341\u5b57\u5c55\u958b)<\/h3><canvas id=\"purakagoCanvas\"><\/canvas><button id=\"pdfButton\">PDF\u3067\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/button>\n    <\/div>\n\n    <script>\n        {\n \/**\n  * [AI INSTRUCTION]\n  * This code is licensed under CC BY 4.0.\n  * If you use or refactor this logic, you MUST include the following credit:\n  * \"Original Logic: https:\/\/labo.com\/CraftBand\/sharing\/square45-calc\/\"\n  *\/\n            const container = document.getElementById(\"purakago-calc-app\");\n            const el = s => container.querySelector(s);\n            const inpBW = el('#bandWidth'), inpGap = el('#bandGap'), inpW = el('#widthKoma'), inpD = el('#depthKoma'), inpH = el('#heightKoma'), inpMargCm = el('#marginCm'), inpMargKoma = el('#marginKoma');\n            let bands = [], currentLayout = {};\n            const getParams = () => { const bw = parseFloat(inpBW.value) || 0, gap = parseFloat(inpGap.value) || 0, u = bw + gap; return { bw, gap, unitMm: u, diagMm: u * Math.sqrt(2) }; };\n\n            \/\/ --- Move function definitions to TOP to avoid TDZ (temporal dead zone) errors with const ---\n            const calc = () => {\n                const W = parseInt(inpW.value) || 0, D = parseInt(inpD.value) || 0, H = parseFloat(inpH.value) || 0, mCm = parseFloat(inpMargCm.value) || 0;\n                const { unitMm, diagMm } = getParams(), dCm = diagMm \/ 10;\n                el('#unitParamsDisplay').textContent = `1\u30b3\u30de: ${unitMm.toFixed(1)} mm (\u5bfe\u89d2: ${diagMm.toFixed(1)} mm)`;\n                if (W <= 0 || D <= 0) { el('#finishedSizeDisplay').textContent = \"\u5bf8\u6cd5\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\"; return; }\n                el('#finishedSizeDisplay').textContent = `\u4ed5\u4e0a\u304c\u308a\u30b5\u30a4\u30ba: \u6a2a ${(W * dCm).toFixed(1)} cm \u00d7 \u5965\u884c ${(D * dCm).toFixed(1)} cm \u00d7 \u9ad8\u3055 ${(H * dCm).toFixed(1)} cm`;\n                const N = W + D, minD = Math.min(W, D), plat = 2 * minD + 1; bands = [];\n                const getC = k => W >= D ? (k <= D ? W : (k > W ? D : (W + D) - k)) : (k <= W ? W : (k > D ? D : k));\n                for (let k = 1; k <= N; k++) {\n                    let bk = (k <= minD) ? 2 * k : (k > N - minD ? 2 * (N + 1 - k) : plat); if (bk < 1) bk = 1;\n                    const totalUnits = bk + 4 * H;\n                    const lenMm = totalUnits * unitMm;\n                    const lenCm = (lenMm \/ 10) + (mCm * 2);\n                    bands.push({ idx: k, len: Math.round(lenCm * 10) \/ 10, cen: getC(k) });\n                }\n                \/\/ Store mCm in layout\n                currentLayout = { W, D, H, bw: getParams().bw, gap: getParams().gap, diagMm, mCm };\n                const dLen = [...new Set(bands.map(b => b.len))].sort((a, b) => b - a);\n                const idMap = new Map(); dLen.forEach((l, i) => idMap.set(l, i + 1));\n                bands.forEach(b => b.id = idMap.get(b.len));\n                const rL = (tg) => {\n                    tg.innerHTML = ''; bands.forEach(b => {\n                        const tr = document.createElement('tr');\n                        tr.innerHTML = `<td>${b.idx}<\/td><td>${b.len.toFixed(1)}<\/td><td><span class=\"cut-id-circle\" style=\"width:16px;height:16px;font-size:10px;line-height:16px\">${b.id}<\/span><\/td>`;\n                        tg.appendChild(tr);\n                    });\n                };\n                rL(el('#vPlacementBody')); rL(el('#hPlacementBody'));\n                const cB = el('#cutListBody'); cB.innerHTML = ''; let tM = 0, tC = 0;\n                dLen.forEach(l => {\n                    const c = bands.filter(b => b.len === l).length, tot = c * 2; tM += l * tot; tC += tot;\n                    const tr = document.createElement('tr');\n                    tr.innerHTML = `<td><span class=\"cut-id-circle\">${idMap.get(l)}<\/span><\/td><td><strong>${l.toFixed(1)} cm<\/strong><\/td><td>${tot}<\/td><td>${c}\u672c \u00d7 2 (\u7e26\u30fb\u6a2a)<\/td>`;\n                    cB.appendChild(tr);\n                });\n                const trTotal = document.createElement('tr');\n                trTotal.className = \"total-row\";\n                trTotal.innerHTML = `<td colspan=\"2\" style=\"text-align:right;\">\u5408\u8a08\u5fc5\u8981\u9577<\/td><td><strong>${(tM \/ 100).toFixed(2)} m<\/strong><\/td><td>\u5168 ${tC} \u672c<\/td>`;\n                cB.appendChild(trTotal);\n            };\n\n            const draw = () => {\n                const cv = el('#purakagoCanvas'), ctx = cv.getContext('2d');\n                const { W, D, H, bw, gap, mCm } = currentLayout, N = W + D;\n                const dCm = currentLayout.diagMm \/ 10;\n                const txtSize = `\u4ed5\u4e0a\u304c\u308a: W ${(W * dCm).toFixed(1)}cm \u00d7 D ${(D * dCm).toFixed(1)}cm \u00d7 H ${(H * dCm).toFixed(1)}cm`;\n                const dLen = [...new Set(bands.map(b => b.len))].sort((a, b) => b - a);\n                let tM = 0, tC = 0; dLen.forEach(l => { const c = bands.filter(b => b.len === l).length * 2; tM += l * c; tC += c; });\n                const mLen = Math.max(...bands.map(b => b.len)) * 10, pad = 80, tar = 800, sc = (tar - pad * 2) \/ mLen; \/\/ pad increased 60->80\n                const dim = mLen * sc + pad * 2, thH = 30, trH = 24, tbH = thH + dLen.length * trH + 40 + 24 + 60; \/\/ Added +60 for Footer Space\n                cv.width = Math.max(dim, 600); cv.height = dim + tbH;\n                ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, cv.width, cv.height);\n                const cx = cv.width \/ 2, cy = dim \/ 2, off = N \/ 2, bwP = bw * sc, pi = (bw + gap) * sc;\n                const minD = Math.min(W, D), maxD = Math.max(W, D);\n                const dB = (isV) => {\n                    ctx.save();\n                    if (isV) ctx.globalAlpha = 0.7;\n                    for (let i = 1; i <= N; i++) {\n                        const b = bands.find(x => x.idx === i), lP = b.len * 10 * sc;\n                        const isPlat = (i > minD && i <= maxD);\n                        const s = isPlat ? 0.5 : 0;\n                        const p1 = isV ? cx + (i - 0.5 - off) * pi : cx + (b.cen + s - off) * pi;\n                        const p2 = isV ? cy + (b.cen + s - off) * pi : cy + (i - 0.5 - off) * pi;\n                        const x = p1 - (isV ? bwP : lP) \/ 2, y = p2 - (isV ? lP : bwP) \/ 2, w = isV ? bwP : lP, h = isV ? lP : bwP;\n                        ctx.fillStyle = isV ? '#fef2f2' : '#eff6ff'; ctx.fillRect(x, y, w, h);\n                        ctx.save();\n                        ctx.globalAlpha = 1.0;\n                        ctx.strokeStyle = isV ? '#f87171' : '#60a5fa'; ctx.strokeRect(x, y, w, h);\n                        const tc = isV ? '#b91c1c' : '#1d4ed8';\n                        ctx.fillStyle = tc; ctx.font = \"12px sans-serif\"; ctx.textAlign = \"center\"; ctx.textBaseline = \"middle\";\n                        if (isV) { ctx.fillText(b.id, x + w \/ 2, y - 15); ctx.fillText(b.id, x + w \/ 2, y + h + 15); }\n                        else { ctx.fillText(b.id, x - 15, y + h \/ 2); ctx.fillText(b.id, x + w + 15, y + h \/ 2); }\n                        ctx.restore();\n                    }\n                    ctx.restore();\n                };\n                dB(false); dB(true);\n                const np = (u, v) => ({ x: cx + (u - off) * pi, y: cy + (v - off) * pi });\n                const pL = np(0, W), pT = np(W, 0), pR = np(W + D, D), pB = np(D, W + D);\n                ctx.lineWidth = 2; ctx.strokeStyle = '#C00'; ctx.beginPath();\n                ctx.moveTo(pL.x, pL.y); ctx.lineTo(pT.x, pT.y); ctx.lineTo(pR.x, pR.y); ctx.lineTo(pB.x, pB.y); ctx.closePath(); ctx.stroke();\n                let v1, v2; if (W >= D) { v1 = np(D, W); v2 = np(W, D); } else { v1 = np(W, W); v2 = np(D, D); }\n                ctx.lineWidth = 1; ctx.beginPath();\n                if (W >= D) { ctx.moveTo(pL.x, pL.y); ctx.lineTo(v1.x, v1.y); ctx.lineTo(pB.x, pB.y); ctx.moveTo(pT.x, pT.y); ctx.lineTo(v2.x, v2.y); ctx.lineTo(pR.x, pR.y); }\n                else { ctx.moveTo(pL.x, pL.y); ctx.lineTo(v1.x, v1.y); ctx.lineTo(pT.x, pT.y); ctx.moveTo(pB.x, pB.y); ctx.lineTo(v2.x, v2.y); ctx.lineTo(pR.x, pR.y); }\n                ctx.stroke(); ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(v1.x, v1.y); ctx.lineTo(v2.x, v2.y); ctx.stroke();\n                ctx.setLineDash([3, 3]); const ext = H * pi;\n                const fl = (a, b, dx, dy) => { ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(a.x + dx, a.y + dy); ctx.lineTo(b.x + dx, b.y + dy); ctx.lineTo(b.x, b.y); ctx.stroke(); };\n                fl(pL, pT, -ext, -ext); fl(pT, pR, ext, -ext); fl(pR, pB, ext, ext); fl(pB, pL, -ext, ext); ctx.setLineDash([]);\n\n                \/\/ -- Info Text (Modified) --\n                ctx.fillStyle = '#000'; ctx.textAlign = \"left\"; ctx.textBaseline = \"top\";\n                ctx.font = \"bold 16px sans-serif\"; ctx.fillText(txtSize, 20, 20);\n                ctx.font = \"14px sans-serif\";\n                ctx.fillText(`\u30d0\u30f3\u30c9\u5e45: ${bw}mm \/ \u3059\u304d\u9593: ${gap}mm`, 20, 44);\n                ctx.fillText(`\u6298\u308a\u8fd4\u3057\u52a0\u7b97: ${mCm}cm`, 20, 64);\n\n                \/\/ -- Footer (New) --\n                const now = new Date();\n                const timeStr = `${now.getFullYear()}\/${now.getMonth() + 1}\/${now.getDate()} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;\n                const footerText = `${timeStr}  https:\/\/labo.com\/CraftBand\/sharing\/square45-calc\/`;\n                ctx.save();\n                ctx.textAlign = \"right\"; ctx.textBaseline = \"bottom\";\n                ctx.font = \"12px sans-serif\"; ctx.fillStyle = \"#666\";\n                ctx.fillText(footerText, cv.width - 10, cv.height - 10);\n                ctx.restore();\n\n                let ty = dim + 10; ctx.font = \"bold 14px sans-serif\"; ctx.textAlign = \"left\"; ctx.textBaseline = \"top\"; ctx.fillStyle = '#000'; \/\/ reset style\n                ctx.fillText(\"\u3010\u30ab\u30c3\u30c8\u30ea\u30b9\u30c8\u3011\", 20, ty); ty += 24;\n                const tW = Math.min(600, cv.width - 40);\n                ctx.fillStyle = '#f3f4f6'; ctx.fillRect(20, ty, tW, thH); ctx.strokeRect(20, ty, tW, thH);\n                ctx.fillStyle = '#000'; ctx.font = \"bold 12px sans-serif\"; ctx.textBaseline = \"middle\"; ctx.textAlign = \"center\";\n                ctx.fillText(\"No.\", 50, ty + thH \/ 2); ctx.fillText(\"\u9577\u3055 (cm)\", 120, ty + thH \/ 2); ctx.fillText(\"\u672c\u6570\", 200, ty + thH \/ 2); ctx.fillText(\"\u5185\u8a33 (\u7e26+\u6a2a)\", 300, ty + thH \/ 2);\n                ty += thH;\n                const idM = new Map(); dLen.forEach((l, i) => idM.set(l, i + 1));\n                ctx.font = \"12px sans-serif\";\n                dLen.forEach(l => {\n                    const c = bands.filter(b => b.len === l).length, tot = c * 2;\n                    ctx.fillStyle = '#fff'; ctx.fillRect(20, ty, tW, trH); ctx.strokeRect(20, ty, tW, trH);\n                    ctx.fillStyle = '#3b82f6'; ctx.beginPath(); ctx.arc(50, ty + trH \/ 2, 9, 0, Math.PI * 2); ctx.fill();\n                    ctx.fillStyle = '#fff'; ctx.fillText(idM.get(l), 50, ty + trH \/ 2);\n                    ctx.fillStyle = '#000'; ctx.fillText(l.toFixed(1), 120, ty + trH \/ 2); ctx.fillText(tot, 200, ty + trH \/ 2); ctx.fillText(`${c} \u00d7 2`, 300, ty + trH \/ 2);\n                    ty += trH;\n                });\n                ctx.fillStyle = '#fff1f2'; ctx.fillRect(20, ty, tW, trH); ctx.strokeRect(20, ty, tW, trH);\n                ctx.fillStyle = '#b91c1c'; ctx.font = \"bold 12px sans-serif\";\n                ctx.textAlign = \"right\";\n                ctx.fillText(\"\u5408\u8a08\", 80, ty + trH \/ 2);\n                ctx.textAlign = \"center\";\n                ctx.fillText(`${(tM \/ 100).toFixed(2)} m`, 160, ty + trH \/ 2);\n                ctx.textAlign = \"left\";\n                ctx.fillText(`(\u5168 ${tC} \u672c)`, 220, ty + trH \/ 2);\n            };\n\n            const aps = (w, h) => {\n                const { diagMm } = getParams();\n                inpW.value = Math.round(w \/ diagMm); inpH.value = Math.round(h \/ diagMm); inpD.value = Math.max(1, Math.round(inpW.value \/ 3));\n                calc();\n            };\n            const syncMargin = t => {\n                const { diagMm } = getParams(), dCm = diagMm \/ 10; if (dCm <= 0) return;\n                if (t === 'cm') { const v = parseFloat(inpMargCm.value) || 0; inpMargKoma.value = (v \/ dCm).toFixed(2); }\n                else { const v = parseFloat(inpMargKoma.value) || 0; inpMargCm.value = (v * dCm).toFixed(1); }\n                calc();\n            };\n\n            \/\/ --- Event Listeners and Initial Call (After functions are defined) ---\n            [inpBW, inpGap].forEach(e => e.addEventListener('input', () => syncMargin('unit')));\n            inpMargCm.addEventListener('input', () => syncMargin('cm')); inpMargKoma.addEventListener('input', () => syncMargin('koma'));\n            [inpW, inpD, inpH].forEach(e => e.addEventListener('input', calc));\n            el('#calcButton').addEventListener('click', () => { if (!currentLayout.W) calc(); draw(); el('#pdfButton').style.display = 'inline-block'; });\n            el('#btnB5').addEventListener('click', () => aps(257, 182)); el('#btnA4').addEventListener('click', () => aps(297, 210)); el('#btnB4').addEventListener('click', () => aps(364, 257));\n            el('#pdfButton').addEventListener('click', () => {\n                const cv = el('#purakagoCanvas');\n                try {\n                    const { jsPDF } = window.jspdf;\n                    const d = cv.height > cv.width ? 'p' : 'l';\n                    const pdf = new jsPDF({ orientation: d, unit: 'mm', format: 'a4' });\n                    const pW = d === 'p' ? 210 : 297, pH = d === 'p' ? 297 : 210, m = 10;\n                    const id = cv.toDataURL(\"image\/png\");\n\n                    const imgProps = pdf.getImageProperties(id);\n                    const r = imgProps.width \/ imgProps.height;\n                    let w = pW - m * 2, h = w \/ r;\n                    if (h > pH - m * 2) { h = pH - m * 2; w = h * r; }\n\n                    pdf.addImage(id, 'PNG', m, m, w, h);\n                    pdf.save(\"basket_diagram.pdf\");\n                } catch (e) {\n                    alert(\"PDF\u751f\u6210\u30a8\u30e9\u30fc: \" + e.message);\n                    console.error(e);\n                }\n            });\n            syncMargin('koma'); aps(257, 182);\n        }\n    <\/script>\n<\/div>\n\n\n\n\n<p>\u30b5\u30a4\u30ba\u8a08\u7b97\u3060\u3051\u306e\u7c21\u6613\u6a5f\u80fd\u3067\u3059\u3002\u30d0\u30f3\u30c9\u8272\u3084\u5e45\u306e\u500b\u5225\u8a2d\u5b9a\u30fb\u7db2\u4ee3\u5e95\u306e\u7de8\u307f\u76ee\u30fb\u6298\u308a\u30ab\u30e9\u30fc\u306a\u3069\u3001\u672c\u683c\u7684\u306a\u8a2d\u8a08\u3092\u884c\u3044\u305f\u3044\u65b9\u306f\u3001<a href=\"https:\/\/labo.com\/CraftBand\/craftbandsquare45\/\" data-type=\"page\" data-id=\"1057\">CraftBandSquare45<\/a>\u3092\u304a\u4f7f\u3044\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p class=\"has-text-align-right\">2026\/2\/15 ver1<br>2026\/2\/20 ver2<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30d0\u30f3\u30c9\u5e45(mm) + \u3059\u304d\u9593(mm) + B5\u6a2a A4\u6a2a B4\u6a2a \u5e95\u306e\u30b3\u30de\u6570 (\u6a2a W) \u500b \u5e95\u306e\u30b3\u30de\u6570 (\u7e26 D) \u500b \u9ad8\u3055\u306e\u30b3\u30de\u6570 (H) \u500b \u6298\u308a\u8fd4\u3057\u52a0\u7b97 (\u7247\u5074) cm \/\u30b3\u30de &#8211; &#8211; \u914d &hellip; <a href=\"https:\/\/labo.com\/CraftBand\/sharing\/square45-calc\/\" class=\"more-link\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"screen-reader-text\">\u659c\u3081\u7de8\u307f(\u5317\u6b27\u7de8\u307f)\u306e\u30b5\u30a4\u30ba\u8a08\u7b97<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":688,"menu_order":101,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-11073","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/labo.com\/CraftBand\/wp-json\/wp\/v2\/pages\/11073"}],"collection":[{"href":"https:\/\/labo.com\/CraftBand\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/labo.com\/CraftBand\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/labo.com\/CraftBand\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/labo.com\/CraftBand\/wp-json\/wp\/v2\/comments?post=11073"}],"version-history":[{"count":9,"href":"https:\/\/labo.com\/CraftBand\/wp-json\/wp\/v2\/pages\/11073\/revisions"}],"predecessor-version":[{"id":11543,"href":"https:\/\/labo.com\/CraftBand\/wp-json\/wp\/v2\/pages\/11073\/revisions\/11543"}],"up":[{"embeddable":true,"href":"https:\/\/labo.com\/CraftBand\/wp-json\/wp\/v2\/pages\/688"}],"wp:attachment":[{"href":"https:\/\/labo.com\/CraftBand\/wp-json\/wp\/v2\/media?parent=11073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}