キャプチャ（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();
});
コメント