客戶端瀏覽器插件

圖 4-5：瀏覽器插件

如圖 4-5，瀏覽器插件包含註解處理器，註解處理器由 Annotator、Renderer 和 XML Processor 構成，瀏覽器工具列為整個瀏覽器插件的使用者介面。

本研究所設計的瀏覽器客戶端插件為針對 Mozilla Firefox 的版本，在本小節 中我們先描述瀏覽器插件，再描述插件中 Annotation Processor 的 XML

Processor、Annotator、Annotator 內的 Flash 影片註解播放器、Renderer 以及瀏覽 器工具列。

4.3.1 Firefox 瀏覽器插件

Firefox 的插件開發使用了 RDF、XUL(XML User Interface Language)和

javascript

(3) Javascript

用以實作瀏覽器插件的功能。

4.3.2 XML Processor

XML Processor 功能有二如下所述：

(1) 處理來自 Annotator 的註解內容並將註解內容與使用者資訊以 XML 格式 以 XML HTTP Request 送到 Annotation Server，並等待 Server 回應，Server 回應新增成功後，XML Processor 通知 Renderer 做後續處理。

(2) 在使用者拜訪某頁面時，以 AJAX 方式發出查詢請求到註解伺服器詢問該 頁面是否已有註解，若有則註解伺服器以 XML 格式回傳使用者具有存取 權限的所有註解內容，XML Processor 收到伺服器回應後，將其解析並送 給 Renderer 處理。

4.3.3 Annotator

當使用者使用瀏覽器工具列上的不同媒體類型的新增註解按鈕或新增參考 連結按鈕時，Annotator 會依照所處理的類型不同，而做不同的處理：

(1) 為文字新增註解或參考連結時，Annotator 依照 HTML Document Object Model(HTML DOM)記下被下註解文字的位置，於使用者輸入完註解或參考 連結而按下送出的按鈕後，Annotator 將註解的內容及使用者資訊交給 XML Processor， XML Processor 將整筆註解資料以 Asynchronous JavaScript and XML(AJAX)的方式傳至 Annotation Server 加以儲存。

(2) 按下新增圖片註解按鈕時，Annotator 會使用事件傾聽器，在使用者點選新增 註解的圖片後，記下該圖片在 HTML DOM 的位置，於使用者輸入完註解而 按下送出的按鈕後 XML Processor 將整筆註解資料以 AJAX 的方式傳至 Annotation Server 加以儲存。

(3) 按下新增影片註解時 Annotator 將網頁內所有 Flash 影片播放器置換為 Flash 影片註解播放器，隨後將使用者資訊傳入影片註解播放器，並呼叫影片註解 播放器播放影片。

4.3.4Flash 影片註解播放器

Flash 影片註解播放器使用 actionscript 實作，功能有：播放影片，新增影片 註解，播放影片註解。Flash 影片註解播放器有實作 external interface call back function 可讓 javascript 從外部呼叫函式或傳遞參數到影片註解播放器。

(1) 播放影片：Flash 影片註解播放器允許 javascript 從外部傳送影片網址參數到

影片註解播放器並播放影片。

(2) 新增影片註解：在影片中或暫停時使用者隨時可以按 Add annotation 按鈕來 新增註解，按下 Add annotation 按鈕後，使用者需在影片畫面上用滑鼠畫出 要被註解的區塊，而後再按 mark left 按鈕，標記註解開始的時間，以及 mark right 按鈕，標記註解結束的時間，隨後使用者輸入註解內容，而在使用者按 送出註解按紐後 Flash 影片註解播放器將註解以 XML 格式傳至 Annotation Server 加以儲存。

(3) 播放影片註解：Flash 影片註解播放器在播放影片前先向 Annotation Server 查 詢該影片是否已有使用者具存取權限的註解，若有收到 Annotation Server 傳 回來的註解，則將這些註解依據註解的資訊如註解位置和註解開始與結束時 間，來劃出被註解的區塊，讓使用者將鼠標移至被註解區塊時，顯示註解內 容，而鼠標移出時則隱藏註解內容。

4.3.5 Renderer

Renderer 負責將來自 Annotator 以及 XML Processor 的註解資料依據註解的 不同類型，以不同的方式呈現給使用者。

4.3.6 瀏覽器工具列

瀏覽器工具列的使用者介面由三個按鈕所組成，分別是畫記與增加註解文 字、新增圖片註解和新增影片註解。這些按鈕與按下按鈕所進行的動作被描述在 XUL 檔案中，而按下按鈕所進行的動作被用 javascript 語言實作在 Annotator 與 Renderer 中。在這邊我們描述按下各按鈕所進行動作。

解區塊旁新增一個文字輸入區，讓使用者輸入註解，在使用者輸入註解 並按下文字輸入區的儲存後，被註解區塊的形狀、位置及註解文字都被 送到 XML Processor 處理。

4.3.7 註解交換流程

在完成了參考註解系統三後，整個系統新增註解與查詢註解的流程在本小段 加以描述。

圖 4-6：增加註解流程圖

如圖 4-6，使用者一般瀏覽網頁時，會從網頁伺服器取回網頁，接下來若使 用者在瀏覽的頁面加上註解並按下送出按鈕後，瀏覽器插件將註解以 XML 格式 傳送到 Annotation Server，並等待 Annotation Server 回應新增成功後，即將註解 加入使用者正在瀏覽的頁面。

圖 4-7：查詢註解流程圖

一般使用者瀏覽網頁時瀏覽器會發出 Webpage Request，網頁伺服器收到請 求，會送出回應給使用者瀏覽器，瀏覽器收到網頁後，呈現給使用者整個網頁內 容，因此只涉及網頁伺服器與使用者瀏覽器。

而如圖 4-7，我們的系統在原有的使用者瀏覽器與網頁的 HTTP 架構上加上

了註解伺服器，因此當使用者拜訪某一個頁面的同時我們使用瀏覽器插件以 XML HTTP Request 發送查詢註解的請求到註解伺服器查詢該頁面網址是否已有 註解，若有，註解伺服器使用 MAXML 傳回整個頁面的所有註解，隨後瀏覽器 插件將這些註解加入原生的頁面而呈現給使用者。

4.3.8 使用 OpenID 登入流程

圖 4-8：使用 OpenID 登入流程圖

在使用者輸入 OpenID 後，瀏覽器插件會將 OpenID 送到 Annotation Server，

而 Annotation Server 進行 Discover 找到該 OpenID 提供者後，會重新導向該 OpenID 提供者的登入頁面，待使用者輸入密碼後，OpenID 提供者再將登入的回 應送回 Annotation Server，而 Annotation Server 再將回應送回瀏覽器插件，最後 將結果送回瀏覽器。