ENTEREAL

Pattern Lock

Pattern Lockは、WEBページに簡単にAndroidのようなパターンロックの機能を追加できる軽量なjQueryプラグインです。

スマホやタブレットのスワイプ操作以外にも、PC等でのマウス操作にも対応しています。

また、簡単に強度を変更したり、Bot対策のcaptchaとしても使う事が出来ます。

例1) 追加設定なし

var lock1 = new PatternLock('#patternHolder1');

例2) マトリックス(ポイント)変更

var lock2 = new PatternLock('#patternHolder2',{matrix:[3, 6]});

例3) 数値マッピング変更 + コールバック設定

var lock3 = new PatternLock("#patternContainer3", {
mapper: {1:9, 2:8, 3:7, 4:6, 5:5, 6:4, 7:3, 8:2, 9:1},
onDraw: function(pattern) {
alert(pattern);
}
});

例4) CAPTCHA

var lock4 = new PatternLock("#patternContainer4", {
matrix:[4, 4],
margin: 9
});

※サーバ側にpatternCapthaが必要です。

使い方

1. JavaScriptとCSSを読み込む

Pattern Lockをダウンロードして、必要な位置に解凍し、組み込むWEBページにJavaScriptとCSSを読み込みます。

2. 設置場所を作る

ページコンテンツ内の必要な個所に任意のIDやクラスを付与した外枠を設置します。

3. Pattarn Lock関数を実行する

PatternLock関数を使ってパターンを描画する

オプション設定

matrix

白いポイントの数を縦横それぞれ数値で設定します。デフォルト：[3, 3]

var sample = new PatternLock('#sampleDiv', {
// 縦5箇所、横10箇所の横長のマトリックス
martix: [5, 10]		// [縦, 横]
});

margin

既定50pxマスの外側に付与するマージンの大きさを数値で設定します。白いポイントの間隔を変更できます。デフォルト：20

※枠の既定が50pxのため、マージンをゼロに設定しても約50px程度の間隔があきます。

var sample = new PatternLock('#sampleDiv', {
// 上下左右に5pxのマージンを付与
margin: 5
});

radius

各点をなぞった時に表示される丸印の半径を設定します。デフォルト：25

var sample = new PatternLock('#sampleDiv', {
// 半径30pxに変更
radius: 30
});

patternVisible

各点をなぞっている途中に、その軌跡の表示有無を設定します。デフォルト：true

var sample = new PatternLock('#sampleDiv', {
// 入力途中の軌跡を非表示
patternVisible: false
});

lineOnMove

各点をなぞっている途中に、マウスやスワイプを追う線の表示有無を設定します。デフォルト：true

var sample = new PatternLock('#sampleDiv', {
// 入力途中の軌跡線を非表示
lineOnMove: false
});

コールバック処理

一連の入力作業が完了した際に呼び出される処理をonDrawを使って設定します。

※コールバックの引数patternには、入力された結果数値が入ります。

var sample = new PatternLock('#sampleDiv', {
// オプション設定
martix: [5, 10],
margin: 15,

// コールバック設定
onDraw: function(pattern) {
// ここにコールバック処理を記載
alert('Callback Test!');
}
});

マッパー

基本、各点には、左上から右へと順番に1から数値が割り当てられ、なぞったラインに沿って数値が連結され結果を処理します。

このmapperを使う事で、任意の点に任意の数値を割り当てる事が可能です。

var sample = new PatternLock('#sampleDiv', {
// マッパー設定
mapper: {1:3, 2:1, 3:4, 4:2, 5:9, 6:7, 7:8, 8:5, 9:6}
// 解説
// 1番目の点(上段の左から1番目の点)に、数値「3」を割り当て
// 2番目の点(上段の左から2番目の点)に、数値「1」を割り当て ...
});

メソッド

下記メソッドは、PatternLock以外で、何か操作をしたい時に使うための補助処理関数です。

option(key) / option(key, [value])

PatternLockとは別に、オプション設定状況を取得したり、設定を変更したい時に使用します。

var sample = new PatternLock('#sampleDiv', {
// オプション設定
martix: [5, 10]		// 縦5、横10のマトリックスを設定
});

// マトリックス設定を確認
var currentMatrix = sample.option('matrix');		// currentMatrixには、[5, 10]が入る

// マトリックス設定を変更
sample.option('matrix', [8, 3]);		// 縦8、横3のマトリックスに変更

// マトリックス設定を再度確認
var currentMatrix = sample.option('matrix');		// currentMatrixには、[8, 3]が入る

reset()

入力中の軌跡をクリアします。

※上の「例4」のリセットボタンに使用されています。

var sample = new PatternLock('#sampleDiv'});

sample.reset();		// '#sampleDiv'に入力されたパターン軌跡をクリアします。

error()

対象の入力にエラーを取得します。

var sample = new PatternLock('#sampleDiv'});

var errorText = sample.reset();		// '#sampleDiv'でのエラーが入ります。

getPattern()

対象の入力結果を取得します。

var sample = new PatternLock('#sampleDiv'});

var inputPattern = sample.getPattern();		// '#sampleDiv'での入力結果数値文字列が入ります。

// 「1」→「5」→「12」→「16」と順次入力した場合
// inputPatternには、'151216'が入ります。

checkForPattern(pattern, successHandler, errorHandler)

対象の入力結果と特定パターンを比較し、一致/不一致時の各処理を設定します。

var sample = new PatternLock('#sampleDiv'});

sample.checkForPattern('123456',
function() {
// 一致時の処理
alert("入力が一致しました");

}, function() {
// 不一致時の処理
alert("入力が一致しませんでした");
}
);