{"id":1413,"date":"2025-05-27T14:55:48","date_gmt":"2025-05-27T05:55:48","guid":{"rendered":"https:\/\/tomato-made.com\/study\/?p=1413"},"modified":"2025-10-11T13:42:06","modified_gmt":"2025-10-11T04:42:06","slug":"t14","status":"publish","type":"post","link":"https:\/\/tomato-made.com\/study\/market-z\/t14","title":{"rendered":"\u5199\u771f\u3092\u6b63\u65b9\u5f62\uff06\u81ea\u7136\u80cc\u666f\u3067\u6574\u3048\u308b\u30c4\u30fc\u30eb\uff08\u89d2\u4e38\u30aa\u30d7\u30b7\u30e7\u30f3\u4ed8\uff09"},"content":{"rendered":"\n<p>\u6b63\u65b9\u5f62\u306b\u306a\u3063\u3066\u306a\u3044\u5199\u771f\u3092\u6574\u3048\u308b\u30c4\u30fc\u30eb\ud83d\udce3\ud83d\udce3\ud83d\udce3<\/p>\n\n\n\n<p><strong><span class=\"keiko_yellow_full\">\u3010\u81ea\u7136\u306a\u8272\u5473\u306e\u80cc\u666f\u3011<\/span><\/strong>\u3092\u8ffd\u52a0\u3057\u3066\u3001<strong><span class=\"keiko_yellow_full\">\u6b63\u65b9\u5f62<\/span><\/strong>\u306b\u6574\u3048\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/p>\n\n\n\n<p><strong><span class=\"keiko_yellow_full\">\u3010\u89d2\u4e38\u3011<\/span><\/strong>\u3082\u8ffd\u52a0\u3067\u304d\u308b\u306e\u3067\u3001\u3084\u308f\u3089\u304b\u3044\u5370\u8c61\u306e\u5199\u771f\u3092\u4f5c\u308a\u305f\u3044\u3068\u304d\u306b\u4fbf\u5229\u3060\u3088\u3002\ud83e\udde1\ud83d\udc9b\ud83e\udde1<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div id=\"sgb-css-id-1\">\n<p class=\"has-text-align-center\">\ud83c\udf45\u753b\u50cf\u3092\u9078\u3076\u524d\u306b\u8a2d\u5b9a\u3057\u3066\u306d\uff01<\/p>\n<\/div>\n\n\n<div class=\"super-rounded-tool\" style=\"text-align:center; max-width:100%;\">\n\n  <style>\n    .super-rounded-tool button,\n    .super-rounded-tool label {\n      background-color: #f36f6f;\n      color: white;\n      font-weight: bold;\n      padding: 12px 20px;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      margin: 10px;\n      display: inline-block;\n    }\n\n    .super-rounded-tool label[for=superRadiusSlider],\n    .super-rounded-tool label[for=superSizeSlider] {\n      background-color: transparent;\n      color: #333;\n      padding: 0;\n      font-weight: normal;\n      cursor: default;\n      display: inline;\n    }\n\n    .super-rounded-tool canvas {\n      max-width: 100%;\n      display: block;\n      margin: 10px auto;\n    }\n\n    .super-rounded-tool input[type=range] {\n      width: 60%;\n      margin: 10px auto;\n      display: block;\n    }\n\n    .super-rounded-tool .img-box {\n      display: inline-block;\n      margin: 10px;\n      border: 1px solid #ddd;\n      padding: 10px;\n      border-radius: 8px;\n    }\n\n    .super-rounded-tool a {\n      display: block;\n      margin-top: 5px;\n      color: #d94c72;\n      font-size: 14px;\n      text-decoration: underline;\n    }\n  <\/style>\n\n  <input type=\"file\" id=\"superRoundInput\" accept=\"image\/*\" multiple style=\"display:none;\">\n  <label for=\"superRoundInput\">\u753b\u50cf\u3092\u9078\u3076<\/label>\n\n  <div>\n    <label for=\"superRadiusSlider\">\u89d2\u4e38\uff080\u301c500px\uff09: <span id=\"superRadiusValue\">60<\/span>px<\/label>\n    <input type=\"range\" id=\"superRadiusSlider\" min=\"0\" max=\"500\" value=\"60\">\n  <\/div>\n\n  <div>\n    <label for=\"superSizeSlider\">\u753b\u50cf\u30b5\u30a4\u30ba\uff08\u6b63\u65b9\u5f62, 300\u301c1200px\uff09: <span id=\"superSizeValue\">500<\/span>px<\/label>\n    <input type=\"range\" id=\"superSizeSlider\" min=\"300\" max=\"1200\" value=\"500\">\n  <\/div>\n\n  <button id=\"superRoundDownloadAll\" style=\"display:none;\">\u4e00\u62ec\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/button>\n\n  <div id=\"superRoundOutput\"><\/div>\n\n  <script>\n    const input = document.getElementById('superRoundInput');\n    const slider = document.getElementById('superRadiusSlider');\n    const sizeSlider = document.getElementById('superSizeSlider');\n    const radiusValueDisplay = document.getElementById('superRadiusValue');\n    const sizeValueDisplay = document.getElementById('superSizeValue');\n    const container = document.getElementById('superRoundOutput');\n    const downloadAllBtn = document.getElementById('superRoundDownloadAll');\n    let imageDataList = [];\n\n    function lightenColor(r, g, b, factor = 0.9) {\n      const light = c => Math.round(c + (255 - c) * factor);\n      return `rgb(${light(r)},${light(g)},${light(b)})`;\n    }\n\n    function drawRounded(ctx, x, y, w, h, radius) {\n      const maxRadius = Math.min(w, h) \/ 2;\n      radius = Math.min(radius, maxRadius);\n      ctx.beginPath();\n      ctx.moveTo(x + radius, y);\n      ctx.arcTo(x + w, y, x + w, y + h, radius);\n      ctx.arcTo(x + w, y + h, x, y + h, radius);\n      ctx.arcTo(x, y + h, x, y, radius);\n      ctx.arcTo(x, y, x + w, y, radius);\n      ctx.closePath();\n      ctx.clip();\n    }\n\n    function drawToCanvasRounded(img, radius, targetSize, callback) {\n      const aspectRatio = img.width \/ img.height;\n      let newW, newH;\n\n      if (aspectRatio >= 1) {\n        newW = targetSize;\n        newH = Math.round(targetSize \/ aspectRatio);\n      } else {\n        newH = targetSize;\n        newW = Math.round(targetSize * aspectRatio);\n      }\n\n      const tempCanvas = document.createElement('canvas');\n      const tempCtx = tempCanvas.getContext('2d');\n      tempCanvas.width = img.width;\n      tempCanvas.height = img.height;\n      tempCtx.drawImage(img, 0, 0);\n\n      let r = 0, g = 0, b = 0, count = 0;\n      for (let x = 0; x < img.width; x += 10) {\n        [0, img.height - 1].forEach(y => {\n          const data = tempCtx.getImageData(x, y, 1, 1).data;\n          r += data[0]; g += data[1]; b += data[2]; count++;\n        });\n      }\n      for (let y = 0; y < img.height; y += 10) {\n        [0, img.width - 1].forEach(x => {\n          const data = tempCtx.getImageData(x, y, 1, 1).data;\n          r += data[0]; g += data[1]; b += data[2]; count++;\n        });\n      }\n\n      r = Math.round(r \/ count);\n      g = Math.round(g \/ count);\n      b = Math.round(b \/ count);\n      const bgColor = lightenColor(r, g, b, 0.9);\n\n      const canvas = document.createElement('canvas');\n      canvas.width = targetSize;\n      canvas.height = targetSize;\n      const ctx = canvas.getContext('2d');\n\n      ctx.fillStyle = bgColor;\n      ctx.fillRect(0, 0, targetSize, targetSize);\n\n      const x = (targetSize - newW) \/ 2;\n      const y = (targetSize - newH) \/ 2;\n\n      drawRounded(ctx, x, y, newW, newH, radius);\n      ctx.drawImage(img, x, y, newW, newH);\n\n      callback(canvas);\n    }\n\n    function processAll(files) {\n      container.innerHTML = '';\n      imageDataList = [];\n\n      files.forEach((file, index) => {\n        const reader = new FileReader();\n        reader.onload = e => {\n          const img = new Image();\n          img.onload = () => {\n            drawToCanvasRounded(\n              img,\n              parseInt(slider.value, 10),\n              parseInt(sizeSlider.value, 10),\n              canvas => {\n                const dataURL = canvas.toDataURL('image\/jpeg');\n                imageDataList.push({ name: `rounded-${index + 1}.jpg`, data: dataURL });\n\n                const box = document.createElement('div');\n                box.className = 'img-box';\n                box.appendChild(canvas);\n\n                const link = document.createElement('a');\n                link.href = dataURL;\n                link.download = `rounded-${index + 1}.jpg`;\n                link.textContent = '\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9';\n                box.appendChild(link);\n\n                container.appendChild(box);\n\n                if (imageDataList.length === files.length) {\n                  downloadAllBtn.style.display = 'inline-block';\n                }\n              }\n            );\n          };\n          img.src = e.target.result;\n        };\n        reader.readAsDataURL(file);\n      });\n    }\n\n    let currentFiles = [];\n\n    input.addEventListener('change', function () {\n      currentFiles = Array.from(this.files);\n      processAll(currentFiles);\n    });\n\n    slider.addEventListener('input', () => {\n      radiusValueDisplay.textContent = slider.value;\n      if (currentFiles.length) {\n        processAll(currentFiles);\n      }\n    });\n\n    sizeSlider.addEventListener('input', () => {\n      sizeValueDisplay.textContent = sizeSlider.value;\n      if (currentFiles.length) {\n        processAll(currentFiles);\n      }\n    });\n\n    downloadAllBtn.addEventListener('click', () => {\n      imageDataList.forEach(img => {\n        const a = document.createElement('a');\n        a.href = img.data;\n        a.download = img.name;\n        document.body.appendChild(a);\n        a.click();\n        document.body.removeChild(a);\n      });\n    });\n  <\/script>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"798\" height=\"238\" src=\"https:\/\/tomato-made.com\/study\/wp-content\/uploads\/2025\/05\/\u5199\u771f\u3092\u6b63\u65b9\u5f62\uff06\u81ea\u7136\u80cc\u666f\u3067\u6574\u3048\u308b\u30c4\u30fc\u30eb\uff08\u89d2\u4e38\u30aa\u30d7\u30b7\u30e7\u30f3\u4ed8-2.png\" alt=\"\" class=\"wp-image-1459\" srcset=\"https:\/\/tomato-made.com\/study\/wp-content\/uploads\/2025\/05\/\u5199\u771f\u3092\u6b63\u65b9\u5f62\uff06\u81ea\u7136\u80cc\u666f\u3067\u6574\u3048\u308b\u30c4\u30fc\u30eb\uff08\u89d2\u4e38\u30aa\u30d7\u30b7\u30e7\u30f3\u4ed8-2.png 798w, https:\/\/tomato-made.com\/study\/wp-content\/uploads\/2025\/05\/\u5199\u771f\u3092\u6b63\u65b9\u5f62\uff06\u81ea\u7136\u80cc\u666f\u3067\u6574\u3048\u308b\u30c4\u30fc\u30eb\uff08\u89d2\u4e38\u30aa\u30d7\u30b7\u30e7\u30f3\u4ed8-2-300x89.png 300w, https:\/\/tomato-made.com\/study\/wp-content\/uploads\/2025\/05\/\u5199\u771f\u3092\u6b63\u65b9\u5f62\uff06\u81ea\u7136\u80cc\u666f\u3067\u6574\u3048\u308b\u30c4\u30fc\u30eb\uff08\u89d2\u4e38\u30aa\u30d7\u30b7\u30e7\u30f3\u4ed8-2-768x229.png 768w\" sizes=\"(max-width: 798px) 100vw, 798px\"><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div id=\"addToHomeBox\" style=\"margin: 30px 0;\">\n  <button onclick=\"showGuide()\" style=\"width: 100%; padding: 15px; font-weight: bold; background-color: #f781813d; color: #f28282; border: none; border-radius: 10px; font-size: 16px;\">\n    \u30db\u30fc\u30e0\u753b\u9762\u306b\u8ffd\u52a0\n  <\/button>\n  <p id=\"guideText\" style=\"margin-top: 15px; font-size: 15px; line-height: 1.8; display: none;\"><\/p>\n<\/div>\n\n<script>\n  function showGuide() {\n    const ua = window.navigator.userAgent.toLowerCase();\n    const guide = document.getElementById('guideText');\n    guide.style.display = 'block';\n\n    if (ua.includes('iphone') || ua.includes('ipad')) {\n      guide.innerHTML = `\n        Safari\u306e\u300c\u5171\u6709\u300d\u30dc\u30bf\u30f3\uff08\u25a1\u306b\u2191\uff09\u3092\u30bf\u30c3\u30d7\u3059\u308b\u3002<br>\n        \u3000\u3000\u21e9<br>\n        \u300c\u30db\u30fc\u30e0\u753b\u9762\u306b\u8ffd\u52a0\u300d\u3092\u9078\u3076\u3002\n      `;\n    } else if (ua.includes('android')) {\n      guide.innerHTML = `\n        \u53f3\u4e0a\u306e\u30e1\u30cb\u30e5\u30fc\uff08\ufe19\uff09\u3092\u30bf\u30c3\u30d7\u3059\u308b\u3002<br>\n        \u3000\u3000\u21e9<br>\n        \u300c\u30db\u30fc\u30e0\u753b\u9762\u306b\u8ffd\u52a0\u300d\u3092\u9078\u3076\u3002\n      `;\n    } else if (ua.includes('windows') || ua.includes('macintosh')) {\n      guide.innerHTML = `\n        Chrome\u3067\u8868\u793a\u3055\u308c\u308b\u53f3\u4e0a\u306e\u30e1\u30cb\u30e5\u30fc\uff08\ufe19\uff09\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3002<br>\n        \u3000\u3000\u21e9<br>\n        \u300c\u30ad\u30e3\u30b9\u30c8\u30fb\u5171\u6709\u30fb\u4fdd\u5b58\u300d\u27a1\u300c\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8\u3092\u4f5c\u6210\u2026\u300d\n      `;\n    } else {\n      guide.innerHTML = `\n        \u30d6\u30e9\u30a6\u30b6\u306e\u30e1\u30cb\u30e5\u30fc\u304b\u3089\u300c\u30db\u30fc\u30e0\u753b\u9762\u306b\u8ffd\u52a0\u300d\u307e\u305f\u306f\u300c\u3053\u306e\u30b5\u30a4\u30c8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u300d\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044\u3002\n      `;\n    }\n  }\n<\/script>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<p><div id=\"sgb-css-id-3\" >\n<\/p><p><\/p>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div id=\"sgb-css-id-2\" style=\"--sgb--custom--bg-color: var(--sgb-main-color);--sgb--custom--text-color: #ffffff;--sgb--custom--text-after: '\u7d9a\u304d\u3092\u8aad\u3080';--sgb--custom--text-after-radius: 4;\"><a class=\"linkto table\" href=\"https:\/\/tomato-made.com\/study\/market-z\/5\"> <span class=\"tbcell tbimg\"><img decoding=\"async\" width=\"160\" height=\"160\" src=\"https:\/\/tomato-made.com\/study\/wp-content\/uploads\/2025\/04\/\u30cf\u30f3\u30c9\u30e1\u30a4\u30c9\u306b\u5f79\u7acb\u3064\u30c4\u30fc\u30eb\u307e\u3068\u3081-160x160.png\" class=\"attachment-thumb-160 size-thumb-160 wp-post-image\" alt=\"\" srcset=\"https:\/\/tomato-made.com\/study\/wp-content\/uploads\/2025\/04\/\u30cf\u30f3\u30c9\u30e1\u30a4\u30c9\u306b\u5f79\u7acb\u3064\u30c4\u30fc\u30eb\u307e\u3068\u3081-160x160.png 160w, https:\/\/tomato-made.com\/study\/wp-content\/uploads\/2025\/04\/\u30cf\u30f3\u30c9\u30e1\u30a4\u30c9\u306b\u5f79\u7acb\u3064\u30c4\u30fc\u30eb\u307e\u3068\u3081-150x150.png 150w\" sizes=\"(max-width: 160px) 100vw, 160px\"><\/span> <span class=\"tbcell tbtext\"> <time class=\"pubdate sng-link-time dfont\" itemprop=\"datePublished\" datetime=\"2025-01-20\">2025\u5e741\u670820\u65e5<\/time> \u30cf\u30f3\u30c9\u30e1\u30a4\u30c9\u306b\u5f79\u7acb\u3064\u30c4\u30fc\u30eb\u7d39\u4ecb <\/span> <\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>\u6b63\u65b9\u5f62\u306b\u306a\u3063\u3066\u306a\u3044\u5199\u771f\u3092\u6574\u3048\u308b\u30c4\u30fc\u30eb\ud83d\udce3\ud83d\udce3\ud83d\udce3 \u3010\u81ea\u7136\u306a\u8272\u5473\u306e\u80cc\u666f\u3011\u3092\u8ffd\u52a0\u3057\u3066\u3001\u6b63\u65b9\u5f62\u306b\u6574\u3048\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002 \u3010\u89d2\u4e38\u3011\u3082\u8ffd\u52a0\u3067\u304d\u308b\u306e\u3067\u3001\u3084\u308f\u3089\u304b\u3044\u5370\u8c61\u306e\u5199\u771f\u3092\u4f5c\u308a\u305f\u3044\u3068\u304d\u306b\u4fbf\u5229\u3060\u3088\u3002\ud83e\udde1\ud83d\udc9b\ud83e\udde1 \ud83c\udf45\u753b\u50cf\u3092\u9078\u3076\u524d\u306b\u8a2d\u5b9a\u3057\u3066\u306d\uff01 \u753b\u50cf &#8230; <\/p>\n","protected":false},"author":1,"featured_media":4017,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,6,8],"tags":[],"class_list":{"0":"post-1413","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-market-z","8":"category-tool","9":"category-image","10":"entry"},"_links":{"self":[{"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/posts\/1413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/comments?post=1413"}],"version-history":[{"count":0,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/posts\/1413\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/media\/4017"}],"wp:attachment":[{"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/media?parent=1413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/categories?post=1413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/tags?post=1413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}