注視されたWebページのテキストをリアルタイムで取得するシステムの開発

Transcription

1 < 論文 > 注視された Web ページのテキストをリアルタイムで取得するシステムの開発 大友隆秀 1, 望月信哉 1, 石井英里子 2, 星野祐子 1, 山田光穗 1 1 東海大学情報通信学研究科, 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 社と連携し -36-

2 < 論文 > 注視された Web ページのテキストをリアルタイムで取得するシステムの開発 たいくつかの企業が視線入力用の装置をノートパソコンに組み込んだ製品の販売を始めた これらの装置は視線検出に角膜反射法を用いているため 低価格ながら非常に精度が高い また 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. 視線インタフェースの研究視線入力の利用として梅本らは 注目度の高い単語ほどユーザの検索意図に適合している という仮定の -37-

3 パーソナルコンピュータ利用技術学会論文誌 Vol.14, No.1 もと高精度な視線検出装置を用いて 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 で表記した例を示す を取得するために非接触型の視線入力デバイスとして Eye Tribe Tracker(The Eye Tribe 社 ) を使用した 本装置のサンプリングレートは 60Hz 平均精度は 1.0deg[15] 程で 三脚でモニター前に固定して使用する 図 4 に装置を使用している際のイメージを示す 動作環境として 世界で最も使用されているブラウザである Google Chrome[16] を今回は対象として本ブラウザ上で使用できる様に開発を行った 本システムは ウェブページ上のテキストを読んでいる時のユーザの視線の位置と停留時間 ( 注視時間 ) を取得する 設定した停留時間の閾値を超えると その注視点にある HTML 要素 ( 単語 ) をユーザの興味対象と設定する その後 注視点座標を元に単語をページから抽出し インタラクションを行う なお これらの一連の処理は自動的に実行されるため ユーザの操作は必要ない 本システムは注視点を検出して座標の指定を行うプログラムとページから単語を抽出するプログラムの 2 種類で構成されている 前者は 画面のピクセル単位でユーザの視線の位置を取得して 興味のある注視点が定められた時は その座標値を元に疑似的なマウスクリックイベント ( 以下 座標指定イベントと表記 ) を生成する 後者はウェブページから単語を抽出するための処理を行う 座標指定イベントを受けた後 その座標値にある文字が HTML で配置された文章から抽出され 正規表現を参照して ひとつの単語としてグループ化された上で HTML から抜き出される そして その単語を使ったインタラクションがブラウザ上で実行される 図 4.Eye Tribe を使用する際の様子 図 3.HTML によるウェブページ表記の例 6. インタラクションシステム 6.1. システムの概要 本システムの概要について示す ユーザの視線情報 6.2. 注視点検出プログラムユーザの視線データの記録と注視点の検出プログラムを Visual studio 2017 を用いて C# で作成した 本プログラムは Eye Tribe Tracker から送られるピクセル単位の画面座標値に基づいて視線の移動と注視による停留を検出する 視線の停留時間は常に一定ではなく変化するため 注視時間 ( 停留の時間 ) を測定することで -38-

4 < 論文 > 注視された Web ページのテキストをリアルタイムで取得するシステムの開発 ユーザの興味のある部分や単語を検出できると考えられる 図 5 に本プログラムのフローチャートを示す 今回は 速度閾値と時間の閾値を設定したが これらの値は システムを操作することで任意の値に設定できる 速度の閾値は 1 サンプルあたりの値 (60Hz) に設定し ユーザの視線の速度がこの値を超えると プログラムはユーザが注視点を変更したと判断し それ以降の視線データを別の注視点のデータに設定する 時間の閾値は 高い関心を伴う注視点の検出に使用する ユーザが設定した時間より長く同じ対象を注視し続けると 本プログラムにより定められた注視位置の座標値に基づいて座標指定イベントを実行する を検出して抽出する (3) 取得した単語を使い 情報提示のためのインタラクションイベントを発生させる 情報提示のインタラクションとしてトーストタイプの通知を行う機能を作成した トースト は 情報通知用の小さなメッセージウィンドウを一時的にポップアップする機能で 通知バナーとも呼ばれている この機能は主にアプリの通知に使用され 利用者がこれをクリックすることで 詳細な情報が呈示される様に設定されることが多い トーストタイプの通知は表示時に画面をロックしない通知方法であるため 表示された状態でも操作に影響しないという利点がある 図 7 にトーストタイプの通知の例を示す トースト下部の進捗バーは表示時間の経過を示しており 時間経過によって減少するため これが消えるまでの時間が利用者に分かる様になっている トーストで通知する内容やその表示時間といった仕様は JavaScript により任意に設定できる なお この通知機能は jquery と Toastr の 2 つの JavaScript ライブラリにより作成した 今回は情報呈示機能として プログラムにより抽出された単語とそれを Google で検索した結果のページを別のタブで開くことのできるリンクを表示した このリンクは JavaScript で href タグと変数を使用して選択した単語で変化するように設定を行っているためリアルタイムで適切に自動設定される 図 5. 注視点検出プログラムのフローチャート 6.3. 単語抽出プログラムウェブページから単語を抽出するためプログラムを JavaScript を用いて作成した また 本プログラムをブラウザ上で機能させるために Tampermonkey という UserScript をブラウザで動作させることを可能にする Chrome 用の拡張機能を使用した 単語抽出プログラムは 前述した座標指定イベントを受けた後 その座標に基づき単語抽出の処理を開始する 本プログラムのフローチャートを図 6 に示す 具体的な処理は以下の様になっている (1) 指定座標の下に存在する HTML の要素から p タグや span タグでブロック化されたテキストを取得して 指定座標下にある一文字を特定する (2) 特定した文字に基づき単語の文字数 ( 範囲 ) 図 6. 単語抽出プログラムのフローチャート -39-

