kintone \u30a2\u30a4\u30b3\u30f3\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=DM+Mono:wght@500&display=swap\" rel=\"stylesheet\">\n<style>\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }\n\n:root {\n --bg: #f5f6fa;\n --white: #ffffff;\n --border: #e2e5ee;\n --text: #1a1d2e;\n --muted: #8b92b0;\n --accent: #0079C1;\n --accent2: #00b3ff;\n --accent-light: #e8f3fc;\n}\n\nhtml, body {\n background: var(--bg);\n color: var(--text);\n font-family: 'Noto Sans JP', sans-serif;\n min-height: 100vh;\n}\n\n\/* \u2500\u2500\u2500 Header \u2500\u2500\u2500 *\/\nheader {\n position: sticky; top: 0; z-index: 100;\n background: rgba(255,255,255,0.9);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border-bottom: 1px solid var(--border);\n padding: 12px 20px;\n display: flex; align-items: center; gap: 12px;\n}\n.logo {\n background: linear-gradient(135deg, var(--accent), var(--accent2));\n width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n font-family: 'DM Mono', monospace; font-size: 11px; color: #fff; font-weight: 600;\n}\nheader h1 { font-size: 15px; font-weight: 700; color: var(--text); }\nheader small { font-size: 11px; color: var(--muted); font-family: 'DM Mono', monospace; margin-left: auto; }\n\n\/* \u2500\u2500\u2500 Layout \u2500\u2500\u2500 *\/\n.layout {\n display: flex;\n flex-direction: column;\n padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));\n}\n\n\/* \u2500\u2500\u2500 Preview \u2500\u2500\u2500 *\/\n.preview-block { padding: 16px 14px 0; }\n\n.preview-stage {\n background: var(--white);\n border: 1.5px solid var(--border);\n border-radius: 16px;\n height: 210px;\n display: flex; align-items: center; justify-content: center;\n position: relative; overflow: hidden;\n box-shadow: 0 2px 12px rgba(0,0,0,0.06);\n}\n\/* Checkered transparency pattern *\/\n.preview-stage::before {\n content: '';\n position: absolute; inset: 0; border-radius: 16px;\n background-image:\n linear-gradient(45deg, #f0f0f0 25%, transparent 25%),\n linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #f0f0f0 75%),\n linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);\n background-size: 16px 16px;\n background-position: 0 0, 0 8px, 8px -8px, -8px 0px;\n opacity: 0.5;\n}\n\n#icon-canvas {\n position: relative; z-index: 1;\n display: flex; align-items: center; justify-content: center;\n overflow: hidden;\n transition: all 0.3s cubic-bezier(.34,1.56,.64,1);\n box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);\n}\n#icon-text {\n font-family: 'Noto Sans JP', sans-serif;\n text-align: center; line-height: 1.25;\n white-space: pre-wrap; word-break: break-all;\n padding: 8px; user-select: none;\n}\n.size-label {\n font-family: 'DM Mono', monospace; font-size: 10px;\n color: var(--muted); text-align: center; margin-top: 8px;\n}\n\n\/* \u2500\u2500\u2500 Controls \u2500\u2500\u2500 *\/\n.controls { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }\n\n.card {\n background: var(--white);\n border: 1.5px solid var(--border);\n border-radius: 14px;\n padding: 16px;\n box-shadow: 0 1px 4px rgba(0,0,0,0.04);\n}\n\n.sec {\n font-size: 10px; font-weight: 700; text-transform: uppercase;\n letter-spacing: 0.13em; color: var(--muted); margin-bottom: 12px;\n}\n\n\/* Shape *\/\n.shape-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }\n.shape-btn {\n background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px;\n padding: 12px 6px; cursor: pointer;\n display: flex; flex-direction: column; align-items: center; gap: 7px;\n color: var(--muted); transition: all .15s; touch-action: manipulation;\n}\n.shape-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }\n.shape-btn.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }\n.shape-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 30px; }\n.sq { background: currentColor; border-radius: 3px; }\n.sq.s { width: 26px; height: 26px; }\n.sq.w { width: 38px; height: 23px; }\n.sq.t { width: 21px; height: 34px; }\n.shape-btn span { font-size: 11px; font-weight: 700; }\n\n\/* Color palette *\/\n.color-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }\n.color-btn {\n aspect-ratio: 1; min-height: 48px;\n border-radius: 10px; border: 2.5px solid transparent;\n cursor: pointer; position: relative; outline: none;\n transition: transform .15s, box-shadow .15s;\n touch-action: manipulation;\n}\n.color-btn:hover { transform: scale(1.07); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }\n.color-btn.active { border-color: #333; box-shadow: 0 0 0 2px rgba(0,0,0,0.12); }\n.color-btn.active::after {\n content: '\u2713'; position: absolute; inset: 0;\n display: flex; align-items: center; justify-content: center;\n color: rgba(255,255,255,.95); font-size: 16px; font-weight: 700;\n text-shadow: 0 1px 3px rgba(0,0,0,.3);\n}\n\n\/* Text input *\/\n.text-input {\n width: 100%; background: var(--bg);\n border: 1.5px solid var(--border); border-radius: 10px;\n color: var(--text); font-family: 'Noto Sans JP', sans-serif;\n font-size: 16px;\n padding: 11px 13px; resize: none; outline: none;\n transition: border-color .15s, box-shadow .15s; margin-bottom: 14px;\n}\n.text-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,121,193,0.12); }\n.text-input::placeholder { color: var(--muted); }\n\n\/* Slider *\/\n.slider-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }\ninput[type=range] {\n flex: 1; -webkit-appearance: none;\n height: 5px; background: var(--border); border-radius: 6px; outline: none;\n}\ninput[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 24px; height: 24px; border-radius: 50%;\n background: var(--accent); cursor: pointer;\n border: 3px solid #fff; box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0,121,193,0.3);\n}\n.slider-val { font-family: 'DM Mono', monospace; font-size: 13px; color: var(--accent); min-width: 26px; text-align: right; font-weight: 500; }\n\n\/* Style toggles *\/\n.style-row { display: flex; gap: 8px; margin-bottom: 14px; }\n.style-btn {\n background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px;\n padding: 10px 20px; min-height: 44px;\n cursor: pointer; font-family: 'Noto Sans JP', sans-serif; font-size: 13px;\n color: var(--muted); transition: all .15s; touch-action: manipulation;\n}\n.style-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }\n.style-btn.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }\n.style-btn.b { font-weight: 900; }\n.style-btn.i { font-style: italic; }\n\n\/* Ratio selector *\/\n.ratio-wrap {\n margin-top: 10px;\n overflow: hidden;\n max-height: 0;\n transition: max-height .25s ease, opacity .2s ease;\n opacity: 0;\n}\n.ratio-wrap.visible { max-height: 80px; opacity: 1; }\n.ratio-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); margin-bottom: 8px; }\n.ratio-row { display: flex; gap: 7px; flex-wrap: wrap; }\n.ratio-btn {\n background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px;\n padding: 7px 13px; cursor: pointer;\n font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500;\n color: var(--muted); transition: all .15s; touch-action: manipulation;\n min-height: 36px;\n}\n.ratio-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }\n.ratio-btn.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }\n\n\/* Text color *\/\n.tc-row { display: flex; gap: 8px; flex-wrap: wrap; }\n.tc-btn {\n width: 40px; height: 40px; border-radius: 8px;\n border: 2px solid var(--border); cursor: pointer;\n transition: transform .12s, box-shadow .12s; touch-action: manipulation;\n}\n.tc-btn:hover { transform: scale(1.1); box-shadow: 0 3px 10px rgba(0,0,0,0.15); }\n.tc-btn.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,121,193,0.3); }\n\n\/* \u2500\u2500\u2500 Download bar \u2500\u2500\u2500 *\/\n.dl-bar {\n position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;\n padding: 10px 14px env(safe-area-inset-bottom, 10px);\n background: rgba(255,255,255,0.97);\n backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);\n border-top: 1.5px solid var(--border);\n display: flex; flex-direction: column; gap: 8px;\n box-shadow: 0 -4px 20px rgba(0,0,0,0.07);\n}\n.fmt-row { display: flex; gap: 7px; }\n.fmt-btn {\n flex: 1; background: var(--bg); border: 1.5px solid var(--border);\n border-radius: 8px; color: var(--muted);\n font-family: 'DM Mono', monospace; font-size: 13px;\n padding: 9px; min-height: 40px;\n cursor: pointer; transition: all .15s; touch-action: manipulation; font-weight: 500;\n}\n.fmt-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }\n.fmt-btn.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }\n\n.dl-btn {\n width: 100%; border: none; border-radius: 12px;\n background: linear-gradient(135deg, var(--accent), var(--accent2));\n color: #fff; font-family: 'Noto Sans JP', sans-serif;\n font-size: 16px; font-weight: 700; letter-spacing: .04em;\n padding: 15px; min-height: 52px;\n display: flex; align-items: center; justify-content: center; gap: 8px;\n cursor: pointer; transition: all .2s; touch-action: manipulation;\n box-shadow: 0 4px 16px rgba(0,121,193,0.3);\n}\n.dl-btn:active { transform: scale(.97); opacity: .9; }\n\n\/* \u2500\u2500\u2500 Desktop (\u2265 700px) \u2500\u2500\u2500 *\/\n@media (min-width: 700px) {\n .layout {\n flex-direction: row; align-items: flex-start;\n max-width: 980px; margin: 0 auto;\n padding: 28px 28px 48px; gap: 24px;\n }\n .left-col {\n flex: 0 0 290px;\n position: sticky; top: calc(57px + 16px);\n display: flex; flex-direction: column; gap: 12px;\n }\n .preview-block { padding: 0; }\n .preview-stage { height: 250px; }\n\n .dl-bar {\n position: static;\n background: transparent; backdrop-filter: none;\n -webkit-backdrop-filter: none;\n border-top: none; padding: 0; box-shadow: none;\n }\n .dl-btn {\n border-radius: 11px; font-size: 15px; min-height: 48px;\n }\n .dl-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,121,193,0.35); }\n\n .right-col { flex: 1 1 0; min-width: 0; }\n .controls { padding: 0; }\n .color-btn { min-height: unset; }\n}\n<\/style>\n<\/head>\n<body>\n\n<header>\n <div class=\"logo\">ki<\/div>\n <h1>\u30a2\u30a4\u30b3\u30f3\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc<\/h1>\n <small>Icon Creator<\/small>\n<\/header>\n\n<div class=\"layout\">\n\n <div class=\"left-col\">\n <div class=\"preview-block\">\n <div class=\"preview-stage\">\n <div id=\"icon-canvas\"><span id=\"icon-text\"><\/span><\/div>\n <\/div>\n <div class=\"size-label\" id=\"sizeLabel\">240 \u00d7 240 px<\/div>\n <\/div>\n\n <div class=\"dl-bar\">\n <div class=\"fmt-row\">\n <button class=\"fmt-btn active\" onclick=\"setFmt('png',this)\">PNG<\/button>\n <button class=\"fmt-btn\" onclick=\"setFmt('jpg',this)\">JPG<\/button>\n <button class=\"fmt-btn\" onclick=\"setFmt('svg',this)\">SVG<\/button>\n <\/div>\n <button class=\"dl-btn\" onclick=\"downloadIcon()\">⬇ \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/button>\n <\/div>\n <\/div>\n\n <div class=\"right-col\">\n <div class=\"controls\">\n\n <div class=\"card\">\n <div class=\"sec\">\u30a2\u30a4\u30b3\u30f3\u306e\u5f62<\/div>\n <div class=\"shape-grid\">\n <button class=\"shape-btn active\" onclick=\"setShape('square',this)\">\n <div class=\"shape-ico\"><div class=\"sq s\"><\/div><\/div>\n <span>\u6b63\u65b9\u5f62<\/span>\n <\/button>\n <button class=\"shape-btn\" onclick=\"setShape('wide',this)\">\n <div class=\"shape-ico\"><div class=\"sq w\"><\/div><\/div>\n <span>\u6a2a\u9577<\/span>\n <\/button>\n <button class=\"shape-btn\" onclick=\"setShape('tall',this)\">\n <div class=\"shape-ico\"><div class=\"sq t\"><\/div><\/div>\n <span>\u7e26\u9577<\/span>\n <\/button>\n <\/div>\n\n \n <div class=\"ratio-wrap\" id=\"ratioWrap\">\n <div class=\"ratio-label\" style=\"margin-top:2px\">\u6bd4\u7387<\/div>\n <div class=\"ratio-row\" id=\"ratioRow\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"sec\">\u80cc\u666f\u30ab\u30e9\u30fc<\/div>\n <div class=\"color-grid\" id=\"colorGrid\"><\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"sec\">\u30c6\u30ad\u30b9\u30c8<\/div>\n <textarea class=\"text-input\" id=\"iconText\" rows=\"3\"\n placeholder=\"\u30c6\u30ad\u30b9\u30c8\u3092\u5165\u529b \u4f8b\uff09\u58f2\u4e0a\u7ba1\u7406 \u3000\u3000\u9867\u5ba2DB\"\n oninput=\"render()\"><\/textarea>\n\n <div class=\"sec\">\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba<\/div>\n <div class=\"slider-row\">\n <input type=\"range\" id=\"fontSize\" min=\"10\" max=\"60\" value=\"24\"\n oninput=\"render(); document.getElementById('fsVal').textContent=this.value\">\n <span class=\"slider-val\" id=\"fsVal\">24<\/span>\n <\/div>\n\n <div class=\"sec\">\u30b9\u30bf\u30a4\u30eb<\/div>\n <div class=\"style-row\">\n <button class=\"style-btn b active\" id=\"boldBtn\" onclick=\"toggle('bold')\">B \u592a\u5b57<\/button>\n <button class=\"style-btn i\" id=\"italicBtn\" onclick=\"toggle('italic')\">I \u659c\u4f53<\/button>\n <\/div>\n\n <div class=\"sec\">\u6587\u5b57\u30ab\u30e9\u30fc<\/div>\n <div class=\"tc-row\" id=\"tcRow\"><\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\nconst BG_COLORS = [\n {name:'kintone Blue', hex:'#0079C1'},\n {name:'Sky', hex:'#2BBFFF'},\n {name:'Purple', hex:'#7B52C8'},\n {name:'Violet', hex:'#A855F7'},\n {name:'Coral', hex:'#FF5E5E'},\n {name:'Orange', hex:'#FF8C00'},\n {name:'Amber', hex:'#F5C500'},\n {name:'Emerald', hex:'#00B67A'},\n {name:'Teal', hex:'#0D9488'},\n {name:'Slate', hex:'#475569'},\n];\nconst TEXT_COLORS = ['#FFFFFF','#1a1a2e','#FFF9C4','#FFCDD2','#C8E6C9','#BBDEFB'];\n\n\/\/ \u6bd4\u7387\u5b9a\u7fa9 (\u57fa\u6e96\u8fba = 240px)\nconst RATIOS = {\n wide: [\n {label:'4:3', w:320, h:240},\n {label:'3:2', w:360, h:240},\n {label:'16:9', w:427, h:240},\n {label:'2:1', w:480, h:240},\n {label:'3:1', w:720, h:240},\n ],\n tall: [\n {label:'3:4', w:240, h:320},\n {label:'2:3', w:240, h:360},\n {label:'9:16', w:240, h:427},\n {label:'1:2', w:240, h:480},\n {label:'1:3', w:240, h:720},\n ],\n};\n\nconst S = {\n shape:'square', color:BG_COLORS[0].hex,\n text:'', fontSize:24, bold:true, italic:false,\n textColor:'#FFFFFF', fmt:'png',\n w:240, h:240, \/\/ actual output size\n};\n\nBG_COLORS.forEach((c,i) => {\n const b = document.createElement('button');\n b.className = 'color-btn' + (i===0?' active':'');\n b.style.background = c.hex; b.title = c.name;\n b.onclick = () => {\n document.querySelectorAll('.color-btn').forEach(x=>x.classList.remove('active'));\n b.classList.add('active'); S.color=c.hex; render();\n };\n document.getElementById('colorGrid').appendChild(b);\n});\n\nTEXT_COLORS.forEach((c,i) => {\n const b = document.createElement('button');\n b.className = 'tc-btn' + (i===0?' active':'');\n b.style.background = c;\n b.onclick = () => {\n document.querySelectorAll('.tc-btn').forEach(x=>x.classList.remove('active'));\n b.classList.add('active'); S.textColor=c; render();\n };\n document.getElementById('tcRow').appendChild(b);\n});\n\nfunction buildRatioButtons(shape) {\n const wrap = document.getElementById('ratioWrap');\n const row = document.getElementById('ratioRow');\n row.innerHTML = '';\n if (shape === 'square') { wrap.classList.remove('visible'); return; }\n wrap.classList.add('visible');\n RATIOS[shape].forEach((r, i) => {\n const b = document.createElement('button');\n b.className = 'ratio-btn' + (i===0?' active':'');\n b.textContent = r.label;\n b.onclick = () => {\n document.querySelectorAll('.ratio-btn').forEach(x=>x.classList.remove('active'));\n b.classList.add('active');\n S.w = r.w; S.h = r.h;\n render();\n };\n row.appendChild(b);\n });\n \/\/ Set first ratio as default\n S.w = RATIOS[shape][0].w;\n S.h = RATIOS[shape][0].h;\n}\n\nfunction setShape(s,el) {\n S.shape=s;\n document.querySelectorAll('.shape-btn').forEach(b=>b.classList.remove('active'));\n el.classList.add('active');\n if (s === 'square') { S.w=240; S.h=240; }\n buildRatioButtons(s);\n render();\n}\n\nfunction setFmt(f,el) {\n S.fmt=f;\n document.querySelectorAll('.fmt-btn').forEach(b=>b.classList.remove('active'));\n el.classList.add('active');\n}\nfunction toggle(k) {\n if(k==='bold') { S.bold=!S.bold; document.getElementById('boldBtn').classList.toggle('active',S.bold); }\n else { S.italic=!S.italic; document.getElementById('italicBtn').classList.toggle('active',S.italic); }\n render();\n}\n\nfunction render() {\n S.text = document.getElementById('iconText').value;\n S.fontSize = +document.getElementById('fontSize').value;\n const cvs = document.getElementById('icon-canvas');\n const txt = document.getElementById('icon-text');\n const stage = cvs.parentElement;\n const w = S.w, h = S.h;\n const sw = stage.clientWidth-32, sh = stage.clientHeight-32;\n const sc = Math.min(sw\/w, sh\/h, 1);\n cvs.style.width = Math.round(w*sc)+'px';\n cvs.style.height = Math.round(h*sc)+'px';\n cvs.style.background = S.color;\n cvs.style.borderRadius = Math.round(16*sc)+'px';\n txt.style.fontSize = Math.round(S.fontSize*sc)+'px';\n txt.style.fontWeight = S.bold ? '900' : '400';\n txt.style.fontStyle = S.italic ? 'italic': 'normal';\n txt.style.color = S.textColor;\n txt.textContent = S.text;\n document.getElementById('sizeLabel').textContent = `${w} \u00d7 ${h} px`;\n}\n\nfunction downloadIcon() {\n const w=S.w, h=S.h;\n if(S.fmt==='svg'){ dlSVG(w,h); return; }\n const cv = document.createElement('canvas');\n cv.width=w; cv.height=h;\n const ctx = cv.getContext('2d');\n ctx.clearRect(0,0,w,h);\n const r=24;\n ctx.beginPath();\n ctx.moveTo(r,0); ctx.lineTo(w-r,0); ctx.quadraticCurveTo(w,0,w,r);\n ctx.lineTo(w,h-r); ctx.quadraticCurveTo(w,h,w-r,h);\n ctx.lineTo(r,h); ctx.quadraticCurveTo(0,h,0,h-r);\n ctx.lineTo(0,r); ctx.quadraticCurveTo(0,0,r,0);\n ctx.closePath();\n ctx.save(); ctx.clip();\n ctx.fillStyle=S.color; ctx.fill();\n if(S.text) {\n ctx.fillStyle=S.textColor;\n const fw=S.bold?'900':'400', fi=S.italic?'italic ':'';\n ctx.font=`${fi}${fw} ${S.fontSize}px \"Noto Sans JP\",sans-serif`;\n ctx.textAlign='center'; ctx.textBaseline='middle';\n const lines=S.text.split('\\n'), lh=S.fontSize*1.3;\n const sy=h\/2-(lh*lines.length)\/2+lh\/2;\n lines.forEach((l,i)=>ctx.fillText(l,w\/2,sy+i*lh));\n }\n ctx.restore();\n if(S.fmt==='jpg') {\n const fc=document.createElement('canvas'); fc.width=w; fc.height=h;\n const fx=fc.getContext('2d');\n fx.fillStyle='#fff'; fx.fillRect(0,0,w,h); fx.drawImage(cv,0,0);\n dlFile(fc.toDataURL('image\/jpeg',0.95),'kintone-icon.jpg');\n } else {\n dlFile(cv.toDataURL('image\/png'),'kintone-icon.png');\n }\n}\n\nfunction dlSVG(w,h) {\n const r=24, lines=S.text.split('\\n'), lh=S.fontSize*1.3;\n const sy=h\/2-(lh*lines.length)\/2+lh\/2;\n const fw=S.bold?'900':'400', fi=S.italic?'italic':'normal';\n const txts=lines.map((l,i)=>`<text x=\"${w\/2}\" y=\"${sy+i*lh}\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-family=\"Noto Sans JP,sans-serif\" font-size=\"${S.fontSize}\" font-weight=\"${fw}\" font-style=\"${fi}\" fill=\"${S.textColor}\">${esc(l)}<\/text>`).join('\\n ');\n const svg=`<?xml version=\"1.0\" encoding=\"UTF-8\"?>\\n<svg width=\"${w}\" height=\"${h}\" viewBox=\"0 0 ${w} ${h}\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\\n <rect width=\"${w}\" height=\"${h}\" rx=\"${r}\" ry=\"${r}\" fill=\"${S.color}\"\/>\\n ${txts}\\n<\/svg>`;\n const url=URL.createObjectURL(new Blob([svg],{type:'image\/svg+xml'}));\n dlFile(url,'kintone-icon.svg');\n setTimeout(()=>URL.revokeObjectURL(url),1000);\n}\n\nfunction dlFile(url,name){ const a=document.createElement('a'); a.href=url; a.download=name; a.click(); }\nfunction esc(s){ return s.replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>').replace(\/\"\/g,'"'); }\n\nwindow.addEventListener('resize', render);\nbuildRatioButtons('square');\nrender();\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>kintone \u30a2\u30a4\u30b3\u30f3\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc ki \u30a2\u30a4\u30b3\u30f3\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc Icon Creator 240 \u00d7 240 px PNG JPG SVG ⬇ \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9 \u30a2\u30a4\u30b3\u30f3\u306e\u5f62 \u6b63\u65b9\u5f62 \u6a2a\u9577 \u7e26\u9577 \u6bd4\u7387 \u80cc […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-359","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=\/wp\/v2\/pages\/359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=359"}],"version-history":[{"count":11,"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=\/wp\/v2\/pages\/359\/revisions"}],"predecessor-version":[{"id":375,"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=\/wp\/v2\/pages\/359\/revisions\/375"}],"wp:attachment":[{"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":359,"date":"2026-02-27T10:42:41","date_gmt":"2026-02-27T01:42:41","guid":{"rendered":"https:\/\/ohashisoken.jp\/?page_id=359"},"modified":"2026-02-27T15:31:04","modified_gmt":"2026-02-27T06:31:04","slug":"359-2","status":"publish","type":"page","link":"https:\/\/ohashisoken.jp\/?page_id=359","title":{"rendered":"\u30a2\u30a4\u30b3\u30f3\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc"},"content":{"rendered":"\n\n\n\n\n\nkintone \u30a2\u30a4\u30b3\u30f3\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=DM+Mono:wght@500&display=swap\" rel=\"stylesheet\">\n<style>\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }\n\n:root {\n --bg: #f5f6fa;\n --white: #ffffff;\n --border: #e2e5ee;\n --text: #1a1d2e;\n --muted: #8b92b0;\n --accent: #0079C1;\n --accent2: #00b3ff;\n --accent-light: #e8f3fc;\n}\n\nhtml, body {\n background: var(--bg);\n color: var(--text);\n font-family: 'Noto Sans JP', sans-serif;\n min-height: 100vh;\n}\n\n\/* \u2500\u2500\u2500 Header \u2500\u2500\u2500 *\/\nheader {\n position: sticky; top: 0; z-index: 100;\n background: rgba(255,255,255,0.9);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border-bottom: 1px solid var(--border);\n padding: 12px 20px;\n display: flex; align-items: center; gap: 12px;\n}\n.logo {\n background: linear-gradient(135deg, var(--accent), var(--accent2));\n width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n font-family: 'DM Mono', monospace; font-size: 11px; color: #fff; font-weight: 600;\n}\nheader h1 { font-size: 15px; font-weight: 700; color: var(--text); }\nheader small { font-size: 11px; color: var(--muted); font-family: 'DM Mono', monospace; margin-left: auto; }\n\n\/* \u2500\u2500\u2500 Layout \u2500\u2500\u2500 *\/\n.layout {\n display: flex;\n flex-direction: column;\n padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));\n}\n\n\/* \u2500\u2500\u2500 Preview \u2500\u2500\u2500 *\/\n.preview-block { padding: 16px 14px 0; }\n\n.preview-stage {\n background: var(--white);\n border: 1.5px solid var(--border);\n border-radius: 16px;\n height: 210px;\n display: flex; align-items: center; justify-content: center;\n position: relative; overflow: hidden;\n box-shadow: 0 2px 12px rgba(0,0,0,0.06);\n}\n\/* Checkered transparency pattern *\/\n.preview-stage::before {\n content: '';\n position: absolute; inset: 0; border-radius: 16px;\n background-image:\n linear-gradient(45deg, #f0f0f0 25%, transparent 25%),\n linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #f0f0f0 75%),\n linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);\n background-size: 16px 16px;\n background-position: 0 0, 0 8px, 8px -8px, -8px 0px;\n opacity: 0.5;\n}\n\n#icon-canvas {\n position: relative; z-index: 1;\n display: flex; align-items: center; justify-content: center;\n overflow: hidden;\n transition: all 0.3s cubic-bezier(.34,1.56,.64,1);\n box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);\n}\n#icon-text {\n font-family: 'Noto Sans JP', sans-serif;\n text-align: center; line-height: 1.25;\n white-space: pre-wrap; word-break: break-all;\n padding: 8px; user-select: none;\n}\n.size-label {\n font-family: 'DM Mono', monospace; font-size: 10px;\n color: var(--muted); text-align: center; margin-top: 8px;\n}\n\n\/* \u2500\u2500\u2500 Controls \u2500\u2500\u2500 *\/\n.controls { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }\n\n.card {\n background: var(--white);\n border: 1.5px solid var(--border);\n border-radius: 14px;\n padding: 16px;\n box-shadow: 0 1px 4px rgba(0,0,0,0.04);\n}\n\n.sec {\n font-size: 10px; font-weight: 700; text-transform: uppercase;\n letter-spacing: 0.13em; color: var(--muted); margin-bottom: 12px;\n}\n\n\/* Shape *\/\n.shape-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }\n.shape-btn {\n background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px;\n padding: 12px 6px; cursor: pointer;\n display: flex; flex-direction: column; align-items: center; gap: 7px;\n color: var(--muted); transition: all .15s; touch-action: manipulation;\n}\n.shape-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }\n.shape-btn.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }\n.shape-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 30px; }\n.sq { background: currentColor; border-radius: 3px; }\n.sq.s { width: 26px; height: 26px; }\n.sq.w { width: 38px; height: 23px; }\n.sq.t { width: 21px; height: 34px; }\n.shape-btn span { font-size: 11px; font-weight: 700; }\n\n\/* Color palette *\/\n.color-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }\n.color-btn {\n aspect-ratio: 1; min-height: 48px;\n border-radius: 10px; border: 2.5px solid transparent;\n cursor: pointer; position: relative; outline: none;\n transition: transform .15s, box-shadow .15s;\n touch-action: manipulation;\n}\n.color-btn:hover { transform: scale(1.07); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }\n.color-btn.active { border-color: #333; box-shadow: 0 0 0 2px rgba(0,0,0,0.12); }\n.color-btn.active::after {\n content: '\u2713'; position: absolute; inset: 0;\n display: flex; align-items: center; justify-content: center;\n color: rgba(255,255,255,.95); font-size: 16px; font-weight: 700;\n text-shadow: 0 1px 3px rgba(0,0,0,.3);\n}\n\n\/* Text input *\/\n.text-input {\n width: 100%; background: var(--bg);\n border: 1.5px solid var(--border); border-radius: 10px;\n color: var(--text); font-family: 'Noto Sans JP', sans-serif;\n font-size: 16px;\n padding: 11px 13px; resize: none; outline: none;\n transition: border-color .15s, box-shadow .15s; margin-bottom: 14px;\n}\n.text-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,121,193,0.12); }\n.text-input::placeholder { color: var(--muted); }\n\n\/* Slider *\/\n.slider-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }\ninput[type=range] {\n flex: 1; -webkit-appearance: none;\n height: 5px; background: var(--border); border-radius: 6px; outline: none;\n}\ninput[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 24px; height: 24px; border-radius: 50%;\n background: var(--accent); cursor: pointer;\n border: 3px solid #fff; box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0,121,193,0.3);\n}\n.slider-val { font-family: 'DM Mono', monospace; font-size: 13px; color: var(--accent); min-width: 26px; text-align: right; font-weight: 500; }\n\n\/* Style toggles *\/\n.style-row { display: flex; gap: 8px; margin-bottom: 14px; }\n.style-btn {\n background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px;\n padding: 10px 20px; min-height: 44px;\n cursor: pointer; font-family: 'Noto Sans JP', sans-serif; font-size: 13px;\n color: var(--muted); transition: all .15s; touch-action: manipulation;\n}\n.style-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }\n.style-btn.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }\n.style-btn.b { font-weight: 900; }\n.style-btn.i { font-style: italic; }\n\n\/* Ratio selector *\/\n.ratio-wrap {\n margin-top: 10px;\n overflow: hidden;\n max-height: 0;\n transition: max-height .25s ease, opacity .2s ease;\n opacity: 0;\n}\n.ratio-wrap.visible { max-height: 80px; opacity: 1; }\n.ratio-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); margin-bottom: 8px; }\n.ratio-row { display: flex; gap: 7px; flex-wrap: wrap; }\n.ratio-btn {\n background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px;\n padding: 7px 13px; cursor: pointer;\n font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500;\n color: var(--muted); transition: all .15s; touch-action: manipulation;\n min-height: 36px;\n}\n.ratio-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }\n.ratio-btn.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }\n\n\/* Text color *\/\n.tc-row { display: flex; gap: 8px; flex-wrap: wrap; }\n.tc-btn {\n width: 40px; height: 40px; border-radius: 8px;\n border: 2px solid var(--border); cursor: pointer;\n transition: transform .12s, box-shadow .12s; touch-action: manipulation;\n}\n.tc-btn:hover { transform: scale(1.1); box-shadow: 0 3px 10px rgba(0,0,0,0.15); }\n.tc-btn.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,121,193,0.3); }\n\n\/* \u2500\u2500\u2500 Download bar \u2500\u2500\u2500 *\/\n.dl-bar {\n position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;\n padding: 10px 14px env(safe-area-inset-bottom, 10px);\n background: rgba(255,255,255,0.97);\n backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);\n border-top: 1.5px solid var(--border);\n display: flex; flex-direction: column; gap: 8px;\n box-shadow: 0 -4px 20px rgba(0,0,0,0.07);\n}\n.fmt-row { display: flex; gap: 7px; }\n.fmt-btn {\n flex: 1; background: var(--bg); border: 1.5px solid var(--border);\n border-radius: 8px; color: var(--muted);\n font-family: 'DM Mono', monospace; font-size: 13px;\n padding: 9px; min-height: 40px;\n cursor: pointer; transition: all .15s; touch-action: manipulation; font-weight: 500;\n}\n.fmt-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }\n.fmt-btn.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }\n\n.dl-btn {\n width: 100%; border: none; border-radius: 12px;\n background: linear-gradient(135deg, var(--accent), var(--accent2));\n color: #fff; font-family: 'Noto Sans JP', sans-serif;\n font-size: 16px; font-weight: 700; letter-spacing: .04em;\n padding: 15px; min-height: 52px;\n display: flex; align-items: center; justify-content: center; gap: 8px;\n cursor: pointer; transition: all .2s; touch-action: manipulation;\n box-shadow: 0 4px 16px rgba(0,121,193,0.3);\n}\n.dl-btn:active { transform: scale(.97); opacity: .9; }\n\n\/* \u2500\u2500\u2500 Desktop (\u2265 700px) \u2500\u2500\u2500 *\/\n@media (min-width: 700px) {\n .layout {\n flex-direction: row; align-items: flex-start;\n max-width: 980px; margin: 0 auto;\n padding: 28px 28px 48px; gap: 24px;\n }\n .left-col {\n flex: 0 0 290px;\n position: sticky; top: calc(57px + 16px);\n display: flex; flex-direction: column; gap: 12px;\n }\n .preview-block { padding: 0; }\n .preview-stage { height: 250px; }\n\n .dl-bar {\n position: static;\n background: transparent; backdrop-filter: none;\n -webkit-backdrop-filter: none;\n border-top: none; padding: 0; box-shadow: none;\n }\n .dl-btn {\n border-radius: 11px; font-size: 15px; min-height: 48px;\n }\n .dl-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,121,193,0.35); }\n\n .right-col { flex: 1 1 0; min-width: 0; }\n .controls { padding: 0; }\n .color-btn { min-height: unset; }\n}\n<\/style>\n<\/head>\n<body>\n\n<header>\n <div class=\"logo\">ki<\/div>\n <h1>\u30a2\u30a4\u30b3\u30f3\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc<\/h1>\n <small>Icon Creator<\/small>\n<\/header>\n\n<div class=\"layout\">\n\n <div class=\"left-col\">\n <div class=\"preview-block\">\n <div class=\"preview-stage\">\n <div id=\"icon-canvas\"><span id=\"icon-text\"><\/span><\/div>\n <\/div>\n <div class=\"size-label\" id=\"sizeLabel\">240 \u00d7 240 px<\/div>\n <\/div>\n\n <div class=\"dl-bar\">\n <div class=\"fmt-row\">\n <button class=\"fmt-btn active\" onclick=\"setFmt('png',this)\">PNG<\/button>\n <button class=\"fmt-btn\" onclick=\"setFmt('jpg',this)\">JPG<\/button>\n <button class=\"fmt-btn\" onclick=\"setFmt('svg',this)\">SVG<\/button>\n <\/div>\n <button class=\"dl-btn\" onclick=\"downloadIcon()\">⬇ \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/button>\n <\/div>\n <\/div>\n\n <div class=\"right-col\">\n <div class=\"controls\">\n\n <div class=\"card\">\n <div class=\"sec\">\u30a2\u30a4\u30b3\u30f3\u306e\u5f62<\/div>\n <div class=\"shape-grid\">\n <button class=\"shape-btn active\" onclick=\"setShape('square',this)\">\n <div class=\"shape-ico\"><div class=\"sq s\"><\/div><\/div>\n <span>\u6b63\u65b9\u5f62<\/span>\n <\/button>\n <button class=\"shape-btn\" onclick=\"setShape('wide',this)\">\n <div class=\"shape-ico\"><div class=\"sq w\"><\/div><\/div>\n <span>\u6a2a\u9577<\/span>\n <\/button>\n <button class=\"shape-btn\" onclick=\"setShape('tall',this)\">\n <div class=\"shape-ico\"><div class=\"sq t\"><\/div><\/div>\n <span>\u7e26\u9577<\/span>\n <\/button>\n <\/div>\n\n \n <div class=\"ratio-wrap\" id=\"ratioWrap\">\n <div class=\"ratio-label\" style=\"margin-top:2px\">\u6bd4\u7387<\/div>\n <div class=\"ratio-row\" id=\"ratioRow\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"sec\">\u80cc\u666f\u30ab\u30e9\u30fc<\/div>\n <div class=\"color-grid\" id=\"colorGrid\"><\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"sec\">\u30c6\u30ad\u30b9\u30c8<\/div>\n <textarea class=\"text-input\" id=\"iconText\" rows=\"3\"\n placeholder=\"\u30c6\u30ad\u30b9\u30c8\u3092\u5165\u529b \u4f8b\uff09\u58f2\u4e0a\u7ba1\u7406 \u3000\u3000\u9867\u5ba2DB\"\n oninput=\"render()\"><\/textarea>\n\n <div class=\"sec\">\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba<\/div>\n <div class=\"slider-row\">\n <input type=\"range\" id=\"fontSize\" min=\"10\" max=\"60\" value=\"24\"\n oninput=\"render(); document.getElementById('fsVal').textContent=this.value\">\n <span class=\"slider-val\" id=\"fsVal\">24<\/span>\n <\/div>\n\n <div class=\"sec\">\u30b9\u30bf\u30a4\u30eb<\/div>\n <div class=\"style-row\">\n <button class=\"style-btn b active\" id=\"boldBtn\" onclick=\"toggle('bold')\">B \u592a\u5b57<\/button>\n <button class=\"style-btn i\" id=\"italicBtn\" onclick=\"toggle('italic')\">I \u659c\u4f53<\/button>\n <\/div>\n\n <div class=\"sec\">\u6587\u5b57\u30ab\u30e9\u30fc<\/div>\n <div class=\"tc-row\" id=\"tcRow\"><\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\nconst BG_COLORS = [\n {name:'kintone Blue', hex:'#0079C1'},\n {name:'Sky', hex:'#2BBFFF'},\n {name:'Purple', hex:'#7B52C8'},\n {name:'Violet', hex:'#A855F7'},\n {name:'Coral', hex:'#FF5E5E'},\n {name:'Orange', hex:'#FF8C00'},\n {name:'Amber', hex:'#F5C500'},\n {name:'Emerald', hex:'#00B67A'},\n {name:'Teal', hex:'#0D9488'},\n {name:'Slate', hex:'#475569'},\n];\nconst TEXT_COLORS = ['#FFFFFF','#1a1a2e','#FFF9C4','#FFCDD2','#C8E6C9','#BBDEFB'];\n\n\/\/ \u6bd4\u7387\u5b9a\u7fa9 (\u57fa\u6e96\u8fba = 240px)\nconst RATIOS = {\n wide: [\n {label:'4:3', w:320, h:240},\n {label:'3:2', w:360, h:240},\n {label:'16:9', w:427, h:240},\n {label:'2:1', w:480, h:240},\n {label:'3:1', w:720, h:240},\n ],\n tall: [\n {label:'3:4', w:240, h:320},\n {label:'2:3', w:240, h:360},\n {label:'9:16', w:240, h:427},\n {label:'1:2', w:240, h:480},\n {label:'1:3', w:240, h:720},\n ],\n};\n\nconst S = {\n shape:'square', color:BG_COLORS[0].hex,\n text:'', fontSize:24, bold:true, italic:false,\n textColor:'#FFFFFF', fmt:'png',\n w:240, h:240, \/\/ actual output size\n};\n\nBG_COLORS.forEach((c,i) => {\n const b = document.createElement('button');\n b.className = 'color-btn' + (i===0?' active':'');\n b.style.background = c.hex; b.title = c.name;\n b.onclick = () => {\n document.querySelectorAll('.color-btn').forEach(x=>x.classList.remove('active'));\n b.classList.add('active'); S.color=c.hex; render();\n };\n document.getElementById('colorGrid').appendChild(b);\n});\n\nTEXT_COLORS.forEach((c,i) => {\n const b = document.createElement('button');\n b.className = 'tc-btn' + (i===0?' active':'');\n b.style.background = c;\n b.onclick = () => {\n document.querySelectorAll('.tc-btn').forEach(x=>x.classList.remove('active'));\n b.classList.add('active'); S.textColor=c; render();\n };\n document.getElementById('tcRow').appendChild(b);\n});\n\nfunction buildRatioButtons(shape) {\n const wrap = document.getElementById('ratioWrap');\n const row = document.getElementById('ratioRow');\n row.innerHTML = '';\n if (shape === 'square') { wrap.classList.remove('visible'); return; }\n wrap.classList.add('visible');\n RATIOS[shape].forEach((r, i) => {\n const b = document.createElement('button');\n b.className = 'ratio-btn' + (i===0?' active':'');\n b.textContent = r.label;\n b.onclick = () => {\n document.querySelectorAll('.ratio-btn').forEach(x=>x.classList.remove('active'));\n b.classList.add('active');\n S.w = r.w; S.h = r.h;\n render();\n };\n row.appendChild(b);\n });\n \/\/ Set first ratio as default\n S.w = RATIOS[shape][0].w;\n S.h = RATIOS[shape][0].h;\n}\n\nfunction setShape(s,el) {\n S.shape=s;\n document.querySelectorAll('.shape-btn').forEach(b=>b.classList.remove('active'));\n el.classList.add('active');\n if (s === 'square') { S.w=240; S.h=240; }\n buildRatioButtons(s);\n render();\n}\n\nfunction setFmt(f,el) {\n S.fmt=f;\n document.querySelectorAll('.fmt-btn').forEach(b=>b.classList.remove('active'));\n el.classList.add('active');\n}\nfunction toggle(k) {\n if(k==='bold') { S.bold=!S.bold; document.getElementById('boldBtn').classList.toggle('active',S.bold); }\n else { S.italic=!S.italic; document.getElementById('italicBtn').classList.toggle('active',S.italic); }\n render();\n}\n\nfunction render() {\n S.text = document.getElementById('iconText').value;\n S.fontSize = +document.getElementById('fontSize').value;\n const cvs = document.getElementById('icon-canvas');\n const txt = document.getElementById('icon-text');\n const stage = cvs.parentElement;\n const w = S.w, h = S.h;\n const sw = stage.clientWidth-32, sh = stage.clientHeight-32;\n const sc = Math.min(sw\/w, sh\/h, 1);\n cvs.style.width = Math.round(w*sc)+'px';\n cvs.style.height = Math.round(h*sc)+'px';\n cvs.style.background = S.color;\n cvs.style.borderRadius = Math.round(16*sc)+'px';\n txt.style.fontSize = Math.round(S.fontSize*sc)+'px';\n txt.style.fontWeight = S.bold ? '900' : '400';\n txt.style.fontStyle = S.italic ? 'italic': 'normal';\n txt.style.color = S.textColor;\n txt.textContent = S.text;\n document.getElementById('sizeLabel').textContent = `${w} \u00d7 ${h} px`;\n}\n\nfunction downloadIcon() {\n const w=S.w, h=S.h;\n if(S.fmt==='svg'){ dlSVG(w,h); return; }\n const cv = document.createElement('canvas');\n cv.width=w; cv.height=h;\n const ctx = cv.getContext('2d');\n ctx.clearRect(0,0,w,h);\n const r=24;\n ctx.beginPath();\n ctx.moveTo(r,0); ctx.lineTo(w-r,0); ctx.quadraticCurveTo(w,0,w,r);\n ctx.lineTo(w,h-r); ctx.quadraticCurveTo(w,h,w-r,h);\n ctx.lineTo(r,h); ctx.quadraticCurveTo(0,h,0,h-r);\n ctx.lineTo(0,r); ctx.quadraticCurveTo(0,0,r,0);\n ctx.closePath();\n ctx.save(); ctx.clip();\n ctx.fillStyle=S.color; ctx.fill();\n if(S.text) {\n ctx.fillStyle=S.textColor;\n const fw=S.bold?'900':'400', fi=S.italic?'italic ':'';\n ctx.font=`${fi}${fw} ${S.fontSize}px \"Noto Sans JP\",sans-serif`;\n ctx.textAlign='center'; ctx.textBaseline='middle';\n const lines=S.text.split('\\n'), lh=S.fontSize*1.3;\n const sy=h\/2-(lh*lines.length)\/2+lh\/2;\n lines.forEach((l,i)=>ctx.fillText(l,w\/2,sy+i*lh));\n }\n ctx.restore();\n if(S.fmt==='jpg') {\n const fc=document.createElement('canvas'); fc.width=w; fc.height=h;\n const fx=fc.getContext('2d');\n fx.fillStyle='#fff'; fx.fillRect(0,0,w,h); fx.drawImage(cv,0,0);\n dlFile(fc.toDataURL('image\/jpeg',0.95),'kintone-icon.jpg');\n } else {\n dlFile(cv.toDataURL('image\/png'),'kintone-icon.png');\n }\n}\n\nfunction dlSVG(w,h) {\n const r=24, lines=S.text.split('\\n'), lh=S.fontSize*1.3;\n const sy=h\/2-(lh*lines.length)\/2+lh\/2;\n const fw=S.bold?'900':'400', fi=S.italic?'italic':'normal';\n const txts=lines.map((l,i)=>`<text x=\"${w\/2}\" y=\"${sy+i*lh}\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-family=\"Noto Sans JP,sans-serif\" font-size=\"${S.fontSize}\" font-weight=\"${fw}\" font-style=\"${fi}\" fill=\"${S.textColor}\">${esc(l)}<\/text>`).join('\\n ');\n const svg=`<?xml version=\"1.0\" encoding=\"UTF-8\"?>\\n<svg width=\"${w}\" height=\"${h}\" viewBox=\"0 0 ${w} ${h}\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\\n <rect width=\"${w}\" height=\"${h}\" rx=\"${r}\" ry=\"${r}\" fill=\"${S.color}\"\/>\\n ${txts}\\n<\/svg>`;\n const url=URL.createObjectURL(new Blob([svg],{type:'image\/svg+xml'}));\n dlFile(url,'kintone-icon.svg');\n setTimeout(()=>URL.revokeObjectURL(url),1000);\n}\n\nfunction dlFile(url,name){ const a=document.createElement('a'); a.href=url; a.download=name; a.click(); }\nfunction esc(s){ return s.replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>').replace(\/\"\/g,'"'); }\n\nwindow.addEventListener('resize', render);\nbuildRatioButtons('square');\nrender();\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>kintone \u30a2\u30a4\u30b3\u30f3\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc ki \u30a2\u30a4\u30b3\u30f3\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc Icon Creator 240 \u00d7 240 px PNG JPG SVG ⬇ \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9 \u30a2\u30a4\u30b3\u30f3\u306e\u5f62 \u6b63\u65b9\u5f62 \u6a2a\u9577 \u7e26\u9577 \u6bd4\u7387 \u80cc […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-359","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=\/wp\/v2\/pages\/359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=359"}],"version-history":[{"count":11,"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=\/wp\/v2\/pages\/359\/revisions"}],"predecessor-version":[{"id":375,"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=\/wp\/v2\/pages\/359\/revisions\/375"}],"wp:attachment":[{"href":"https:\/\/ohashisoken.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}