行照片註解的 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)，讓使用者可以 在第一時間看到他想要的註解，這部分本論文在總攬頁面與照片註解頁面都有 實作。
總攬頁面主要根據搜尋的 input 抓取關鍵字加入 local
storage.highlight 暫存，根據回傳的搜尋結果與 highlight 作比對，符合的 註解則修改 CSS，展現出強調效果，如 3.3.5 節 Fig-12。
照片註解頁面，在標記照片的時候需要將滑鼠移到照片上才會顯示出照片 內容的註解，但是如果是搜尋到的照片，我們希望可以在頁面 load 進來之後 直接顯現註解，讓使用主可以把注意力放在符合搜尋的註解上面，不需要再去 將滑鼠移動到照片上、移動到註解的範圍內才會顯示註解。這部分也是藉由 local storage.highlight 傳遞搜尋關鍵字，再經由迴圈比對所有註解內容，
將符合的結果由 jQyery 觸發顯示的 function。
4.3 成果評估
本小節評估的方法會以照片做為標記目標，在照片中建立的註解資料，依 據這些註解進行搜尋，由各種搜尋結果的準確度做評估。依照 4.1 小節的情境，
我們測試案例會以系上的活動照片為主。
‧
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 33 ~
C 多重搜尋將多種類型同時進行搜尋，每個條件以 and 做結合，為了是要讓使用者做 更準確的搜尋。
舉例說明：
(一) 時間+人名
如果有一位老師在學校服務很久，我們希望找某個時期這位老師的照片，
這時可以在多重搜尋，在類型為時間的欄位輸入起使與結束日期：
2003/1/1、200512/31，並在類型為人物的欄位輸入老師的名稱，則可以 找到這位老師 10 年前在系上的照片，提高準確度。
(二) 地點+人名
要搜尋某個同學在某個特別的場合出現的照片，只需要在地點欄位打上關 鍵字：操場，在人物的欄位輸入名稱，就可以找到這位同學在操場上出現 的照片。
目前 ABC 三種搜尋結果都可以呈現出預想中搜尋的結果，有初步的成果。
‧
將圖片標記工具結合 Crowd sourcing 與社群網路，會是未來比較值得研 究的議題：
1. 建立帳號系統來管理使用者，除了可以紀錄圖片標記者，還可以加入社群 的概念：好友、共同社團…等等，如此在權限設定的部分就可以有更細部
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 35 ~
設定。使用者在建立註解的同時可以設定哪些人可以對這個註解執行 RCUD 的動作，是所有使用者或是朋友或是只有自己。如 Fig-25，在原本的 JSON 中，加入權限資料表，如此可以將權限做到更細微的管理。「read」表示哪 些使用者可以看到這個註解；「update」表示修改註解內容的權限；「delete」
是刪除註解；「admin」則是修改註解的權限設定。四個動作後面的串列：
空白表示權限開放給全部使用者；填入使用者帳號，表示動作只開放給串 列中的使用者。如此，就有比較完整的權限管理系統，也可以將社群中的 帳號輸入串列中，達到大家共同討論編輯的效果。
Fig- 25 權限 JSON 資料表
2. 在共同社群中的使用者，可以發揮 Crowd sourcing 的精神，共同指認或標 記照片。另外，新增註解的回應功能，在使用這標記照片的時候，可以在 對註解內容進行討論，如 Fig-25，當滑鼠移置註解時，下方會出現使用者 對此做回應的討論內容。這樣除了可以增加照片標記的精準度，還可以記 錄使用者行為，增加研究的價值。討論過後如果需要修改註解內容，則就 可以根據上述的權限設定，由符合權限的使用者進行修改。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 36 ~
Fig- 26 使用者討論
3. Crowd sourcing 是希望借用眾人之力來完成事情，所以需要提供比較方便 的工具給予使用者。對於重複標記的註解可以出現提示給使用者，甚至是 自動標記，減少使用者負擔。自動標記註解這部分比較困難，可能需要用 到人臉辨識的技術。在註解輸入的時候出現提示讓使用者選擇是比較可行 的辦法：在同一批上傳的照片中，統計某些註解輸入的頻率較高時，我們 可以把這註解的內容當作提示，當使用者要輸入新的 annotation 時給予選
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 37 ~
擇，如同 Google 搜尋會出現的提示一般，減少使用者重複輸入相同註解的 負擔，節省時間。
‧
[1] Amazon Mechanical Turk： http://aws.amazon.com/cn/documentation/mturk/, Accessed on January 27, 2014.
[2]T,Gotz. and O,Suhre. Design and implementation of the UIMA Common Analysis System. in04 IBM SYSTEM JOURNAL, pp.476-489
[3]Apache UIMA：http://uima.apache.org/, Accessed on January 27, 2014.
[4] Lux,M. Caliph & Emir：MPEG-7 Photo Annotation and Retrieval, in 09 Proceedings of the 17th ACM international conference on
Multimedia,pp925-926
[5]Sarvas,R., .User-centric Metadata for Mobile Photos, In Proc. of MobiSys 2004. ACM Press, New York, NY, 2004, 33-35.
[6] Kustanowitz,J. and Sheiderman,B . Motive Annotation for Personal Digital Photo Libraries：Lowering Barriers While Raising Incentives , in Proceeding
CHI’07 Proceedings of the SIGCHI Conference on Human Factors in Computing Systems
[7] OKFN-Annotator：http://annotatorjs.org/, Accessed on January 27, 2014.
[8] Catherine,C., and Palo,A. Annotation: from paper books to the digital library.In proc. ACM international conference on Digital libraries1997,pp 131-140 [9] Daren C. Crowd sourcing as a Model for Problem Solving, in 08 Sage
Publications The International Journal of Research into New Media Technologies, pp 75-89
[10] jQuery Image Annotation：http://flipbit.co.uk/jquery-image-annotation.html, Accessed on January 27, 2014.
[11] Manjunath, B.S., Salembier,P. and Sikora, T. Introduction to MPEG-7, Wiley 2002
[12]Wilhem, A., Takhteyev, Y., Sarvas, R. Van House, N., and David, M. Photo Annotation on a Camera Phone. In Proc. of CHI2004, ACM Press, 2004, pp1403-1406
[13]Munnelly, G., Hampson, C., Ferro, N.,and Conlan, O. The FAST-CAT:
Empowering Cultural Heritage Annotations. In Proc. Digital Humanities 2013, University of Nebraska, Lincoln 2013, pp. 320-322.
[14] 林宸均，「網路使用者圖像標記行為初探-以 Flickr 圖像標籤為例」，國立 台東
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 39 ~
大學教育學系(所)教學科技碩士班[15] Sara,S. L. Some Issues in the Indexing of Images. Journal of the American Society for Information Science 45, no. 8 (1994): 583-88 .
[16] Matthew,P. Gaps in Keywords: A study into the ‘semantic gap’ between images and keywords in users of the Witt Library, Courtauld Institute of Art, in partial
[16] Matthew,P. Gaps in Keywords: A study into the ‘semantic gap’ between images and keywords in users of the Witt Library, Courtauld Institute of Art, in partial