触れずに動かすタッチパネル－グーパーマウスの開発－
４年Ｃ組

庄野裕貴

指導教諭 米田 隆恒

１．要約
最近普及している Web カメラを用い、画像処理の技術を応用して『触れずに動かすことのできるタッチパネル（グーパーマウス仕様）』の開発に成功した。グーパーマウスは、直感的に扱うことができる、タッチパネルに比べ安価である、非接触である、通常のタッチパネルとは異なり、３次元的に操作することができるなど、従来になかった特徴が挙げられる。

キーワード

画像処理、手の領域、Web カメラ、マウス、形状認識

２．動機

(１)仮説

タッチパネルは大変使いやすいデバイス

人間の手の座標と形状を取得できるモーであるが、次のような問題がある。それは価ションキャプチャを実現し、それを利用した格と衛生面である。会議室や学校などで使用

グーパーマウス仕様の触れずに動かすタッされるような大型のタッチパネルになるとチパネルを開発することができる。

通常のディスプレイサイズに比べ、２～５倍のコストがかかる。また、公共の場では不特(２)研究方法

定多数の人が触れるので、衛生面で不安があカメラに映し出された、グーパーマウスとる。これらの点を改善するために研究を始めなる手の３次元座標を連続的に取得する技るに至った。

術をモーションキャプチャという。

３．目的開発する『触れずに動かすタッチパネル（グーパーマウス仕様）』は、次の特徴を備えたものとする。
① パネルに直接触れることなく、手で操作ができる。

図１

使用した Web カメラ

通常、この技術は高額で大掛かりな装置を②直感的に操作ができる。

必要とするが、わたしは数千円の USB 接続③安価で、導入が容易である。の Web カメラを使ってモーションキャプチ
ャを開発した。この技術がグーパーマウスの４．研究内容中核となる。

以下に、今回開発したモーションキャプチをしめているかで、グーかパーかを判断できャに関する研究の一部を紹介する。

ると考えた。

研究Ⅰ

研究Ⅲ

手の切り出しと３次元座標の取得

まず、Web カメラが映し出す画像から、グマウスポインタの動きと手の動きとの関連付けーパーマウスとなる手の部分のみを切り出研究Ⅰで取得した手の重心の X−Y 座標をす必要がある。画像は、色情報を持つたくさマウスカーソルの位置を設定する座標とリんの画素の集合体である。手の色情報に近いンクさせることによって、本来のマウスカー画素のみを表示することで、この切り出し作ソルの移動をコントロールすることができ業ができるのではないかと考えた。

る。研究Ⅱで得た手の形状認識の情報を用い、また、この切り出した手の色領域の重心を次に示すような計算式を用いて求められるマウスカーソルのクリック操作をコントロールすることができると考えた。のではないかと考えた。

 x , y 
手の色領域の重心  X , Y  iiN(３)研究の結果
モーションキャプチャの処理を行うソフトウェアは、C++言語で記述した。開発環境

また、手がカメラに近ければ、切り出されは Microsoft 社 の VisualStudio2008 とた画素の総数は多くなり、遠ければ少なくなOpenCV である。OpenCV とは画像処理のると考えられる。このことから、手の Z 座標

ライブラリである。

（カメラからの距離）を算出できるのではないかと考えた。

研究Ⅰの結果手の色領域を認識することに成功した。切研究Ⅱ

手の形状認識ここではグーパーマウスでクリック操作をするために手の形状を認識したいと思う。

り出した手の色領域の重心を手の重心とすると、精度よく手の位置を検出することができた。

この形状認識の方法は具体的にはその手がじゃんけんのグーとパーのどちらなのかを認識させることができる。今回は、凸包(convex hull)を用いてグー／パーを識別した。凸包とは、ある図形を含む最小の凸図形のことで、手の領域を輪ゴムで囲うようにぴったりと囲んだ線による図形が凸包である。
研究Ⅰで抽出した手の領域を凸包で囲み、凸包で囲んだ領域中に手がどれだけの面積

図２グーのときの重心の位置

図３ パーのときの重心の位置

図５ グーのときの凸包

