情報処理学会 インタラクション 2015
IPSJ Interaction 2015

C52
2015/3/7

CapacitiveMarker: 接触認識可能な 2 次元コードを用いたインタラクション手法
池田 昂平1,a)

塚田 浩二1,b)

概要：現在広く普及している 2 次元コードは, 読み取り時に入力部となるカメラとの間に一定の距離を作らなければ 認識されないという空間的制約がある. 一方，近年タブレット端末等の静電容量式マルチタッチディスプレイの普及に伴い，導電性パターンを接触させ，マーカーのように扱う研究事例が多く報告されている． そこで本研究では，両者を統合し，2 次元コードを印刷した紙と導電パターンを印刷した透明フィルムの 2 枚を重ね合わせる事で，カメラ／静電式タッチディスプレイのどちらからも認識可能な新しい 2 次元コード「CapacitiveMarker」 を提案する．さらに，CapacitiveMarker を用いた様々なインタラクション手法について応用アプリケーションを通じて紹介する．

CapacitiveMarker: Novel Interaction Method using 2D Barcode
Integrated with Conductive Marker
Ikeda Kohei1,a)Tsukada Koji1,b)

Abstract: The 2D barcodes have spatial limitations to require certain distances between a camera and barcodes. Meanwhile, as capacitive multi-touch displays like smartphones and tablets have become popular,
many researchers proposed interactive techniques using conductive patterns and a capacitive display. In
this study, we propose a novel 2D barcode, ”CapacitiveMarker”, which can be recognized both by a camera
and capacitive display. The CapacitiveMarker consists of two layered markers: a 2D barcode printed on aseal and a conductive pattern on a plastic film. In addition, we propose a new interaction method using
CapacitiveMarker through several applications.

1. はじめに一方，近年では静電容量式マルチタッチディスプレイ（以下，タッチパネル）に着目し，物理的なモノに銅箔等

近年，スマートフォンやタブレット等のモバイル端末との複数の導電素材を取り付け，静電式マーカーとして扱う

実世界を連携させたインタラクションの研究が盛んに行わ研究も多数提案されている [6], [7]．これらの手法は，タッれている．特に端末内蔵カメラを用いて 2 次元コードを認

チパネル上でのモノの ID 認識や位置検出を実現するが，識させるインタラクション手法 [5] は古くから盛んに取りタッチパネルから離れると認識が困難であった．

組まれている．こうした 2 次元コードを用いたインタラク

本稿では，導電性インクによるパターンを 2 次元コード

ションは安価で手軽に実現できる反面，カメラの画角の制に内包させることにより，カメラによる認識だけでなく，約を受ける欠点があり，例えば，カメラを近づけすぎるとタッチディスプレイに接触させても認識させることができ認識できなかった．

る 2 次元コード「CapacitiveMarker」を提案する (図 1)．
これにより，端末（カメラ）から一定距離離れている状態

1a)b)

公立はこだて未来大学 システム情報科学部 情報アーキテク
チャ学科
The school of Systems Information Science, Media Architecture, Future University Hakodateb1011065@fun.ac.jp
tsuka@acm.org© 2015 Information Processing Society of Japanと，端末 (タッチパネル) に接触した状態の双方でマーカーの ID ／位置／向き等を用いたインタラクションを行うことができる (図 2)．さらに CapacitiveMarker を使って操作するアプリケーションの実装を行い，応用方法を検討する．

921

図 1

CapacitiveMarker の構成．AR マーカーと静電マーカーを 2層に重ねている．

図3CapacitiveMarker の階層構造．静電パターンの印刷面がシール紙の粘着面と合わさるように重ねる．

3. 実装
3.1 マーカーの構成
マーカーのサイズは全体を 40mm × 40mm とした．前
述したように，マーカーは 2 層構造であり，AR マーカーは通常のインクジェットプリンターで，静電マーカーはKawahara らの提案手法 [4] を用いて，銀ナノインクを用いたインクジェットプリンターで出力する．AR マーカー
図 2 CapacitiveMarker の特徴．端末から一定距離離れている状態と接触した状態の双方でマーカーを検出できる．

