論文
DBSJ Letters Vol.4, No.1――――――――――――――――――――――――――――――――――――

複数 Web コンテンツの多面的閲覧のための空間インタフェース
A Spatial Interface for Aspect Browsing ofMultiple Web Contents

小谷 彬*小山 聡†
田中 克己‡
Akira KOTANI Satoshi OYAMA
Katsumi TANAKA
通常，ひとつの Web サイトの内容は多面的であり，複数の側面からの記述がある．しかし，現在の検索エンジンやポータルサイトのインタフェースでは，多数の Web サイトの様々な側面を比較しながら閲覧することは容易ではない．そこで
我々は，多数の Web サイトの異なった側面を空間的に配置することで，Web の多面的な閲覧を可能にするインタフェースを提案する．ユーザは三次元のこのインタフェースの中でウォークスルーをしてブラウジングを行う．このインタフェー
スにおいて，ひとつのサイトはブロックと呼ばれる直方体で表わされ，ブロックの各々の面にそのサイトの各ページが割り当てられる．これにより，複数の Web サイトのさまざまな側面を，空間内の異なる視点から閲覧することが可能となる．
本論文では，多面的な閲覧を容易にするための複数 Web サイ
トの空間配置の指針と，自動配置を行う手法について述べる．
Usually the content of one Web site is multi-pronged,
and there is a description from different viewpoints.
However, with the interface of present search engines or
portal sites it is not easy to browse Web pages while
comparing various sides of many Web sites. We propose
the interface that enables multi-pronged browsing of Web
contents by spatially arranging different sides of manyWeb sites. Users browse Web sites and Web pages walking
through in this three dimensional interface. Each site isrepresented as a hexahedron that is called a block, andeach page of the site is assigned to each surface of theblock in this interface. Our system enables us to browse
various sides of Web sites from different viewpoints. In
this paper, we describe guidelines for the spacearrangement of multiple Web sites to facilitate
multi-pronged browsing and the technique for
automatically arranging Web sites in three dimensional
space.

1. はじめにニュースサイトや大学のサイトなどに代表されるように，類似した構成を持つ複数のWebサイトが存在する．例えば，*学生会員 京都大学情報学研究科修士課程
kotani@dl.kuis.kyoto-u.ac.jp† 正会員 京都大学情報学研究科助手
oyama@dl.kuis.kyoto-u.ac.jp‡ 正会員 京都大学情報学研究科教授
tanaka@dl.kuis.kyoto-u.ac.jp

1

多くの大学の研究室のサイトにはメンバーのページや論文のページがある．そういったWebサイトは，複数の側面からの記述があり，Webサイトの内容が多面的であると言える．
同時に，共通の側面をもつ似た構成の複数のWebサイトが存在していると言える．
そこで我々は，多数のWebサイトの複数の異なった側面を空間的に配置することで，Webの多面的な閲覧を可能にするインタフェースを提案する．ユーザは三次元インタフェース上でウォークスルーをしてブラウジングを行う．具体的にはひとつのサイトをブロックと呼ばれる直方体で表し，直方体の各々の面に，そのサイトの各側面（各ページ）を貼り付けるものである．これにより，複数のWebサイトのさまざまな側面を空間内の異なる視点から閲覧することが可能となる．
また，ブロックとして表されるサイトを複数並べることにより多面的な連続的比較閲覧を支援することを目的としている．それを容易にするための空間配置の指針として，格子状配置を提案する．そしてよりよい空間配置を行うために，空間配置に対して指針を設定し，その指針に対する現在の配置の適合度を表す評価値を設定する．この評価値の高い配置すなわち空間配置指針に適った配置を求めるために，遺伝的アルゴリズムの考え方を用いた．初期配置をランダムで与えて，配置に対する選択・交叉・突然変異の操作を設定し，これらを繰り返すことにより評価値の高い配置を探索し再配置するという自動配置手法を提案した．最後にプロトタイプを製作し，有用性を検証し今後の方針を示す．

