JavaScriptで入力されたパターンを判定する方法
入力されたパターンが正しいかどうかをJavaScript上で判定する方法として、checkForPatternメソッドが提供されています。checkForPatternメソッドの第1引数には正しいパターンを表す文字列、第2引数にはパターンが正しい時の処理、第3引数にはパターンが正しくない時の処理を記述します。
なお正しいパターンを表す文字列は、ポイントに左上から1、2、……と番号を付けて、ポイントの指定順に番号を並べたものです。例えば図3のようなパターンは「1478963」と表されます。
パターン判定処理の実装例をリスト2に示します。正しいパターンとして図3の「1478963」を指定しています。
var lock = new PatternLock("#patternLock1");
// パターンマッチ判定処理
lock.checkForPattern('1478963',
function(){
$("#msg").text("正しいパターンです。");
},
function(){
$("#msg").text("正しくないパターンです。");
}
);
リスト2を実行すると、図3のパターンを入力した場合のみ「正しいパターンです。」と表示されるようになります。
パターン値を簡易的にわかりづらくするmapper機能
リスト2のようにJavaScript内でパターンの判定を行う場合、ソースコードを見ればパターンの正しい値がわかってしまいます。そこでPattern Lockプラグインでは、パターンの値を外部からわかりづらくするために、入力されたパターンを「mapper」で別の値に変換することができます。
mapperの定義例をリスト3に示します。この場合は、入力されたパターンの「1を9に」、「2を8に」……と変換してから正しいパターンと比較します。またmapperは関数を用いて定義することもでき、例をリスト3のコメントに示します。なおmapperを指定する場合、パターン判定に用いる正しいパターンは、mapperで変換した後の値を指定します。リスト3は結果としてリスト2と全く同じように動作します。
var lock = new PatternLock("#patternLock1", {
// mapper指定：入力パターンの1を9に、2を8に……と変換
mapper:{1:9, 2:8, 3:7, 4:6, 5:5, 6:4, 7:3, 8:2, 9:1}
// // mapperを関数で指定する例（↑と同じ処理）
// mapper: function(idx) {
// return (10 - idx);
// }
});
lock.checkForPattern("9632147", //「1478963」をmapperで変換した後の値
function(){
$("#msg").text("正しいパターンです。");
},
function(){
$("#msg").text("正しくないパターンです。");
}
);
mapperはあくまでパターン値を変換して正しいパターン値をソースコードから読み取りづらくするだけの機能で、JavaScriptで判定を行う限り本質的に正しいパターン値を完全に隠ぺいすることはできません。より厳密な認証が必要になる場合はサーバー側で判定処理を行う必要があります。サーバー側判定処理の例は後述します。
オプション指定でパターンの点数やサイズなどを変更
PatternLockメソッドの第2引数にJavaScriptオブジェクトを指定して表示や動作をカスタマイズできます。主なオプションを表1に示します。
| オプション名 | 内容 | 初期値 |
|---|---|---|
| matrix | パターンの点数 | [3, 3] |
| radius | パターンに表示される円の半径 | 20 |
| margin | 円と隣の円の間隔 | 25 |
| patternVisible | パターンの線を表示するかどうか | true |
| lineOnMove | ドラッグ中にパターンの線を動かすかどうか | true |
| onDraw | パターンが確定したときに発生するイベント | 定義なし |
オプションの設定例をリスト4に示します。
var lock = new PatternLock("#patternLock1", {
matrix: [5,5], // 5×5のパターン
radius: 30, // 円の半径
margin: 10, // 円と隣の円の間隔
lineOnMove: false // ドラッグ中にパターンの線を動かさない
});
リスト4を実行すると、図5のように表示内容が変わります。
