Awa Style.

四国の辺境で働く名もなきエンジニアの備忘録というか、覚書。技術以外のことも書きます。

画像認証を実装する

会員登録サイトを見ると画像認証を実装しているサイトをよく見かけます。

こういうやつです。
f:id:stmizuki01:20130711223327p:plain

CAPTCHAという技術らしいですが、PHPでは簡単に実装できるようです。
ここのサイトに纏められています。

数あるライブラリの中でLGPLライセンスということと手軽ということをどっかのサイトで見たのでKCAPTCHAというものを実装したいと思います。

 

  1. このサイトからダウンロードします。ダウンロードしたzipを解凍するといくつかのファイルが入っています。
  2. 解凍してできたフォルダを「kcaptcha」とリネームし、適当な場所に置きます。
    説明しやすいようにとりあえずドキュメントルートに置くことにします。
  3. セッションが使われていない場合は、session_start();を行っておきます。
  4. 画像を表示したい場所に以下のhtmlを記述します。
    <img src="<?php echo "./kcaptcha/index.php?".session_name()."=".session_id(); ?>" />
  5. 画像の文字は、セッションのキー「captcha_keystring」に保持されているので、POSTとか画面遷移されたタイミングでセッションに登録されている文字と画面の入力文字を比較して合否を判別します。

サンプルはこちら。

 

ちなみにソースはこんな感じになります。

<?php

session_start();

$url = "./kcaptcha/index.php?".session_name()."=".session_id();

// 認証

$result = "";

if (array_key_exists('keystring', $_POST)) {

if(isset($_SESSION['captcha_keystring']) && $_SESSION['captcha_keystring'] === $_POST['keystring']){

$result = "合ってる!!";

}else{

$result = "間違ってる!!";

}

}

?>

<html>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <head><title>KCAPCHAサンプル</title></head>

  <body>

    <form action="" method="post">

    <?php echo ($result == "" ? "" : "<p style=\"color:red;\">結果:".$result."</p>"); ?>

    <p>画像に書かれてある文字を入力してください。</p>

    <p><img id="image" src="<?php echo $url; ?>"></p>

    <p><input type="text" name="keystring"><input type="button" value="表示文字を変える" onclick="location.reload();" /></p>

    <p><input type="submit" value="Check"></p>

    </form>

  </body>

</html>

<?php

  unset($_SESSION['captcha_keystring']);

?>

kcaptchaのライセンスはLGPLv2orlaterらしいので、サービスに組み込む場合は注意が必要です。

【GoogleAPI v3】 GoogleMapに設置したマーカーに吹き出しをつける。

Google mapに設置したマーカーに吹き出しを設置します。

基本的には、google.maps.InfoWindowオブジェクトを生成し(javascript 38行目)、openメソッドを呼びます(javascript 41行目)。

吹き出しを表示する時の第2引数にmarkerを設定していますが、オブジェクト生成時に設定すると変更できないし、markerオブジェクトをInfoWindowオブジェクトから取得することはできないようです。
openメソッドが呼ばれた時にhtml形式の文字列を生成するらしく、closeメソッドを実行するとInfoWindowオブジェクトが破棄されるようです。

close()のDescriptionより
Closes this InfoWindow by removing it from the DOM structure.

(DOMから削除することにより、InfoWindowオブジェクトを閉じる。)

Googleの地図上をクリックして作成された吹き出しのオブジェクトを取得することはできないようで、削除するためには生成後のhtmlを解析するしか方法はないようです。(javascript 52行目)
Googleの気まぐれで生成されるhtmlの構成が変わることが予想されますので、吹き出しを自動で消す機能はあきらめた方がいいかもしれません。

吹き出しの形など細かなカスタマイズはOverlayViewを用いて行うようですが、infobox.js というものもGoogle公式で公開されています。

infobox.jsの使い方は・・・まあ、そのうち?←

【GoogleAPI v3】GoogleMapにマーカーを生成する。

Google mapにマーカーを表示します。

マーカーを生成するには、google.maps.Markerオブジェクトを生成し、生成したオブジェクトのmapプロパティに描写するgoogle.maps.Mapオブジェクトを設定します。(javascript 21~29行目)

マーカーを削除するには、google.maps.Markerオブジェクトのmapプロパティにnullを設定します。
(javascript 32行目 使用する場合は//を消してください。)

マーカーを独自の画像を使用する場合は、google.maps.MarkerImageオブジェクトを生成し(Javascript 38~43行目)、Markerオブジェクトにセットします(Javascript 24行目)。

マーカーについて、マーカー画像の作り方を含めてこちらのサイトに詳しく書かれています。

【GoogleAPI v3】GoogleMapを表示する。

Googleの地図を表示するのにversion3になってかなり便利になりました。
詳細については、Google先生で「Google Map v3」とか「Google Map v2 v3 違い」とかで検索すれば詳しい説明を載せてくれているサイトへ導いてくれます。

ひとまず、Googleの地図を表示するサンプルを載せたいと思います。 

詳しい説明については他のサイトを見てくださいってことで、簡単に説明します。

html 6行目
GoogleAPIのURLを指定し、事前に取得しておいたAPIキーを設定します。

javascript 5行目~9行目
表示する地図の初期設定を連想配列で作成しています。 (MapOptionsの詳細については→こちら)
center:地図の中心座標
zoom:地図の表示精度レベル(1(広域)~18(狭域))
mapTypeId:表示する地図のタイプ(ROADMAP = 道路地図)

javascript 10行目
地図オブジェクトを作成し、第1引数のDOMオブジェクト内に表示します。

 

余談...
javascript 10行目のgoogle.maps.Mapオブジェクト生成の第1引数はjQueryの書き方ではダメでした。
($('div#map_canvas')ではエラーとなる。)
後々地図にマーカーや吹き出しを付けたり動的に表示を変更する場合は、
google.maps.Mapオブジェクトをグローバル変数宣言したほうが何かと便利です。