IPSJ SIG Technical Report Vol.2014-HCI-157 No.26 Vol.2014-GN-91 No.26 Vol.2014-EC-31 No /3/15 1,a) 2 3 Web (SERP) ( ) Web (VP) SERP VP VP SERP

Size: px

Start display at page:

Download "IPSJ SIG Technical Report Vol.2014-HCI-157 No.26 Vol.2014-GN-91 No.26 Vol.2014-EC-31 No /3/15 1,a) 2 3 Web (SERP) ( ) Web (VP) SERP VP VP SERP"

たつやもてぎ
4 years ago
Views:

1 1,a) 2 3 Web (SERP) ( ) Web (VP) SERP VP VP SERP VP Web 1. Web Web Web Web Google SERP SERP , Hodokubo, Hino, Tokyo , Japan , Higash-Shinagawa, Shinagawa, Tokyo , Japan , Chofugaoka, Chofu, Tokyo , Japan a) kazutaka@acm.org SERP 3 ScoutView[1] 1 2 PatchworkVision[2] Visual Patch VP SERP VP VP VP SERP DOM VP Web 2 VP SERP 3 VP 4 VP DOM 5 VP Web 6 1

2 Yahoo! Web Search API (1) User Firefox + Add-on Client side Fig. 1 (9) 1 (10) (2) (7) 2. (3) (4) Apache + PHP (5) (6) Firefox + Add-on Server side Components of our prior system. 1 Firefox Yahoo! API Web PHP ( 1 ) VP ( 2 ) PHP ( 3 ) PHP Yahoo! API ( 4 ) Web URL ( 5 ) URL VP VP ( 6 ) VP PHP ( 7 ) PHP SERP 2 ( 8 ) SERP ( 9 ) SERP VP 1 ( 10 ) VP 2 PC PC VP 6 VP VP VP 9 API VP VP 1 PhantomJS[3] CasperJS[4] VP 3 VP DOM 2 SERP VP *1 3. VP CasperJS PhantomJS GUI WebKit JavaScript DOM CSS JQuery JavaScript API PhantomJS CasperJS CasperJS URL *1 CPU Web 2

情報処理学会研究報告図 2 従来方式の SERP Fig. 2 Search engine result page of our prior system. チャする // Google トップページにアクセスし Nexus 7 で検索 casper.start( http://www.google.co.jp/, 3.

3 情報処理学会研究報告図 2 従来方式の SERP Fig. 2 Search engine result page of our prior system. チャする // Google トップページにアクセスし Nexus 7 で検索 casper.start( Google 検索と SERP のナビゲーション function() { this.fill( form[action="/search"], 図 3 は Google のトップページで特定のクエリにより検索し表示されたトップ 10 の SERP と次の 10 件の { q: Nexus 7 }, true); SERP を取得する方法を示しているコードは JavaScript // 検索結果ページから次の 10 件にアクセスで書かれており CasperJS つまり WebKit レンダリン casper.then(function(){ グエンジンを制御するためのコードが書かれている通 var next = + this.evaluate(function(){ 常の Web ページを作る際はページコンテンツの一部とし var nextlinks = て JavaScript を使用するがページ内で動作する WebKit document.queryselectorall( a.fl ); が解釈する JavaScript コードは this.evaluate() によ var hrefs = り動作させることができる Array.prototype.map 3.3 クエリのハイライトとキャプチャ.call(nextLinks, function(e){ return e.getattribute( href ); 図 4 は JQuery *2 for(var i = 0; i < hrefs.length; i++){ 及び JQuery 用ハイライトプラグイ if(hrefs[i].match(/start=10/)){ ン *3 を用いることでページ内のクエリをハイライトし return hrefs[i]; た上でその部分をキャプチャする例を示している実際 } } にはクエリの座標を取得しその周辺にマージンを設定してクエリを含むより広い範囲の矩形を指定してキャプチャする VP 生成時には第 4 章で述べる分類のためにハイライトしたクエリがどのような DOM エレメントとしてペー return ""; this.open(next); 図 3 CasperJS による Google 検索の例 Fig. 3 Usage example of CasperJS for searching by Google. ジ内で記述されているかを記録する例えば図 5 の場合は *2 *3 highlight-javascript-text-higlighting-jquery-plugin.html 2014 Information Processing Society of Japan 2 つのクエリを含んでおりそれぞれの親要素を順に辿って以下のような情報を記録する 3

