HTML、CSS、JavaScriptで独自のキャプチャを作成する手順

キャプチャ（CAPTCHA）は、コンピュータプログラムが人間と機械を区別するのに役立つテストです。ウェブフォームを自動操作から守るためによく利用されます。

この記事では、シンプルなキャプチャジェネレーターをHTML、CSS、およびJavaScriptで作成する方法をご紹介します。

サンプルはこんな感じです。

サンプルコード

サンプルコード

HTML

最低限として、この三つが必要です。

キャプチャを表示するcanvasタグ、入力用のinputタグ、キャプチャを更新するボタンです。

<div id="captcha">
  <canvas id="captchaCanvas"></canvas>
  <input type="text" id="captchaInput" placeholder="上記の文字を入力">
  <button id="refreshCaptcha">更新</button>
</div>

CSS

この辺は適当に書きました。

#captcha {
  text-align: center;
  margin: 20px;
}

#captchaCanvas {
  margin: 10px 0;
  background-color: #eaeaea;
  display: block;
  border: 1px solid #d4d4d4;
}

#captchaInput {
  margin-bottom: 10px;
}

#refreshCaptcha {
  cursor: pointer;
}

JavaScript

ランダムに生成されたテキストを描画するという方法です。

generateCaptcha関数では、許可された文字からランダムな5文字の組み合わせを生成し、それを表示します。

ユーザーがキャプチャを新しく生成したい場合、提供された「更新」ボタンをクリックすることで、新たなキャプチャを描画する機能を実装しています。

document.addEventListener('DOMContentLoaded', function() {
  var canvas = document.getElementById('captchaCanvas');
  var context = canvas.getContext('2d');
  var refreshButton = document.getElementById('refreshCaptcha');

  function generateCaptcha() {
    var text = '';
    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    for (var i = 0; i < 5; i++) {
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    context.font = '48px Arial';
    context.fillStyle = '#000';
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = '#FFF';
    context.fillText(text, canvas.width / 4, canvas.height / 2);
  }

  refreshButton.onclick = generateCaptcha;

  generateCaptcha();
});

JavaScriptでキャプチャジェネレーターを作成する方法

サンプルコード

HTML

CSS

JavaScript

コメント