5 パーソナルコンピュータ利用技術学会論文誌 Vol.14, No.1 図 7. トーストタイプの通知 6.4. 単語特定と抽出処理 単語抽出の処理の詳細部を説明する ユーザがウェブページのテキスト部分に集中した注視を行うと 注視点検出プログラムがその注視時間を測定する その時間が設定した時間の閾値を超えると 単語抽出プログラムが注視点位置にある 1 文字が最初にページから取得される その後 取得した文字の正規表現が 英数字 ひらがな カタカナ または 漢字 のいずれかに区別される なお この分類に使用する正規表現は プログラムから任意に設定できる 分類がなされた後 最初に抽出した文字の前後の文字について正規表現を取得して 最初に抽出して文字と文字の正規表現タイプが一致するかの比較を行う この処理を繰り返して 最初に取得した文字を基準に同じ正規表現を持つ文字が収集されて 単語としてグループが作成される 具体的な単語の抽出処理の例を図 8 に 単語検出から抽出を経て トーストに情報が送られるまでの処理手順を図 9 に示す なお 本手順は単語間にスペースを含まない文章に適応させるために行うものであり 文章にスペースが含まれた英文などの場合は スペースに基づいて その間の文字 ( 単語 ) を検出する 図 9. 詳細な単語抽出の処理手順 7. システムの動作検証 本システムがウェブブラウジング中にユーザの注視単語を取得できることを確認する 被験者はモニターから60cm の位置に着席して ウェブページを閲覧する 被験者は20 代の男性 1 人で母語は日本語である 閲覧対象は東海大学のニュースページの記事である Tokai Team Wins Class at 2019 World Green Challenge を設定した 検証を行った際のシステム環境を表 1に示す 今回は 注視点を切り替えるための速度閾値を 2deg[17] 時間の閾値を 1.0sec に設定した この1.0sec という時間は動作テストの後に被験者に抽出された文字を意識して注視したかを確認するという理由で設定している 図 8. 単語の特定と抽出の処理 赤い四角で示された m が注視された場合の処理 表 1. システムの検証環境 PC Frontier FRXN770/C Intel Core i7-7700hq Windows 10 RAM 16GB 液晶モニター Acer KA240H ( ) ブラウザ Google Chrome (Google LLC) -40-