は，厚さ約 0.07mm のシール紙に，静電マーカーは厚さ約0.13mm の透明プラスチックフィルムに印刷した．
次に，静電マーカーの詳細について説明する．静電マー

2. CapacitiveMarker

カーは，タッチパネル上で検出可能な 4 点の円形導電部（以下，タッチポイント）を中心に構成される．タッチポ

CapacitiveMarker は，2 次元コードを印刷したシール紙

イントは，マーカーの周辺部に直径 10.0mm の固定点を 3と，導電性インクで特定のパターンを印刷したプラスチッ

点，中央部に直径 8.0mm の可変点を 1 点配置し，それぞれクフィルムの 2 枚を重ね合わせた構造を持つ (図 3)．パを導電性の接続線（太さ 1.0mm）でつなぐ．これにより，ターン作成の自由度と手軽さを重視して ARToolKit*1 準拠

ユーザがマーカーの周辺部を持ってタッチパネル上に置くの 2 次元コード（以下，AR マーカー）を採用する．導電と，全てのタッチポイントにおいてタッチイベントが検出性のパターン（以下，静電マーカー）は，周辺部に 3 点のされる．ここで，周辺部 3 点の固定点を認識することで，固定点を，中央部に 1 点の可変点を設置する．固定点の位マーカーの位置と向きを検出する．次に，固定点と可変点置はどのマーカーでも変化しないが，可変点の位置はマーの相対位置を元に，マーカーの ID を検出する．

カーによって変動し，固定点からの相対位置の変化で ID

なお，固定点の位置は AR マーカーの黒枠部分の 3 つの認識を行う (図 1 右)．この静電マーカーを印刷したフィル頂点に合わせている (図 1 右)．また，可変点の位置は AR

ムを AR マーカーを印刷したシール紙で隠すように上からマーカーの内枠に収まる範囲で変動させ，図 4 のように 9貼り合わせることで，見た目は通常の AR マーカーである

つのパターンを作成している．

が，タッチパネル上での ID ／位置／向き等の認識を行う事ができる．

CapacitiveMarker は，スマートフォンやタブレットのようなカメラとタッチパネルが取り付けられた端末上で利用する．端末を机等に水平に置いた状態で，マーカーを端末から一定の高さに持ち上げると，端末カメラから AR マーカーとして認識され，そこから垂直方向に下げてタッチパネルの上に置くと，静電マーカーとして認識される．
図 4 製作した 9 種類のマーカー*1

http://www.hitl.washington.edu/artoolkit/© 2015 Information Processing Society of Japan922

3.2 静電マーカーの認識方法
静電マーカーの認識は，マーカー領域の認識と，ID 認識の 2 段階に大きく分けられる (図 6 右)．
マーカー領域の認識は，一定の間隔で配置した周辺部の固定点 3 点を検出する．まず，マーカーが接触すると各タッチポイントに対応して 4 つのタッチイベントが生成される．次に，これらの座標間の直線距離を計算し，そのうち距離が最大となる 2 点を対角線上の固定点とする (図 5の１)．さらに，対角線上にある固定点２点からの距離が等しい１点を残りの固定点とする．この時，距離が等しい座標が２つある場合は，距離が長い方を固定点とする (図図 6CapacitiveMarker の 2 つの認識状態．左図の画面は 2 次元

5 の 2)．以上の固定点 3 点を検出し，最初に静電マーカーコードの ID ／位置／向き／奥行きが検出されている事を示の領域を認識する．

し，右図の画面は静電マーカーの ID ／位置／向きが検出されている事を示す．

ID 認識は，4 点のうち残りの 1 点を中央の可変点として特定し，2 つの固定点からの距離によって，マーカーの IDを判別する (図 5 の 3)．

た (図 7)．ユーザがマーカーを端末から一定の高さ離して持ち上げると，俯瞰して見る空中視点の Google マップを表示し，次にマーカーを下ろして端末表面に接地させると，地図上に下ろした地点の緯度／経度に対応する場所を

