參考系統架構三

第四章參考系統架構與實作

4.1 參考系統架構

4.1.3 參考系統架構三

圖 4-3：參考系統架構三

參考系統架構三如圖 4-3，我們將系統分為四個部份：網站，註解伺服器、

客戶端瀏覽器與瀏覽器插件以及 OpenID 提供者。前段所提 diigo.com 採用了兩種的實作方式，另一種實作方式則類似參考系統架構三的實作方法，唯登入的處理部份少了 OpenID 提供者。而 Bottoni 等[26]的 MADCOW 採用的架構也是與參考系統架構三類似的。

(1) 網站

網站為使用者提供網頁內容，對於內部的網頁伺服器不需要任何變更。

(2) 註解伺服器

與使用者瀏覽器插件互動，並儲存註解內容，以及負責將使用者以 OpenID 登入之請求轉向 OpenID 提供者。

(3) 客戶端瀏覽器與瀏覽器插件

其使用者介面為瀏覽器工具列，該插件主要具有三個功能：增加頁面上的註解、儲存或取回註解以及將註解呈現於頁面內容。

(4) OpenID 提供者

與註解伺服器及使用者互動，負責驗證使用者以 OpenID 登入註解系統。

4.2 參考註解系統三實作細節

網頁伺服器包含 XML Processor 以及 OpenID Authenticator，皆使用 PHP 語言實作。

一、XML Processor

XML Processor 負責處理來自使用者瀏覽器插件所有請求如下所述：

(1) 查詢註解請求

使用者瀏覽器插件在使用者開始拜訪某一個頁面的同時所發出的 XML HTTP Request，當請求傳送到註解伺服器內的網頁伺服器時，會交由 XML Processor 處理，XML Processor 取得請求內的頁面網址，隨後向註解資料庫查詢是否該網址是否已有註解，若有，註解資料庫傳回該網址整個頁面的所有註解到 XML Processor，XML Processor 取得該網址整個頁面的所有註解後，以 XML 格式傳回給使用者瀏覽器插件。

(2) 新增註解請求

使用者對頁面加上新的註解時，使用者瀏覽器發出 XML HTTP Request 新增註解的請求與內容到註解伺服器內的網頁伺服器，該請求會交由 XML

Processor 處理，XML Processor 則將註解內容存到註解資料庫。

(3) 刪除註解請求

使用者瀏覽器會呈現該頁面已有且符合使用者存取權限的註解，而使用者只能刪除自己建立的註解，當使用者刪除頁面上的某個註解時，使用者瀏覽器發出 XML HTTP Request 刪除註解的請求到註解伺服器內的網頁伺服器，該請求會交由 XML Processor 處理，XML Processor 則要求資料庫刪除該筆註解。

二、OpenID Authenticator

OpenID Authenticator 負責處理來自瀏覽器插件使用 OpenID 登入的請求。當收到這樣的請求時，OpenID Authenticator 先去 Discover 使用者的 OpenID 來自那一個 OpenID Provider，隨後將使用者導向 OpenID Provider 的 OpenID 登入頁面，

而當使用者登入成功後，OpenID Provider 將使用者導回 OpenID Authenticator，

並回應驗證成功。

4.3 客戶端瀏覽器插件

圖 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 再將回應送回瀏覽器插件，最後將結果送回瀏覽器。

第五章功能展示

在本章，我們將展示使用本研究的註解機制的客戶端瀏覽器插件。該瀏覽器插件的主要使用者介面為瀏覽器工具列，圖 5-1 為安裝瀏覽器插件後的 Mozilla Firefox。

圖 5-1：瀏覽器工具列

該瀏覽器工具列由五個按鈕構成，如圖 5-1，個按鈕由左而右，其主要功能如下所述，我們將在本章個小節詳述這些功能：

(1) Annotate Text:文字註解功能。

(2) Annotate Image:圖片註解功能。

(3) Annotate Video:影片註解功能。

(4) Reference Link:參考連結功能。

(5) Menu:工具列選單。

本章各小節中的功能展示例子在附件一有被註解的網頁完整圖片與 XML 檔案內容。

5.1 Menu (工具列選單)

圖 5-2 ：工具列選單

工具列選單具有四個功能：登入、以 OpenID 登入，註冊新帳號和手動取回所有使用者具存取權限的註解。

5.1.1 登入

圖 5-3：使用者登入介面一

圖 5-3 網頁中間的區塊為使用者點選工具列選單的 Login 後所呈現的使用者登入介面。使用者在該介面輸入使用者名稱與密碼並登入後經 Annotation Server 驗證進入登入狀態，瀏覽器插件呈現該頁面所有使用者具存取權限的註解。

5.1.2 使用 OpenID 登入

圖 5-4：使用者登入介面二

圖 5-5：雅虎 OpenID 登入頁面

圖 5-4 中間的視窗為使用者點選工具列選單的 Login with OpenID 後所呈現的使用者登入介面。再使用者輸入使用者的 OpenID 後，系統會幫使用者導向該 OpenID Provider 的網站例如圖 5-5 使用雅虎的 OpenID，進行身分認證，待身分驗證成功後，使用者即進入登入狀態。

5.1.3 註冊

圖 5-6：使用者註冊介面

圖 5-6 網頁中間的區塊為使用者點選工具列選單的 Sign-Up 後所呈現的使用者註冊介面。使用者輸入欲建立的使用者帳號資訊並按下註冊鈕後，經

Annotation Server 驗證若無誤即新增帳號。

在文檔中一個基於XML的WEB多媒體註解機制 (頁 33-0)

第四章 參考系統架構與實作