注視された Web ページのテキストをリアルタイムで取得するシステムの開発
大友隆秀1，望月信哉1，石井英里子2，星野祐子1，山田光穗11東海大学情報通信学研究科，2鹿児島県立短期大学文学科
Development of system that can obtain texts on web page based on gazing point
Takahide OTOMO
1, Shinya MOCHIDUKI
1, Eriko ISHII
2, Yuko HOSHINO
1, Mitsuho Yamada
1 1 Tokai University Graduate School of Information and Telecommunication Engineering,2 Kagoshima Prefectural College Department of Literature
要 旨 コンシューマー向けの低価格な非接触型の視線入力装置が販売されるなど視線インタフェースには大き な注目が集まっている。我々はこの非接触型の装置を使用した新しいユーザインタラクションシステムの開発を 試みた。提案するインタラクションシステムは注視点と注視時間に基づいて、ウェブページからユーザが関心を 持つと推定される単語を自動的に抽出し、画面に関連情報を自動で呈示する。本稿では、興味情報の抽出を行う インタラクションシステムの基礎的な検討として、提案するシステムの仕組みと検証を行った結果を示す。 キーワード：視線，眼球運動，興味，Web，注視点，HTML，JavaScript
Abstract Low-cost and non-contact gaze input devices for consumers have been released, and a great deal of attention has been focused on the gaze interface. We developed a new user interaction system using contactless eye tracking device. Our system automatically extracts a word that is estimated a user's interest word from the Web page, based on the gazing point and gazing time. In addition, the system presents more information about the gazed word on the screen and supports user's Web browsing. In this paper, as a basic examination of an interaction that extracts the interest information, the system structure and verification results of the proposed system were shown.
Keywords: Gaze, Eye movement, Interest, Web, Gaze point
1. はじめに
近年、視線インタフェースやアイトラッキングシス テムが低価格な非接触装置や視線検出デバイスのつい たVR ヘッドマウントディスプレイなどの登場により 注目されている。従来、視線入力装置は非常に高価で あったが、視線入力デバイスのコスト低下により、消 費者は簡単に高性能デバイスを使用できる様になった。 読書中の眼球運動の分析[1]やウェブページのユーザ ビリティ評価など、認知科学の分野やインタフェース デザインの分野で多くの視線を用いた研究が行われて きた。消費者向けの視線入力デバイスは、一般層への 展開からあまり時間が経っておらず、これらのデバイ スに基づいた視線インターフェイスシステムについて の検討報告はほとんどなく、視線インタフェースとそ のアプリケーションへの適応は進んでいない。我々は 日々、様々なデザインのウェブページを閲覧している。 現在、世界には17 億以上のウェブサイトがあるとされ ており[2]、インターネットユーザーの年齢層もスマー トフォンの普及とともに拡大している。よって、ウェ ブページ閲覧による情報収集をより快適にするサポー トシステムは、多くの利用者にとって価値のあるテー マであると言える。今回は、リアルタイムに変化する ユーザの視線に焦点を当て閲覧中のページから興味の ある単語を取得し、ユーザへのインタラクションに使 用するためのシステムの基礎的な検討を行った。2. 近年の視線検出技術の適応例
本章では、近年の一般向けの視線入力装置やそれを 搭載した製品について記す。スウェーデンのTobii 社 は2014 年に消費者向けの視線入力デバイスの販売を 開始した。同年、デンマークのEye Tribe 社も Eye Tribe トラッカーの展開を開始した。以降、Tobii 社と連携したいくつかの企業が視線入力用の装置をノートパソコ ンに組み込んだ製品の販売を始めた。これらの装置は 視線検出に角膜反射法を用いているため、低価格なが ら非常に精度が高い。また、2016 年に本格的に展開が 始まったコンシューマー向けのVR ヘッドマウントデ ィスプレイの市場でもHTC 社が視線検出デバイスを 備えた製品を2019 年に販売を開始した[3]。図 1 に上 記で記した視線追跡技術を搭載した製品の例を示す。 製品以外の分野でも、特にVR コンテンツやシステム への視線検出技術の適用が進んでおり、視線で操作す るゲームや視線に基づいた棚割のシミュレータなどの VR トレーニングシステム[4]が開発された。この様に 視線検出技術の用途は徐々に広がりを見せている。 図1．視線検出装置が組み込まれた製品の例
3. 眼球運動
眼球運動は、計6 本の筋肉で構成される外眼筋によ って行われる動きで、両眼のものと単眼のものに分類 できる。単眼の眼球運動は、固視微動と追従眼球運動 および、サッカードの3 種類に分類できる[5-7]。文章 を読む際の眼球運動は、低速度で動く対象を追う際の 追従運動ではなく、サッカードと注視(停留)を繰り返 すことで実現されている[1]。ウェブページ上の文章を 読む際もこの動きで内容が取得されるが、ウェブペー ジ閲覧の際は文頭に移動するためのサッカードによる 視線の跳躍以外にもコンテンツを選択する際など、離 れた位置にある項目への視線移動も行われる。図2 は、 東海大学の公式ウェブページでコンテンツを選択して いるときの視線とマウスの動きを示したものである。 マウスの動きは青い線で、赤と緑の線は視線を表して いるが、そのうち緑色の線は注視対象を変更するため のサッカードを示しており、黄色の矢印とその番号は 移動の方向と順番を表している。なお、この図では最 終的に右列の2 段目の項目が選択されている。そのた め図内の視線とマウスは画面右下に到達した後、その 上の項目選択のためにページ中央付近に移動している。 図2．項目を選択する際のマウスの動きと 視線の動きを示した例(Eye Tribe Tracker で取得したデータを使用)
4. 関連研究
4.1. 視線と web 閲覧
視線情報はウェブページのユーザビリティ評価にし ばしば利用されている。視線の軌跡やマウスの操作に 基づいたウェブページの使いやすさの評価には様々な 研究例がある。ウェブブラウジングと注視の時間を調 べた研究では、注視の停留時間は関心のある箇所で長 くなることが報告されている[8]。更に戸田らは注視時 間と選択について詳細な検討を行い、ユーザが情報を 探索している時の注視時間は短く、ユーザがその情報 が自身の目的とするものに一致しているかを判断して いる際の注視時間はより長くなると報告した[9]。また、 中道らはユーザビリティの低いウェブページの検出方 法について様々な指標を検討して、ウェブページとユ ーザの操作の関係を調査した。その結果、閲覧中のマ ウスのスクロール量は、ユーザビリティの低いページ を検出するための指標になると報告している[10]。松 延はページの見方の検討のためHTML の解析でウェ ブページのコンテンツの配置を取得し、眼球運動から ページのコンテンツ単位で被験者のブラウジングの推 移ついて調べた。また、視線を用いたインタラクショ ンの可能性を示した[11]。様々な形で視線解析による ユーザビリティ評価が行われてきた。しかしながら、 これらはユーザビリティの低いウェブページの検出方 法やページの見方を視線などの要素から解析すること が主目的で、調査結果を視線インタフェースに適応さ せることなどは行われていない。松延もHTML 解析と 視線を組み合わせたシステムを作成したが、解析用の システムでインタラクション用途は想定していない。4.2. 視線インタフェースの研究
視線入力の利用として梅本らは、「注目度の高い単語 ほどユーザの検索意図に適合している」という仮定のもと高精度な視線検出装置を用いて、web 閲覧時の検 索意図の推定を試みた[12]．システムは.NET の WebBrowser コントロールを用いて作成されたため、実 際のブラウザでは使用できないが、著者らは将来的な インタラクションに繋がると考察した。中園らは、読 書補助システムとして電子書籍アプリケーション Kindle の辞書機能を視線の動きから自動で動作させる 読書支援システムを開発した[13]。web 閲覧操作を視 線で行うことを検証した研究では、視線で画面スクロ ールとリンク選択ができるシステムが開発された[14]． 我々は、安価な視線入力装置を視線インタフェースと して活用するためにwebブラウザ上でページ閲覧と併 行して使用できるシステムについて検討を行った。
5. HTML とウェブページ
HTML(Hypertext Markup Language)はハイパーテキ ストを記述するための標準言語で、ウェブページの画 像やテキスト等の要素の配置は、これと要素などの書 式、デザインを指定するCSS(Cascading Style Sheets)に 基づいて行われていることが多い。よって、ページの HTML を解析することで、要素取得が可能となる。web ページは複数のHTML タグで構成されており、ページ 作成者は各コンテンツを必要な要素に割り当て、ブラ ウザで読み取れるページにする。たとえば、div タグ は、画面に表示されるドキュメントをブロックレベル の要素としてひとつのグループにするために使用され る。図3 にウェブページを HTML で表記した例を示す 図3．HTML によるウェブページ表記の例
6. インタラクションシステム
6.1. システムの概要
本システムの概要について示す。ユーザの視線情報 を取得するために非接触型の視線入力デバイスとして Eye Tribe Tracker（The Eye Tribe 社）を使用した。本装 置のサ ンプ リン グレ ート は 60Hz、平均精度は 1.0deg[15]程で、三脚でモニター前に固定して使用する。 図4 に装置を使用している際のイメージを示す。動作 環境として、世界で最も使用されているブラウザであ る Google Chrome[16]を今回は対象として本ブラウザ 上で使用できる様に開発を行った。本システムは、ウ ェブページ上のテキストを読んでいる時のユーザの視 線の位置と停留時間(注視時間)を取得する。設定した 停留時間の閾値を超えると、その注視点にあるHTML 要素(単語)をユーザの興味対象と設定する。その後、 注視点座標を元に単語をページから抽出し、インタラ クションを行う。なお、これらの一連の処理は自動的 に実行されるため、ユーザの操作は必要ない。本シス テムは注視点を検出して座標の指定を行うプログラム とページから単語を抽出するプログラムの2 種類で構 成されている。前者は、画面のピクセル単位でユーザ の視線の位置を取得して、興味のある注視点が定めら れた時は、その座標値を元に疑似的なマウスクリック イベント(以下、座標指定イベントと表記)を生成する。 後者はウェブページから単語を抽出するための処理を 行う。座標指定イベントを受けた後、その座標値にあ る文字がHTML で配置された文章から抽出され、正規 表現を参照して、ひとつの単語としてグループ化され た上でHTML から抜き出される。そして、その単語を 使ったインタラクションがブラウザ上で実行される。 図4．Eye Tribe を使用する際の様子6.2. 注視点検出プログラム
ユーザの視線データの記録と注視点の検出プログラ ムをVisual studio 2017 を用いて C#で作成した。本プロ グラムはEye Tribe Tracker から送られるピクセル単位 の画面座標値に基づいて視線の移動と注視による停留 を検出する。視線の停留時間は常に一定ではなく変化 するため、注視時間（停留の時間）を測定することで、ユーザの興味のある部分や単語を検出できると考えら れる。図5 に本プログラムのフローチャートを示す。 今回は、速度閾値と時間の閾値を設定したが、これら の値は、システムを操作することで任意の値に設定で きる。速度の閾値は1 サンプルあたりの値（60Hz）に 設定し、ユーザの視線の速度がこの値を超えると、プ ログラムはユーザが注視点を変更したと判断し、それ 以降の視線データを別の注視点のデータに設定する。 時間の閾値は、高い関心を伴う注視点の検出に使用す る。ユーザが設定した時間より長く同じ対象を注視し 続けると、本プログラムにより定められた注視位置の 座標値に基づいて座標指定イベントを実行する。 図5．注視点検出プログラムのフローチャート
6.3. 単語抽出プログラム
ウェブページから単語を抽出するためプログラムを JavaScript を用いて作成した。また、本プログラムを ブラウザ上で機能させるためにTampermonkey という UserScript をブラウザで動作させることを可能にする Chrome 用の拡張機能を使用した。単語抽出プログラム は、前述した座標指定イベントを受けた後、その座標 に基づき単語抽出の処理を開始する。本プログラムの フローチャートを図6 に示す。具体的な処理は以下の 様になっている。(1)指定座標の下に存在する HTML の要素から「p」タグや「span」タグでブロック化され たテキストを取得して、指定座標下にある一文字を特 定する。(2)特定した文字に基づき単語の文字数(範囲) を検出して抽出する。(3)取得した単語を使い、情報提 示のためのインタラクションイベントを発生させる。 情報提示のインタラクションとしてトーストタイプの 通知を行う機能を作成した。「トースト」は、情報通知 用の小さなメッセージウィンドウを一時的にポップア ップする機能で、通知バナーとも呼ばれている。この 機能は主にアプリの通知に使用され、利用者がこれを クリックすることで、詳細な情報が呈示される様に設 定されることが多い。トーストタイプの通知は表示時 に画面をロックしない通知方法であるため、表示され た状態でも操作に影響しないという利点がある。図7 にトーストタイプの通知の例を示す。トースト下部の 進捗バーは表示時間の経過を示しており、時間経過に よって減少するため、これが消えるまでの時間が利用 者に分かる様になっている。トーストで通知する内容 やその表示時間といった仕様は、JavaScript により任意 に設定できる。なお、この通知機能は「jQuery」と 「Toastr」の 2 つの JavaScript ライブラリにより作成し た。今回は情報呈示機能として、プログラムにより抽 出された単語とそれをGoogle で検索した結果のペー ジを別のタブで開くことのできるリンクを表示した。 このリンクはJavaScript で「href」タグと変数を使用し て選択した単語で変化するように設定を行っているた めリアルタイムで適切に自動設定される。 図6．単語抽出プログラムのフローチャート図7．トーストタイプの通知
6.4. 単語特定と抽出処理
単語抽出の処理の詳細部を説明する。ユーザがウェ ブページのテキスト部分に集中した注視を行うと、注 視点検出プログラムがその注視時間を測定する。 その 時間が設定した時間の閾値を超えると、単語抽出プロ グラムが注視点位置にある1 文字が最初にページから 取得される。その後、取得した文字の正規表現が「英 数字」、「ひらがな」、「カタカナ」、または「漢字」のい ずれかに区別される。なお、この分類に使用する正規 表現は、プログラムから任意に設定できる。分類がな された後、最初に抽出した文字の前後の文字について 正規表現を取得して、最初に抽出して文字と文字の正 規表現タイプが一致するかの比較を行う。 この処理を 繰り返して、最初に取得した文字を基準に同じ正規表 現を持つ文字が収集されて、単語としてグループが作 成される。具体的な単語の抽出処理の例を図8 に、単 語検出から抽出を経て、トーストに情報が送られるま での処理手順を図9 に示す。なお、本手順は単語間に スペースを含まない文章に適応させるために行うもの であり、文章にスペースが含まれた英文などの場合は、 スペースに基づいて、その間の文字(単語)を検出する。 図8．単語の特定と抽出の処理 赤い四角で示された「m」が注視された場合の処理 図9．詳細な単語抽出の処理手順7. システムの動作検証
本システムがウェブブラウジング中にユーザの注 視単語を取得できることを確認する。被験者はモニタ ーから60cmの位置に着席して、ウェブページを閲覧す る。被験者は20代の男性1人で母語は日本語である。 閲覧対象は東海大学のニュースページの記事である 「Tokai Team Wins Class at 2019 World Green Challenge」を設定した。検証を行った際のシステム環 境を表1に示す。今回は、注視点を切り替えるための 速度閾値を2deg[17]、時間の閾値を1.0secに設定した。 この1.0secという時間は動作テストの後に被験者に抽 出された文字を意識して注視したかを確認するとい う理由で設定している。 表1．システムの検証環境 PC Frontier FRXN770/C Intel® Core™ i7-7700HQ Windows 10RAM 16GB 液晶モニター Acer KA240H (1920×1080)
7.1. 検証結果
図10 にシステムが実行時のイメージを示す。今回は 読み進めることを重点とした見方のため内容の理解度 などの面は通常の閲覧とは必ずしも同等ではない。注 視時間が閾値よりも長い箇所の英単語をページ内のテ キストから抽出できることに加え、表示されたリンク が正常に機能することを確認した。図10 では、2 つの 単語「Tokai」と「Mechatromeister」がシステムによっ て抽出され、画面にその情報が表示されている。使用 したトーストによる通知の数は任意に設定できるが、 今回は最大3 つまで表示可能とした。図内で、抽出さ れている言葉について以下に示す。 (1) Tokai: システムが単語の抽出を正常に実行できる かを確認するために被験者に対して、この語を注 視する様に教示した。したがって、「Tokai」への 注視は実験者側の指示によるものである。 (2) Mechatromeister: 本語句は東海大学のメカトロマ イスターチームを示す固有名詞で、被験者はこの 語句をウェブページの閲覧前には認知していなか ったために強い注視がなされた。 検証でこれらの二語が抽出を確認し、十分な精度での 抽出には、視距離60cm で 20 ポイント以上のフォント サイズが必要と分かった。興味箇所への注視と判定す るための時間の閾値については単語の長さによる注視 時間の延長や文章の長さや難易度からも影響を受ける 可能性があるため更なる検証が必要であると言える。 図10．インタラクション実行時の画面 注視された単語がトーストで表示されている8. 考察
非接触型の視線入力装置を用いてウェブページから ユーザの興味語を取得できるユーザインタラクション システムを開発した。また、システムが注視点の座標 値に基づいて単語抽出を適切に行い、その単語を使っ たユーザーインタラクションが正常に機能することを 確認した。消費者向けの低価格の注視入力デバイスが 販売されるなど、視線をインタフェースに活用するこ との重要性が高まっている。しかし、低価格な一般向 けの視線入力機を用いたシステムの研究例は少なく、 視線インタフェースの普及度や認知度は音声入力、音 声検索システムと比べて低いと言える。HTML 解析と 視線を組み合わせたシステムの検討例は梅本らの研究 [12]や中村らの研究[18]など少数である。更に、本シス テムの様に実際のウェブブラウザ上で閲覧と並行して 情報呈示などのサポートをリアルタイムで行うインタ ラクションについては、報告例がない。よって、本研 究はユーザの視線をインタフェースに活用することの 発展に寄与するものと考える。しかし、現時点では、 文章をゆっくり読む、視線を止めて考えながら読み進 める等の読み方には対応できておらず、この様な読み 方をすると目的の語句以外の呈示も起きてしまう。 様々な閲覧の仕方に対応し、正確な呈示のみを行うと いう点については、時間閾値と速度閾値の設定など課 題が残っていると言える。ユーザの関心情報を適切に 取得するための閾値は、読み手の能力以外にも文章の 長さや単語自体の長さからも影響を受けるため、今後、 慎重に検証を進める必要がある。また現在は、トース トをクリックすることで、情報呈示が進行するが、よ り効果的なインタラクションのためにトーストを注視 することでも情報呈示をできる様に改善を図る。今後 の展望として、形態素解析と機械学習を活用して、注 視している情報を新しい情報の提案(レコメンド)に活 用する仕組みの開発を目指す。更に、ウェブブラウザ の自動操作の適応やぼんやりと画面の一部を見ている 時など情報呈示を行う必要がない状態の検出も視野に いれ、前述した課題も併せてユーザが利用し易いシス テムへ改善及び、検討を進めていくつもりだ。 謝辞 本 研 究 の 一 部 は 科 研 費 16K01566, 17K02129 ， 19K12902 の助成を受けたものである．ここに深く謝意 を表する． 参考文献 [1] 近藤公久，馬塚れい子，筧一彦：日本語文の読解過程に おける語特性および語順の影響，認知科学，Vol.9， No.4， pp.543-563 (2002)[2] Netcraft: May 2018 Web Server Survey, https://news.n etcraft.com/archives/2018/05/29/may-2018-web-server-surv ey.html,（参照 2019-09-18）
[3] HTC Vive pro official page: https://www.vive.com/jp/p ro-eye/,（参照 2019-11-15） [4] NEC プレスリリース：次世代ヒューマンインタラ クション技術と連携させた新たな法人向け VR ソリュ ーション 2 種類を開発，https://jpn.nec.com/press/201803/ 20180320_01.html,（参照 2019-11-15） [5] 鵜飼一彦：眼球運動の種類とその測定，光学， Vol.23，No.1，pp.2-8（1994）
[6] S. Martinez, SL. Macknik and DH. Hubel: The Role of Fixational Eye Movements in Visual Perception, NATURE REVIEWS NEUROSCIENCE, 5, pp. 229-240 (2004) [7] 金子寛彦：固視微動，映像情報メディア学会誌 Vol.63，No.11，pp.1538-1539（2009） [8] 深澤綾，小俣昌樹，今宮淳美：Web ページ閲覧時の 視線停留時間と脈波波高に基づくユーザの興味箇所の 特定，電子情報通信学会技術研究報告， Vol.107， No.462 ，pp1-6（2008） [9] 戸田航史，中道上，島和之，大平雅雄，阪井誠，松 井健一：Web ページ閲覧者の視線に基づいた情報探索 モデルの提案，情報処理学会研究会報告，Vol.52，No6， pp.35-42，（2005） [10] 中道上，山田俊哉，松井知子，阪井誠，島和之：ユ ーザの振る舞いの判別分析による主観的満足度の低い Web ページの検出，ヒューマンインタフェース学会論 文誌，Vol.14，No.3 ，pp.249-258（2012） [11] 松延拓生：ウェブサイトのユーザビリティ評価のため の視線分析方法，ヒューマンインタフェース学会論文， Vol.16，No.4（2014） [12] 梅本和彦，山本岳洋，中村聡史，田中克己：視線情 報からの注目語抽出に基づく検索意図のリアルタイム 推定，情報処理学会論文誌，Vol6，No.3，pp.120-131 （2013） [13] 中園歩，濱川礼：LookUp-視線移動情報の特徴 と機械学習を用いた読書支援システム，情報処理学会 インタラクション 2018，pp.1060-1065 (2018) [14] M. Porta and A. Ravelli: “WeyeB, an eye-controlled Web browser for hands-free navigation”, 2nd Conference on Human System Interactions 2009, pp.207-212, (2009) [15] Eye Tribe Official site: Eye Tracking 101, https://thee yetribe.com/dev.theeyetribe.com/dev.theeyetribe.com/genera l/index.html,（参照 2019-07-15） [16] 日本経済新聞：ブラウザー1 強グーグル崩せ 独 立系、スマホで躍進，https://www.nikkei.com/article/DG XMZO34230390W8A810C1X13000/,（参照 2019-09-17） [17] 山田光穗，福田忠彦：画像における注視点の定義 と画像分析への応用，電子情報通信学会論文誌 D Vol.J69-D，No.9，pp.1335-1342（1986） [18] 中村亮太，赤坂将，柳沢達也，市村哲：Webペー ジ評価のための視線測定と文書構造解析を組み合わせ た注視情報視覚化，情報処理学会論文誌，Vol.52，No12， pp.3868-3875（2011） [19] 大野健彦：Web画面における情報選択行動と視線 の関係，映像情報メディア学会技術報告，Vol.24， No. 38(0)，pp.31-36（2000）
[20] K. Ooms and V. Krassanakis: Measuring the Spatial Noise of a Low-Cost Eye Tracker to Enhance Fixation Detection, MDPI Journal of Imaging, Vol.4，No.96, pp.1-22 (2018)
[21] J. Huang, R. White and G. Busher: User See, User Point: Gaze and Cursor Alignment in Web Search, CHI '12 Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp.1341-1350 (2012) [22] 長石道博：視覚の誘導場による読み易い和文文 字列表示，映像情報メディア学会誌，Vol.52，No.12， pp.1865-1872（1998） [23] 川上隼人，笹田裕太，五十嵐覚，秋田純一：サッ ケード追尾可能な視線計測カメラの開発とそれを用い るインタラクションの可能性，情報処理学会論文誌， Vol.56，No.4，PP. 1174-1183（2015）