// var casper = require( casper ).create({ clientscripts: ["./jquery-2.0.3.js", "./jquery.highlight-4.js"] // url Nexus 7 casper.open(url).then(function() { this.

4 // var casper = require( casper ).create({ clientscripts: ["./jquery js", "./jquery.highlight-4.js"] // url Nexus 7 casper.open(url).then(function() { this.evaluate(function(query){ }, { $( :root ).removehighlight().highlight(query); $(.highlight ).css("background-color","yellow"); query: Nexus 7 // 1 casper.then(function(){ this.captureselector(.highlight ); Fig. 4 4 CasperJS VP Usage example of CasperJS for clipping query. Fig Web VP VPs according to a certain web search with two queries. VP VP VP Web VP Fig. 5 VP example including two queries. H1 DIV DIV DIV DIV BODY HTML H2 DIV DIV DIV BODY HTML 4. VP 3 Google SERP VP DOM VP 2 VP 3 DIV SPAN 5 1 H1 BODY HTML 2 H2 BODY HTML 5 VP VP VP VP VP Google VP VP VP VP VP VP * VP SERP VP 1 *4 4

1 1 VP Table 1 The number of VPs of example 1.

2. VP 84 VP VP 28 suface 2 VP 76 VP 8 7 1 VP Fig.

9 A part of VPs grouped to the top site of example 2 (query 1).

10 A part of VPs grouped to the top site of example 2 (query 2).

5 1 1 VP Table 1 The number of VPs of example 1. VP 190 VP VP 78 VP 14 VP VP Table 2 The number of VPs of example 2. VP 84 VP VP 28 suface 2 VP 76 VP VP Fig. 7 A part of VPs grouped to the top site of example VP 1 Fig. 9 A part of VPs grouped to the top site of example 2 (query 1) VP 2 Fig. 10 A part of VPs grouped to the top site of example 2 (query 2) VP Fig. 8 A part of VPs grouped to the 2nd site of example 1. VP VP 7 VP VP 2 VP 8 VP 7 URL URL VP VP surface 2 2 VP 1 10 VP 2 Microsoft Surface 2 Surface 2 HTML 9 VP A VP 5

6. 11 2 5 VP Fig. 11 A part of VPs grouped to the 5th site of example 2. 2 4 VP VP VP SERP Web 2 4 5 IT VP 11 HTML IT SERP VP VP DOM VP 2 VP 5.1 VP 5.2 JSPS 23700107 [1] ScoutView: Web Vol.

6 VP Fig. 11 A part of VPs grouped to the 5th site of example VP VP VP SERP Web IT VP 11 HTML IT SERP VP VP DOM VP 2 VP 5.1 VP 5.2 JSPS [1] ScoutView: Web Vol HCI-133, No. 8 (2009). [2] PatchworkVision: 18 WISS2010 pp (2010). [3] PhantomJS: PhantomJS, [4] CasperJS: CasperJS, a navigation scripting and testing utility for PhantomJS and SlimerJS, [5] Maruyama, K., Igeta, M. and Terada, M.: Search Engine Result Page with Visual Context and Already Rendered Snippets, Proceedings of the 7th International Conference on Web Informational Systems and Technologies (WEBIST2011), pp (2011). 5.3 VP Web Web # Web VP Web [5] VP VP SERP Web 6

”‰−oﬁI…R…ﬁ…e…L…X…g‡ðŠp‡¢‡½„�“õ„‰›Ê‡Ì™ñ”¦

”‰−oﬁI…R…ﬁ…e…L…X…g‡ðŠp‡¢‡½„�“õ„‰›Ê‡Ì™ñ”¦ 1 1 5 1.1........................................... 5 1.2.................................. 6 1.2.1.............. 6 1.2.2........................... 7 1.3........................................... 7