メソッドでパターンロックを操作
PatternLockコンストラクタで生成したオブジェクトに対して、表2のメソッドを利用できます。
| メソッド | 内容 | 備考 |
|---|---|---|
| option(key[,value]) | オプションを取得・設定 | valueを指定すると設定される |
| reset() | 初期状態に戻す | - |
| error() | エラー表示にする | パターンの円が赤く表示される |
| getPattern() | その時点のパターンを取得 | - |
メソッドの利用例をリスト5に示します。
$("#btn1").on("click", function(){
// オプション値取得
alert("matrix = " + lock.option("matrix"));
});
$("#btn2").on("click", function(){
// オプション値設定
lock.option("matrix", [5,5]);
});
$("#btn3").on("click", function(){
// パターンのリセット
lock.reset();
});
$("#btn4").on("click", function(){
// パターンのエラー表示
lock.error();
});
$("#btn5").on("click", function(){
// パターン値の取得
alert("Pattern = " + lock.getPattern());
});
リスト5を実行すると、PatternLockのメソッドを試すことができます。
サーバーと連携してパターンを判定
最後に、Pattern Lockプラグインのメソッドやイベントをより実用的に利用する例として、サーバーと通信してパターンを判定するサンプルをリスト6に示します。パターンが確定したときにそれをサーバーに送信し、サーバーから返される判定値によって結果を表示します。
var lock = new PatternLock("#patternLock1",{
onDraw: function(pattern){
$.ajax({
url: "patternCheck.php", // パターンを送信するURL ...（1）
cache: false,
type: "POST",
data: {"pattern" : pattern},
success: function(data) {
$("#ajaxData").text(data); // サーバーの判定を表示
if (data == "true") { // パターンが正しい時の処理 ...（2）
$("#msg").text("正しいパターンです。");
}
else { // パターンが正しくない時の処理 ...（3）
lock.error();
$("#msg").text("正しくないパターンです。");
}
},
error: function() { // Ajax通信エラー時の処理 ...（4）
lock.error();
$("#msg").text("通信エラーです。");
}
});
}
});
$("#btnReset").on("click", function(){ // リセットボタン ...（5）
lock.reset();
$("#msg").text("");
$("#ajaxData").text("");
});
パターンが確定すると発生するonDrawイベントでパターンを取得して、（1）のURLにHTTP POSTで送信します。サーバーからの戻り値が「true」ならばパターンが正しい時の処理（2）、それ以外ならパターンが正しくない時の処理（3）を実行します。パターンが正しくないときはerrorメソッドでエラー表示をします。（4）はAjax通信失敗時の処理、（5）のリセットボタン処理はresetメソッドでパターンロックをリセットし、テキスト表示もクリアします。
リスト6に対応するサーバー側実装をリスト7に示します。パターンが"1478963"であるときに"true"を出力する単純なPHPファイルです。
<?php
if ($_POST["pattern"] === "1478963") {
echo "true";
}
else {
echo "false";
}
?>
リスト6、リスト7を実行すると、サーバーの判定値を元にWebページ上に判定結果が表示されます。
なお今回は詳細を紹介しませんが、Node.jsのサーバーで動作するPattern Captchaと組み合わせることで、パターンロックをCAPTCHA（投稿者が人間であることを証明するために特定操作をさせるテスト）に利用することができます。
まとめ
本記事では、Webページにパターンロックを表示するPattern Lockプラグインを紹介しました。パターンロックはAndroidで一般的に用いられる馴染みの深いUI部品です。PCよりスマートフォンやタブレットをよく使う利用者が増加し続ける状況を考えると、スマートフォンの操作体系をWebページに持ち込むことは利用者にとって利便性の向上につながります。モバイル向けWebページに限らず、様々な用途で導入を検討したいプラグインです。
