Yuzuru Tanaka and Kimihito Itoh

Yuzuru Tanaka and Kimihito Itoh
Meme Media Architecture for the Reediting and Redistribution of Web Resources Yuzuru Tanaka and Kimihito Itoh Meme Media Laboratory Hokkaido University

Current Web Technologies
Publication infrastructure server server Browse + dowmload/upload compound document with embedded tools and services client

Meme Media & Meme Pool meme pool compound document drag & drop
userB compound document drag & drop userA drag & drop redistribution not only MM contents, but also tools and services to make them interoperate with each other reediting userC

Required Systems Meme Media for people Meme Pool for people
to externalize, and to re-edit memes Meme Pool for people to publish, to reuse, and to redistribute memes Meme Market for people to introduce business activities in a meme pool Meme Management for people to organize and access memes

IntelligentPad as Meme Media
Compound Document Containers and their Connections P1 P2 P3 P2 P3 P1

Extraction of a Web Page Portion as a View Document
Client Document (HTML) HTML view Extracted information Cut out (Extract) Delete (Remove) Description of the editing process Description of view definition View-Definition Code ビュー定義とは，どのドキュメントのどの部分をビューポートに映し出すかを決める定義です． View-Documentの定義は，クライアントドキュメントに対する「編集操作」をあらかじめ記述します．このドキュメントに対して，ここを抽出して，ここを削除して・・・という情報をあらかじめ記述しておきます．それによって，実際にその編集を実行したときに得ることができる仮想のドキュメント，ビュードキュメントを定義することができるわけです．リレーショナルデータベースにおいて，テーブルに対してセレクション，プロジェクション，ジョインなどの演算をあらかじめ記述しておくことによって仮想のテーブルを定義可能であるのと同様に．ドキュメントに対する，切り抜き，削除，挿入，などの編集操作をあらけじめ記述しておくことによって，仮想のドキュメントを定義します．このビュー定義に従って，クライアントドキュメントを元に，実際にビューポートに表示するドキュメントを得るのです．ビュー定義を記述するコードは，２種類のコードにより記述されます．ひとつめはドキュメント取得コードであり，クライアントドキュメントの取得を記述します．記述条件はURLとWebサーバに対するクエリを用い，このように記述します．もうひとつは，取得したドキュメントに編集操作を記述するコードです．これをビュー編集コードと呼びます．このように記述します．編集を記述するためには，編集する箇所の指定が必要です． doc = getHTML(“ Retrieval Code view = doc 　　　　　.EXTRACT( editing location ) 　　　　　.REMOVE( editing location ); View-Editing Code

Node Identification Node identifier　：　to identify any object in a document /HTML[0]/BODY[0]/TABLE[0]/TR[1]/TD[1] <HTML> <HEAD> <BODY> / node-name [ index ] / node-name [ index1- index2 ] / node-name [*] / node-name / text() / node-name / attr( attr-name ) ・・・ <TABLE> [0] [1] [2] <TR> <TR> <TR> <TD> <TD> <TD> <TD> <TD> <TD> <B> ・・このシステムではHTMLからのデータ抽出にDOMの中でのパスを利用しています。現在では一般的になっているX-pathなどと基本的な部分は同じです。抽出対象の要素に至るまでのパスを，このように要素名を書き並べる形で表記します．同階層内の兄弟要素を一意に特定するために，それらの要素が文章中に出現する順にインデックスを振り，その値を指定します．このシステムにおける抽出方法の必要十分条件とはまず第一に、この表現を人間が手でかくといったことはまったく考えてないのでユーザのＧＵＩ操作を元に自動生成することが用意である。といった点ですもう一点に、ライブドキュメントの性質上抽出対象のドキュメントの内容が更新されても、目的の場所が抽出できなければならないということがあります。 DOMパスを使った場合、パス経路にかかるタグ構造に変更がない限り大丈夫です。情報提供ドキュメントの多くは，頻繁にはレイアウトを変更しない傾向にあるため定量的な評価は行っていませんが経験上この抽出方で十分に実用的です。 <B> <B> ・・ [TOPIX] [日経平均] [1,300.98] [12,969.05] DOM Tree

Extraction of a Web Page Portion
Wrapper Object (HTMLviewPad) Extraction Drag URL Editing code CLIP(/HTML[0]/BODY[0]/TABLE[0]/TR[1]) <HTML> <HEAD> <BODY> ・・・ <TABLE> この抽出表現はユーザが直接手でかくのではなく切り取り操作の際にシステムが自動生成します。この切り取りのインターフェイスについてご説明します。ユーザのＧＵＩ操作によりWrapperを作成する機能をライブカットと呼んでいます。（口で説明するよりは実際に動いているのを見ていただいた方がよいと思いますのでデモをご覧に入れます。）インタフェイスについては先ほどデモでご覧頂いたとおりで Webページ上で切り取る部分を選択し、その部分をドラッグアウトするだけです。＊サブインタフェイス現在の選択インタフェイスだと、領域が同じ要素をうまく選択できないのでサブインタフェイスを考えていますが実装がまだおいついていませんこれがペーストされた時点で、システムは、指定された箇所への抽出表現を作り表示しているサイトのＵＲＬと共に新しく生成したWrapperオブジェクトにセットします。抽出表現の生成はＤＯＭのパスを利用しているため選択要素から上流を探索して容易に作れます。 Wrapperオブジェクトはこれらのセットされた値をもとにサイトにアクセスし必要な部分を抽出して表示するわけです。 <TR> <TR> <TR> <TD> <TD> <TD> <TD> <TD> <TD> HTMLviewPad <B> <B> ・・ <B> ・・

Editing Operators EXTRACT( node identifier ) REMOVE( node identifier )
<BODY> <HTML> <BODY> <HTML> EXTRACT（●） REMOVE( node identifier ) <HTML> <BODY> <HTML> INSERT( node identifier, document , relation) <BODY> REMOVE（●） 2nd parameter：document to insert 3rd parameter：where to insert < CHILD | BEFORE | AFTER | PARENT > このようなノード指定表現を用いてドキュメント中の任意の箇所を選択可能になったわけですが次に，選択箇所に対して適用する編集演算の種類についてお話します．この３種類の演算が定義可能です．一番目が最も重要な切り抜きを作るために最も基本的な演算です． CHILD AFTER BEFORE PARENT doc <BODY> <HTML> <BODY> <BODY> <BODY> <BODY> INSERT（●, doc , X ）

Code Description and Evaluation
Client Document HTML view Web Server HTTP Access Parser Editing Processor HTML EXTRACT⇒“/HTML/BODY/…/TABLE[0]” REMOVE ⇒“/TABLE[0]/TR[1]” View Evaluator ビュー編集定義は，これらの演算の繰り返しにより定義することができます．実際には全体はこのようなコードになります．このビュー定義コードに基づいて，実際にクライアントドキュメントを取得し，ビュードキュメントを得る作業を，ビュー評価と呼びます．評価のプロセスについてお話します．ビューエバリュエイターはビュー定義コードをインタプリとし，ドキュメント取得コードに従い，ドキュメントを取得します．取得したドキュメントはパージングされ，内部ではドキュメントオブジェクトモデルとして扱われます．次に，ビュー編集定義に従って順に編集が適用され，ビュードキュメントを得ることができます．ビュードキュメントの定義と評価はこのようにして行なわれます． Webドキュメントの切り抜きを作るためにはこのような，ビュー定義を定めなければなりませんがこのコードはユーザが直接書くものではありません． GUIを使ったデモンストレーション操作を元に，システムが自動生成します． View-Definition Code doc = getHTML(“ view = doc EXTRACT(“/HTML/BODY/…/TABLE[0]”) REMOVE(“/TABLE[0]/TR[1]”);

Automatic Code Geneation
HTMLviewPad Step1 document selection getHTML(“ Step2 specification of a editing location node identification …/TABLE[0]/TR[0]/TD[1] Move to parent Back to the child Selected element name Node selection tool デモンストレーションによりコード自動生成どのような操作によって，特定のWebページを切り抜くビューポートパッドが作られるのかまず，ビューポートパッドは，ビュー編集コードを記述しないと普通のブラウザ Step3 execution of the editing generation of a view editing code

Editing Operation１ (Live-Cut)
Drag Out HTMLviewPad A copy of the code HTMLviewtPad doc = getHTML(“ view = doc EXTRACT(“/HTML/BODY/…/　　　　　　　　　; Automatically generated code .EXTRACT(“/HTML/BODY/…/TABLE[0]”)

Editing Operation 2 extract & delete HTMLviewPad HTMLviewPad
REMOVE CLIP Menu Selection doc = getHTML(“ view = doc 　　　　　.EXTRACT(“/HTML/BODY/…/TD[2]/…/TABLE[0]/”) 　　　　　　　　　　　　　　　　　　　　　　　　　　　; 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 Generated code .REMOVE(“/TABLE[0]/TR[1]/”)

Menu Selection ( Insert Type)
Editing Operation 3 insert Drop In CHILD BEFORE AFTER PARENT HTMLviewPad Menu Selection ( Insert Type) HTMLviewPad Combination of codes 　　　　doc = getHTML(“ A::doc = getHTML(“ A::view = A::doc 　　　　　 .EXTRACT(“/HTML/BODY/…/TD[1]/…/TABLE[0]/”) 　　　　　 .REMOVE(“/TABLE[0]/TR[1]/”); 　　　　view = doc 　　　　.EXTRACT(“/HTML/BODY/…/TD[0]/…/TABLE[0]/”) 　　　　.REMOVE(“/TABLE[0]/TR[1]/”) 　　　　.INSERT(“/TABLE[0]”,A::view,AFTER); A::doc = getHTML(“ A::view = A::doc 　　　　　 .EXTRACT(“/HTML/BODY/…/TD[1]/…/TABLE[0]/”) 　　　　　 .REMOVE(“/TABLE[0]/TR[1]/”); Generated code 　　　　　　　.INSERT(“/TABLE[0]”,A::view,AFTER)　　　

Data Mapping for Defining Slots
Mapping view information to slots View-Document Rendering Engine <HTML> <BODY> View rendering Event Mapping Engine Mapping of node values #MappingCode Mapping　DATA Mapping-definition code MAP( node-identifier , slot-name)

Slot Mapping： mechanism for reusing Web resources
Wrapper (HTMLviewPad) Slot Textual object Numerical value　 Pad 12,969.05 /HTML/…/content Table object TOPIX 1,311.49 日経平均ジャスダック 57.94 Table data /HTML/…/table Tag descriptor format InputField form　[ ○×Inc. ] 抽出されたWebドキュメントはWrapperオブジェクト上に表示されるだけではなくその情報をWrapperの外部で利用することができるように Web部品の持つ状態や機能がパッドオブジェクトの入出力口であるスロット値に割り当てます。この機能をスロットマッピングと呼んでいます。我々は、Webの切り抜きをただのドキュメント片と考えるだけではなく機能やデータ構造を持った部品であると考え、部品として再利用可能にするためのスロットマッピングを考えています。例えば、部品が持つ状態や部品上で発生したイベントをもスロットと対応づけます。具体例をあげますと部品の種類によって異なるスロットマッピングルールが適用されます。代表的なものを取り上げてみますが LiveCutは部品の様々な部品の貼り合わせで作られたWebページから特定の部品を選び取り出す操作とも考えられるわけです。 Form object ○×株式会社 Button form　[ false ] Submit event [ ] /HTML/…/form anchor object Character data [ Yahoo Japan ] Yahoo Japan OnClick event　[ ] /HTML/…/a

Node Mapping Rules（１） Node mapping rules
Different mapping for different node types Mapping Type Slot MAP( “/HTML/BODY/…/P/ txt()” ,” Value1”) Numerical value type Slot Type <P>12,969.05</P> 12,969.05 <OUT> Mapping value (Slot value) Value1::Text HTML Source ViewportPad Slot name MAP( “/HTML/BODY/…/TABLE[0]” ,“ Stock”) <TABLE> <TR><TD>TOPIX</TD> <TD>1,311.49</TD></TR> <TR><TD>日経平均</TD> <TD>12,969.05</TD></TR> <TR><TD>ジャスダック</TD> <TD>57.94</TD></TR> </TABLE> Character string type (CSV) <OUT> TOPIX　，1, 日経平均　，ジャスダック　，57.94 Stock::Data

Meme Media & Meme Pool meme pool drag & drop drag & drop
userB drag & drop userA drag & drop redistribution reediting userC

Node Mapping Rule (2) MAP(“ /HTML/BODY/…/A[0] “,” Link1”)
Character string type <OUT> Next Page <A href = ./next.html> Next Page </A> Link1::Text Character string type <OUT> ./next.html Link1::refURL On jumping Character string type <EventListener> Link1::jumpURL MAP(“ /HTML/BODY/…/FORM[0] “, “SearchForm”) Character string type <IN,OUT> 映画 SearchForm::Input_text_keyword <FORM action=“./search”> <INPUT Type=txt name=keyword > <INPUT Type=submit value=“検索”> </FORM> Boolean type Query issuing event <EventFire> true SearchForm ::submit Character string type <EventListener> On issuing a query SearchForm ::request

Meme Media & Meme Pool meme pool drag & drop drag & drop
userB drag & drop userA drag & drop redistribution reediting userC

Live Document Framework
Extraction of live knowledge resources to make them work as pads \12,841.76 $ Nikkei average Dow Jones average Reuse of live knowledge on the Web Estimate 日経　\12,841.76 ダウ　 $ またライブドキュメントのフレームワークでは提供されるデータの２次利用ということを考えています。従来のHTMLドキュメントなどは、提供されるデータを他のアプリケーションやシステムで直接的に利用することはできません。 OHPにはLiveDocumentフレームワークにおける情報利用の一例を示しています．この例では為替レートの情報ドキュメントから円ドルの為替データをライブドキュメントとして切り抜いてきています。切り抜いたライブドキュメントはユーザドキュメント中に埋め込んで、そのライブデータをドキュメントの他の部分のデータと連携して利用することができます。この例の場合、為替レート情報をユーザドキュメント内で為替換算に利用しています。為替の変動をリアルタイムに反映して再計算するドキュメントが実現可能なわけです。お話してきたような、流通可能なライブドキュメントシステムを実現するためには、基盤技術として、編集および流通が容易で、なおかつ機能連携が可能な複合文書アーキテクチャが必要となってきます。（1:10） total in $ currency rate 　Integration of live knowledge resources from different web pages total in yen

Explicit Slot Definition
meme pool (2D & 3D) userB userA drag & drop drag & drop redistribution reediting userC

HTML and Web Applications
　日本語を入力してください。 <b></b> 　翻訳結果 <c></c> </a> ① 人工知能 ②「人工知能」 Web server HTML <a> 　日本語を入力してください。 <b>人工知能</b> 　翻訳結果 <c>Artificial Intelligence </c> </a> ③ Internet

translated English word
Web Browser and DOM HTML Text file for a Web page DOM Document　Object　Model Internal tree representation of a Web page Input a Japanese word. <a> 　日本語を入力してください。 <b></b> 　翻訳結果 <c></c> </a> a b c 日本語を入力してください翻訳結果 translated English word translated English word Input a Japanese word. Display by a browser HTML：text DOM：tree

Wrapping a Web Application
Making some DOM nodes work as slots IntelligentPad DOM 「人工知能」日英翻訳サービス a Japanese slot English slot b c Internet 日本語を入力してください翻訳結果人工知能 Artificial Intelligence Result HTML a[1]/b[1] Identifier on the DOM：　a[1]/c[1] ⇒Users can easily wrap any services to define pads.

Federation of more than one service over the Web
Japanese to English Translation pad HTTP Japanese English Japanese to English Translation Service Internet slot connection Search engine pad HTTP keyword URL Search engine service Two pads are pasted together to compose a new service.

An Example of Required Interoperability among Bioinfomatic Web-Sevices
Homology search Result list Details of the first Paper title Paper retrieval Paper abstract tggctggcaa tggccttgct gacctcgagc cgggcccacg tggggacctt tggagcacag cctacgatcc tggtgcaagg ccggtggatg cagaggccag tccatatacc acccaggcct gcgaggagcg tggtccccac ccatccagcc catatgtgca agtgcccttg acagagaggc GSCOPE PDB+3D LEXICON Composition of an integrated tool Motif search Result list

Reediting of Live-Documents and Redistribution of Edited Results as HTML Documents
Live Cut ③redistribution user Live Documentを再編集したスクラップドキュメントはネットワーク上に公開され、再び、他者により部分的にコピーされ再編集されます。このことによりライブドキュメントはドキュメントからドキュメントへと連鎖的に流通されます。この流通の連鎖の過程で Live Document　が他のシステムと連繋されまた他のLive Documentと統合されるなどしてそこに新たな価値をもつ情報が生まれることが予測されます。 Live Documentは情報の管理や利用の新しい枠組みになるだけではなくこういったLive Documentの流通の仕組みを作ることによりメディアの流通により知識や情報価値の増幅を生んでいくネットワーク世界を実現しようとしています。 ※ビジネスモデル（４５） CGI HTML Web server XHTML Customized portfolio i-mode HTML ②reediting Live Cut intermediate IntelligentPad ①distribution Information provider

Flattening: Redistribution of a composed pad as a Web page
meme pool = the Web userB userA drag & drop drag & drop redistribution reediting userC

A JavaScript program to define slots in an HTML view

Use of a JavaScript program for an HTML-view composition

Alternative man-machine interface: C3W (Clipping, Connecting and Cloning for the Web)
composite pad Web browser Clipping Cloning = B Connecting

FAQ Web service? Copyright violation?
Web service requires API on each server side, and programming on client sides. No need. Furthermore, any Web service can be wrapped to work as a pad, and hence can be pasted together with other pads. Copyright violation? New consensus are now growing. New technologies and systems like Creative Commons for new ways of license management.

Our R&D Efforts since 1987 Meme Media Meme Pool Meme Market
IntelligentPad (2D, 1989), IntelligentBox (3D, 1995) Meme media over the Web (2D, 2002) Meme Pool Piazza (1998, 2000) the Web as a meme pool (2002) Meme Market request module & account module (1998) Meme Organization and Access Topica (2000), Relational Annotation (2003) Application memes as intellectual assets (1989~ )

Recent Book on Meme Media Technologies （John Wiley: IEEE Press, July 2003, 500ページ）

To get our systems: http://www.pads.or.jp/english/instance/index.html
For more information:

Some Other Topics on Meme Media Technologies

IntelligentBox as Meme Media (1995)
Unified Treatment of Animation and Tools Component Boxes and a Composition with them ３D

cDNA DB Visualization (1 day work)

DB Visualization Environment (Visual query components）
Application to cDNA DB Visualization (10 min. work)

Integrated Visualization of DB Records and Web Contents
UNESCO Web pages on World Heritage Local DB records (GNP of countries) DB+Web Content

Virtual Lab AVS IntelligentBox AVS slot connection #string InputFilter
#integer #string InputFilter AVS solver controller solver #Geom OutputFilter

Virtual Lab.

From Multimedia to Meme Media
Multimedia Contents Multimedia document with embedded multimedia contents Multimedia document architecture for the editing and distribution of multimedia documents Knowledge resources Compound document with embedded multimedia contents, tools, and services Meme media architectures for the editing and distribution of knowledge resources (, including functional composition)

Knowledge Media Mark Stefik (1986) The Next Knowledge Medium
The AI Magazine, 7(1): 34-46 “In addition to the study of expert systems, we must study knowledge media for the exchange of knowledge.” “Such knowledge media may work as memes.”

/ node-name [ matching-pattern : index ]
Node Identification Node identification with string matching pattern / node-name [ matching-pattern : index ] 横浜 3 - 1 ヤクルト中日 9 - 5 巨人広島 1 - 4 阪神 [0] 　node identification with indices [1] [2] /HTML[0]/…/TABLE[0]/TR[1] August 20th 更新　node identification with pattern matching しかし，ユーザが実際にwebページを切り取る場合を想定すると以下のような問題が起こります．この野球速報のテーブルの場合，ユーザは常に２行目を切り取りたいというのではなくて，特定の球団の結果の行を切り取りたいという場合が想定されます．このように，文書内の位置のみによっては，切り取り箇所を指定できない場合があります．これに対応するために，この抽出表現はパス情報に加え，パターンマッチを併用た方法をとっています．．同階層内での要素指定のために，このように，インデックスの代わりにマッチングパターンを括弧内に記述すると兄弟要素の内，パターンとマッチする文字列を含む要素を指定することが可能です．これにより，順序や，大きさが可変であるテーブルなどから，特定のキーワードを含む行を抽出するといったことを可能としています． (1:10) 横浜 3 - 2 中日ヤクルト 4 - 5 広島巨人 1 - 2 阪神 [0] /HTML[0]/…/TABLE[0]/TR[“巨人”:0] [1] [2] August 21st

Users’ Operation on a Web page
「人工知能」人工知能 b c 例：日英翻訳　　サービス日本語を入力してください翻訳結果人工知能 Internet a Artificial Intelligence b c 日本語を入力してください翻訳結果人工知能 Update of the DOM Artificial Intelligence

Yuzuru Tanaka and Kimihito Itoh

Similar presentations

Presentation on theme: "Yuzuru Tanaka and Kimihito Itoh"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Yuzuru Tanaka and Kimihito Itoh

Similar presentations

Presentation on theme: "Yuzuru Tanaka and Kimihito Itoh"— Presentation transcript:

Similar presentations

About project

Feedback