AIを活用してマルチタッチ確認アプリを開発した話

はじめに

当社では、LiDAR を用いたマルチタッチ入力システムの開発を行っています。
センサーから生成したタッチイベントが「正しく OS に認識されているか」を確認するため、シンプルで分かりやすい検証用アプリが必要になりました。

そこで今回は、AI を活用してマルチタッチ確認用アプリを開発した事例をご紹介します。

なぜ確認用アプリが必要だったのか

Windows のマルチタッチ API にイベントを注入するだけでは、

• タッチIDが正しく維持されているか

• Move / Down / Up が正常に遷移しているか

• 複数ユーザー同時操作が安定しているか

といった挙動を直感的に確認することが困難です。

そのため、

• タッチポイントを可視化できる

• タッチIDを画面上に表示できる

• 同時タッチ数を確認できる

といった機能を持つ検証アプリを開発しました。

採用した技術構成

今回のアプリは、以下の構成で実装しています。

開発環境

• Node.js（v14以上）

• Electron v35.0.3

• JavaScript（ES6）

• HTML5 Canvas API

使用技術

• Electron

• クロスプラットフォーム対応のデスクトップアプリ基盤

• HTML5 Canvas

• タッチポイントの描画

• Touch Events API

• タッチ入力の取得

• Fullscreen API

• Canvas 部分の全画面切り替え

Electron を採用した理由は、

• 実行環境の準備が容易

• Web 技術で UI を構築できる

• 将来的な機能追加が容易

という点にあります。

実装した機能

本アプリは、マルチタッチ検証に特化したシンプルな構成です。

1. マルチタッチ入力のサポート

タッチスクリーンデバイス上で複数の指を同時に使用すると、それぞれ独立したタッチポイントとして認識されます。

2. タッチポイントの可視化

各タッチ位置に円を描画し、リアルタイムに追従表示します。

3. タッチIDの表示

各タッチに割り当てられた ID を描画することで、
フレーム間で ID が正しく維持されているか確認できます。

4. 同時タッチ数のカウント

現在アクティブなタッチ数を画面上に表示します。

5. マウス入力のサポート

デスクトップ環境でも検証できるよう、
マウス操作でタッチをシミュレート可能にしています。

6. Canvas 部分の全画面表示

全画面ボタンにより、描画領域をフルスクリーン表示できます。
大型ディスプレイ環境での動作確認に便利です。

AIを活用した開発プロセス

今回の開発では、AI を積極的に活用しました。

活用したポイント

• Electron の初期テンプレート生成

• Touch Events の実装例作成

• Canvas 描画ロジックの生成

• 不具合発生時の原因特定

• リファクタリング提案

特に効果を感じたのは、

「小規模ツールを短時間で形にできること」

でした。

通常であれば数時間〜半日程度かかる検証アプリが、
構成設計から実装までを非常にスムーズに進めることができました。

実際に使ってみて分かったこと

このアプリにより、

• ID の跳び

• Move が途切れる問題

• タッチアップの誤判定

といった不具合を早期に発見することができました。

検証専用ツールを持つことは、
入力デバイス開発において非常に重要であると実感しています。

まとめ

AI を活用することで、
「検証用の小規模アプリ」を迅速に開発することができました。

マルチタッチのように挙動確認が重要な領域では、
可視化ツールの存在が開発効率を大きく左右します。

今後も AI を活用しながら、
開発プロセスの効率化と品質向上を進めていきたいと考えています。