2. 関連研究
松本らによるINFOTUBE[1]は実際の商店街のWebページひとつひとつをセルとして扱い，それを三次元空間のチューブに貼ることで，複数Webサイトの複数Webページを空間的に表示している．複数Webコンテンツ表示の空間インタフェースという点で本研究と共通するが，本研究では複数コンテンツの一定の側面からの閲覧を支援するために配置に意味があるがINFOTUBEにおけるセルの位置はランダムである．
デジタルシティ京都[2]は，実際の都市をWebサイトの情報など埋め込んで仮想空間に構築したものであり，実時間性を持ち，実際の都市の情報に応じてリアルタイムに再構成される．Webサイトの情報を埋め込んだ空間インタフェースという点で本研究と共通するが，本研究では現実空間との対応ではなく，Web空間を実空間的なインタフェースで表すことが目的である．また，デジタルシティ京都では，3D京都として3DML[3] を用いて京都の街を立体的に再現している．本システムの実装に際しても同様に3DMLを使用した．
City of news[4]は，K. LynchがThe Image of the City[5]で提唱した認知地図による都市計画に基づいた都市メタフ
ァで構成されたWeb仮想空間で，ユーザのWeb 探索などに応じて有機的にその構成を成長させたり，現代の新聞のレイアウトをマッピングしたり，ウェアラブルなインタフェースを用いてのウォーク・フライスルーができる．本研究でも，最終的には都市メタファで表された空間インタフェースを目的としているが，Webサイトの側面という点に特に着目して空間配置を行う点で異なる．
Focus + Context Views of World-Wide Web Nodes[5]は，Web 空間で「迷子」にならないようにするために，現在見ているページのWeb空間における位置を提示するシステムである．この中で，Webサイト内のWebページに重要度を設定し，重要度の高いものをランドマークとすることにより，現在見日本データベース学会 Letters Vol.4, No.1

論文
DBSJ Letters Vol.4, No.1――――――――――――――――――――――――――――――――――――ているページの空間位置の把握を支援している．本研究ではWebサイト内の側面抽出において，各Webページの重要度を設定する際にこの考えを用いた．

3. インタフェース概観
空間インタフェースの構成要素
提案する空間インタフェースにおいて，ひとつのサイトをひとつの直方体で表す．これを「ブロック」と呼ぶことにする．ブロックは直方体で表され，ひとつのサイトがひとつのブロックに対応する．立方体の上面と底面を除く4つの側面には，サイトの各側面が割り当てられる．
この空間インタフェース上に配置する複数の類似サイト集合を S = {s1, s2 ,L, sn } とする．さらに S の各要素 sk ∈ S に対して，そのサイトのページ群集合を Pk = {pk1, pk 2 ,L, pkm }とする．
空間インタフェース上に配置されるブロックの集合を
X = {x1, x2 ,L, xn } とする．各ブロックに S の各要素であるサ⎯→ X という写像で表さ
イト sk を割り当てる．このとき S ⎯れる．
ブロック xk は直方体であり上底面とそれ以外の東西南北に面を持ち，これらの面を xin, j , x ie, j , xiw, j , xis, j で表す．各面に，そのブロックに割り当てられているサイト sk のページ集合

pk の各要素であるページ pk1, pk 2 ,L, pkm を割り当てる．面にはテクスチャとして該当ページのスクリーンショットを貼る．
Pk < 4 のときは，同一のページが複数の面に割り当てられる． Pk > 4 のときは，いずれの面にも割り当てられないページが存在する．これを pki を null に割り当てると表すこと{}とする．このとき， pk ⎯⎯→ xkn, xke , xkw , xks , null という写像で表される．

4. Web サイトの側面抽出手法
4.1

キーワードによる側面の抽出

同種の実体(entity)を表現した Web サイト群があり、このような同種の実体に共通する属性(attribute)を，Web サイトの「側面」とする．対象とする Web サイト群の全ページの内容を対象として解析しキーワードを抽出し，キーワードにより各ページを特徴付けて側面の抽出に用いる方法が考えられる．手順は以下のようになる．
（1） 対象とする複数 Web サイトの全ページから面となるキーワード候補を，タイトルタグや見出しタグなどをもとに抽出する．（キーワード候補）（2） 抽出されたキーワード候補に対し，そのキーワードを含むページを持つサイトの割合が高い数個をキーワードとする．
（3） 各ページの各サイト内における重要度を計算する．
（4） 各サイトにおいて，キーワードを含むページのうち最もサイト内重要度が高いページを側面とする．
以下でキーワードの抽出方法，各ページのサイト内における重要度の算出方法を述べる．