6 < 論文 > 注視された Web ページのテキストをリアルタイムで取得するシステムの開発 7.1. 検証結果図 10 にシステムが実行時のイメージを示す 今回は読み進めることを重点とした見方のため内容の理解度などの面は通常の閲覧とは必ずしも同等ではない 注視時間が閾値よりも長い箇所の英単語をページ内のテキストから抽出できることに加え 表示されたリンクが正常に機能することを確認した 図 10 では 2 つの単語 Tokai と Mechatromeister がシステムによって抽出され 画面にその情報が表示されている 使用したトーストによる通知の数は任意に設定できるが 今回は最大 3 つまで表示可能とした 図内で 抽出されている言葉について以下に示す (1) Tokai: システムが単語の抽出を正常に実行できるかを確認するために被験者に対して この語を注視する様に教示した したがって Tokai への注視は実験者側の指示によるものである (2) Mechatromeister: 本語句は東海大学のメカトロマイスターチームを示す固有名詞で 被験者はこの語句をウェブページの閲覧前には認知していなかったために強い注視がなされた 検証でこれらの二語が抽出を確認し 十分な精度での抽出には 視距離 60cm で 20 ポイント以上のフォントサイズが必要と分かった 興味箇所への注視と判定するための時間の閾値については単語の長さによる注視時間の延長や文章の長さや難易度からも影響を受ける可能性があるため更なる検証が必要であると言える 値に基づいて単語抽出を適切に行い その単語を使ったユーザーインタラクションが正常に機能することを確認した 消費者向けの低価格の注視入力デバイスが販売されるなど 視線をインタフェースに活用することの重要性が高まっている しかし 低価格な一般向けの視線入力機を用いたシステムの研究例は少なく 視線インタフェースの普及度や認知度は音声入力 音声検索システムと比べて低いと言える HTML 解析と視線を組み合わせたシステムの検討例は梅本らの研究 [12] や中村らの研究 [18] など少数である 更に 本システムの様に実際のウェブブラウザ上で閲覧と並行して情報呈示などのサポートをリアルタイムで行うインタラクションについては 報告例がない よって 本研究はユーザの視線をインタフェースに活用することの発展に寄与するものと考える しかし 現時点では 文章をゆっくり読む 視線を止めて考えながら読み進める等の読み方には対応できておらず この様な読み方をすると目的の語句以外の呈示も起きてしまう 様々な閲覧の仕方に対応し 正確な呈示のみを行うという点については 時間閾値と速度閾値の設定など課題が残っていると言える ユーザの関心情報を適切に取得するための閾値は 読み手の能力以外にも文章の長さや単語自体の長さからも影響を受けるため 今後 慎重に検証を進める必要がある また現在は トーストをクリックすることで 情報呈示が進行するが より効果的なインタラクションのためにトーストを注視することでも情報呈示をできる様に改善を図る 今後の展望として 形態素解析と機械学習を活用して 注視している情報を新しい情報の提案 ( レコメンド ) に活用する仕組みの開発を目指す 更に ウェブブラウザの自動操作の適応やぼんやりと画面の一部を見ている時など情報呈示を行う必要がない状態の検出も視野にいれ 前述した課題も併せてユーザが利用し易いシステムへ改善及び 検討を進めていくつもりだ 図 10. インタラクション実行時の画面 注視された単語がトーストで表示されている 謝辞本研究の一部は科研費 16K01566, 17K02129, 19K12902 の助成を受けたものである. ここに深く謝意を表する. 8. 考察 非接触型の視線入力装置を用いてウェブページからユーザの興味語を取得できるユーザインタラクションシステムを開発した また システムが注視点の座標 参考文献 [1] 近藤公久, 馬塚れい子, 筧一彦 : 日本語文の読解過程における語特性および語順の影響, 認知科学,Vol.9,No.4, pp (2002) -41-

7 パーソナルコンピュータ利用技術学会論文誌 Vol.14, No.1 [2] Netcraft: May 2018 Web Server Survey, etcraft.com/archives/2018/05/29/may-2018-web-server-surv ey.html,( 参照 ) [3] HTC Vive pro official page: ro-eye/,( 参照 ) [4] NEC プレスリリース : 次世代ヒューマンインタラクション技術と連携させた新たな法人向け VR ソリューション 2 種類を開発, _01.html,( 参照 ) [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 (2004) [7] 金子寛彦 : 固視微動, 映像情報メディア学会誌 Vol.63,No.11,pp (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 (2012) [11] 松延拓生 : ウェブサイトのユーザビリティ評価のための視線分析方法, ヒューマンインタフェース学会論文, Vol.16,No.4(2014) [12] 梅本和彦, 山本岳洋, 中村聡史, 田中克己 : 視線情報からの注目語抽出に基づく検索意図のリアルタイム推定, 情報処理学会論文誌,Vol6,No.3,pp (2013) [13] 中園歩, 濱川礼 :LookUp- 視線移動情報の特徴と機械学習を用いた読書支援システム, 情報処理学会インタラクション 2018,pp (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 , (2009) [15] Eye Tribe Official site: Eye Tracking 101, yetribe.com/dev.theeyetribe.com/dev.theeyetribe.com/genera l/index.html,( 参照 ) [16] 日本経済新聞 : ブラウザー 1 強グーグル崩せ独 立系 スマホで躍進, XMZO W8A810C1X13000/,( 参照 ) [17] 山田光穗, 福田忠彦 : 画像における注視点の定義と画像分析への応用, 電子情報通信学会論文誌 D Vol.J69-D,No.9,pp (1986) [18] 中村亮太, 赤坂将, 柳沢達也, 市村哲 :Webページ評価のための視線測定と文書構造解析を組み合わせた注視情報視覚化, 情報処理学会論文誌,Vol.52,No12, pp (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 (2012) [22] 長石道博 : 視覚の誘導場による読み易い和文文字列表示, 映像情報メディア学会誌,Vol.52,No.12, pp (1998) [23] 川上隼人, 笹田裕太, 五十嵐覚, 秋田純一 : サッケード追尾可能な視線計測カメラの開発とそれを用いるインタラクションの可能性, 情報処理学会論文誌, Vol.56,No.4,PP (2015) -42-