KiriBariWeb：スクリプティングによる個人化ブラウジング
内山 匡

滝川 大介

宮本 勝

日本電信電話株式会社
NTTサイバーソリューション研究所
１．はじめにで行われるために，サーバ負荷が軽いという特徴をあ近年のインターネットの普及により，利用環境や利用わせ持っている．

目的，そして利用者層は極めて多様化してきている．
これら多様化した利用の形態に如何にきめ細かく対応していくかは，特に利用者とインターネットとの接点にあるポータルサービスの大きな課題である．
ここで紹介するKiriBariWebは，利用者が自分自身の嗜好に応じてWebページを閲覧するためのスクリプテ
ィング環境である．Webからの情報取得に対する利用者の多様なニーズに応えるツールとして様々なシーンでの利用が期待できる．

３．システム構成と処理の流れ
システムはサーバとブラウザ（Windows/IE6.0以上）から成る．サーバから配信されるスクリプト（JavaScript）により，ほぼ全ての処理はブラウザ側で行われる．サーバ側の処理は，スクリプトの配信，利用者設定情報の保存/配信，スクリプトでニュースサイト等の外部ページを操作するために必要な外部ページのドメイン変換のみである．
処理の流れを図１に示す．図中①～⑤が部分指定

２．従来技術とKiriBariWebの特徴時のフロー，⑥～⑫がページ編集時のフローである．

近年，利用者ごとにカスタマイズ可能な統合型ポーカスタマイズされたページの閲覧は⑥～⑪にしたがう．

タルソリューションが企業向けに数多く提供されている（例えば[1][2]）が，多くはXMLコンテンツ等を新たに用意することが必要であり，HTMLで記述された膨大な既存リソースをそのまま活用することはできない．また

４．HTMLの部分表現
従 来 の wrapper の 多 く は DOM （ Document ObjectModel）[5]によってHTMLの木構造に対する操作を定HTMLをXMLへ変換するwrapper[3]は，DBから作成されたWebページのようにある程度固定的な構造をもったHTMLへの適用に限 定される上に，on-the-flyでHTMLからXMLへ変換する場合にはサーバ負荷の問題があり大規模なサービスには適さない[4]．
これに対してKiriBariWebには以下のような特徴があブラウザ

変換サ ーバWebページ（HTML）①HTML要求②HTML取得 ＆ドメイン変換

部分指定
スクリプト

③部分指 定スクリプト取得④部分指 定り，HTMLで記述された既存のリソースを最大限に活⑤指定部 分保存用することができる．
・HTMLで記述された既存ページの指定部分を自在に合成して表示することができる．
・当該ページの内容更新後も指定部分を高い精度で部分指定 画面分指定できるほか，一般のドローソフト同様の各種編⑦保存情 報取得⑧閲覧編 集スクリプト取得

閲覧編集
スクリプト

⑨保存情 報のHTML 要求集を行うことができる．
また，ほぼ全ての処理はスクリプトによってブラウザ側

保存情報
・指定部分のURL， アドレ ス，表示位置 ，自動 更新周 期をHTMLとして 記述⑥保存情 報要求

保存情報（HTML）特定し最新の内容を抽出できる．
・HTMLの構造を可視化することで直観的な操作で部⑩HTML取得 ＆ドメイン変換⑪抽出/表示/編 集⑫編集内 容保存

KiriBariWeb : Personalized Browsing by Scripting
Tadasu Uchiyama, Daisuke Takigawa and Masaru Miyamoto
NTT Cyber Solutions Laboratories
NIPPON TELEGRAPH AND TELEPHONE CORPORATION

ニュースサイト等

閲覧編集 画面

図１．処理の流れhtml

義 し て い る ． KiriBariWebでは，ニュースサイ

上位層での属性変更等

body

トにおける速報の挿入/center削除等，HTMLの木構造の変化に対してもロ

table table
tr tr tr

td

td td

td 同一層での挿入等

図２．木構造中の部分指定

バストに指定部分が抽出できるよう次のような改良を施している．
ま ず 同一層 で の タグの挿入/削除への対応
として，タグ名に加えて選択した領域が切り貼りされる

セル幅等タグの属性を考慮したアドレス表現を導入し選択メニューて類似タグを識別している．さらに上位層でのタグの挿入/削除/属性変更への対応として，下位ノードから逐次部分木マッチング（図２中実線矢印）することにより挿入等の影響を最小限に抑えている．
５．Webページの部分指定と編集
HTMLの木構造における部分木をオブジェクトの単位としてこれを可視化し抽出するスクリプト，および抽出した部分木をオブジェクト化しこれを編集操作するス
クリプトを開発した．前者は部分指定画面（図３上）で，後者は閲覧編集画面（図３下）でそれぞれ機能する．
閲覧編集画面はさらに閲覧モード（デフォルト）および編集モードのいずれかのモードで動作する．
図３上は既存のWebページ上で部分指定する場合

編集メニュー

設定メニュー

選択中のオブジェクト

図３．部分指定画面と閲覧編集画面（編集モード）の例である．ページ上に重ねて表示される選択メニュ

および実際の利用形態の調査を予定している．またカーで[+]（[-]）をクリックすることで，部分木に対応するスタマイズの対象を，フォームで実現されるような機能選択部分が拡大（縮小）する．所望の部分が選択表示レベルにまで拡張することを検討している．

されたところで[select]をクリックすると選択部分が抽出

参考文献

され，オブジェクトとして閲覧編集画面へ挿入される[1] WebShere Portal Server, http://www.ibm.co.jp/（閲覧編集画面上に<iframe>タグを挿入し選択した部[2] Oracle 9i/Application Server Portal,分が収まるように表示位置等を設定している）．

http://www.oracle.co.jp/

図３下は閲覧編集画面（編集モード）の例である．各[3] Laender, A. H. F. and Ribeiro-Neto, B. A., “A

オブジェクトを単位として，ドラッグ＆ドロップによる配Brief Survey of Web Data Extraction Tools,” SIGMOD

置やカット＆ペーストによる編集等，一般のドローソフト

Record Vol.31 No.2 (2002)と同様の各種編集が可能になっている．さらに定期的[4] 注目製品選択のポイント「WWWシステムを携帯電に自動更新するよう，オブジェクトごとに設定することが話対応にするソフト」, 日経オープンシステム No.90

できる．

pp.140-147 (2000)

６．まとめ[5] Flanagan, D., “JavaScript: The Definitive Guide,

利用者が自分自身の嗜好に応じてWebページを閲

Fourth Edition,” pp.274-285 O’Reilly & Associates

覧するためのスクリプティング環境であるKiriBariWeb(2002)を紹介した．今後は，システムのユーザビリティ評価，