Google ストリートビューで表示する．マーカーを浮かせた状態ではカメラによる認識を行い，マーカーの ID ／位置／向き／カメラからの奥行きを検出する．これにより，Google マップの移動／回転／拡大や縮小等の操作をすることができる．さらに，マーカーを端末に近づけてカメラ
図 5

静電マーカーにおけるタッチポイントの認識順序．1 番では対からの奥行きが一定距離以下に小さくなった時は，空中視角線上の固定点 2 点，2 番では残りの固定点 1 点，3 番では可点の地図への操作を中止し，タッチパネルによる操作に切変点の相対位置をそれぞれ求める．

り替える．タッチパネルによる認識時は，静電マーカーの位置／向きを検出し，Google ストリートビューのパノラマ

3.3 2 次元コードの認識方法
2 次元コードの認識は，スマートフォンやタブレット向けのアプリケーションに Augmented Reality の機能を追加するために metaio 社が提供している metaio SDK*2 を利用する．さらに，AR マーカーとそのトラッキング設定ファ写真に対して前後に移動／左右に回転させる操作を行うことができる．本アプリケーションでは 1 つのマーカーを端末の上で移動させるだけで直感的に 2 タイプの地図の操作を行うことができ，地図から地上視点のパノラマ写真に切り替える操作も比較的素早く行うことができる．

イルを自動生成するため，専用アプリケーション metaio

Creator を利用する．上記の AR マーカー認識用のフレー
ムワークとトラッキング設定ファイルをプログラムに追加する事により，複数の AR マーカーをタブレット端末に登録し，端末のカメラから認識させる事ができる．マーカーの ID に加えて，3 次元座標と回転角の取得から，マーカーの位置／カメラからの奥行き／向きを検出する事ができる(図 6 左)．

4. 応用
4.1 応用アプリケーション
CapacitiveMarker を使った応用例の一つとして，マーカーを浮かせた状態とタッチパネルに接地させた状態の双方で視点を切り替える地図アプリケーションの実装を行っ*2

図 7

視点の切り替えが可能な地図アプリケーション．マーカーを浮かせた状態と接地させた状態で，Google マップと Googleストリートビューを切り替える．

http://www.metaio.com/products/sdk/© 2015 Information Processing Society of Japan923

4.2 CapacitiveMarker の形状に関する検討をタッチパネルに接触させている時は，地上視点で歩兵を提案・実装の章で述べた通り，CapacitiveMarker は薄い操作し，マーカーを持ち上げている時は，空中視点で航空シール紙とプラスチックフィルムを重ね合わせた 2 次元機を操作するような内容である．歩兵が航空支援を受けなコードであるため，そのまま使用するとマーカーの端を直がら戦うような状況を想定し，両者を素早く切り替えなが接手で持った状態で操作を行うことになる．このため，カら操作できるよう工夫したい．

メラに対してマーカーの一部分が隠れたり，マーカーを端末に接地させるときに，マーカーを持った手指が直接タッ

5. 議論

チパネルに触れて，誤認識が起こる要因となり得る．そこ

現状の課題としては，「静電マーカーの認識精度」と「ARで，CapacitiveMarker の物理的操作性を向上させるためマーカーの認識範囲」が挙げられる．前者については，静に，マーカーに立体形状のつまみを取り付ける (図 8)．つ電マーカーの各タッチポイントが誤認識されるケースがあまみは，CAD ソフトで設計した 3 次元モデルを 3D プリるため，時系列での平滑化等の工夫を進めていきたい．さンタから出力し，つまみ下部から持ち手までを銅テープでらに，ユーザーがマーカーを動かしている間のマーカー位配線した上で，CapacitiveMarker の静電マーカー側とつま置の認識を行う際にプログラム側の処理の負荷が大きいたみ下部を密着させる．これにより，マーカーをつまんで持め，これも時系列の座標値を利用して位置の認識を行い，ち上げたり，回転させる動作が容易となる．この他にも，処理の負荷を低減する必要がある．

カードと一体化したり，日用品に張り付けたりといった，様々な形状を工夫していきたい．

