携帯端末上で画像入りドキュメントの情報付加を行う実世界ブラウザ
鈴 木 稔 人†矢 口 裕 明†得岡津田覚†慧†佐稲藤 顕 治†
葉 雅 幸†

本研究では、携帯端末を用いて、実世界にあるチラシや雑誌、看板などのドキュメントに含まれる画像を認識し、それに関連する情報を Web 上から取り出してきて、スクリーン上に透過的に表示させることによって、実世界のドキュメントに、動的な情報を付加して表示するシステムを提案する。

Real world browser displaying additional information
to document including picture on mobile phone
Narito Suzuki,† Satoru Tokutsu,† Kenji Satou,†
Hiroaki Yaguchi,† Kei Okada† and Masayuki Inaba†
We propose the mobile-phone-based system that can display dynamic information on thereal world documents, by recognition of the images in real world document such as ﬂyers, magazines, and signboards, and displaying the related information from the Web transparently inthe screen.

1. は じ め に象とし、これらの画像を生かしたい。
また、携帯端末上で画像を取得し、サーバーに送信し画像の入ったパンフレットやレストランのメニューて Web 全体から検索し、関連情報を付加する Googleなどで、画像に携帯電話をかざすだけで、その画像項

Goggle4) も利用可能になっている。対して本研究で目に関するインターネット上の口コミ情報などを画面は、パンフレット上などに探索範囲を狭めて、携帯端に重畳して表示し、かつ、その場で口コミ情報も入力末上で認識できるようにすることで、軽快な動作で実できるシステムを携帯端末用実世界ブラウザと呼ぶ。

世界のドキュメントに関連付けられた情報を閲覧でき

例えば、レストランのメニューで、料理の画像に端るようにするとともに、ユーザーや、パンフレットを末をかざすと、それを食べた人の情報が画面に映る、発行する店舗などが情報を書き込んだりするなどの動また、食べ終わった後、それに対して感想を記入するこ的な情報生成を可能したい。とで、お店のオンライアンケート、口コミ情報をユーザーが共有できるようになる。

2. 実世界ブラウザの構成

本研究では、画像の検索に SURF 特徴量1) を用い、画像を特徴としてコード化し、インターネットド

XML の中にその特徴量と関連づけられた情報を埋めキュメントとして登録する機能とその特徴量でイン込み、シースルーブラウザを通してそのようなインタターネットドキュメントを検索してくる機能をもったラクションをする実世界ブラウザを Android 携帯端アプリケーションとして実世界ブラウザを実現する。

末の上で開発することを目的とする。

図 1 がシステムの構成図である。ユーザーが実世実世界にあるドキュメントを認識し情報を追加して界ブラウザを使い始めるとき、最初に画像特徴量と関表示する手法は、今までにもマーカー2) や文字3) を利連して表示する情報が記述された HTML コードがペ用して実現する方法が提案されてきた。本研究では、アになって、画像の数だけ記述された XML ファイルレストランのメニューやパンフレットなど、人の目をを読み込む。ユーザーが携帯端末をパンフレットなど引き付ける、多くの画像によって構成されるものを対にかざすと、そのカメラ画像から特徴点・特徴量を計† 東京大学大学院情報理工学系研究科
Graguate School of Information Science and Technology, the University of Tokyo

算する。その情報をもとに、事前に読み込んだ画像のデーターベースと一致している画像があるかどうか計算する。もし一致した画像があるのであれば、関連す情報処理学会 インタラクション 2011

図 1 実世界ブラウザのシステム構成図
Fig. 1 system composition of realworld browser

る情報である HTML コードをカメラ画像の上にシー記述しておく。ユーザーが携帯のカメラで画像をかざスルーで表示される Web ブラウザにレンダリングさしたときにも、同様に SURF 特徴量を特徴点ごとにせる。以上の操作で、ユーザーはカメラの画面上に透求める。ここで、この一つ一つの特徴点の特徴量ごと過表示された情報を見ることができる。に、事前にダウンロードしてある XML ファイル中の画像の特徴点、特徴量計算については 3 章で、HTML特徴点の特徴量との距離を比較し、もっとも近い特徴コードのシースルーブラウザでの表示は 4 章で詳しく点を持つ画像に投票する。尚、この比較は高速な近似説明する。

近傍点探索手法の一つである LSH によって行った。

3. 画像特徴量リストの特徴量と計算
画像どうしの一致を計算する手法は、テンプレートマッチング、カラーヒストグラム分布の距離計算、SIFT 特徴量の計算と比較など、様々な手法が提案されているが、ここでは、SURF の手法1) を用いて特徴量計算し、それを比較することで計算を行っている。

最終的に、もっとも投票が集まった画像と、次点の画像を比べ、(次点の画像の得票数)/(もっとも投票が集まった画像の得票数) が、0.6 を超えた場合、もっとも投票が集まった画像を認識しているとみなした。

4. XML 表現とシースルーブラウザによるインタラクション画面の構成

