クリック強度を測定するライブラリ Click Strength Checker

 マウスボタンの長押し時間を測定するライブラリです。これは他のライブラリに依存しません。また、実際に物理的なクリックの強度を測るものではありません(それはJavaScriptでは不可能なので)。 よくゲームとかである、ボタン長押しで力をためるアクションをマウスイベントで実装するために作りました。ただし、このライブラリ単体ではコールバック関数の実行か、 メソッドによる数値取得といった最低限の機能しかないので、UI的なものはユーザー各自で実装する必要があります。 たとえば、下のサンプルはHTML5Canvasを使って、パワーゲージとして視覚化していますが、 この機能はClick Strength Checkerに含まれません。一方でデザイン面はユーザーが自由にできるわけです。

 このスクリプトはこちらから(6KB 2011/10/31更新)ダウンロードできます(Firefoxでは右クリックからの操作で保存できます)。

Click Strength Checkerの使用例

※注意 このサンプルはHTML5Canvasを利用しているため、Internet Explorer8以下では見ることができません。 IE9もしくはFirefoxなどのモダンブラウザでご覧下さい。

 遊び方は画面上でマウスボタンを長押しするとゲージが徐々に増していくので、最大値100ポイントのときにボタンを放せるようにタイミングを合わせます。 このゲージの上昇率は後半になるにつれ加速するようにしてあり、70-100ポイント辺りを得るのがかなり難しくなっています。ゲージが100ポイントに達する前に クリックできないとタイムアウトしてしまいます。

あなたのクリック強度は、???です!

 Click Strength Checkerを使用するには、上記のリンク先でダウンロードしたスクリプトをページ内に埋め込み、 CSChecker関数を実行します。第1引数に要素ID名、第2引数にオプションをハッシュ形式で渡しますが要素IDは省略できます。オプションはdisabledredzoneonUpdateonPressonReleaserewindTimefromtofpsdurationeasingTypeの指定ができます。CSCheckerを呼び出してすぐに測定を始めたくないときはdisabledプロパティを trueにします。後からstartメソッドで開始することができます。redzoneプロパティはステータスが赤となるゾーンを0-100で指定します(デフォルトは70)。 onUpdateにはコールバック関数を指定します。測定中にfpsプロパティで指定した頻度で呼び出されるので、ゲージの描画などを行います。引数として現在値、現在の強度(%)、 ステータス(green、red、yellow)、マウスボタン押し下げ以降の経過時間が渡されます。onPressonReleaseにコールバック関数を指定すると、それぞれマウスを押し下げた瞬間と、 ボタンを離した瞬間に呼び出されます。rewindTimeプロパティはタイムアウトが発生したとき、マウスイベント受付不能にする時間を秒単位で指定します(デフォルトは1秒)。 fpsプロパティは測定の頻度を数値で指定します(デフォルトは40)。数値が大きいほど更新頻度が高くなります。 fromtoプロパティにはそれぞれ初期値と最大値を指定します(デフォルトは0、100)。durationプロパティはクリックイベントの許容時間を指定します。 これを超える時間マウスボタン押し続けるとタイムアウトします。easingTypeプロパティは強度数値の変化の仕方を指定します。jQueryのイージングプラグインなどを 参考にしていて、デフォルトは直線的(linear)です。

サンプルのHTML部分

サンプルのCSS部分

サンプルのJavaScript部分
要素IDを省略するとドキュメント画面全体に適用されます。

CSCheckerオブジェクトは外部からアクセスできるstartstopメソッドを持っていて、測定の開始と停止を好きなタイミングで制御できます。

その他にgetCurPosgetCurRategetStatusメソッドがあり、コールバック関数を指定しなくても任意のタイミングで各情報にアクセスできます。