後者については，カメラとタッチパネルの両方から認識されない空間が 10cm 以上存在する問題がある．この問題に影響されにくい応用例を考える一方で，カメラに小型広角レンズを付けて AR マーカーの読み取り可能範囲を広げる等の工夫を進めていきたい．

6. 関連研究6.1 タッチパネル上で扱う物理インタフェースの研究
図 8 立体形状のつまみ．左：底面，中央：俯瞰した面，右：側面．
底面に 2 次元コードを接着させていない状態．

物理的なモノに導電部を取り付け，タッチパネル上で操作するインタフェースの研究が行われている．紙窓 [6] は，カードに複数の導電部を配置し，タッチパネル上に置くことで，導電性パターンに対応したアプリケーションが起動される．くるみる [7] は，複数導電部を持つ枠型物理オブジェクトをディスプレイ上で回し，操作に対応した表示を枠の中から見るインタフェースを提案している．池松ら [8]は，タッチパネル接触時に得られる情報の一つとして接触面積を利用し，マルチタッチインタラクションの拡張を提案している．タッチパネル上で，ユーザの接触を必要とせずに物理的なウィジェットを検出する手法として，PUCsが提案されている [9]．PUCs は，電気的に接続した 2 つのマーカーのうち，一方のマーカーのタッチ領域を接地点として利用し，もう一方のマーカー直下にある電極の格子点

図 9 背面に CapacitiveMarker を取り付けた立体形状のつまみ．つに静電容量の変化を与えることで，タッチパネル上でユーまみの周囲の導電テープが静電マーカーの導電部に触れるよ

ザが非接触状態において継続的なウィジェットのトラッキうに接着させている．

ングを可能とする．これらは，いずれも静電容量式タッチディスプレイを用いて物理的なモノを認識している．さらに，タッチパネル上で操作するインタフェースの開発を容4.3 その他の応用例
本稿では，応用例として視点を切り替える地図アプリ

易にするために，家庭用複合機と導電性インクを用いて導電性パターンを生成する手法も提案されている [10]．

ケーションを提案／実装したが，他に応用例の一つとして，タッチパネル上の検出方法では他に，タッチパネルのマーカーを浮かせた状態と接地させた状態で操作キャラク

背面に赤外線カメラを設置して，赤外線を反射するマーターを切り替えるゲームを検討している．例えば，見下ろカーをトラッキングする手法が提案されている．Lumino[1]

し型のシューティングゲームにおいて，ユーザがマーカーは，物理的なブロックの内部にガラスファイバーを入れ© 2015 Information Processing Society of Japan924

ることで，2 次元マーカーを反射した赤外線をタッチパネ

識精度について基礎的な実験を行い検証していく．後者にル下のカメラへ送り，画像のパターン認識を行う．SLAP

ついては，議論の中で前述した見下ろし型シューティング

Widgets[2] は，アクリルやシリコン製の半透明な物理ウィゲームの他に，より実用性を考慮した応用例を検討した

ジェットの複数部に反射材を取り付け，ディスプレイ下のい．さらに，現状では 9 種類のマーカーを製作したが，静赤外光 LED とカメラの組み合わせによりウィジェットの電マーカーにおける導電部の可変点を 1 点から 2 点に増や位置を認識する．本研究では，一般的な静電容量式タッチす事により，製作可能なマーカーの種類を増やす事も検討

ディスプレイにおいての物体の認識を可能とする．

する．

6.2 2 次元コードを用いたインタラクションの研究
2 次元コードを用いたインタラクションは古くから取り

謝辞
本研究は JSPS 科研費 25700019 の支援を受けた．

組まれている．例えば，Rekimoto らは，CMOS や CCD 等の安価なカメラを利用して認識できる 2 次元コード「Cy-参考文献

berCode」と，それを利用した拡張現実感の環境を提案し[1]ている [3]．CyberCode は，ID 認識とともに 2 次元コードを貼り付けた実物体の 3 次元位置も計測することができ，マーカー上に 3D オブジェクトを表示させる事ができる．

[2]

さらに，綾塚らは，コード内の可変部分を手や指で隠すことにより 2 次元コードを拡張した操作を行うことができる

