色抽出アプリ

抽出された色:

以下はセキュリティ脆弱性のないJavaScriptを使用したサンプルコードです。

```html
<!DOCTYPE html>
<html>
 <head>
   <title>色抽出アプリ</title>
   <style>
      #preview {
        max-width: 400px;
      }
      #colors {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }
      .color {
        width: 50px;
        height: 50px;
        margin: 5px;
        border: 1px solid #aaa;
        border-radius: 50%;
      }
   </style>
 </head>
 <body>
   <h1>色抽出アプリ</h1>
   <form>
     <label for="fileInput">画像を選択:</label>
     <input type="file" id="fileInput">
   </form>
   <div id="preview"></div>
   <h2>抽出された色:</h2>
   <div id="colors"></div>

   <script>
     // 画像の読み込み
     function readImage(file) {
       const reader = new FileReader();
       reader.addEventListener('load', () => {
         const img = document.createElement('img');
         img.src = reader.result;
         img.onload = () => {
           // 画像プレビューの表示
           const preview = document.querySelector('#preview');
           preview.innerHTML = '';
           preview.appendChild(img);

           // 画像の色情報抽出
           const colors = extractColors(img);
           // 色情報を表示
           displayColors(colors);
         };
       });
       reader.readAsDataURL(file);
     }

     // 画像から色情報を抽出
     function extractColors(img) {
       const canvas = document.createElement('canvas');
       canvas.width = img.width;
       canvas.height = img.height;
       const context = canvas.getContext('2d');
       context.drawImage(img, 0, 0);

       const imageData = context.getImageData(0, 0, img.width, img.height);
       const colors = new Set();
       const pixelCount = imageData.data.length / 4;

       for (let i = 0; i < pixelCount; i++) {
         const offset = i * 4;
         const r = imageData.data[offset];
         const g = imageData.data[offset + 1];
         const b = imageData.data[offset + 2];
         const color = `rgb(${r},${g},${b})`;
         colors.add(color);
       }

       return Array.from(colors);
     }

     // 色情報の表示
     function displayColors(colors) {
       const colorContainer = document.querySelector('#colors');
       colorContainer.innerHTML = '';
       colors.forEach((color) => {
         const div = document.createElement('div');
         div.style.backgroundColor = color;
         div.classList.add('color');
         colorContainer.appendChild(div);
       });
     }

     // ファイル入力のイベントリスナー追加
     const fileInput = document.querySelector('#fileInput');
     fileInput.addEventListener('change', (event) => {
       const file = event.target.files[0];
       if (file.type.match(/^image\/(png|jpeg)$/)) {
         readImage(file);
       } else {
         alert('画像ファイルを選択してください。');
       }
     });
   </script>
 </body>
</html>
```

ジョークとしては、最初に表示するテキストを「クリックを開始しています。しばらくお待ちください」とするなど、ユーザーをちょっと笑わせる工夫ができます。