Air-cursor NPM

AirCursor

AirCursorは、マウスを使わずに手のモーションのみでPCを操作できるReactコンポーネントです。

以下のコマンドを実行して、AirCursorをインストールします。

npm install air-cursor

インストールが完了したら、package.jsonにair-cursorが含まれていることを確認してください。

AirCursorの新しいバージョンがリリースされた場合、以下のコマンドを使用してアップグレードできます。

npm update air-cursor

または、特定のバージョンにアップグレードしたい場合は、次のようにバージョン番号を指定します：

npm install air-cursor@latest

@latestを指定すると、最も新しいバージョンがインストールされます。

以下のようにReactコンポーネント内にAirCursorをインポートします:

import AirCursor from 'air-cursor';

JSX内に<AirCursor />を追加して、AirCursorを使用可能にします:

<AirCursor />

<AirCursor />コンポーネントには、初期設定ボタンのテキストをカスタマイズするためのbuttonTextプロパティを設定できます（デフォルトは「ハンドトラッキングシステムを使用する」になっています）。例えば、ボタンのテキストを"開始"に変更する場合は以下のようにします:

<AirCursor buttonText="開始" />

初めて<AirCursor />を表示すると、ボタンのみが出力されます。このボタンをクリックすると、ポップアップが表示され、使い方を確認するチェックボックスを押す必要があります。

使用するウェブカメラの映像を画面に表示するか、または映像の配置場所を選択します。

次に、ウェブブラウザからカメラの使用許可を求める通知が表示されます。許可を与えると、AirCursorの使用を開始できます。

AirCursorは、以下の3つの機能を備えています。

画面をつかんでスクロール
- 人差し指と親指を合わせると、赤いポインタが表示されます。この状態で「つかんでいる」状態となり、手を上下に動かすことで画面をスクロールできます。
ポインタの合わせ
- 人差し指と中指を合わせると、青いポインタが表示され、クリックしたい箇所に照準を合わせます。
クリック
- 青いポインタが表示された状態で、親指を人差し指と中指に合わせて3本の指が揃うと、黄色いポインタが出現し、クリックイベントが発生します。これにより、照準を合わせた要素がクリックされます。