SURF では、まずヘッセ行列を用いて、いくつかの図 3 のような形式で、認識したい画像それぞれに対スケールを用いて、画像中の特徴点を検出する。図 2

し、画像特徴量と関連する情報の HTML 表現をペアには、同一画像に対し、方向を変えて検出された特徴にして XML ファイルとして記述する。カメラが画像点の画像を示す。この際、積分画像を用いてヘッセ画を認識すると、画面上に透過的に Web ブラウザを表像の値を近似することによって、処理の高速化を図っ示させ、関連する情報の HTML を図 4 のように表示ている。

する。

次に、得られた特徴点のそれぞれに対し、Haar 型

ここでの表示には、Android 携帯に標準に付属し、フィルタを用いて特徴的な方向を算出し、特徴的な方独自のアプリケーションの中で自由に組み込んで使う向を求める。そしてその特徴的な方向を軸にして画像ことのできる WebKit ブラウザを利用した。

を回転させ、特徴点の周囲を 4 × 4=16 のブロックにここで HTML を利用して表示することの利点は、分け、各ブロック内に存在するサンプル点で、Haar 型

既存の Web ページ生成技術を利用して、コメント書フィルタを用いて dx,dy を求める。最後にブロックごき込みフォームなどを含んだ動的な情報生成が行える∑とに、dx,∑dy,∑|dx|,∑|dy| の 4 つの量を求め、計 16 × 4=64 次元の特徴量を計算する。
この SURF 特徴量を、ドキュメント内のそれぞれの画像に対して求め、4 章で述べる XML ファイルに点である。

携帯端末上で画像入りドキュメントの情報付加を行う実世界ブラウザ

図 2 SURF による特徴点抽出結果
Fig. 2 feature points exraction by SURF

図 5 特徴点検出画像認識に対応してシースルーブラウザ上で関連情報の表示
Fig. 5 Displaying related information corresponded topicture recognition
図 3 特徴量と関連情報が記述された XML ファイルの内容
Fig. 3 marked up document of features and information

S SC-02B (OS:Android2.2 メモリ:512MBRAM プロ
セッサ:S5PC110 1GHz) である。また、Android アプ
リケーションは、通常 Java で記述されるが、今回は、基本的なインターフェイス部分は Java で記述したほか、JNI(Java Native Interface) を通して、Android上で動くようにコンパイルされた OpenCV2.1 ライブ
ラリにアクセスし、処理を行った。
結果、図 7 に表示されているような特徴点が検出さ
図 4 重畳されて表示された口コミ情報と書き込みフォーム
Fig. 4 displayed comments and comment form

れ、その特徴点の特徴量を手掛かりに、3 章の手法を用いて、どの画像かを認識することができた。さらに対応する情報がコードされている HTML 文章を、4

5. レストランフロアガイドでのお店紹介画像での認識実験
今回、図 6 の架空のレストランフロアガイドに含まれる店舗の紹介画像を対象に、画像を認識して関連章で示した通り、Android 上の WebKit ブラウザプラ
グインを用いて、透過的に画面に表示することができた (図 5)

6. お わ り にする情報をシースルーブラウザを通して表示する実験

携帯端末上で、ドキュメント上の画像を認識し、そをおこなった。図 7 の５枚の画像を認識対象としておれに関連する情報を透過的に表示する実世界ブラウザり、認識実験以前にに SURF 特徴量、特徴点を計算しを提案した。て、携帯端末上にダウンロードした。また、対応する画像認識には SURF の手法を用いて特徴点検出、特HTML で記述された関連情報もダウンロードした。

徴量取得を行い、カメラの画像の特徴量と比較して、今回の実験で用いた携帯端末は、Samsung GALAXY携帯端末上で画像認識を行った。

情報処理学会 インタラクション 2011

図 6 実験に用いた架空のレストランフロアガイド
Fig. 6 the sample restaurant guide used in experiments

図 7 実験に用いた５つの画像の特徴点計算結果
Fig. 7 feature points caluclation of ﬁve pictures in experiments

また、参照する画像の特徴量と関連する情報のHTML 表現をペアにして XML 内に記述し、HTMLデータをカメラの画面に重ね合わせて透過的に表示できる WebKit ブラウザを用いて表示した。
今後の課題は、より多くの画像に対して、ユーザーがストレスを感じない操作方法、処理時間でこのブラウザを使えるように画像認識を可能にすることである。

参 考文献

1) Herbert Bay, Andreas Ess, Tinne Tuytelaars,
Luc Van Gool, ”SURF: Speeded Up Robust Features”, Computer Vision and Image Understanding (CVIU), Vol. 110, No. 3, pp. 346–359,

20082) Billinghurst, Kato and Poupyrev: The MagicBook: a transitional AR interface, Vol.25, No.5,pp.745-753 (2001)
3) 宮田，塩原，藤村：マーカーレス拡張書籍のための 2 次元文字ブロックインデクシング，インタ
ラクション 2010 論文集 (2010).
4) Google Goggle: http://www.google.com/mobile/goggles/