第四章 知識標註學習系統
第三節 系統架構
國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
（二） 程式註解文件
為了讓 KALS 的程式碼更容易為程式開發者所閱讀並適用於整合開發環境，
KALS 在 PHP 與 JavaScript 這 兩 種 程 式 語 言 的 撰 寫 上 ， 各 別 採 用 了 PHPDoc(Eichorn, 2007)與 JSDoc(Eschen, 2008)兩種程式註解文件來撰寫程式碼的 說明。PHPDoc 與 JSDoc 皆仿效自知名的 JavaDoc，以內含敘述與標籤的文件塊
（DocBlock）格式撰寫，主要用於說明物件導向設計中的屬性與方法，包括用途 敘述、輸入參數、回傳資料型態等等的細節。
（三） 整合開發環境
KALS 的程式碼撰寫作業主要是利用整合開發環境（Integrated Development Environment，簡稱 IDE）進行。在以輔助程式開發作為主要目的的特色上，IDE 提供了程式碼辨識與標亮、類別瀏覽器、自動完成（auto-complete）、語法偵錯、
程式自動排版等多種功能，有助於程式撰寫作業能夠保持準確、簡潔與提昇效率，
並且方便維護整個系統。
由於 IDE 支援各種程式語言的程度不一，KALS 在開發過程中同時使用兩種 開放原始碼的 IDE：後端程式語言 PHP 使用 NetBeans 6.9 (Oracle Corporation, 2011)，如圖 4 - 2 的開發過程畫面；而 JavaScript 的撰寫則採用 Aptana Studio 2 (Aptana, Inc., 2010)。
第三節 系統架構
KALS 是一種以物件導向設計、採 MVC 架構的大型網頁應用系統。為了將 合作式閱讀標註功能整合到資料網站，KALS 主要採 AJAX 模式溝通資料。以下 各別介紹 KALS 的架構設計、佈署環境以及各元件的設計概況。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 4 - 2 NetBeans 整合開發環境的開發過程畫面
一、 架構設計
KALS 的程式採用物件導向設計（Object Oriented Design，簡稱 OOD）。各 種功能會被撰寫成包含資料屬性（attribute 或 property）與行為方法（method）
的類別（class）。類別之間可利用繼承機制（inheritance）以提高程式的重用性，
並搭配多載（overload）與重載（override）等機制來實現靈活的擴充性。
為了能更有效率地開發系統，KALS 參考了許多物件導向設計專家提出的設 計模式(Gamma, Helm, Johnson, & Vlissides, 1995; Eric Freeman & Elisabeth Freeman, 2005)。其中 KALS 最主要採用的，是常見於大型系統中的複合設計模 式 MVC (Model-View-Controller; Reenskaug, Wold, & Lehne, 1996)。KALS 以 MVC 架構將系統權責分離成模型元件（Model）、顯示元件（View）與控制元件
（Controller）三種，以利程式的修改與簡化、降低程式之間的耦合度（Degree of Coupling），並且提高重複利用的價值。
二、 佈署環境
在說明各個元件之前，必須先介紹 KALS 的佈署環境，以便瞭解上述三種元 件的定位。KALS 設計的主要目的之一，是以混搭形式在任意網頁上提供合作式
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
閱讀標註功能的服務。參考 Wolfe(2002)的建議與 Chen 等人(2008)所提出的系統 架構，KALS 的系統架構與佈署環境規劃如圖 4 - 3 所示。包括 KALS 在內，KALS 佈署環境中的角色主要有三種：
1. 瀏覽使用者端（Browser Client）：係指瀏覽資料網站的資料並使用 KALS 標 註功能的讀者。在本研究的實驗中，瀏覽使用者端就是實驗對象。
2. 資料網站（Data Host）：係指提供網頁讓讀者閱讀瀏覽的資料提供者，不論 是動態網頁或是靜態網頁皆可作為資料網站的角色。在 KALS 佈署環境中，
資料網站必須先以 JavaScript 引用語法安裝 KALS 顯示元件（View），以讓 瀏覽資料網站的讀者能使用標註功能。在本研究的實驗中，資料網站是一份 以 HTML 靜態網頁撰寫而成的閱讀文章。
3. KALS 伺服器（KALS Server）：提供合作式閱讀標註功能。安裝在資料網站 的顯示元件會與 KALS 伺服器進行資料傳遞的動作，而 KALS 伺服器中的 控制元件（Controller）與模型元件（Model）則是扮演負責儲存與提供標註 資料的角色。
圖 4 - 3 知識標註學習系統架構與佈署環境示意圖
View
1. action
5. display 2. request
4. response
Controller
KALS
Model
3. data process
Browser Client
Data Host
Knowledge Extraction Mechanism
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 4 - 3 中三種角色之間的運作流程如下：
1. 瀏覽使用者端的讀者在安裝了 KALS 的資料網站上，利用顯示元件進行標註 動作（action）。
2. 顯示元件發出請求（action）給 KALS 伺服器中的控制元件。
3. 控制元件處理這個請求，並且與模型元件進行資料的處理（data process）。
4. 控制元件將資料回應（response）給顯示元件。
5. 顯示元件回應讀者的閱讀標註動作，並將資料顯示（display）在畫面上。
必須注意的是，在這個佈署環境中，KALS 伺服器並不會直接對於瀏覽使用 者端提供服務，而是必須透過資料網站、搭配靜態網頁資料，才能提供完整的標 註功能。
三、 模型元件（Model）
模型元件主要實作所有 KALS 中資料的基本類別，包括網域（Domain）、網 頁（Webpage）、標註（Annotation）等，並提供資料給控制元件進行邏輯運算。
模型元件的類別會與資料庫進行資料的存取，也負責與外部服務進行溝通，包括 中文斷詞系統 CKIP。而本研究發展的「知識萃取機制」也是隸屬於模型元件中 的一部分。
模型元件的程式大部分都應用了泛用物件（Generic Object）、泛用合集
（Generic Collection）與迭代器（Iterator）等工具類別(Lecky-Thompson, et al., 2005) 。 如 此 不 僅 能 夠 降 低 重 複 開 發 的 成 本 ， 也 具 備 了 延 遲 實 體 化 （ lazy initialization）的特性。KALS 與資料庫的溝通主要是使用 CodeIgniter 內建的 Active Record 類別。該類別以物件形式包裝，能夠讓程式在執行期動態地改變查詢語 法，提昇開發的靈活度。再輔以快取（cache）機制的設計，暫存重複存取的物 件資料，加快系統運作的效率。
模型元件的程式語言為 PHP，以 CodeIgniter 框架進行開發。開發過程中採 用了測試導向開發方法（Test-driven development），以 456 項單元測試（unit test）
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
來確保程式能夠正確運行。
四、 顯示元件（View）與控制元件（Controller）
顯示元件實作了使用者端所看到的所有標註功能介面，並且讓資料網站得以 擁有合作式閱讀標註系統的功能。顯示元件是以 JavaScript 撰寫而成，KALS 利 用它進行標註功能的載入、與資料網站的整合、標註資料的呈現等工作。顯示元 件同時也負責建立起資料網站與 KALS 伺服器兩邊溝通的橋樑，並以觀察者模式
（Observer pattern）協調派送者（dispatcher）與觀察者（listener）等程式之間的 事件處理。
負責與顯示元件溝通的則是控制元件。它是以 PHP 程式撰寫而成，同樣位 於 CodeIgniter 框架之中。KALS 對控制元件的定位只是接收並回應顯示元件的 中介角色。控制元件在收到顯示元件的請求（request）之後，會利用模型元件進 行資料的存取，再將輸出的資料組成 JSON（JavaScript Object Notation）格式，
最後將之回應（response）給顯示元件。
顯示元件與控制元件之間的資料傳遞是採用 AJAX（Asynchronous JavaScript and XML，簡稱 AJAX）模式，顯示元件以 HTTP 通訊協定（HyperText Transfer Protocol）中的 GET 或 POST 方式傳送資料給控制元件，然後兩者之間再 JSONP 技術接收控制元件回傳的 JSON 資料。
JSONP（JSON with padding）是一種在 AJAX 中進行跨網域資料傳遞應用的 技術。然而原始的 JSONP 僅能透過 GET 方式來傳遞資料，不僅資料傳輸上限難 以應付大量標註資料的需求，而且 CodeIgniter 的設計上也限制以 GET 方式傳送 複雜的請求。對於這個問題，KALS 利用快閃資料（flash）的 session 機制設計 出以 POST 方式傳遞並接收資料的方法，就能夠達到解決跨網域之間大量資料傳 輸的問題。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y 第四節 系統運作流程
KALS 與「知識萃取機制」是本研究所發展的主要研究工具與提昇讀者閱讀 理解能力的機制。實驗的佈署環境是以閱讀文章作為資料網站，而實驗對象作為 瀏覽使用者端的方式來配置，並在實驗的過程中蒐集各種資料以進行後續的研究 分析。其系統運作流程示意圖如圖 4 - 4 所示，各步驟說明如下：
1. 實驗對象利用網頁瀏覽器開啟安裝了 KALS 的閱讀文章。
2. 系統將閱讀文章內容顯示給實驗對象，而 KALS 則從資料庫中的標註歷程資 料表中取出標註資料，並將標註資料與功能介面整合至閱讀文章中。
3. 實驗對象透過 KALS 撰寫閱讀標註，並將標註資料傳送給 KALS。建立的標 註資料除了標註範圍、建立日期、筆記之外，還包括「標註範圍長度」、「標 註範圍詞性」、「標註範圍位置」、「標註策略類型」等標註特徵。
4. KALS 將標註資料存入標註歷程資料表中。
5. KALS 將此標註特徵傳遞給 KALS 中的「知識萃取機制」。
6. 「知識萃取機制」將從標註歷程資料表中取得標註共識資料，包含「標註範 圍共識」、「標註喜愛共識」。
7. 根據標註資料中的標註特徵與標註共識，以模糊綜合評判分析「標註分數」， 並將結果儲存於資料庫的標註分數資料表中。
8. 「知識萃取機制」根據取得之讀者標註的「標註分數」，來判斷是否要產生 標註建議與標註推薦。如果此標註符合建議的門檻，則「知識萃取機制」將 開始著手產生標註建議，並從標註分數資料表中取得分數較高的標註資料作 為標註推薦。
9. 「知識萃取機制」將分析讀者標註的標註特徵，建立對應的標註技巧建議，
並選取優質標註作為標註推薦，最後成為標註建議。
10. 將標註建議回饋給實驗對象。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 4 - 4 知識標註學習系統（KALS）與知識萃取機制運作流程示意圖
第五節 系統操作畫面
本節將以系統實際運作的畫面來說明 KALS 的主要功能，包括操作介面、標 註範圍的選取、新增與瀏覽標註、瀏覽討論與回應、標註建議、以及說明。
一、 閱讀文章與 KALS 操作介面
當實驗對象以網頁瀏覽器開啟安裝了 KALS 的閱讀文章之後，KALS 會逐步 地在閱讀文章的靜態網頁上載入工具列、進行初始化可標註範圍等動作。圖 4 - 5 為 KALS 開啟了各種功能的畫面，包括上方的工具列、左方的標註工具、右下角 的標註建議工具、閱讀文章上的標註範圍選取提示、與閱讀文章上以各種顏色標 示的標註範圍。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 4 - 5 閱讀文章與知識標註學習系統介面
二、 選取標註範圍
在進行新增或是瀏覽其他人的標註之前，實驗對象必須先選取指定的標註範 圍。KALS 標註範圍的選取係透過選取提示工具進行。當實驗對象的滑鼠移至要 選取的文字上時，黑色白字的選取提示工具就會顯示在該文字上方，如圖 4 - 6a 所示。實驗對象便可藉由點選選取提示工具來確定標註範圍的起點，而此時被選 取的文字也會被藍色的框線包圍。接著實驗對象再以同樣的方式選取標註範圍的 終點，如圖 4 - 6b 所示。當標註範圍的起點與終點都確定之後，KALS 會將標註
在進行新增或是瀏覽其他人的標註之前，實驗對象必須先選取指定的標註範 圍。KALS 標註範圍的選取係透過選取提示工具進行。當實驗對象的滑鼠移至要 選取的文字上時，黑色白字的選取提示工具就會顯示在該文字上方，如圖 4 - 6a 所示。實驗對象便可藉由點選選取提示工具來確定標註範圍的起點，而此時被選 取的文字也會被藍色的框線包圍。接著實驗對象再以同樣的方式選取標註範圍的 終點，如圖 4 - 6b 所示。當標註範圍的起點與終點都確定之後，KALS 會將標註