以前C#で作成したカラーコードメーカーを今回はJavaScriptで作成します。
Contents
HTML部分
まずHTML部分を示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>カラーコードメーカー</title> <meta name = "viewport" content = "width=device-width, initial-scale = 1.0"> <link rel = "stylesheet" href = "./style.css" type = "text/css" media = "all"> </head> <body> <div><label for ="red" class = "red">R</label><input type="range" id = "red"><span id = "red-value"></span></div> <div><label for ="green" class = "green">G</label><input type="range" id = "green"><span id = "green-value"></span></div> <div><label for ="blue" class = "blue">B</label><input type="range" id = "blue"><span id = "blue-value"></span></div> <div class = "row" id = "row-0"> <div id = "color" class = "color"></div> <div id = "color-code"></div> </div> <div class = "row" id = "row-1"> <div class = "col-1"> <div id = "color-1" class = "color"></div> <div id = "color-code-1"></div> </div> <div class = "col-2"> <button class = "button" onclick="save(1)">ここに一時保存する</button> <button class = "button" onclick="copy(1)">クリップボードにコピー</button> </div> <div class = "clear-both"></div> </div> <div class = "row" id = "row-2"> <div class = "col-1"> <div id = "color-2" class = "color"></div> <div id = "color-code-2"></div> </div> <div class = "col-2"> <button class = "button" onclick="save(2)">ここに一時保存する</button> <button class = "button" onclick="copy(2)">クリップボードにコピー</button> </div> <div class = "clear-both"></div> </div> <div class = "row" id = "row-3"> <div class = "col-1"> <div id = "color-3" class = "color"></div> <div id = "color-code-3"></div> </div> <div class = "col-2"> <button class = "button" onclick="save(3)">ここに一時保存する</button> <button class = "button" onclick="copy(3)">クリップボードにコピー</button> </div> <div class = "clear-both"></div> </div> <script src="./index.js"></script> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
.button { display: block; width: 180px; height: 25px; margin-bottom: 10px; } .red, .green, .blue { font-weight: bold; } .red { color: red; } .green { color: green; } .blue { color: blue; } #red, #green, #blue { vertical-align: middle ; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; width: 300px; } .color { width: 120px; height: 60px; border: 1px solid black; } .col-1{ float: left; } .col-2{ float: left; margin-left: 30px; } .clear-both { clear: both; } .row { height: 100px; } #row-0 { margin-top: 20px; } |
JavaScript部分
JavaScript部分を示します。
まずグローバル定数としてRGBの値（0～255）を格納する配列とカラーコードが表示される要素を定義します。
index.js
|
1 2 |
const $colorCode = document.getElementById('color-code'); const values = [0,0,0]; |
ページが読み込まれたらレンジスライダーの初期化とイベントリスナを追加する処理をおこないます。
レンジスライダーで選択できる最小値は0、最大値は255、数値の変化の単位は1とします。また最初の値は0です。スライダーが移動したら3つのレンジスライダーの値を取得して配列 valuesに格納します。そのあとshow関数（後述）を呼び出してRGBから色を生成するとともにカラーコードを表示します。
index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
window.onload = () => { const $red = document.getElementById('red'); const $green = document.getElementById('green'); const $blue = document.getElementById('blue'); const elms = [$red, $green, $blue]; for(let i = 0; i < elms.length; i++){ elms[i].min = 0; elms[i].max = 255; elms[i].step = 1; elms[i].value = 0; elms[i].oninput = (ev) => { values[i] = ev.target.value; show(); // 後述 } } show(); } |
show関数を示します。
配列 valuesから色を生成します。そして生成された色をid = “color”の背景色にセットします。またその下側にカラーコードを文字列で表示します。同時に各レンジスライダーの右側に現在の値を表示します。
|
1 2 3 4 5 6 7 8 9 |
function show(){ const text = `#${toHex(values[0])}${toHex(values[1])}${toHex(values[2])}`; document.getElementById('color').style.backgroundColor = text; $colorCode.innerHTML = text; document.getElementById('red-value').innerHTML = `${toHex(values[0])} (${values[0]})`; document.getElementById('green-value').innerHTML = `${toHex(values[1])} (${values[1]})`; document.getElementById('blue-value').innerHTML = `${toHex(values[2])} (${values[2]})`; } |
toHex関数は引数で渡された数字を16進数の文字列に変換します。
|
1 2 3 4 |
function toHex(text) { const str = '00' + Number(text).toString(16); return str.substring(str.length-2) } |
[ここに一時保存する]ボタンがクリックされたら現在の色とカラーコードを一時保存します。
|
1 2 3 4 |
function save(number){ document.getElementById('color-' + number).style.backgroundColor = $colorCode.innerHTML; document.getElementById('color-code-' + number).innerHTML = $colorCode.innerHTML; } |
[クリップボードにコピー]ボタンがクリックされたら一時保存されているカラーコードをクリップボードにコピーします。
|
1 2 3 4 |
function copy(number){ const text = document.getElementById('color-code-' + number).innerHTML; navigator.clipboard.writeText(text); } |
