{"id":15225,"date":"2025-03-31T07:06:10","date_gmt":"2025-03-30T22:06:10","guid":{"rendered":"https:\/\/blog.capilano-fw.com\/?p=15225"},"modified":"2025-04-03T03:29:16","modified_gmt":"2025-04-02T18:29:16","slug":"%e3%80%90%e5%8a%b9%e7%8e%87%e5%8c%96%e3%80%91%e3%83%9e%e3%82%a6%e3%82%b9%e8%bb%8c%e9%81%93%e3%81%a7%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%82%92%e5%8f%8d%e8%bb%a2","status":"publish","type":"post","link":"https:\/\/blog.capilano-fw.com\/?p=15225","title":{"rendered":"\u3010\u52b9\u7387\u5316\u3011\u30de\u30a6\u30b9\u8ecc\u9053\u3067\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u53cd\u8ee2\u3055\u305b\u308b\u6a5f\u80fd\u3092\u3064\u304f\u308b\u65b9\u6cd5"},"content":{"rendered":"\n<p>\u3055\u3066\u3055\u3066\u3001\u3053\u308c\u307e\u306720\u5e74\u8fd1\u304f\u305f\u304f\u3055\u3093\u306e\u793e\u5185\u30b7\u30b9\u30c6\u30e0\u3092\u62c5\u5f53\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3057\u305f\u304c\u3001\u3053\u306e\u524d\u300c<strong>\u305d\u3046\u3044\u3048\u3070\u78ba\u304b\u306b\uff01<\/strong>\u300d\u3068\u601d\u3046\u3053\u3068\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u305d\u308c\u306f\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n\n\n\n<p class=\"has-large-font-size\">\u300c\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u304c\u305f\u304f\u3055\u3093\u3042\u308b\u3068\u3001\u30dd\u30c1\u30dd\u30c1\u9762\u5012\u3060\u306d\u30fb\u30fb\u30fb\u30fb\u300d<\/p>\n\n\n\n<p>\u3068\u3044\u3046\u3082\u306e\u3002<\/p>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u9078\u629e\u80a2\u304c\u305f\u304f\u3055\u3093\u3042\u308b\u5834\u5408\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"519\" height=\"250\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/03\/drawing_selector_checkbox_1.png\" alt=\"\" class=\"wp-image-15227\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/03\/drawing_selector_checkbox_1.png 519w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/03\/drawing_selector_checkbox_1-300x145.png 300w\" sizes=\"auto, (max-width: 519px) 100vw, 519px\" \/><\/figure>\n\n\n\n<p class=\"has-small-font-size\">\u203b\u5b9f\u969b\u306e\u753b\u9762\u306f\u51fa\u305b\u307e\u305b\u3093\u304c\u3001\u3044\u307e\u958b\u767a\u4e2d\u306e\u30b7\u30b9\u30c6\u30e0\u306e\u9078\u629e\u80a2\u306f100\u3069\u3053\u308d\u306e\u8a71\u3067\u306f\u306a\u3044\u3093\u3067\u3059\u3002\u3002<\/p>\n\n\n\n<p>\u305d\u3053\u3067\u4f55\u304b\u89e3\u6c7a\u3067\u304d\u308b\u30a2\u30a4\u30c7\u30a2\u306f\u306a\u3044\u3082\u306e\u304b\u3068\u8003\u3048\u3066\u3044\u305f\u3068\u3053\u308d\u3001\u3044\u307e\u52c9\u5f37\u4e2d\u306e<code>Illustrator<\/code>\u306e\u300c<strong>\u30b7\u30a7\u30a4\u30d7\u5f62\u6210\u30c4\u30fc\u30eb<\/strong>\u300d\u3092\u601d\u3044\u51fa\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u30b7\u30a7\u30a4\u30d7\u5f62\u6210\u30c4\u30fc\u30eb\u306f\u3001\u30de\u30a6\u30b9\u304c\u901a\u3063\u305f\u5834\u6240\u306b\u3042\u308b\u56f3\u5f62\u306e\u7d50\u5408\u30fb\u524a\u9664\u3067\u304d\u305f\u308a\u3059\u308b\u3093\u3067\u3059\u304c\u3001\u3053\u306e<strong><mark>\u300c\u30de\u30a6\u30b9\u8ecc\u9053\u300d\u3067\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u53cd\u8ee2\u3067\u304d\u308c\u3070\u3044\u3044\u306a<\/mark><\/strong>\u3001\u3068\u601d\u3063\u305f\u3093\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u305d\u3053\u3067\uff01<\/p>\n\n\n\n<p>\u4eca\u56de\u306f<code>JavaScript<\/code>\u3092\u4f7f\u3063\u3066\u300c<strong>\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u53cd\u8ee2\u3055\u305b\u308b<\/strong>\u300d\u6a5f\u80fd\u3092\u3064\u304f\u308a\u3001\u4f5c\u696d\u306e\u52b9\u7387\u5316\u3092\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"370\" height=\"320\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2022\/06\/no_21.png\" alt=\"\" class=\"wp-image-10758\" style=\"width:370px;height:auto\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2022\/06\/no_21.png 370w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2022\/06\/no_21-300x259.png 300w\" sizes=\"auto, (max-width: 370px) 100vw, 370px\" \/><\/figure><\/div>\n\n\n<p class=\"has-text-align-center\">\u300cESLint\u3055\u3093\u3001\u3053\u308c\u306f\u30db\u30f3\u30c8\u306b<br>\u898b\u3084\u3059\u3044\u306e\u3067\u3057\u3087\u3046\u304b\u30fb\u30fb\u30fb\ud83d\udca6\u300d<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5b9f\u73fe\u3059\u308b\u305f\u3081\u306e\u4f5c\u6226<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/03\/drawing_selector_checkbox_3.png\" alt=\"\" class=\"wp-image-15494\"\/><\/figure>\n\n\n\n<p><code>HTML<\/code>\u3068<code>JavaScript<\/code>\u3092\u4f7f\u3063\u3066\u300c<strong>\u30de\u30a6\u30b9\u8ecc\u9053\u3067\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u53cd\u8ee2\u3055\u305b\u308b\u6a5f\u80fd<\/strong>\u300d\u3092\u5b9f\u88c5\u3059\u308b\u305f\u3081\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u624b\u9806\u3092\u3068\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>\u203b\u30b3\u30fc\u30c9\u304c\u77e5\u308a\u305f\u3044\u65b9\u306f\u3001\u6b21\u306e\u9805\u76ee\u307e\u3067\u8aad\u307f\u98db\u3070\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>2\u3064\u306e\u30d6\u30ed\u30c3\u30af\uff08\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306e\u30a8\u30ea\u30a2\u3001\u30de\u30a6\u30b9\u30c9\u30e9\u30c3\u30b0\u306e\u30a8\u30ea\u30a2\uff09\u3092\u7528\u610f\u3059\u308b<\/li>\n\n\n\n<li>\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306e\u30a8\u30ea\u30a2\u3092\u4e0b\u3001\u30de\u30a6\u30b9\u30c9\u30e9\u30c3\u30b0\u306e\u30a8\u30ea\u30a2\u3092\u4e0a\u4e0b\u306b\u91cd\u306d\u308b<\/li>\n\n\n\n<li>\u30de\u30a6\u30b9\u30c9\u30e9\u30c3\u30b0\u3055\u308c\u305f\u4f4d\u7f6e\u3092\u30a4\u30d9\u30f3\u30c8\u3067\u53d6\u5f97<\/li>\n\n\n\n<li>\u540c\u3058\u4f4d\u7f6e\u306b\u3042\u308b\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306e\u30aa\u30f3\u30fb\u30aa\u30d5\u3092\u53cd\u8ee2\u3059\u308b<\/li>\n<\/ol>\n\n\n\n<p>\u3064\u307e\u308a\u3001\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u304c\u3042\u308b\u30a8\u30ea\u30a2\u306b\u900f\u660e\u306a\u677f\u3092\u304b\u3076\u305b\u3066\u3001\u30de\u30a6\u30b9\u304c\u901a\u3063\u305f\u4f4d\u7f6e\u60c5\u5831\u3092\u53d6\u5f97\u3059\u308b\u3068\u3044\u3046\u6d41\u308c\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u3061\u306a\u307f\u306b\u3001\u4eca\u56de\u306f\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306e\u53cd\u8ee2\u306f\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3067\u5b9f\u88c5\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3059\uff08\u6c4e\u7528\u7684\u306b\u5225\u306e\u6a5f\u80fd\u306b\u3082\u4f7f\u3048\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u305f\ud83d\ude0a\uff09<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5b9f\u969b\u306e\u30b3\u30fc\u30c9<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/03\/drawing_selector_checkbox_4.png\" alt=\"\" class=\"wp-image-15496\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/03\/drawing_selector_checkbox_4.png 640w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/03\/drawing_selector_checkbox_4-300x169.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>\u4eca\u56de\u306f\u4ee5\u4e0b5\u3064\u304c\u7279\u5fb4\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vue\u3001React\u306f\u4f7f\u308f\u305aNative\u306aJavaScript\u3067\u3064\u304f\u308b<\/li>\n\n\n\n<li>TailwindCSS\u306f\u4f7f\u3046\u3051\u3069\u3001CDN\u3067\u5f15\u3063\u5f35\u3063\u3066\u304f\u308b<\/li>\n\n\n\n<li>\uff08\u7e70\u308a\u8fd4\u3057\u3067\u3059\u304c\uff09\u6c4e\u7528\u7684\u306b\u4f7f\u3048\u308b\u3088\u3046\u306b\u30af\u30e9\u30b9\u5316\u3059\u308b<\/li>\n\n\n\n<li>Shift\u30ad\u30fc\u3092\u62bc\u3057\u305f\u3068\u304d\u3060\u3051\u30de\u30a6\u30b9\u8ecc\u9053\u306e\u5165\u529b\u304c\u6709\u52b9\u306b\u306a\u308b<\/li>\n\n\n\n<li>\u5bfe\u8c61\u306b\u306a\u308b\u8981\u7d20\u306f\u300cdata-ds\u300d\u304c\u3064\u3044\u3066\u3044\u308b\u3082\u306e\u3060\u3051<\/li>\n<\/ul>\n\n\n\n<p>\u3067\u306f\u3001\u3069\u3046\u305e\uff01<\/p>\n\n\n\n<p><strong>\u3010\u8ffd\u8a18\uff1a2025.04.01\u3011<\/strong><br>\u3044\u3064\u3082\u3054\u652f\u63f4\u3044\u305f\u3060\u3044\u3066\u308b<a href=\"https:\/\/x.com\/shiro_cake\" target=\"_blank\" rel=\"noreferrer noopener\">shirocake\u3055\u3093<\/a>\u304c<a href=\"https:\/\/x.com\/shiro_cake\/status\/1906512791797923916\" target=\"_blank\" rel=\"noreferrer noopener\">\u3053\u3061\u3089\u306e\u30dd\u30b9\u30c8<\/a>\u3067\u6307\u6458\u3057\u3066\u304f\u3060\u3055\u3063\u305f\u3088\u3046\u306b\u3001\u30d0\u30b0\u304c\u767a\u751f\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u305d\u306e\u305f\u3081\u3001<code>canvas<\/code>\u3092\u4f55\u5ea6\u3082\u4f5c\u6210\u305b\u305a\u3001\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u30671\u56de\u3060\u3051\u3064\u304f\u308b\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3057\u305f\u3002\u307f\u306a\u3055\u3093\u3001\u3044\u3064\u3082\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\ud83d\ude0a\ud83d\udc4d<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"ja\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;\u30de\u30a6\u30b9\u8ecc\u9053\u3067\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u53cd\u8ee2\u3055\u305b\u308b\u30b5\u30f3\u30d7\u30eb\uff08\u6539\uff09&lt;\/title&gt;\n    &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tailwindcss\/browser@4\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;div class=\"p-10\"&gt;\n    &lt;h1 class=\"text-3xl font-bold mb-5\"&gt;\n        &lt;span class=\"border-b-8 border-indigo-500 pb-2\"&gt;\u30de\u30a6\u30b9\u8ecc\u9053\u3067\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u53cd\u8ee2\u3055\u305b\u308b\u30b5\u30f3\u30d7\u30eb\uff08\u6539\uff09&lt;\/span&gt;\n    &lt;\/h1&gt;\n    &lt;div class=\"flex items-center gap-5 px-1\"&gt;\n        &lt;div&gt;\n            Shift + \u30de\u30a6\u30b9\u30c9\u30e9\u30c3\u30b0\u3067&lt;br&gt;\n            \u30c1\u30a7\u30c3\u30af\u3092\u53cd\u8ee2\u3067\u304d\u307e\u3059\n        &lt;\/div&gt;\n        &lt;div class=\"text-xl text-indigo-500\"&gt;\u2192&lt;\/div&gt;\n        &lt;div class=\"main\"&gt;\n            &lt;!-- \u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u30ec\u30a4\u30e4\u30fc --&gt;\n            &lt;div id=\"container\" class=\"p-5\"&gt;\n                &lt;div class=\"flex gap-8\"&gt;\n                    &lt;label data-ds&gt;\n                        &lt;input type=\"checkbox\" class=\"mr-1\"&gt;\u30c6\u30b9\u30c8\n                    &lt;\/label&gt;\n                    &lt;label data-ds&gt;\n                        &lt;input type=\"checkbox\" class=\"mr-1\"&gt;\u30c6\u30b9\u30c8\n                    &lt;\/label&gt;\n                    &lt;label data-ds&gt;\n                        &lt;input type=\"checkbox\" class=\"mr-1\"&gt;\u30c6\u30b9\u30c8\n                    &lt;\/label&gt;\n                &lt;\/div&gt;\n                &lt;div class=\"flex gap-8\"&gt;\n                    &lt;label data-ds&gt;\n                        &lt;input type=\"checkbox\" class=\"mr-1\"&gt;\u30c6\u30b9\u30c8\n                    &lt;\/label&gt;\n                    &lt;label data-ds&gt;\n                        &lt;input type=\"checkbox\" class=\"mr-1\"&gt;\u30c6\u30b9\u30c8\n                    &lt;\/label&gt;\n                    &lt;label data-ds&gt;\n                        &lt;input type=\"checkbox\" class=\"mr-1\"&gt;\u30c6\u30b9\u30c8\n                    &lt;\/label&gt;\n                &lt;\/div&gt;\n                &lt;div class=\"flex gap-8\"&gt;\n                    &lt;label data-ds&gt;\n                        &lt;input type=\"checkbox\" class=\"mr-1\"&gt;\u30c6\u30b9\u30c8\n                    &lt;\/label&gt;\n                    &lt;label data-ds&gt;\n                        &lt;input type=\"checkbox\" class=\"mr-1\"&gt;\u30c6\u30b9\u30c8\n                    &lt;\/label&gt;\n                    &lt;label data-ds&gt;\n                        &lt;input type=\"checkbox\" class=\"mr-1\"&gt;\u30c6\u30b9\u30c8\n                    &lt;\/label&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n    class DrawingSelector {\n        constructor(el, options = {}) {\n            this.containerElement = el;\n            this.setOptions(options);\n\n            \/\/ Data\n            this.canvas = null;\n            this.ctx = null;\n            this.isDrawing = false;\n            this.lastX = null;\n            this.lastY = null;\n            this.targetElements = [];\n\n            \/\/ Initialize\n            this.initCanvas();\n            this.initKeyEvents();\n            this.initMouseEvents();\n        }\n\n        \/\/ Initialize\n        initCanvas() {\n            this.canvas = <em>document<\/em>.createElement('canvas');\n            this.canvas.style.position = 'absolute';\n            this.canvas.style.top = '0px';\n            this.canvas.style.left = '0px';\n            this.setCanvasZIndex();\n            <em>document<\/em>.body.appendChild(this.canvas);\n            this.showCanvas(false);\n\n            this.ctx = this.canvas.getContext('2d');\n            this.canvas.style.background = this.options.drawing.backgroundColor;\n\n            <em>window<\/em>.addEventListener('resize', () =&gt; this.resizeCanvas());\n            this.resizeCanvas();\n        }\n        initKeyEvents() {\n            <em>document<\/em>.addEventListener('keydown', (e) =&gt; this.handleKeyDown(e));\n            <em>document<\/em>.addEventListener('keyup', (e) =&gt; this.handleKeyUp(e));\n        }\n        initMouseEvents() {\n            this.canvas.addEventListener('mousedown', (e) =&gt; this.handleMouseDown(e));\n            this.canvas.addEventListener('mousemove', (e) =&gt; this.handleMouseMove(e));\n            this.canvas.addEventListener('mouseup', () =&gt; this.handleMouseUp());\n        }\n        setOptions(options) {\n            const baseOptions = {\n                drawing: {\n                    backgroundColor: '#FFA5001A',\n                    strokeColor: '#000',\n                    strokeWidth: 2,\n                },\n                elements: {\n                    borderColor: '#ff0000',\n                    borderWidth: 2,\n                },\n                callbacks: {\n                    onDraw(elements) {},\n                    onEnd(elements) {}\n                }\n            };\n            this.options = { ...baseOptions, ...options };\n        }\n\n        \/\/ Document and window\n        handleKeyDown(e) {\n            if (e.key === 'Shift') {\n                this.showCanvas(true);\n            }\n        }\n        handleKeyUp(e) {\n            if (e.key === 'Shift') {\n                this.showCanvas(false);\n                this.handleMouseUp();\n            }\n        }\n\n        \/\/ Canvas\n        resizeCanvas() {\n            const rect = this.containerElement.getBoundingClientRect();\n            this.canvas.width = rect.width;\n            this.canvas.height = rect.height;\n\n            this.canvas.style.top = `${rect.top}px`;\n            this.canvas.style.left = `${rect.left}px`;\n        }\n        showCanvas(boolean) {\n            this.canvas.style.visibility = boolean ? 'visible' : 'hidden';\n        }\n        drawElementBorder() {\n            const borderColor = this.options.elements.borderColor;\n            const borderWidth = this.options.elements.borderWidth;\n            if(borderColor &amp;&amp; borderWidth) {\n                this.targetElements.forEach((element) =&gt; {\n                    const rect = element.getBoundingClientRect();\n                    this.ctx.beginPath();\n                    this.ctx.rect(rect.left - this.canvas.offsetLeft, rect.top - this.canvas.offsetTop, rect.width, rect.height);\n                    this.ctx.strokeStyle = borderColor;\n                    this.ctx.lineWidth = borderWidth;\n                    this.ctx.stroke();\n                });\n            }\n        }\n        setCanvasZIndex() {\n            const containerZIndex = <em>window<\/em>.getComputedStyle(this.containerElement).zIndex;\n            this.canvas.style.zIndex = (containerZIndex === 'auto')\n                ? '1'\n                : (Number(containerZIndex) + 1).toString();\n        }\n        handleMouseDown(e) {\n            if (e.shiftKey) {\n                this.isDrawing = true;\n                const rect = this.canvas.getBoundingClientRect();\n                const x = e.clientX - rect.left;\n                const y = e.clientY - rect.top;\n                [this.lastX, this.lastY] = [x, y];\n                this.targetElements = [];\n            }\n        }\n        handleMouseMove(e) {\n            if (this.isDrawing &amp;&amp; e.shiftKey) {\n                const rect = this.canvas.getBoundingClientRect();\n                const x = e.clientX - rect.left;\n                const y = e.clientY - rect.top;\n\n                if (this.lastX !== x || this.lastY !== y) {\n                    this.ctx.beginPath();\n                    this.ctx.moveTo(this.lastX, this.lastY);\n                    this.ctx.lineTo(x, y);\n                    this.ctx.strokeStyle = this.options.drawing.strokeColor;\n                    this.ctx.lineWidth = this.options.drawing.strokeWidth;\n                    this.ctx.stroke();\n                }\n\n                this.showCanvas(false);\n\n                \/\/ Get the elements under the cursor\n                const hoverElement = <em>document<\/em>.elementFromPoint(e.clientX, e.clientY);\n                if (hoverElement &amp;&amp; hoverElement.hasAttribute('data-ds') &amp;&amp; ! this.targetElements.includes(hoverElement)) {\n                    this.targetElements.push(hoverElement);\n                }\n\n                this.showCanvas(true);\n                this.drawElementBorder();\n\n                [this.lastX, this.lastY] = [x, y];\n\n                const callback = this.options.callbacks.onDraw;\n                if (typeof callback === 'function') {\n                    callback(this.targetElements);\n                }\n            }\n        }\n        handleMouseUp() {\n            if (this.isDrawing) {\n                this.isDrawing = false;\n                const callback = this.options.callbacks.onEnd;\n\n                if(typeof callback === 'function') {\n                    callback(this.targetElements);\n                }\n\n                this.targetElements = [];\n                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n            }\n        }\n    }\n\n    <em>window<\/em>.addEventListener('load', () =&gt; {\n\n        const containerElement = <em>document<\/em>.getElementById('container');\n        const options = {\n            drawing: {\n                backgroundColor: '#FFA5001A',\n                strokeColor: '#44444D',\n                strokeWidth: 3,\n            },\n            elements: {\n                borderColor: '#D21B49',\n                borderWidth: 2,\n            },\n            callbacks: {\n                onDraw(elements) {\n                    <em>console<\/em>.log(elements);\n                },\n                onEnd(elements) {\n                    \/\/ \u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u53cd\u8ee2\n                    elements.forEach((element) =&gt; {\n                        const checkbox = element.querySelector('input[type=\"checkbox\"]');\n                        if (checkbox) {\n                            checkbox.checked = ! checkbox.checked;\n                        }\n                        \/\/ Vue \u306e\u5834\u5408\u306finput\u30a4\u30d9\u30f3\u30c8\u3092\u767a\u706b\u3059\u3079\u304d\u3067\u3059\n                    });\n                }\n            }\n        };\n        new DrawingSelector(containerElement, options);\n\n    });\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/strong><\/pre>\n\n\n\n<p>\u3067\u306f\u3001\u4eca\u56de\u306f<code>JavaScript<\/code>\u30af\u30e9\u30b9\u300c<strong>DrawingSelector<\/strong>\u300d\u306e\u4e2d\u8eab\u3092\u8a73\u3057\u304f\u7d39\u4ecb\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\uff01<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u3001\u521d\u671f\u5316\u306e\u30d6\u30ed\u30c3\u30af<\/h3>\n\n\n\n<p>\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u306e\u4e2d\u3067\u306f\u3001\u4ee5\u4e0b8\u3064\u306e\u30e1\u30f3\u30d0\u5909\u6570\u3092\u4f5c\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>containerElement\uff1a\u5bfe\u8c61\u306b\u3059\u308b\u8981\u7d20<\/li>\n\n\n\n<li>options\uff1a\u597d\u307f\u3067\u5909\u66f4\u3067\u304d\u308b\u30d1\u30e9\u30e1\u30fc\u30bf\uff08\u203b\u8a73\u3057\u304f\u306f\u5f8c\u3067\u7d39\u4ecb\uff09<\/li>\n\n\n\n<li>canvas\uff1acanvas\u8981\u7d20<\/li>\n\n\n\n<li>ctx\uff1acanvas\u306e\u64cd\u4f5c\u306b\u5fc5\u8981\u306a\u5909\u6570<\/li>\n\n\n\n<li>isDrawing\uff1a\u3044\u307e\u63cf\u753b\u4e2d\u304b\u3069\u3046\u304b\u306e\u30d5\u30e9\u30b0<\/li>\n\n\n\n<li>lastX\uff1a\u6700\u5f8c\u306b\u30de\u30a6\u30b9\u304c\u3044\u305f\u5834\u6240\uff08X\u8ef8\uff09<\/li>\n\n\n\n<li>lastY\uff1a\u6700\u5f8c\u306b\u30de\u30a6\u30b9\u304c\u3044\u305f\u5834\u6240\uff08Y\u8ef8\uff09<\/li>\n\n\n\n<li>targetElements\uff1a\u30de\u30a6\u30b9\u8ecc\u9053\u4e0a\u306b\u3042\u3063\u305f\u8981\u7d20\uff08\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3067\u8fd4\u3059\uff09<\/li>\n<\/ul>\n\n\n\n<p>\u30aa\u30d7\u30b7\u30e7\u30f3\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>drawing.backgroundColor<\/strong><\/td><td>Shift\u3092\u62bc\u3057\u305f\u6642\u306b\u30cf\u30a4\u30e9\u30a4\u30c8\u3055\u308c\u308b\u8272\u3002\u4eca\u56de\u3067\u3044\u3046\u3068\u300ccontainer\u300d\u306e\u80cc\u666f\u8272\u3002<\/td><\/tr><tr><td><strong>drawing.strokeColor<\/strong><\/td><td>\u30de\u30a6\u30b9\u8ecc\u9053\u306e\u7dda\uff08\u8272\uff09<\/td><\/tr><tr><td><strong>drawing.strokeWidth<\/strong><\/td><td>\u30de\u30a6\u30b9\u8ecc\u9053\u306e\u7dda\uff08\u592a\u3055\uff09<\/td><\/tr><tr><td><strong>elements.borderColor<\/strong><\/td><td>\u30de\u30a6\u30b9\u8ecc\u9053\u306b\u3088\u3063\u3066\u9078\u629e\u3055\u308c\u305f\u8981\u7d20\u306e\u67a0\u7dda\uff08\u8272\uff09<\/td><\/tr><tr><td><strong>elements.borderWidth<\/strong><\/td><td>\u30de\u30a6\u30b9\u8ecc\u9053\u306b\u3088\u3063\u3066\u9078\u629e\u3055\u308c\u305f\u8981\u7d20\u306e\u67a0\u7dda\uff08\u592a\u3055\uff09<\/td><\/tr><tr><td><strong>callbacks.onDraw<\/strong><\/td><td>\u30de\u30a6\u30b9\u8ecc\u9053\u304c\u63cf\u753b\u3055\u308c\u3066\u3044\u308b\u3068\u304d\u306b\u5b9f\u884c\u3055\u308c\u308b\u30a4\u30d9\u30f3\u30c8\uff08\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\uff09<\/td><\/tr><tr><td><strong>callbacks.onEnd<\/strong><\/td><td>\u30de\u30a6\u30b9\u8ecc\u9053\u306e\u63cf\u753b\u304c\u7d42\u308f\u3063\u305f\u3068\u304d\u306b\u5b9f\u884c\u3055\u308c\u308b\u30a4\u30d9\u30f3\u30c8<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u3061\u306a\u307f\u306b\u3001\u30b3\u30fc\u30c9\u3067\u306f<code>options<\/code>\u306f\u57fa\u6e96\u3068\u306a\u308b\u30d1\u30e9\u30e1\u30fc\u30bf\u304c\u3042\u308a\u3001<strong>\u3082\u3057\u30e6\u30fc\u30b6\u30fc\u304c\u540c\u3058\u3082\u306e\u3092\u30bb\u30c3\u30c8\u3057\u305f\u3089\u4e0a\u66f8\u304d\u3055\u308c\u308b<\/strong>\u3088\u3046\u3001\u30b9\u30d7\u30ec\u30c3\u30c9\u69cb\u6587\u3067\u66f8\u3044\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-verse\"><strong>this.options = { ...baseOptions, ...options };<\/strong><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Document\u3068Window\uff08\u30ad\u30fc\u30a4\u30d9\u30f3\u30c8\uff09\u306e\u30d6\u30ed\u30c3\u30af<\/h3>\n\n\n\n<p>\u4eca\u56de\u300c\u30da\u30fc\u30b8\u5168\u4f53\u300d\u306e\u305f\u3081\u306b\u5fc5\u8981\u306b\u306a\u3063\u305f\u306e\u304c\u3001\u4ee5\u4e0b3\u3064\u306e\u30a4\u30d9\u30f3\u30c8\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Shift\u30ad\u30fc\u304c\u62bc\u3055\u308c\u305f\u3068\u304d<\/li>\n\n\n\n<li>Shift\u30ad\u30fc\u304c\u96e2\u3055\u308c\u305f\u3068\u304d<\/li>\n\n\n\n<li>\u30a6\u30a3\u30f3\u30c9\u30a6\u306e\u30b5\u30a4\u30ba\u304c\u5909\u308f\u3063\u305f\u3068\u304d<\/li>\n<\/ul>\n\n\n\n<p>\u305d\u3057\u3066\u3001\u3053\u308c\u3089\u3092\u5b9f\u88c5\u3059\u308b\u305f\u3081\u306b\u3064\u304f\u3063\u305f\u306e\u304c\u300c<strong>handleKeyDown<\/strong>\u300d\u3068\u300c<strong>handleKeyUp<\/strong>\u300d\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u6d41\u308c\u3068\u3057\u3066\u306f\u3001<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Shift\u30ad\u30fc\u304c\u62bc\u3055\u308c\u305f\u3089\u3001Canvas\u8981\u7d20\u3092\u3064\u304f\u308b<\/li>\n\n\n\n<li>\u30ad\u30e3\u30f3\u30d0\u30b9\u8981\u7d20\u3092\u300c\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u3067\u6307\u5b9a\u3055\u308c\u305f\u8981\u7d20\u300d\u3068\u540c\u3058\u5927\u304d\u3055\u306b\u3057\u3066\u4e0a\u306b\u91cd\u306d\u308b<\/li>\n\n\n\n<li>\uff08\u3053\u3053\u3067\u30de\u30a6\u30b9\u8ecc\u9053\u3092\u63cf\u753b\uff09<\/li>\n\n\n\n<li>Shift\u304c\u96e2\u308c\u305f\u3089\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u524a\u9664\u3057\u3066\u521d\u671f\u72b6\u614b\u3078\u623b\u3059<\/li>\n<\/ol>\n\n\n\n<p>\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u30ad\u30e3\u30f3\u30d0\u30b9\uff08\u30de\u30a6\u30b9\u30a4\u30d9\u30f3\u30c8\uff09\u306e\u30d6\u30ed\u30c3\u30af<\/h3>\n\n\n\n<p>\u3053\u306e\u30d6\u30ed\u30c3\u30af\u304c\u4eca\u56de\u306e\u30e1\u30a4\u30f3\u90e8\u5206\u3067\u3059\u3002<br>\u6d41\u308c\u306f\u4ee5\u4e0b\u306e\u3068\u304a\u308a\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Shift\u3092\u62bc\u3057\u306a\u304c\u3089\u30de\u30a6\u30b9\u30c9\u30e9\u30c3\u30b0\u3055\u308c\u305f\u3089\u3001\u30de\u30a6\u30b9\u8ecc\u9053\u3092\u63cf\u753b<\/li>\n\n\n\n<li>\u30de\u30a6\u30b9\u306e\u771f\u4e0b\u306b\u3042\u308b\u8981\u7d20\u3092\u53d6\u5f97<\/li>\n\n\n\n<li>\u3082\u3057data-ds\u304c\u3064\u3044\u3066\u3044\u305f\u3089\u3001\u9078\u629e\u3055\u308c\u305f\u8981\u7d20\u3068\u3057\u3066\u30c7\u30fc\u30bf\u306b\u8caf\u3081\u308b<\/li>\n\n\n\n<li>Shift\u304c\u96e2\u3055\u308c\u305f\u3089\u3001\u6e9c\u307e\u3063\u3066\u3044\u308b\u9078\u629e\u8981\u7d20\u3092\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3078\u9001\u308b<\/li>\n<\/ol>\n\n\n\n<p>\u3061\u306a\u307f\u306b\u3001\u4eca\u56de\u306e\u30b3\u30fc\u30c9\u3092\u66f8\u3044\u3066\u3044\u3066\u306f\u3058\u3081\u3066\u300c<strong>elementFromPoint<\/strong>\u300d\u3068\u3044\u3046\u3082\u306e\u304cJavaScript\u306b\u3042\u308b\u3053\u3068\u3092\u3057\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u95a2\u6570\u540d\u306e\u3068\u304a\u308a\u3001<strong>\u4f4d\u7f6e\u60c5\u5831\u304b\u3089\u8981\u7d20\u3092\u53d6\u5f97\u3059\u308b<\/strong>\u3068\u3044\u3046\u4fbf\u5229\u306a\u3082\u306e\u3067\u3059\u3002<br>\u305f\u3060\u3057\u3001\u3053\u308c\u306b\u306f\u6ce8\u610f\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u306a\u305c\u306a\u3089\u3001\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u900f\u660e\u306a\u677f\u3068\u3057\u3066\u7528\u610f\u3057\u3066\u3044\u308b\u306e\u3067\u3001<strong>elementFromPoint<\/strong>\u3092\u4f7f\u3046\u3068\u53d6\u5f97\u3067\u304d\u308b\u306e\u306f\u6bce\u56decanvas\u3068\u306a\u3063\u3066\u3057\u307e\u3046\u304b\u3089\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<p>\u305d\u306e\u305f\u3081\u3001\u76f4\u524d\u306b<code>showCanvas<\/code>\u3092\u4f7f\u3063\u3066\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u975e\u8868\u793a\u306b\u3057\u3001\u51e6\u7406\u304c\u7d42\u308f\u3063\u305f\u3089\u5143\u306b\u623b\u3059\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u4f7f\u3044\u65b9<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/03\/drawing_selector_checkbox_5.png\" alt=\"\" class=\"wp-image-15498\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/03\/drawing_selector_checkbox_5.png 640w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/03\/drawing_selector_checkbox_5-300x169.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>\u30b3\u30fc\u30c9\u306e\u3068\u304a\u308a\u3067\u3059\u304c\u3001\u4f7f\u3044\u65b9\u3067\u3059\u3002<br>\u3068\u3044\u3063\u3066\u3082\u3001\u3068\u3066\u3082\u30b7\u30f3\u30d7\u30eb\u3067\u30bf\u30fc\u30b2\u30c3\u30c8\u306e\u8981\u7d20\u3068\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u30bb\u30c3\u30c8\u3057\u3066\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\u3059\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>new DrawingSelector(containerElement, options);<\/strong><\/pre>\n\n\n\n<p>\u7c21\u5358\u3067\u3059\u306d\ud83d\udc4d<\/p>\n\n\n\n<p>\u305d\u3057\u3066\u3001\u4eca\u56de\u5b9f\u88c5\u3057\u305f\u304b\u3063\u305f\u300c\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u53cd\u8ee2\u3055\u305b\u308b\u300d\u90e8\u5206\u304c\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u4e2d\u306b\u3042\u308b\u300c<strong>onEnd<\/strong>\u300d\u3067\u3059\u3002<\/p>\n\n\n\n<p><code>onDraw<\/code>\u3001<code>onEnd<\/code>\u306f\u30de\u30a6\u30b9\u8ecc\u9053\u306e\u4e0b\u306b\u3042\u308b\u8981\u7d20\u3059\u3079\u3066\u3092\u5f15\u6570\u3068\u3057\u3066\u7528\u610f\u3057\u3066\u304f\u308c\u308b\u306e\u3067\u3001\u305d\u308c\u3089\u3092\u30eb\u30fc\u30d7\u3055\u305b\u3001\u3072\u3068\u3064\u305a\u3064\u30c1\u30a7\u30c3\u30af\u306e\u30aa\u30f3\u30fb\u30aa\u30d5\u3092\u5207\u308a\u66ff\u3048\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30d1\u30c3\u30b1\u30fc\u30b8\u3068\u3057\u3066\u516c\u958b\u3057\u307e\u3057\u305f\uff01<\/h2>\n\n\n\n<p>\u8b0e\u306e\u30e2\u30c1\u30d9\u30fc\u30b7\u30e7\u30f3\u304c\u3082\u3061\u3042\u304c\u3063\u305f\u306e\u3067\u3001\u4e45\u3057\u3076\u308a\u306b<code>npm<\/code>\u3078\u30d1\u30c3\u30b1\u30fc\u30b8\u516c\u958b\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u540d\u524d\u306f\u305d\u306e\u307e\u307e<a href=\"https:\/\/www.npmjs.com\/package\/drawingselector\" target=\"_blank\" rel=\"noreferrer noopener\">DrawingSelector<\/a>\u3067\u3059\u3002<br>MIT\u306a\u306e\u3067\u3001\u6c17\u304c\u5411\u3044\u305f\u3089\u4f7f\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\ud83d\ude0a<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30c6\u30b9\u30c8\u3057\u3066\u307f\u308b\uff08\u30c7\u30e2\u30da\u30fc\u30b8\uff09<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/01\/test_base.png\" alt=\"\" class=\"wp-image-14910\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/01\/test_base.png 640w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/01\/test_base-300x169.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>\u3067\u306f\u3001\u5b9f\u969b\u306b\u30c6\u30b9\u30c8\u3068\u3044\u304d\u305f\u3044\u3068\u3053\u308d\u3067\u3059\u304c\u3001\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8\u3092\u7528\u610f\u3057\u305f\u306e\u3067\u3001\u305c\u3072\u3054\u81ea\u8eab\u3067\u8a66\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p><strong>\u3010\u30b5\u30f3\u30d7\u30eb\u3011<a href=\"https:\/\/demo-laravel11x.capilano-fw.com\/drawing_selector_checkbox\" target=\"_blank\" rel=\"noreferrer noopener\">\u30de\u30a6\u30b9\u8ecc\u9053\u3067\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u53cd\u8ee2\u3055\u305b\u308b\u30b5\u30f3\u30d7\u30eb<\/a><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full image-border-3\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"181\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/03\/drawing_selector_checkbox_2.png\" alt=\"\" class=\"wp-image-15413\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/03\/drawing_selector_checkbox_2.png 640w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/03\/drawing_selector_checkbox_2-300x85.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u4f01\u696d\u69d8\u3078\u306e\u3054\u63d0\u6848<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/01\/suggestion_base.png\" alt=\"\" class=\"wp-image-14912\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/01\/suggestion_base.png 640w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/01\/suggestion_base-300x169.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>\u4eca\u56de\u306e\u3088\u3046\u306a\u300c<strong>\u3053\u306e\u4f5c\u696d\u3081\u3093\u3069\u3046\u3060\u306a\u30fb\u30fb\u30fb\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8\u3057\u305f\u3044\u306a\uff08\u5207\u5b9f\uff09<\/strong>\u300d\u3068\u3044\u3046\u65b9\u306f\u305c\u3072\u3054\u76f8\u8ac7\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p>\u65e5\u3005\u7e70\u308a\u8fd4\u3059\u30eb\u30fc\u30c6\u30a3\u30fc\u30f3\u30ef\u30fc\u30af\u30921\u5206\u3060\u3051\u3067\u3082\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8\u3067\u304d\u305f\u3089\u3001\u5e74\u9593\u3067\u3044\u3046\u3068\u81a8\u5927\u306a\u6642\u77ed\u306b\u3064\u306a\u304c\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u307e\u305f\u3001\u4f5c\u696d\u5185\u5bb9\u304c\u5c11\u306a\u304f\u306a\u308c\u3070\u652f\u6255\u3046\u7d66\u4e0e\u3092\u5b9f\u8cea\u7684\u306b\u6e1b\u3089\u3059\u3053\u3068\u306b\u306a\u308b\u308f\u3051\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<p>\u305d\u306e\u305f\u3081\u3001\u3082\u3057\u30a6\u30a7\u30d6\u306e\u30b7\u30b9\u30c6\u30e0\u3092\u3064\u304b\u3063\u3066\u52b9\u7387\u5316\u3092\u304a\u8003\u3048\u3067\u3057\u305f\u3089\u3001\u305c\u3072\u3069\u3093\u306a\u3053\u3068\u3067\u3082\u7d50\u69cb\u3067\u3059\u306e\u3067\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p>\u304a\u5f85\u3061\u3057\u3066\u304a\u308a\u307e\u3059\uff01<\/p>\n\n\n\n<p><a href=\"https:\/\/contact-me.capilano-fw.com\/\">\u304a\u554f\u3044\u5408\u308f\u305b\u306f\u3053\u3061\u3089\u304b\u3089<\/a>\ud83d\ude0a\u2728<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u304a\u308f\u308a\u306b<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/01\/last_comment_base.png\" alt=\"\" class=\"wp-image-14915\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/01\/last_comment_base.png 640w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2025\/01\/last_comment_base-300x169.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u300c<strong>\u30de\u30a6\u30b9\u8ecc\u9053\u3092\u3064\u304b\u3063\u3066\u4f5c\u696d\u3092\u52b9\u7387\u5316\u3059\u308b<\/strong>\u300d\u6a5f\u80fd\u3092\u3064\u304f\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u3061\u306a\u307f\u306b\u4eca\u56de\u5b9f\u611f\u3057\u305f\u3053\u3068\u306f\u3001<\/p>\n\n\n\n<p>\u300c<strong>\u307e\u3063\u305f\u304f\u9055\u3046\u5206\u91ce\u306e\u52c9\u5f37\u304c\u751f\u304d\u3066\u304f\u308b\u3053\u3068\u304c\u3042\u308b\uff01<\/strong>\u300d<\/p>\n\n\n\n<p>\u3068\u3044\u3046\u3082\u306e\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u4eca\u56de\u306e\u30a2\u30a4\u30c7\u30a2\u306e\u30b9\u30bf\u30fc\u30c8\u5730\u70b9\u306f\u3001\u300c<strong><code>Illustrator<\/code>\u306e\u30b7\u30a7\u30a4\u30d7\u5f62\u6210\u30c4\u30fc\u30eb\u3001\u4fbf\u5229\u3060\u306a\u3041\uff01<\/strong>\u300d\u3060\u3063\u305f\u304b\u3089\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<p>\u6b63\u76f4\u305f\u304f\u3055\u3093\u52c9\u5f37\u3057\u305f\u3082\u306e\u306e\u4e2d\u306b\u306f\u3001\u3053\u306e\u3042\u3068\u4e00\u751f\u4f7f\u308f\u306a\u3044\u30b9\u30ad\u30eb\u3084\u30c6\u30af\u30cb\u30c3\u30af\u3082\u3042\u308b\u3067\u3057\u3087\u3046\u304c\u3001\u5f31\u8005\u306e\u6226\u7565\u300c\u4e0b\u624b\u306a\u9244\u7832\u3082\u6570\u6253\u3061\u3083\u5f53\u305f\u308b\u300d\u65b9\u5f0f\u3067\u3001\u7740\u5b9f\u306b\u524d\u9032\u3057\u3066\u3044\u308b\u306e\u3092\u5b9f\u611f\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u305c\u3072\u7686\u3055\u3093\u3082\u3001A\u306e\u77e5\u8b58 \u00d7 B\u306e\u77e5\u8b58\u3067\u65b0\u3057\u3044\u3082\u306e\u3092\u3064\u304f\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u306d\u3002<\/p>\n\n\n\n<p>\u3067\u306f\u3067\u306f\u301c\uff01<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"226\" height=\"320\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2020\/03\/no_12.png\" alt=\"\" class=\"wp-image-6068\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2020\/03\/no_12.png 226w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2020\/03\/no_12-212x300.png 212w\" sizes=\"auto, (max-width: 226px) 100vw, 226px\" \/><\/figure><\/div>\n\n\n<p class=\"has-text-align-center\">\u300c\u53cb\u4eba\u306b\u9023\u308c\u3089\u308c\u3066\u3001\u4eba\u751f\u521d\u306e<br>\u30e2\u30fc\u30bf\u30fc\u30b7\u30e7\u30fc\u884c\u3063\u3066\u304d\u307e\u3057\u305f\uff01\u300d<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3055\u3066\u3055\u3066\u3001\u3053\u308c\u307e\u306720\u5e74\u8fd1\u304f\u305f\u304f\u3055\u3093\u306e\u793e\u5185\u30b7\u30b9\u30c6\u30e0\u3092\u62c5\u5f53\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3057\u305f\u304c\u3001\u3053\u306e\u524d\u300c\u305d\u3046\u3044\u3048\u3070\u78ba\u304b\u306b\uff01\u300d\u3068\u601d\u3046\u3053\u3068\u304c\u3042\u308a\u307e\u3057\u305f\u3002 \u305d\u308c\u306f\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb \u300c\u30c1\u30a7 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/blog.capilano-fw.com\/?p=15225\" class=\"more-link\"><span class=\"screen-reader-text\">&#8220;\u3010\u52b9\u7387\u5316\u3011\u30de\u30a6\u30b9\u8ecc\u9053\u3067\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u53cd\u8ee2\u3055\u305b\u308b\u6a5f\u80fd\u3092\u3064\u304f\u308b\u65b9\u6cd5&#8221; \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":15489,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-15225","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/15225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15225"}],"version-history":[{"count":279,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/15225\/revisions"}],"predecessor-version":[{"id":15516,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/15225\/revisions\/15516"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/media\/15489"}],"wp:attachment":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}