Active CyberCode を提案している [5]．
本研究では，AR マーカーと静電マーカーを組み合わせ[3]て，タッチパネルに接触した状態／離れた状態の双方で活用できる点が特徴である．また，導電性インク複合機を用[4]いる事により，大量かつ手軽に製作できるマーカーを提案する．
[5]

7. まとめと今後の展望[6]

本研究では，カメラ／タッチパネルのどちらからも認識可能な 2 次元コード「CapacitiveMarker」を提案し，従来[7]のタッチパネルを利用したテーブルトップインタフェースや現在普及している 2 次元コードにおける認識空間の制約の改善を試みた．CapacitiveMarker は，AR マーカーを印[8]刷したシール紙と導電性パターンを印刷したプラスチックフィルムを重ね合わせて製作した．カメラによる認識時[9]は，AR マーカーの認識ライブラリを用いてマーカーの ID／向き／位置／カメラからの奥行きの検出を行い，タッチパネルによる認識時は，導電性のパターンに含まれる 3 点の固定タッチポイントと 1 点の可変タッチポイントの 2 点間距離，座標とその大小関係から，タッチパネル上に置い[10]

Patrick Baudisch, Torsten Becker and Frederik Rudeck.
Lumino: Tangible Blocks for Tabletop Computers Basedon Glass Fiber Bundles. In CHI’10, pp. 1165–1174, April
2010.
Malte Weiss, Julie Wagner, Yvonne Jansen, Roger Jennings, Ramsin Khoshabeh, James D. Hollan and JanBorchers. SLAP Widgets: Bridging the Gap Between
Virtual and Physical Controls on Tabletops. In CHI’09,
pp. 481–490, April 2009.
Jun Rekimoto and Yuji Ayatsuka. CyberCode: Designing Augmented Reality Environments with Visual Tags.
In DARE’00, pp. 1–10, April 2000.
Y. Kawahara, S. Hodges, and B. S. Cook, and C. Zhang,and G. D.Abowd. Realtime Instant Inkjet Circuits: Labbased Inkjet Printing to Support Rapid Prototyping of
UbiComp Devices. In UbiComp 13, pp. 364–372, 2013.
綾塚 祐二, 暦本 純一. Active CyberCode：直接操作できる二次元コード. WISS2005, pp. 3–8, 2005.
加藤 邦拓, 宮下 芳明. 紙窓：そこに置くだけで操作可能なカードインタフェース. WISS 2013, pp. 163–164, 2013.
青木 良輔, 宮下 広夢, 井原 雅行, 大野 健彦, 千明 裕, 小林 稔, 鏡 慎吾. くるみる：複数導電部をもつ枠型物理オ
ブジェクトを用いたタブレット操作. 情報処理学会研究報
告 HCI-144, pp. 1–8, 2011.
池松 香, 椎尾 一郎. Multi-Press Interaction: 疑似押下圧力を用いたマルチタッチ技法. 情報処理学会 インタラクション 2014, pp. 401–404, 2014.
中島 康祐，伊藤 雄一，Simon Voelker，Christian Thoresen，Kjell Ivar Overgard，Jan Borchers． PUCs：静電容量方式マルチタッチパネルにおけるユーザの接触を必要としないウィジェット検出手法． 情報処理学会 インタラクション 2014，pp.108–113，2014．
加藤 邦拓，宮下 芳明． 導電性インク複合機を用いたマルチタッチパターン生成手法． 情報処理学会研究報告，
pp.1–6，2014．

たマーカーの ID ／向き／位置の検出を行った．さらに，

CapacitiveMarker を使った応用例の一つとして，2 つの認識方法で視点を切り替える地図アプリケーションの実装を行うとともに，マーカーの背面に立体的なつまみを取り付けて，手に持つ時の物理的な操作性を向上させる事を試みた，
今後は「静電マーカーの認識精度」の改善と「応用アプリケーションの開発」を中心に行う．前者については，静電マーカーの ID 認識や位置計測の精度について，閾値の変更や時系列での平滑化により改善を試みる．さらに，認© 2015 Information Processing Society of Japan925