chatGPTにカラーピッカーを作ってもらう（html+javascript）

もじゅーら

2024年4月25日 06:46

カラーピッカー、便利ですよね。
chrome拡張機能に便利なものがいっぱいあるので、いまさら作る必要もないのですが、chatGPTでどこまでできるかやってみたくて作ってみました。

作ってもらったのはこちら（下のはただの画像です）
ちゃんと機能しました。コピーできるのはHEXコードの方だけですが。

カラーピッカーのコード

最終的にできたコードはこんな感じですね。

<style>
  #colorDisplay, #hexDisplay {
    height: 50px;
    margin: 10px 0;
    font-size: 16px;
    padding: 10px;
  }
  #popup {
    visibility: hidden;
    position: absolute;
    margin-left: 10px; /* ボタンから少し離れた位置に設定 */
    background-color: black;
    color: white;
    padding: 8px 20px;
    font-size: 12px;
    border-radius: 5px;
    z-index: 1000;
    transition: visibility 0s, opacity 0.5s linear;
  }
  button {
    position: relative;
  }
</style>
<div>
  <label for="r">R: <input type="range" id="r" name="r" min="0" max="255" value="125"></label><br>
  <label for="g">G: <input type="range" id="g" name="g" min="0" max="255" value="125"></label><br>
  <label for="b">B: <input type="range" id="b" name="b" min="0" max="255" value="125"></label><br>
  <div id="colorDisplay"></div>
  <div id="hexDisplay"></div>
  <button onclick="copyColor()">コピー</button>
  <div id="popup">Copied!</div>
</div>
<script>
  function updateColor() {
    var r = document.getElementById('r').value;
    var g = document.getElementById('g').value;
    var b = document.getElementById('b').value;
    var colorRGB = `rgb(${r}, ${g}, ${b})`;
    var colorHEX = toHex(r) + toHex(g) + toHex(b); // '#'を付けずにHEXを大文字で表示
    var textColor = getTextColor(r, g, b);
    document.getElementById('colorDisplay').style.backgroundColor = colorRGB;
    document.getElementById('colorDisplay').style.color = textColor;
    document.getElementById('colorDisplay').innerText = colorRGB;
    document.getElementById('hexDisplay').style.backgroundColor = colorRGB;
    document.getElementById('hexDisplay').style.color = textColor;
    document.getElementById('hexDisplay').innerText = colorHEX; // 大文字で表示
  }

  function toHex(n) {
    var hex = parseInt(n).toString(16).toUpperCase(); // 16進数に変換し、大文字にする
    return hex.length == 1 ? '0' + hex : hex;
  }

  function getTextColor(r, g, b) {
    var luminance = 0.299 * r + 0.587 * g + 0.114 * b;
    return luminance > 186 ? '#000000' : '#FFFFFF'; // 明度が高い場合は黒、低い場合は白を返す
  }

  function copyColor() {
    var colorText = document.getElementById('hexDisplay').innerText;
    navigator.clipboard.writeText(colorText).then(() => {
      let popup = document.getElementById('popup');
      popup.style.visibility = 'visible';
      popup.style.opacity = 1;
      setTimeout(() => {
        popup.style.visibility = 'hidden';
        popup.style.opacity = 0;
      }, 1500); // 1.5秒後にポップアップを非表示にする
    });
  }

  document.getElementById('r').addEventListener('input', updateColor);
  document.getElementById('g').addEventListener('input', updateColor);
  document.getElementById('b').addEventListener('input', updateColor);
  
  updateColor(); // 初期色の設定
</script>

プログラミング初心者のわたしには、だいたいどんな感じのことが書いてあるのか、くらいのことしかわかりませんが・・・
すごいなぁ

プロンプト

一回で欲しい機能が全部搭載されたわけではありません。
下記のようなお願いを何回かして、修正を施してもいました。

カラーコードを視覚的に確認し、RGB値をスライダーで調整できるカラーピッカーのHTMLフォームを作成してください。
RGB値またはHEXコード(#なし大文字)どちらでも選択してコピーできるようにし、コピーすると、「Copied!」と小さなポップアップが出るようにしてください。
WordPressに貼り付けて使うので、<html>や<body>などのタグは不要です。
色を示す文字列はカラーバーの上に表示し、背景色の明度とのバランスを考慮して見えなくならないように工夫してください。

chatGPTにカラーピッカーを作ってもらう（html+javascript）

カラーピッカーのコード

プロンプト

おすすめchrome拡張機能