4.2 キーワードの抽出重要度の算出方法を述べる．キーワード候補ならびにキーワードは以下のように抽出する．この空間インタフェース上に配置する複数の類似サイトである各 sk に対して，そのサイトのページ群集合 Pk の全要素について，そのページへのアンカー文字列，タイトル文字列，meta タグ内の keywords 属性の文字列，ページ内の見出しタグ(<hn>)および強調タグ(<b> , <strong>)で囲まれた文字列を形態素解析し単語に分割して，それらのうちストップワードなどを除いたものをキーワード候補とする．
これらキーワード候補集合を K = {k1, k2 ,L, kl } とし, k iを含むページを持つサイトの割合をキーワードレベルとする( 0 < level(k i ) ≤ 1 )．キーワードレベルが大きい数個(4 つ)のキーワード候補が，キーワードとする．

4.3 各ページのサイト内における重要度
各ページに対して重要度( importance ) を設定する．重要度
は接続度（ connectivity ）と深さ（ depth ）の 2 つのパラメー
タから算出されるものとする．
（1） 接続度（ connectivity ）より重要なページは，多くのページからリンクが貼られており，また多くのページへのリンクがあると考えられる．また、該当ページから n ステップでたどり着けるページの数をIndegree(n ) ，該当ページへ n ステップでたどり着けるページの数を Outdegree(n ) と表すこととする．
（2） 深さ（ depth ）より重要なページは，トップページからそのページまでのリンクステップ回数は小さくなると考えられる．そのリンクステップ数を depth とし， D で表す．
以上の二つからページの重要度( importance )を算出する上において，まずリンク構造のみに注目した構造的な重要度
connectivity_importance を次式で算出する．
connectivity_importance= {(Indegree(1)) + Outdegree(1)}w1 + {(Indegree(2)) + Outdegree(2 )}w2

w1 , w2 はそれぞれ重みパラメータで w1 + w2 = 1 となるように設定する．2 ステップで移動できる範囲のリンク構造をもとに connectivity_importance を算出する．そして，重要度importance を次式で算出する． ws , wd はそれぞれ重みパラメータで ws + wd = 1 となるように設定する．
importance =connectivity_importance1
ws + wd
MAX(connectivity_importance)D

5. 空間配置指針
5.1

格子状配置

図1

ブロックの格子状配置

Fig.1

2

Lattice of blocks

日本データベース学会 Letters Vol.4, No.1

論文
DBSJ Letters Vol.4, No.1――――――――――――――――――――――――――――――――――――
図 2 のようにブロックを格子状に並べる．ユーザはこのブロックの間をウォークスルーして閲覧を行う．格子状に配置された各ブロックをその座標を用いて， xi, j ∈ X とする．
また，ブロック間を東西・南北方向に走るユーザの可移動直線路を「通り」と呼ぶことにする．

5.2

配置に対する評価関数の設定

初期状態として，ブロックへのサイトの割り当てと，ブロックの各面へのページの割り当てをランダムに行う．そして，現在の配置に対する評価値 v = h( X ) を定める．次に，6 節で述べる操作を，終了条件を満たすまで繰り返して，配置を決定するものとする．配置指針により評価関数 h(X ) の設定が異なる．次節で配置指針の一例とその場合の評価関数を述べる．また，評価値を求める際に，各ページの特徴ベクトルを設定する． xin, j , x ie, j , xiw, j , xis, j に割り当てられているページの特徴ベクト
ルを， x ni, j , x ei, j , x i,wj , x si, j で表すものとする．特徴ベクトルは，TF/IDF 法など単語出現頻度に応じて生成するという方法が考えられる．

5.3

配置指針

配置指針として，「同じ『通り』の同じ側には，複数ページの一定の側面が連続して並ぶ」ように並べる指針が考えられる．この指針においては，隣り合うブロックの同じ側の面の類似度の総和が評価関数として考えられる．評価値は次式で表される．

∑ ∑ {sim(x , x ) + sim(x , x )}+ ∑ ∑ {sim(x , x) + sim(x , x)}v=

LK −1j =1i =1K

L −1i =1j =1ni, jw
i, jni +1, jsi, jw
i +1, jei, jsi +1, jei +1, j

ただし sim(x, y ) は，Web ページの特徴ベクトル x と y の類似度である．この指針においては，複数サイトの連続的比
較閲覧はユーザの移動が前提となっている．

x i , j ⇔ x i ', j 'ブロック集合 X の要素数を X で表すと，ある時点におけるサイトの置換を行う 2 つのブロックの選び方は， X C 2 通りである．いずれの操作も，前述の評価関数では変更のあったブロックに関する部分の再計算だけをすればよく，全体を再計算する必要はない．サイトの置換操作は遺伝的アルゴリズムの交叉に相当する．

