{"id":53,"date":"2025-09-23T23:01:03","date_gmt":"2025-09-23T14:01:03","guid":{"rendered":"https:\/\/www.shuphy.com\/blog\/?p=53"},"modified":"2025-10-03T01:20:06","modified_gmt":"2025-10-02T16:20:06","slug":"javascript-%e3%81%a7%e3%83%92%e3%83%bc%e3%83%88%e3%83%9e%e3%83%83%e3%83%97%e5%86%99%e5%83%8f%e9%96%a2%e6%95%b0","status":"publish","type":"post","link":"https:\/\/blog.shuphy.com\/?p=53","title":{"rendered":"JavaScript \u3067\u30d2\u30fc\u30c8\u30de\u30c3\u30d7\u5199\u50cf\u95a2\u6570"},"content":{"rendered":"\n<p>(2017-03-20\u66f4\u65b0\u3002tumblr\u3088\u308a\u8a18\u4e8b\u79fb\u690d\u3002)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/www.shuphy.com\/blog\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o5_r1_500.png\" alt=\"\" class=\"wp-image-59\" srcset=\"https:\/\/blog.shuphy.com\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o5_r1_500.png 500w, https:\/\/blog.shuphy.com\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o5_r1_500-300x300.png 300w, https:\/\/blog.shuphy.com\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o5_r1_500-150x150.png 150w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<p>\u30d7\u30ed\u30b0\u30e9\u30e0\u3067\u30d2\u30fc\u30c8\u30de\u30c3\u30d7\u3092\u4f5c\u308d\u3046\u3068\u3059\u308b\u305f\u3073\u3001\u30c7\u30fc\u30bf\u3068\u8272\u306e\u5bfe\u5fdc\u306b\u60a9\u3080\u306e\u3067\u3001\u4f7f\u3044\u307e\u308f\u3057\u306e\u304d\u304f\u95a2\u6570\u3092Javascript\u3067\u66f8\u3044\u3066\u307f\u305f\u3002<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ HeatMap Object<\/span>\n<span class=\"hljs-comment\">\/\/   HeatMap(_colorSet,_NaNColor,_uFlowColor,_oFlowColor)<\/span>\n<span class=\"hljs-comment\">\/\/ Properties<\/span>\n<span class=\"hljs-comment\">\/\/   HeatMap.colorSet : Array of &#91;r,g,b]<\/span>\n<span class=\"hljs-comment\">\/\/   HeatMap.NaNcolor : &#91;r,g,b]<\/span>\n<span class=\"hljs-comment\">\/\/   HeatMap.uFlowColor : &#91;r,g,b]<\/span>\n<span class=\"hljs-comment\">\/\/   HeatMap.oFlowColor : &#91;r,g,b]<\/span>\n<span class=\"hljs-comment\">\/\/ Methods<\/span>\n<span class=\"hljs-comment\">\/\/   HeatMap.map(x) : 0&lt;=x&lt;=1<\/span>\n<span class=\"hljs-comment\">\/\/   HeatMap.map(x).rgb return &#91;r,g,b]<\/span>\n<span class=\"hljs-comment\">\/\/   HeatMap.map(x).hex return \"#rrggbb\"<\/span>\n\n<span class=\"hljs-keyword\">var<\/span> HeatMap = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">_colorSet,_NaNColor,_uFlowColor,_oFlowColor<\/span>)<\/span>{\n\t<span class=\"hljs-keyword\">var<\/span> rgb = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">_hex<\/span>)<\/span>{\n\t\t<span class=\"hljs-keyword\">var<\/span> color;\n\t\t\t<span class=\"hljs-keyword\">if<\/span>(_hex.slice(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">1<\/span>)===<span class=\"hljs-string\">\"#\"<\/span>){\n\t\t\t\t<span class=\"hljs-keyword\">var<\/span> r = <span class=\"hljs-built_in\">parseInt<\/span>(_hex.slice(<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">3<\/span>), <span class=\"hljs-number\">16<\/span>);\n\t\t\t\t<span class=\"hljs-keyword\">var<\/span> g = <span class=\"hljs-built_in\">parseInt<\/span>(_hex.slice(<span class=\"hljs-number\">3<\/span>, <span class=\"hljs-number\">5<\/span>), <span class=\"hljs-number\">16<\/span>);\n\t\t\t\t<span class=\"hljs-keyword\">var<\/span> b = <span class=\"hljs-built_in\">parseInt<\/span>(_hex.slice(<span class=\"hljs-number\">5<\/span>, <span class=\"hljs-number\">7<\/span>), <span class=\"hljs-number\">16<\/span>);\n\t\t\t\tcolor=&#91;r,g,b];\n\t\t\t}<span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span>(_hex.length==<span class=\"hljs-number\">3<\/span>){\n\t\t\t\tcolor=_hex;\n\t\t\t}<span class=\"hljs-keyword\">else<\/span>{\n\t\t\t\t<span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">\"Not hex or rgbArray\"<\/span>);\n\t\t\t}\n\t\t<span class=\"hljs-keyword\">return<\/span> color\n\t}\n\t<span class=\"hljs-keyword\">this<\/span>.colorSet = _colorSet===<span class=\"hljs-literal\">undefined<\/span> ? &#91;&#91;<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>],&#91;<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">255<\/span>],&#91;<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">255<\/span>,<span class=\"hljs-number\">255<\/span>],&#91;<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">255<\/span>,<span class=\"hljs-number\">0<\/span>],&#91;<span class=\"hljs-number\">255<\/span>,<span class=\"hljs-number\">255<\/span>,<span class=\"hljs-number\">0<\/span>],&#91;<span class=\"hljs-number\">255<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>]] : _colorSet.map(rgb);\n\t<span class=\"hljs-keyword\">this<\/span>.NaNcolor = _NaNColor===<span class=\"hljs-literal\">undefined<\/span> ? &#91;<span class=\"hljs-number\">255<\/span>,<span class=\"hljs-number\">255<\/span>,<span class=\"hljs-number\">255<\/span>] : rgb(_NaNColor);\n\t<span class=\"hljs-keyword\">this<\/span>.uFlowColor = _uFlowColor===<span class=\"hljs-literal\">undefined<\/span> ? <span class=\"hljs-keyword\">this<\/span>.colorSet&#91;<span class=\"hljs-number\">0<\/span>] : rgb(_uFlowColor);\n\t<span class=\"hljs-keyword\">this<\/span>.oFlowColor = _oFlowColor===<span class=\"hljs-literal\">undefined<\/span> ? <span class=\"hljs-keyword\">this<\/span>.colorSet&#91;<span class=\"hljs-keyword\">this<\/span>.colorSet.length<span class=\"hljs-number\">-1<\/span>] : rgb(_oFlowColor);\n\t<span class=\"hljs-keyword\">this<\/span>.map = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">x<\/span>)<\/span>{\n\t\t<span class=\"hljs-keyword\">var<\/span> cs=<span class=\"hljs-keyword\">this<\/span>.colorSet;\n\t\t<span class=\"hljs-keyword\">var<\/span> nc=<span class=\"hljs-keyword\">this<\/span>.NaNcolor;\n\t\t<span class=\"hljs-keyword\">var<\/span> uc=<span class=\"hljs-keyword\">this<\/span>.uFlowColor;\n\t\t<span class=\"hljs-keyword\">var<\/span> oc=<span class=\"hljs-keyword\">this<\/span>.oFlowColor;\n\t\t<span class=\"hljs-keyword\">var<\/span> c = &#91;];\n\t\t<span class=\"hljs-keyword\">if<\/span>(<span class=\"hljs-built_in\">isNaN<\/span>(x)){\n\t\t\tc=nc;\n\t\t}<span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span>(x&lt;<span class=\"hljs-number\">0<\/span>){\n\t\t\tc=uc;\n\t\t}<span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span>(<span class=\"hljs-number\">1<\/span>&lt;x){\n\t\t\tc=oc;\n\t\t}<span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span>(x==<span class=\"hljs-number\">1<\/span>){\n\t\t\tc=cs&#91;cs.length<span class=\"hljs-number\">-1<\/span>];\n\t\t}<span class=\"hljs-keyword\">else<\/span>{\n\t\t\t<span class=\"hljs-keyword\">var<\/span> n = cs.length<span class=\"hljs-number\">-1<\/span>; <span class=\"hljs-comment\">\/\/\u533a\u5206\u6570<\/span>\n\t\t\t<span class=\"hljs-keyword\">var<\/span> s = <span class=\"hljs-built_in\">Math<\/span>.floor(x*n); <span class=\"hljs-comment\">\/\/x\u306e\u533a\u5206\u306e\u5de6\u7aef<\/span>\n\t\t\t<span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">var<\/span> j=<span class=\"hljs-number\">0<\/span>; j&lt;<span class=\"hljs-number\">3<\/span>; j++){\n\t\t\t\t<span class=\"hljs-keyword\">var<\/span> y1 = cs&#91;s+<span class=\"hljs-number\">1<\/span>]&#91;j];\n\t\t\t\t<span class=\"hljs-keyword\">var<\/span> y0 = cs&#91;s]&#91;j];\n\t\t\t\t<span class=\"hljs-keyword\">var<\/span> x1 = (s+<span class=\"hljs-number\">1<\/span>)\/n;\n\t\t\t\t<span class=\"hljs-keyword\">var<\/span> x0 = s\/n;\n\t\t\t\tc&#91;j]=<span class=\"hljs-built_in\">Math<\/span>.floor((y1-y0)\/(x1-x0)*(x-x0)+y0);\n\t\t\t\t<span class=\"hljs-keyword\">if<\/span>(<span class=\"hljs-number\">255<\/span>&lt;c&#91;j]) <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">\"c over 255\"<\/span>);\n\t\t\t}\n\t\t}\n\t\t<span class=\"hljs-keyword\">var<\/span> hex = <span class=\"hljs-string\">\"#\"<\/span>;\n\t\thex+=(<span class=\"hljs-string\">\"0\"<\/span>+c&#91;<span class=\"hljs-number\">0<\/span>].toString(<span class=\"hljs-number\">16<\/span>)).slice(<span class=\"hljs-number\">-2<\/span>);\n\t\thex+=(<span class=\"hljs-string\">\"0\"<\/span>+c&#91;<span class=\"hljs-number\">1<\/span>].toString(<span class=\"hljs-number\">16<\/span>)).slice(<span class=\"hljs-number\">-2<\/span>);\n\t\thex+=(<span class=\"hljs-string\">\"0\"<\/span>+c&#91;<span class=\"hljs-number\">2<\/span>].toString(<span class=\"hljs-number\">16<\/span>)).slice(<span class=\"hljs-number\">-2<\/span>);\n\t\t<span class=\"hljs-keyword\">return<\/span> {<span class=\"hljs-attr\">rgb<\/span>: c, <span class=\"hljs-attr\">hex<\/span>: hex}\n\t}\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>\u914d\u8272\u30d1\u30bf\u30fc\u30f3\u3092\u597d\u304d\u306b\u5909\u3048\u3089\u308c\u308b\u3088\u3046\u306b\u3001\u914d\u5217\u3067\u7b49\u5206\u5272\u70b9\u306e\u8272\u30c7\u30fc\u30bf\u3092\u4e0e\u3048\u308c\u3070\u9593\u306f\u7dda\u5f62\u88dc\u9593\u3057\u3066\u8a08\u7b97\u3059\u308b\u65b9\u5f0f\u306b\u3057\u305f\u3002\u7dda\u5f62\u88dc\u5b8c\u3068\u304b\u3001\u63a5\u7d9a\u70b9\u3067\u306e\u4e0d\u9023\u7d9a\u6027\u304c\u76ee\u7acb\u3064\u3093\u3058\u3083\u306a\u3044\u3060\u308d\u3046\u304b\u3068\u3082\u601d\u3063\u305f\u304c\u3001\u8272\u3068\u3057\u3066\u307f\u308b\u3068\u6848\u5916\u5206\u304b\u3089\u306a\u3044\u3002<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"100\" src=\"https:\/\/www.shuphy.com\/blog\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o1_500.jpg\" alt=\"\" class=\"wp-image-54\" srcset=\"https:\/\/blog.shuphy.com\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o1_500.jpg 500w, https:\/\/blog.shuphy.com\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o1_500-300x60.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption class=\"wp-element-caption\">\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u51fa\u529b\u3002\u5de6\u7aef\u304c0, \u53f3\u7aef\u304c1.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>\u753b\u50cf\u306f\u30b5\u30f3\u30d7\u30eb\u3067\u5de6\u304b\u30890~1\u306b\u5bfe\u5fdc\u3059\u308b\u3002\u4e00\u3064\u76ee\u306f\u3088\u304f\u3042\u308b\u30d1\u30bf\u30fc\u30f3\u3067BK,B,C,G,Y,R\u30686\u5206\u5272\u3067\u4e26\u3076\u3002\u4e0a\u306e\u95a2\u6570\u3067\u3082\u5f15\u6570\u3092\u7701\u7565\u3059\u308b\u3068\u3053\u306e\u30d1\u30bf\u30fc\u30f3\u3092\u7528\u3044\u308b\u3088\u3046\u306b\u3057\u3066\u3042\u308b\u3002<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"100\" src=\"https:\/\/www.shuphy.com\/blog\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o3_r1_500.png\" alt=\"\" class=\"wp-image-55\" srcset=\"https:\/\/blog.shuphy.com\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o3_r1_500.png 500w, https:\/\/blog.shuphy.com\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o3_r1_500-300x60.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption class=\"wp-element-caption\">gnuplot\u98a8\u30025\u70b9\u3002<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"100\" src=\"https:\/\/www.shuphy.com\/blog\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o7_r1_500.png\" alt=\"\" class=\"wp-image-56\" srcset=\"https:\/\/blog.shuphy.com\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o7_r1_500.png 500w, https:\/\/blog.shuphy.com\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o7_r1_500-300x60.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption class=\"wp-element-caption\">gnuplot\u98a8\u3002\uff11\uff13\u70b9\u3002<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"100\" src=\"https:\/\/www.shuphy.com\/blog\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o6_r1_500.png\" alt=\"\" class=\"wp-image-57\" srcset=\"https:\/\/blog.shuphy.com\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o6_r1_500.png 500w, https:\/\/blog.shuphy.com\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o6_r1_500-300x60.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption class=\"wp-element-caption\">gnuplot\u98a8\u3002\uff12\uff11\u70b9\u3002<\/figcaption><\/figure>\n<\/div>\n\n\n<p>\u4e8c\u3064\u76ee\u306fgnuplot\u306epm3d\u3067\u30d2\u30fc\u30c8\u30de\u30c3\u30d7\u3092\u63cf\u304b\u305b\u305f\u6642\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u3092\u6a21\u3057\u305f\u3082\u306e\u3067gnuplot\u4f7f\u3044\u3068\u3057\u3066\u306f\u99b4\u67d3\u307f\u306e\u3042\u308b\u914d\u8272\u3002gnuplot\u3067\u306f\u591a\u5206\u30b0\u30e9\u30d5\u306e\u3088\u3046\u306a<s>\u4e8c\u6b21\u5f0f\u304c\u5199\u50cf\u95a2\u6570\u306b\u306a\u3063\u3066\u3044\u308b\u3068\u601d\u308f\u308c\u308b\u3002<\/s>\u753b\u50cf\u306f\u3053\u306e\u4e8c\u6b21\u5f0f\u304b\u30895\u70b9\u3092\u53d6\u3063\u305f\u7dda\u5f62\u88dc\u9593\u3067\u4f5c\u6210\u3002&nbsp;<\/p>\n\n\n\n<p>\u306a\u3093\u304b\u9055\u3046\u306e\u3067\u753b\u50cf\u304b\u3089\u30b9\u30dd\u30a4\u30c8\u3067RGB\u5024\u3092\u8abf\u3079\u308b\u3068\u5c11\u3057\u95a2\u6570\u304c\u9055\u3063\u305f\u3002\u9752\u304c\u6bd4\u8f03\u7684\u30ad\u30c4\u30a4\u30ab\u30fc\u30d6\u3092\u63cf\u304f\u306e\u3067\u5c11\u306a\u3044\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u7dda\u5f62\u88dc\u9593\u304c\u5909\u306b\u306a\u308b\u3002\u30ab\u30e9\u30fc\u30d0\u30fc\u306f\u4e0a\u304b\u3089\uff14,12,20\u70b9\u3067\u88dc\u9593\u3002<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"485\" height=\"462\" src=\"https:\/\/www.shuphy.com\/blog\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o2_r1_500.png\" alt=\"\" class=\"wp-image-58\" srcset=\"https:\/\/blog.shuphy.com\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o2_r1_500.png 485w, https:\/\/blog.shuphy.com\/wp-content\/uploads\/2025\/09\/tumblr_ocxqe1L6ZW1rct1n3o2_r1_500-300x286.png 300w\" sizes=\"auto, (max-width: 485px) 100vw, 485px\" \/><figcaption class=\"wp-element-caption\">\u8272\u30b9\u30dd\u30a4\u30c8\u3067\u6e2c\u3063\u305fgnuplot\u306eRGB\u5024\u3002<\/figcaption><\/figure>\n<\/div>\n\n\n<p>\u88dc\u9593\u70b9\u306e\u914d\u5217\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3002<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"># 4+1 <span class=\"hljs-selector-tag\">points<\/span>\n<span class=\"hljs-selector-attr\">&#91;&#91;0,0,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;128,1,255]<\/span>,<span class=\"hljs-selector-attr\">&#91;180,36,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;221,121,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;255,255,0]<\/span>];\n# 12+1 <span class=\"hljs-selector-tag\">points<\/span>\n<span class=\"hljs-selector-attr\">&#91;&#91;0,0,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;74,0,142]<\/span>,<span class=\"hljs-selector-attr\">&#91;104,0,227]<\/span>,<span class=\"hljs-selector-attr\">&#91;128,1,255]<\/span>,<span class=\"hljs-selector-attr\">&#91;147,7,227]<\/span>,<span class=\"hljs-selector-attr\">&#91;165,19,142]<\/span>,<span class=\"hljs-selector-attr\">&#91;180,36,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;195,59,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;208,87,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;221,121,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;233,160,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;244,205,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;255,255,0]<\/span>];\n# 20+1 <span class=\"hljs-selector-tag\">points<\/span>\n<span class=\"hljs-selector-attr\">&#91;&#91;0,0,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;57,0,92]<\/span>,<span class=\"hljs-selector-attr\">&#91;81,0,163]<\/span>,<span class=\"hljs-selector-attr\">&#91;99,0,214]<\/span>,<span class=\"hljs-selector-attr\">&#91;114,0,245]<\/span>,<span class=\"hljs-selector-attr\">&#91;128,1,255]<\/span>,<span class=\"hljs-selector-attr\">&#91;140,4,245]<\/span>,<span class=\"hljs-selector-attr\">&#91;151,9,214]<\/span>,<span class=\"hljs-selector-attr\">&#91;161,16,163]<\/span>,<span class=\"hljs-selector-attr\">&#91;171,25,92]<\/span>,<span class=\"hljs-selector-attr\">&#91;180,36,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;189,49,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;198,64,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;206,81,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;213,100,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;221,121,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;228,143,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;235,168,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;242,195,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;249,224,0]<\/span>,<span class=\"hljs-selector-attr\">&#91;255,255,0]<\/span>]<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>\u9752\u306e\u30d4\u30fc\u30af\u304c1\/4\u306b\u3042\u308b\u306e\u30674\u306e\u500d\u6570\u3067\u5206\u5272\u3059\u308b\u306e\u304c\u597d\u307e\u3057\u3044\u3002\uff12\uff10\u70b9\u3068\u3082\u306a\u308b\u3068\u30aa\u30ea\u30b8\u30ca\u30eb\u3068\u5927\u5dee\u306a\u304f\u306a\u308b\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u3092\u4f7f\u3063\u3066<a href=\"http:\/\/john1851.html.xdomain.jp\/canvas\/heatmap\/heatmap.html\">\u4e8c\u6b21\u5143\u30d2\u30fc\u30c8\u30de\u30c3\u30d7\u30d7\u30ed\u30c3\u30bf\u30fc<\/a>\u3092\u4f5c\u3063\u3066\u307f\u305f\u3002\u6700\u5f8c\u306e\u753b\u50cf\u306f\u305d\u308c\u3067sinc\u95a2\u6570\u3092\u63cf\u3044\u305f\u3082\u306e\u3002js\u30d5\u30a1\u30a4\u30eb\u76f4\u30ea\u30f3\u3082\u305d\u3061\u3089\u306e\u307b\u3046\u306b\u8cbc\u3063\u3066\u3042\u308b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>(2017-03-20\u66f4\u65b0\u3002tumblr\u3088\u308a\u8a18\u4e8b\u79fb\u690d\u3002) \u30d7\u30ed\u30b0\u30e9\u30e0\u3067\u30d2\u30fc\u30c8\u30de\u30c3\u30d7\u3092\u4f5c\u308d\u3046\u3068\u3059\u308b\u305f\u3073\u3001\u30c7\u30fc\u30bf\u3068\u8272\u306e\u5bfe\u5fdc\u306b\u60a9\u3080\u306e\u3067\u3001\u4f7f\u3044\u307e\u308f\u3057\u306e\u304d\u304f\u95a2\u6570\u3092Javascript\u3067\u66f8\u3044\u3066\u307f\u305f\u3002 \u914d\u8272\u30d1\u30bf\u30fc\u30f3\u3092\u597d\u304d\u306b\u5909\u3048\u3089\u308c\u308b\u3088&#8230;<\/p>\n","protected":false},"author":1,"featured_media":59,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[4],"tags":[6,7],"class_list":["post-53","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pc","tag-javascript","tag-7"],"_links":{"self":[{"href":"https:\/\/blog.shuphy.com\/index.php?rest_route=\/wp\/v2\/posts\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.shuphy.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.shuphy.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.shuphy.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.shuphy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=53"}],"version-history":[{"count":5,"href":"https:\/\/blog.shuphy.com\/index.php?rest_route=\/wp\/v2\/posts\/53\/revisions"}],"predecessor-version":[{"id":158,"href":"https:\/\/blog.shuphy.com\/index.php?rest_route=\/wp\/v2\/posts\/53\/revisions\/158"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.shuphy.com\/index.php?rest_route=\/wp\/v2\/media\/59"}],"wp:attachment":[{"href":"https:\/\/blog.shuphy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.shuphy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.shuphy.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}