【ITニュース解説】Use ML5 with ZIM for Integrated Hand Tracking and More on the Canvas!

ウェブアプリケーションの操作方法に新たな可能性が生まれた。JavaScriptライブラリのML5とZIMが連携し、カメラで捉えた手の動きを使って、アプリ内の要素を直感的に操作できるようになったのだ。これにより、まるでSF映画で描かれるような、空中でのジェスチャー操作が現実のものとなる。

ML5は機械学習の機能をウェブブラウザ上で利用できるようにするJavaScriptライブラリである。この連携において、ML5は「ハンドポーズ検出」の役割を担う。ウェブカメラからの映像を解析し、人の手の位置、形、指の動きといった情報をリアルタイムで認識する。これにより、コンピュータは人間の手がどのような状態にあるのかを具体的に把握できるようになる。

ZIMは、ウェブ上でグラフィカルなユーザーインターフェース（UI）やアニメーションを簡単に作成するためのJavaScriptフレームワークである。ボタン、スライダー、タブといった多種多様なUIコンポーネントを提供し、通常はマウスのクリックやドラッグ、スマートフォンのタッチ操作といったイベントに対応して動作する。ZIMの強みは、これらのUIコンポーネントを効率的に作成し、管理できる点にある。

ML5とZIMの連携は、ウェブカメラがユーザーの手の映像をキャプチャするところから始まる。この映像はML5に送られ、ML5は機械学習アルゴリズムを用いて、手の正確な位置、各指の関節の角度、そして「ピンチ」のような特定のジェスチャーを検出する。検出された手のデータは、リアルタイムでZIMフレームワークに渡される。 ZIMは、受け取った手のデータを、まるでマウスカーソルが動いたり、ユーザーが画面を指でタッチしたりしたかのように解釈し、自身のインタラクションシステムに取り込む。これにより、ZIMが元々持っているマウスやタッチイベントに対する応答機能が、ハンドトラッキングのデータにも適用される。結果として、ZIMで作成された既存のUIコンポーネントが、特別な追加コードなしに、手の動きやピンチジェスチャーによって操作できるようになる。

この連携によって、アプリケーション操作が大きく変わる。例えば、画面上のスライダーのつまみを、指でピンチ（親指と人差し指でつまむ動作）してそのまま手を左右に動かすことで、スライダーの値を変更できる。また、画面に表示されたボタンに対して空中から指を近づけ、ピンチ動作を行うことで、そのボタンが「タップ」されたと認識され、関連する機能が実行される。画面上のオブジェクトを指でピンチしてドラッグすることも可能で、これらの操作はキーボードやマウス、タッチスクリーンを使う代わりに、手だけで行われる。

この機能を実現するためには、まずウェブページにML5とZIMのライブラリファイルを読み込む。これは、それぞれのライブラリが提供する機能を使えるようにする準備だ。 ZIMのコードでは、Frameでアプリケーションの舞台となるキャンバスのサイズや背景色を設定する。次にCamAskでウェブカメラの使用許可を求め、許可されればCamオブジェクトが生成され、カメラ映像がキャンバスに表示される。 カメラの準備が完了すると、ml5.handPose()で手の姿勢を検出する機械学習モデルが読み込まれる。このモデルは手の動きを分析するためのプログラムだ。モデルの読み込み後、handPose.detectStart()でカメラの映像を分析し、手の検出を開始する。検出された手のデータはresult関数に送られ、そこからcam.handTrack(results)によってZIMの内部システムへと渡される。 ZIMはこのデータを受け取り、自身のインタラクションシステムに統合する。その結果、new Circle().drag()で作成されたドラッグ可能な円や、new Button().tap()で作成されたボタンといったZIMのUIコンポーネントが、自動的にハンドトラッキングによる手の動きやピンチジェスチャーに応答するようになる。

ML5とZIMの連携は、ユーザーインターフェースデザインと開発に大きな影響を与える可能性を秘めている。キーボード、マウス、タッチスクリーンといった既存の入力デバイスに依存しない、より直感的で自然な操作体験を提供できるため、身体的な理由で従来の入力デバイスの操作が難しい人々にとってのアクセシビリティを大幅に向上させることにつながるだろう。また、AR（拡張現実）やVR（仮想現実）アプリケーションにおける没入感を高める新しいインタラクション手段としても期待される。ZIMの既存のUIコンポーネントにハンドトラッキング機能が統合されたことで、開発者は複雑な機械学習の知識がなくても、手軽に高度なジェスチャー操作を実装できるようになり、新しいインタフェースの創造がさらに加速する。