6.1.3 サイトの突然変異局所解に陥るのを防ぐために，遺伝的アルゴリズムでは突然変異が行われる．この自動配置手法においては，ブロックに対してサイト置換を試み，現在の配置に対する評価値vcurrent が最も小さくなるページの割り当て方を選択する．

6.2

遺伝的アルゴリズム

遺伝的アルゴリズムによる自 動配置の流れは以下のとおりになる．
（1） 初期配置をランダムで設定．
（2） 現在の配置に対して，評価値 vcurrent を算出．
（3） 繰り返し一回前の評価値 v previous と vcurrent の差が一定の値以下になると，終了配置を決定する．
（4） 選択 すべてのブロックに対し，ページの置換操作を行い，最も vcurrent が大きくなるページの割り当て方を選択する．ただし，ひとつのブロックに対して独立で vcurrent が最大となるページの割り当て方は決定できない．そこで，すべてのブロックに対し，ページの置換操作を vcurrent が変化しなくなるまで繰り返す。
（5） 交叉 すべてのブロックをペアにして，それぞれのペアに対して交叉確率 Pc に基づいて置換操作を試みるかを決定する．置換操作を試みる前の配置の評価値を v ，実行した後の配置の評価値を v' とするとき， v < v' ならば操作を実際に実行する．
（6） 突然変異 すべてのブロックに対して突然変異確率
Pm に基づいて突然変異操作を実行する．
（7） (3)に戻る．

6 自動配置の手法
6.1

7. プロトタイプ実装および考察操作与えられた 初期配置から配置を変更して現在の配置に対する評価値を高める．配置を変更するための 3 つの操作を述
べる．

6.1.1 ページの置換
ページの置換は，ブロック x i , j の xin, j , x ie, j , xiw, j , xis, j に割り当てられているページの組み合わせを変更するものである．

{xin, j , xie, j , xiw, j , xis, j } ⇔ {x' in, j , x' ie, j , x' iw, j , x' is, j }ブロック x i , j にサイト s k が割り当てられているとき，そのページ群は Pk であり，xin, j , x ie, j , xiw, j , xis, j へのページの割り当て方は，重複を許すのであれば Pk

4通り，重複を許さないのであれば P P4 通りとなる．ページの置換操作は遺伝的アルゴk

リズムの選択に相当する．

6.1.2 サイトの置換
サイトの置換は，2 つのブロックの位置を交換するものである．

3以上を踏まえて空間インタフェースを実際に構築し，この空 間インタフェース内をウォークスルーしてブラウジングを行った結果を考察する．

7.1

実装

プロトタイプシステムの実装に当たっては 3DML[3]を使用した．3DML はアメリカ Flatland 社が開発した三次元空間構
築言語であり，ユーザはプラグインを用いて, Web から利用することができる.ひとつの立方体がひとつの Web サイトに対応し、その 4 つの側面には Web サイトの各々異なるページが割り当てられ，スクリーンショットを貼る．ウォークスルー中の様子は図 2 のようになる．図 2 は京都大学情報学研究科の研究室のサイト群に対して構築したものであり，(a)で現在の視点から正面に見えている面（(a)の線で囲まれた面）はすべて当該研究室の教授のページという側面にあたり，複数 Web サイトの同一側面が一覧できる．そして視点を回転させると(b)のように当該研究室のメンバーのページという側面（(b)の線で囲まれた面）が現れる．

日本データベース学会 Letters Vol.4, No.1

論文
DBSJ Letters Vol.4, No.1――――――――――――――――――――――――――――――――――――
し，より妥当な手法・指針が必要であると考えている．そのために，実装された空間インタフェース全体についての評価方法についても検討も必要であると考えている．さらには，インタフェース全体としての改善が必要であると考えている．今回は空間配置の基本的方針として格子状配置のみを検討したが，必ずしもこれが最適であるとは言えないので，ユーザの閲覧スタイルを研究してどのような空間配置が閲覧スタイルにフィットするのかを検討・考察したい．
また，ユーザのアクションやプリファレンスに基づいて配置構成を動的に変化させることも考えられる．さらには複数ユーザによるインタフェースの同時使用を想定した Web 散策支援機構なども検討したい．

(a)

(b)

[謝辞]

図2
Fig.2

7.2

インタフェース概観

An example of the interface

考察

