國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 14 ~
第三章 研究方法及架構
本章節會把上面提到的作法作為參考，結合他們的特點，設計出一個照片 詮釋資料標記工具，讓它可以進行標記、註解的儲存。同時，我們也會闡述此 工具的設計的理念。
3.1 系統架構
我們以 OKFN Annotator 作為架構參考，將其運用在圖片標記系統裡面。經 過一番比較，我們決定採用 git-hub 上的開放源碼專案 jQuery Image
Annotation[10]這個工具為基礎，針對我們的需求進行大幅改寫。這是一個網 頁上 jQuery 的 plug-in，讓我們可以對圖片上的任一部分進行標記，寫入註 解，如 Fig-8。
Fig- 8 jQuery Image Annotation 的使用範例
‧
接著我們說明照片上的 metadata 如何設計。這些 metadata 包括：(1)在照 片上註解的座標：top、left、width、height。(2) 註解種類：Who、Where、
When…等等。(3) 註解內容：包括問題與回答。讓這些 metadata 可以讀寫正 常，並能有效管理，甚至是跨平台傳遞都是要解決的課題。
使用 JSON(JavaScript Object Notation)做為與後端(back-end)溝通的資 料格式，將每張照片的 metadata 儲存進 JSON，而會有兩種 JSON 格式，成如 上述的兩類註解而設計，如 Fig-9。JSON 內容的解說(表 4)，其中這兩種註解 都以 photo-id 作為連結，因此兩種 JSON 都包含這個資料，相同的 photo_id 表示註解對應到相同的照片。
Fig- 9 兩種 JSON 格式
‧
(user interface ,UI)設計細節的探討。第一階段，上傳照片：
‧
3.3.2 註解類型(Annotation Type )
本工具除了要讓使用者標記照片外，還希望可以幫助使用者在大量的照片
3.3.3 權限(permission)控管
本論文一開始希望可以有網路社群的功能，因此參考 OKFN Annotator 工 具的權限設定管理，雖然最後網路的社群功能並沒有實做出來，但是我們還是
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 18 ~
表格 5 權限簡化內容 Permission 內容
read：誰可以看到這個註解。
admin：誰可以修改此註解的權限。
update：誰可以編輯此註解。
delete：誰可以刪除此註解。
第二階段編輯註解頁面，如 Fig-11。
Fig- 10 註解編輯頁面 第三階段，搜尋照片：
3.3.4 Input
本論文在搜尋輸入關鍵字的部分，分成兩大類。第一種為單一關鍵字的快 速搜尋，如同 Google 搜尋一般；第二種為應用前面註解類別的特性的「多重 搜尋」。為了讓搜尋更為精準，這兩種搜尋都會讓使用者選擇註解的類型，如 Fig-11。在快速搜尋的部分，使用者填完關鍵字可以選擇下面的類型按鈕，增 加搜尋的精準度。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 19 ~
Fig- 11 搜尋輸入介面
當使用者想設定多個搜尋條件的時候，我們也有設計 UI 讓使用者輸入，
根據條件輸入欄位中，則可以使用各個欄位相對應的類型來進行更精準的搜 尋。
3.3.5 Output
搜尋結果的顯示我們在這邊分成兩部分：第一，搜尋結果總覽的部分；第 二，點選搜尋結果，進入單張照片觀看註解部分。以這種方式呈現主要是參考 Google 搜尋結果的呈現方式，在 Google 網頁上呈現搜尋結果的總覽，再根據 使用者的選擇，連結到所要的網頁。目前我們的做法也會如同 Google 搜尋，
如 Fig-12。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 20 ~
Fig- 12 搜尋結果頁面 3.3.5.1 總攬頁面
此頁面頂部為 3.3.4 節的 input 畫面，按下搜尋按鈕之後，系統會將搜尋 結果直接在下方顯示。這邊使用 AJAX(Asynchronous JavaScript and XML)技 術，當使用者送出表單向網頁伺服器(web server)做請求的時候不必傳回新的 頁面，直接藉由 JavaScript 處理來自 sever 的回應。這樣的做法減少了 server 與瀏覽器之間的資料傳輸量，同時許多處裡可以在用戶端(client)上完成，減 少 server 負擔，讓回應更為快速。除了效能的需求，這樣設計也更為直覺，
使用者如果需要再次搜尋並不用重新回到上一頁。
顯示的部分會將每張照片的註解顯示出來，並將符合搜尋的註解強調 (highlight)出來供使用者觀看，確認是不是他想要的註解，如同 Google 每個 連結下的文字說明。此外還會有配合後端(back-end)的推薦系統，顯示這次關 鍵字的相關推薦搜尋，希望可以符合使用者期望。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 21 ~
3.3.5.2 細部註解頁面這部分的頁面與第二階段標記照片的頁面外觀是相同的，顯現出照片的各 個註解。因為這是搜尋的結果，我們希望設計出像 Google 一樣，可以強調 (highlight)搜尋結果的 UI 設計。原本的設計是使用者將滑鼠移動到照片上才 會顯示出內部註解，現在我們增加一段 JavaScript code 去觸發這個動作，在 搜尋頁面 load 進來的時候可以直接顯示註解並且看到符合搜尋的註解內文，
達到強調的效果，比使用者去移動滑鼠來觀看註解直觀。
3.3.6 Date Picker
不管是在註解的撰寫或是搜尋條件的輸入，只要是要填寫時間的地方，本 工具都使用 JQuery Datepicker 讓使用者選擇，如 Fig-13。
Fig- 13 Datepicker
這樣的設計並除了網頁安全設計所說「不要輕易相信使用者輸入的資料」
的防範，而是日常生活中使用的日期格式過多，同一天的日期有不同的表示方 法，有西元、有民國，年度的位置有在前、有在後…等等，每個使用者的習慣 不同。引入 Datepicker，除了讓使用者有選取代替輸入的便利性，更重要的 是有防呆機制(Fool-proofing)：免除使用者輸入錯誤的日期，如：2/30 或起
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 22 ~
始日起晚於結束日期，如：2014/7/30~2013/6/01。避免須要進行錯誤資料清 洗(Data Cleaning)步驟。
‧
行照片註解的 CRUD( create, read, update and delete)操作。首先從使用 者的角度切入使用者情境(User story)，然後討論實作的流程，以及最後根據‧
擇要上傳的檔案，並在用戶端(client)以 script 來記錄上傳的檔案名稱與路 徑，如 Fig-15。Fig- 15 上傳檔案之 script
根據 3.3.1 小節相簿的實作部分，採取 JQuery Lightbox plugin – colorbox。所謂的 Lightbox 就是在網頁中開啟一個視窗(非新視窗)，而開啟 的視窗會出現在網頁正中央，並且淡化網頁其他部分，讓使用者注意力集中在 中央的視窗，Colorbox 是「輕量級、可客製化的 JQuery Lightbox plugin」。 將 Colorbox 運用在相簿資料輸入的視窗上，除了不用再連結的新頁面，也有
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 25 ~
Fig- 16 colorbox 呈現效果
4.2.2 照片之詮釋資料類型
Fig- 17 註解類型的選擇
根據 1.2.3 小節的 Shatford mode facet matrix，圖像有很多不同的層 面，我們希望根據這些層面給予註解不同的類型(type)做為區別，達到分類的 目的。
‧
誠如 3.2 節提到，我們將以 JSON(JavaScript Object Notation)做為與 後端伺服器溝通的資料交換語言，如 Fig-18。JSON 是個以純文字為基礎去儲 存和傳送簡單結構資料，我們可以透過特定的格式去儲存任何資料，也可以透 過物件或陣列來傳送較複雜的資料。相較於傳統 Web Application 都是透過 XML(Extensible Markup Language)做為資料傳遞格式，如 Fig-19，JSON 的優 點在於：
1. 相容性高。
2. JSON 格式可讀性遠高於 XML，容易瞭解、修改。
3. 支援許多資料格式 (number, string, Booleans, nulls, array, associative array, object)。
4. 許多程式都支援函式庫讀取或修改 JSON 資料。
5. 表達相同的資料 XML 的資料量遠大於 JSON。
Fig- 18 JSON 比較圖
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 27 ~
Fig- 19 XML 比較圖4.2.3 詮釋資料格式
每張照片都會有自己的 JSON 資料表，照片上的每個註解，我們都會以 key-value 的形式紀錄在 JSON 中。以 3.2 節的內容，照片註解分為背景註解 與內容註解，照片的背景註解與照片是一對一關係，所以在 JSON 中它們的數 量並不會增加；內容的註解則會根據使用者標記數量的多寡而增加或減少，這 部分會經由 JavaScript code 在 JSON 中進行動態修改。背景註解的 key 即為 類型(type)，而內容註解會有一個名為 type 的 key-value 去記錄類型。
每張照片 JSON 格式，如 Fig-20。time、place、event、title 都是背景 註解，只有一個，數量不會增加；而 annotationdata 是一個 array 記錄著照 片內部的註解，展開會如 Fig-21，會紀錄這個註解再相片中的位置(top、left、
height、width)，type 與 text 則記錄註解內容，editable 則是權限的控管。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 28 ~
Fig- 20 annotation in JSON
Fig- 21 內容註解 in JSON
4.2.4 照片之詮釋資料儲存與傳遞
進入標記照片的階段主要將使用者撰寫的註解暫存起來，之後再批次 (Batch)傳遞到後端資料庫，避免發生遺漏的狀況。以前在 client 端可以用 cookie 暫存資訊，但是在使用上會有些不便：
1. 不管是否會用到 cookie 中的資訊，在每個 HTTP request 都會被送到 server 端，會降低執行效能與浪費網路頻寬。
2. Cookie 送出的資料並沒有加密，除非用 SLL 技術加密，否則不適合放 重要的隱私資訊。
3. Cookie 的大小限制是 4KB，無法放太多資料。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 29 ~
現在 HTML5 技術純熟，web storage 提供開發者更大、更安全的空間可以暫存 資料。 Web Storage 分為兩種：local storage 和 session storage，本論 文使用的是前者。local storage 的生命週期較長，且儲存的資料可以跨瀏覽 器分頁(tab)存取。
當使用者輸入資料後，會先將註解的各種資訊以 JSON 形式紀錄在 local storage 中名為 result 的變數中暫存，如 Fig-22。
Fig- 22 JSON in local storage 4.2.5 權限實作
在原本的 jQuery Image Annotation 的工具之中，editable 的變數作為 註解可不可以修改的判斷，只是並沒有提供使用者 UI(user interface)去做 修改，必須從 command line 做修改。本論文為了可以供使用者選擇可修改與 否，新增了 UI 介面，如 Fig-10 中的 checkbox。根據使用者使否有勾選 checkbox，
呼叫 JavaScript 函式修改 JSON 中 editable 內容，來達到權限控管的目的，
如 Fig-23。我們會將更改的權限設定存放於 local storage 中變數名為 editable 的 JSON 中，最後要將註解上傳至端儲存時，才會將 JSON-editable 內容修改至 JSON-result 中，並上傳新的 JSON-result 內容。
‧
A. AJAX (Asynchronous JavaScript and XML)
在本文 3.3.5 節有介紹，在呈現搜尋結果的時候，我們會有兩個部分：總
2. 使用 JavaScript 操作 DOM(Document Object Model)進行動態顯示。
3. 使用 XML 和 XSLT 進行資料交換及相關操作。
4. 使用 XMLHttpRequest 物件與 Web 伺服器進行非同步資料交換。
本論文在這部分主要是使用第二點，用 jQyery 對 DOM 進行動態操作。我們將 搜尋的結果使用 appendTo()顯現在搜尋頁面下方，appendTo()是在選擇的 DOM 元素之內插入指定的內容，以 w3c 為範例:Fig-24。
‧
Fig- 24 example of appendTo ()
當按下 button 的時候，appendTo()會在 P 元素之內插入：<span>Hello World!</span>，達到不用更新整個頁面卻能修改頁面顯示的方法。
B. Highlight
我們希望將照片中符合搜尋的註解可以強調(highlight)，讓使用者可以 在第一時間看到他想要的註解，這部分本論文在總攬頁面與照片註解頁面都有
我們希望將照片中符合搜尋的註解可以強調(highlight)，讓使用者可以 在第一時間看到他想要的註解，這部分本論文在總攬頁面與照片註解頁面都有