また、切り出された手の色領域の面積から、手の Z 軸座標(カメラからの距離)を測ることもできた。今後は手の面積の変化の差で制御することによって、人によって違う人の手の大きさの問題を解決し、操作したいと考えている。
図６ パーのときの凸包

研究Ⅲの結果研究Ⅰと研究Ⅱから得られた座標や手の形状を本来のマウスカーソルの動きとリンクさせることができる。
① 手の色領域の重心の移動→マウスカーソルの移動
図４切り出した画素の総数とカメラ－手間の距離 R の関係② 手のカメラからの距離（Z 軸の座標）→基本は画像やウィンドウの拡大・縮小

研究Ⅱの結果基本的に研究Ⅰで抽出した手の色領域の面積 N と凸包の面積の割合によってグーとパーを識別することに成功した。
手の色領域の面積 N と凸包の面積の割合が 100％〜75％の時をグーと識別し、手の色領域の面積 N と凸包(凸包)の面積の割合が、75％〜45％の時をパーと識別した。

→音楽ソフトを操作している場合は音量の調節③ 手の形状認識（手のグーとパーの認識）→本来のマウスカーソルでのクリック
操作

（４）研究のまとめ
研究Ⅰ・研究Ⅱについて① 手の色情報をもとに、映像から手のみを切り出すことができる。
② 切り出した手の重心を連続的に求めることで、移動する手の X－Y 座標を取得することができる。
③ 切り出した手の総画素数 N より、手のカメラからの距離（Z 軸）を求めることができる。

研究Ⅲについて①現状のタッチパネルとは違い、手を触れずに動かすことができる。
完成したグーパーマウスは次のような構造になった。

図８

グーパーマウスの動作原理の図

次の図に完成品を示す。

図７

グーパーマウスの構造図②スクリーン全体が撮れるようにカメラを上の方につける。
③スクリーンの上にある手の形状・位置（座標）を取得し、ソフトウェアを操作する。
図９

完成品

マウスにすることができる。
② 手をグーパーマウスとして操作することによって、画面上のウィンドウを“つかんだり”、“離したり”が文字通り行うことができ、非常に直感的な操作性をもつ。
③ Web カメラを１台使うだけなので、安価であり、コスト面においても導入が容易である。
図 10 グーパーマウスの使用風景④ 画面平面上（X－Y 軸）の操作（クリック、ドラッグなど）に加えて、手を上下に移動＜操作方法＞させる（Z 軸）ことによって、画像やウィ

手の動きマウスの動きンドウなどの操作（拡大・縮小・音量の調

グークリックしている節など）が容易にできる。

状態
パー

クリックしていない状態

手の移動

カーソルの移動

手の上下ウィンドウの拡大• 縮小
音楽ソフトの場合

６．今後の課題
以上のことから、研究の目的は概ね達成できたと考える。
今後は実用化に向けて、座標の取得精度を向上させること及び、プログラムの高速化を目指していきたい。

音量の調節

７．展望
現状の大型のタッチパネルに比べ、安価であるので、導入しやすくなる。また、公共の場においては、不特定多数の人が触れる現在のタッチパネルよりも、今回開発した『触れずに動かすタッチパネル(グーパーマウス仕様)』の方が、衛生面での改善が見込まれる。
また、手で簡単にかつ直感的にコンピューターを操作することができるので、より多く
図 11

google map の操作の様子の人がコンピューターを利用しやすくなる。
そして、この技術を用いることによって、

５．まとめ① Web カメラに写し出された手をグーパー

手以外の体の部分、例えば、目や足などを取得し、体に障害を持っている人へのリハビリ、コンピューターのインターフェイスとして使えるのではないかと考えている。

８．参考文献•サイト[1]「独習 C++」，ハーバート

シルト著[2] 「C 言語で学ぶ実践画像処理」，井上誠喜，
林正樹，八木伸行，中須英輔，三谷公二，奥井誠人

共著[3]「OpenCV プログラミングブック」，奈良
先端科学技術大学院大学

OpenCV プ

ログラミングブック制作チーム

９．謝辞
本研究およびレポート作成にあたってご指導くださった顧問の米田隆恒先生に深く御礼申し上げます。また、本校のサイエンス研究会の諸先輩のご協力に感謝します。