{"id":677,"date":"2017-10-30T12:39:13","date_gmt":"2017-10-30T03:39:13","guid":{"rendered":"http:\/\/www.takaya-com.jp\/archives\/?p=677"},"modified":"2017-10-30T12:41:02","modified_gmt":"2017-10-30T03:41:02","slug":"javascript%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%82%ab%e3%83%a9%e3%83%bc%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%88%e3%81%86%ef%bc%81","status":"publish","type":"post","link":"https:\/\/takaya-com.jp\/archives\/2017\/10\/javascript%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%82%ab%e3%83%a9%e3%83%bc%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%88%e3%81%86%ef%bc%81\/","title":{"rendered":"javascript\u3092\u4f7f\u3063\u3066\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092\u8868\u793a\u3055\u305b\u3088\u3046\uff01"},"content":{"rendered":"<p><!-- \u672c\u6587 --><br \/>\n\u8272\u30b3\u30fc\u30c9\u3092\u5165\u529b\u3059\u308b\u3068\u3001\u8272\u304c\u53cd\u6620\u3055\u308c\u3066\u3001\u305d\u306e\u8272\u30b3\u30fc\u30c9\u3092RGB\u306b\u5909\u63db\u3055\u305b\u3066\u307f\u307e\u3057\u305f\u3002<br \/>\n<!--more--><\/p>\n<p>\u4ee5\u4e0b\u304c\u30b3\u30fc\u30c9\u30b5\u30f3\u30d7\u30eb\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u25bcJavaScript<\/p>\n<pre class=\"lang:js decode:true \" title=\"JavaScript\" >\r\nwindow.onload=function(){\r\nvar convert = document.getElementById('convert');\r\nvar color = document.getElementById('color');\r\nvar before = document.getElementById('before');\r\nvar beforecode = document.getElementById('before-c');\r\nvar after = document.getElementById('after');\r\nvar aftercode = document.getElementById('after-c');\r\n\r\nconvert.addEventListener('click', function() {\r\n    var colorcode = color.value;\r\n    var rgbArr = convert_colorcode_to_rgb(colorcode);\r\n    if(!rgbArr) {\r\n        alert('\u5909\u63db\u306b\u5931\u6557\u3057\u307e\u3057\u305f');\r\n        return false;\r\n    }\r\n\r\n    if(colorcode.split('')[0] !== '#') {\r\n        colorcode = '#' + colorcode;\r\n    }\r\n    var rgb = 'rgb(' + rgbArr[0] + ', ' + rgbArr[1] + ', ' + rgbArr[2] + ')';\r\n \r\n    before.style.backgroundColor = colorcode;\r\n    beforecode.innerHTML = colorcode;\r\n    after.style.backgroundColor = rgb;\r\n    aftercode.innerHTML = rgb;\r\n}, false);\r\nfunction convert_colorcode_to_rgb(colorcode) {\r\n\r\n    if(colorcode.split('')[0] === '#') {\r\n        colorcode = colorcode.substring(1);\r\n    }\r\n    if(colorcode.length === 3) {\r\n        var codeArr = colorcode.split('');\r\n        colorcode = codeArr[0] + codeArr[0] + codeArr[1] + codeArr[1] + codeArr[2] + codeArr[2];\r\n    }\r\n\r\n    if(colorcode.length !== 6) {\r\n        return false;\r\n    }\r\n    var r = parseInt(colorcode.substring(0, 2), 16);\r\n    var g = parseInt(colorcode.substring(2, 4), 16);\r\n    var b = parseInt(colorcode.substring(4, 6), 16);\r\n    return [r, g, b];\r\n}\r\n};\r\n<\/pre>\n<p>\u25bcHTML<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"HTML\" >\r\n<h1>\u8272\u30b3\u30fc\u30c9\u3092\u5165\u529b\u3059\u308b\u3068\u3001\u8272\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/h1>\r\n#<input type=\"text\" name=\"color\" id=\"color\">\r\n<button id=\"convert\">\u5909\u63db<\/button>\r\n \r\n<p id=\"before\">\u5909\u63db\u524d: <span id=\"before-c\"><\/span><\/p>\r\n<p id=\"after\">\u5909\u63db\u5f8c: <span id=\"after-c\"><\/span><\/p>\r\n    <\/body>\r\n<\/pre>\n<p>\u4eca\u56de\u3001\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u306e\u306f\u3001<\/p>\n<p><a href=\"https:\/\/qiita.com\/ginpei\/items\/b9e95a6dea9dcb945589\" target=\"_blank\">\u300eQiita\u300f<\/a>\u3055\u3093\u3067\u3059\u3002<br \/>\n\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002<\/p>\n<p>\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u3001<a href=\"http:\/\/www.takaya-com.jp\/archives\/demo\/colorconvert\/\" target=\"_blank\">\u3053\u3061\u3089<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8272\u30b3\u30fc\u30c9\u3092\u5165\u529b\u3059\u308b\u3068\u3001\u8272\u304c\u53cd\u6620\u3055\u308c\u3066\u3001\u305d\u306e\u8272\u30b3\u30fc\u30c9\u3092RGB\u306b\u5909\u63db\u3055\u305b\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/677"}],"collection":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/comments?post=677"}],"version-history":[{"count":5,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/677\/revisions"}],"predecessor-version":[{"id":682,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/677\/revisions\/682"}],"wp:attachment":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/media?parent=677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/categories?post=677"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/tags?post=677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}