マウスやキーボードの動きからユーザーが次にどの要素を操作するかを予測するスクリプト -ForesightJS

通常のホバーエフェクトのトリガーは、要素にカーソルをホバーした後に開始されます。しかし、これはユーザーの操作(ボタンに移動)から実際のホバーイベントまで100-200ms遅れます。また、キーボード操作によるトリガーも同様です。

ユーザーが次にどの要素を操作するか予測し、マウスやキーボードを実際に操作する前にプリフェッチすることができるJavaScriptのライブラリを紹介します。

マウスやキーボードの動きからユーザーの操作を予測スクリプト -ForesightJS

ForesightJs
ForesightJs -GitHub

ForesightJsは、マウスの動きやキーボードの操作からユーザーの意図を予測して、次のターゲットになる要素を予測するJavaScriptライブラリです。他のフレームワークに依存しないため、あらゆるフレームワークと一緒に利用できます。

MITライセンスで、商用プロジェクトでも無料で利用できます。

サイトのキャプチャ

ForesightJsの特徴

カーソルの軌跡やタブのシーケンスを分析することで、ユーザーが操作する可能性のある要素を予測し、実際にホバーやクリックが発生する前にアクションをトリガーできるようにします。

デベロッパーはクリックやホバーなどのアクションを待つことなく、これらの予測に基づいて前もってデータをプリフェッチすることができます。これによりマウスやキーボードで操作するユーザーにとって、Webサイトやアプリの速度と応答性が向上し、ビューポートに入った瞬間にコンテンツをプリフェッチするよりも無駄が少なくなります。

  • カーソルの予測
    ユーザーが現在ホバーしている場所ではなく、カーソルが向かう方向の基づいてデータをプリフェッチします。
  • キーボードの予測
    ユーザーが要素からタブストップのN個分離れたときにデータをプリフェッチします。Shift+tabにも対応。
  • カスタマイズ可能
    予測方法の設定、要素周辺のヒットエリア調整など、さまざまなカスタマイズが可能です。
  • デバッグモード
    デバッグモードでは、軌跡の視覚化、ヒットエリアのオーバーレイ、リアルタイムで設定を調整するためのインタラクティブなコントロールパネルなど、ビジュアルデバッグ機能を備えています。

ForesightJsがどんな感じでユーザーの操作を予測するかは、デモページでお楽しみください。

サイトのキャプチャ

Playground -ForesightJs

各ボタンは300msのサーバーレスポンス遅延をシミュレートしており、実際のシナリオを再現します。すべての設定を調べるには、「Debug Mode」をonにしてデバッガーを表示している状態でご覧ください。
また、ユーザーと同じ体験をする場合にはoffにします。

下記のGifアニメーションは、tabキーで操作したものです。フォーカスが当たると縁取りされて、その次の要素がプリフェッチ(オレンジ状態)されます。

サイトのキャプチャ

Playground -ForesightJs

ForesightJsは、下記から利用できます。

基本的な使用例は、下記の通り。

詳しい実装方法については、ドキュメントをご覧ください。

サイトのキャプチャ

Docs -ForesightJs

sponsors

top of page

©2025 coliss