空間的移動によるWeb閲覧 既存のブラウザでは，リンクアンカーをクリックして別ページへ移動してWeb 閲覧を行うが，このインタフェースでは空間的に移動するのみで別ページの内容を参照することができる．ある一定の複数Web サイトの集まりを「街」としてひとまとまりにして，ひとつの「街」内での移動に限らず，複数の「街」の間での移動によるWeb閲覧スタイルも考えられる．
視覚的な印象 閲覧者が通りに立ってWeb情報を見たときに，「類似したものが並んでいる」と感じにくい．内容的には類似したものを選んでいるが，それを一瞥しただけでは分からない．一瞥しただけで類似したものが分かるというような見せ方が必要である．例えばある通りの主題を抽出して主題を記した看板メタファを置いたりすることが考えられる．
ブロック 現在でブロックの高さはすべて均等で意味付けがなされていない．例えば，サイトに対して重要度を設定し，その重要度にもとにブロックの高さを変化させることが考えられる．また，ブロックを直方体に限定せずさらには格子状配置も含めて，より適切な空間配置の検討が必要である．
受動的閲覧 このインタフェースでは能動的な比較閲覧のみならず，明確な目的を持たずとも流れるように関連ページの閲覧を行う受動的閲覧インタフェースにもなりうる．
可視性 通常のブラウザに比べ，表示面積が狭いためページによっては内容が読み取れない場合がある．ユーザの現在位置からの距離によって表示情報の詳細度制御を行う方法などが考えられる．

8. まとめと今後の課題
本論文ではひとつの Web サイトをブロックと呼ばれる直方体で表し，ブロックの各々の面にそのサイトの各ページを貼り付けることにより，ひとつの Web サイトを空間的なアングルによってさまざまな側面からの閲覧を可能にするためのインタフェースを提案し，プロトタイプを作成しインタフェースとしての問題点を提起し考察した．
今後は空間配置のための基本的技術として，Web サイトにおける側面の抽出方法，空間配置の指針についてさらに検討

4

本研究の一部は，平成 17 年度科研費特定領域研究「Webの意味構造発見に基づく新しい Web 検索サービス方式に関する研究」（課題番号：16016247，代表：田中克己）および，
平成 17 年度科研費若手研究（B）「参照の同一性判定に基づく複数 Web ページの検索閲覧方式の研究」（課題番号：16700097，代表：小山聡）および，文部科学省科学技術振興費プロジェクト「異メディア・アーカイブの横断的検索・統合ソフトウェア開発」（代表：田中克己）および，21 世紀
COE プログラム「知識社会基盤構築のための情報学拠点形成」によるものです．ここに記して謝意を表すものとします．

[文献］[1] INFOTUBE / 松本文夫, 松川昌平, 脇田玲
http://www.plannet-arch.com/information/tube-jp.htm[2] T. Ishida: “Digital City Kyoto: Social Information
Infrastructure for Everyday Life” Communications of
the ACM (CACM), Vol. 45, No. 7, pp. 76-81, 2002.
[3] 3DML (Flatland Online)
http://www.flatland.com/[4] F. Sparacino, G. Davenport and A. Pentland: ”City ofNews”, KOS, No. 179‒180 (2000).
[5] K. Lynch: “The Image of the City”, The MIT Press(1960).
[6] S. Mukherjea and Y. Hara: “Focus + context views ofworldwideWeb nodes”, UK Conference on Hypertext, pp.
187‒196(1997).

小谷 彬

Akira Kotani

京都大学大学院情報学研究科修士課程在学中．2005 年京都大学工学部情報学科卒業．日本データベース学会学生会員．
主に Web データマイニング，データの可視化の研究に従事．

小山 聡

Satoshi OYAMA

京都大学大学院情報学研究科社会情報学専攻助手．2002 年
京都大学大学院情報学研究科博士後期課程修了．博士（情報学）．主に機械学習，データマイニング，情報検索の研究に従事．電子情報通信学会，人工知能学会，日本データベース学会，ACM，AAAI 各会員．

田中 克己

Katsumi TANAKA

京都大学大学院情報学研究科社会情報学専攻教授．1976 年
京都大学大学院修士課程修了．工学博士．主にデータベース，マ ル チ メ デ ィ ア コ ン テ ン ツ の 処 理 の 研 究 に 従 事 ．IEEE
Computer Society，ACM，人工知能学会，日本ソフトウェ
ア科学会，情報処理学会，日本データベース学会等各会員．

日本データベース学会 Letters Vol.4, No.1