第四章 系統架構與建置
4.4 實作系統環境配置與介紹
4.4.2 系統平台介紹
國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
WebSphere Application Server 是一套 Web 應用伺服器，該架構是使用開放標準的程式 設計模型，包括 Java EE 6、Web 2.0 、XML 和動態腳本等功能。IBM WebShpere sMash 包含了開發、佈署與網站管理的部分，所以本系統在實作時只需專注於開發核心程式，
不需耗費太多心力於網站建置上。
開發工具及程式語言介紹
本系統的開發工具是使用 Eclipse，核心程式語言為 JAVA，使用者介面則是 Web 程式 語言(html、javascript、css 等程式語言)。並將此系統建構於 Project Zero 的 framework 之 上 。 該 Framework 支 援 建 構 於 JAVA 平 台 下 的 網 頁 動 態 腳 本 語 言 (Script language)Groovy12，且具有跨平台性，也所以非常符合我們實作開發上需求。而使用 JAVA 程式語言是因為該語言適合跨平台的應用，也提供多種的套件(Library)可供使 用，基本的存取檔案的功能皆支援，有利於此系統對於相片資訊的存取、xml 檔案分 析以及演算法的運用。
Web 程式語言易學易懂且網頁程式發展多年，目前市面上有更有各種 UI 套件，只需 要引用進程式裡，即可使用。本系統除了使用傳統的 Web 程式語言(HTML、CSS、
Javascript)，為了讓使用者有不干擾及更友善的介面，我們使用了 AJAX13的技術，讓 用戶端與服務端的串連於背景作業，並加入了 JQuery UI14套件為介面帶來更完整便 利的呈現。
4.4.2 系統平台介紹系統操作流程圖
12 "Groovy," in http://groovy.codehaus.org/
13 "AJAX wiki," in http://en.wikipedia.org/wiki/Ajax_(programming)
14 "JQuery UI," in http://jqueryui.com/
58
‧
Input Story Template
Similarity Model Retrieval
Recommend storytelling photo
Storytelling Function
Story Show Authoring end
END Selection &
Storytelling Continue Authoring
圖 4.12 MEMOTORY 系統操作流程圖
故事版型選擇介面(Query Template Interface)
59
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
在版型選擇介面上，為了符合系統設計以及輔助使用者敘事創作。在介面上，我們使 用一個明確但簡潔的名詞代表故事版型以及給予簡易的版型說明提供給使用者故事 版型的選擇。但我們將細節由 config.xml 的設定檔來設定故事版型裡所需要的相關設 定。所以使用者只要在介面上選擇故事版型即可，不需給予太多的查詢條件，如圖 4.13 所示。
圖 4.13 故事版型選擇介面
相片敘事創作介面(Storytelling Editing Interface)
在此介面中，左上角會提示目前使用者所選擇的版型，內容的部分包含了三個區塊，
分別代表(1)推薦敘事相片區、(2)敘事內容編輯區、(3)人工換頁指令區[圖 4.14]。接 下來，我們將會介紹各區塊的功能。
60
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 4.14 敘事相片推薦介面
(1) 推薦敘事相片區
此區塊根據檢索結果推薦使用者敘事相片。只要使用滑鼠點選此區塊上的某張相 片，此張照片則會進入敘事內容編輯區塊中。而系統也會進行下一次的推薦運算，
新的推薦相片將會覆蓋於相同的區塊中。
61
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 4.15 推薦敘事相片區操作方法 (2) 敘事內容編輯區
在此編輯區塊中，主要是讓使用者可以為選擇後的相片提供內容編寫、故事編排 的區域，所以在介面設計上提供了內容編輯、刪除相片以及移動排版的功能(圖 4.16)。
62
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 4.16 敘事編輯區
在敘事編輯區塊中，每張照片的左上角都擁有個小鉛筆圖案，此圖案點選後，會 出現一個故事內容的編輯區塊，提供給使用者編輯(圖 4.17)。而右上角的 X 的圖 案是用讓使用者刪除此相片。相片若需要移動編排，只要將滑鼠點選於所選的照 片不放，移到期望的位置再放開即可。
圖 4.17 敘事編輯區-內容編輯
63
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
(3) 人工指令換頁區
在3.6小節我們有提到靜態參考點與互動動態參考點的概念。靜態參考點所使用的 方法就是單純以故事版型設定檔中的正負屬性設定與各屬性佔比作為該故事版 型的框架來推薦相片。但我們也提出另一種動態參考點方式，嘗試以使用者的選 擇，動態計算不同的參考點以達到貼近當下事件式的敘事推薦法。當使用者對當 前的推薦五張照片，不足以提供目前創作情境，系統則提供兩種方向的指令，一 種是NEXT Model，另一種則為SKIP Model。在本論文的第三章中提到NEXT模型 是使用者對於目前的故事走向主題不變化，但相似度最高的推薦相片並不能符合 使用者想表示的故事情境。所以當使用者選擇此功能時，系統會進行相片權重的 修正，再取出其他同類型的相片以供選擇。而SKIP模型則是使用者希望在故事中 穿插衝突或者是轉折點，希望系統推薦的相片也能有相同的變換。所以當使用者 選擇此功能時，系統將會利用第三章的負向參考點公式，重新計算相似度後，再 提供新的推薦照片。當使用者欲結束此敘事創作時，就可選擇介面裡的END，進 入下一個敘事結果介面進行瀏覽，如圖 4.18。
圖 4.18 輔助敘事變化功能區
敘事結果介面
64
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
此介面提供了以捲動和點選的方式進行故事相片的瀏覽，讓使用者有看故事書的感覺 去瀏覽相片故事，如圖 4.19。
圖 4.19 敘事結果介面
4.5 小結
本章旨在說明如何實作本論文中的回憶敘事創作平台。我們定義了故事版型的目的，主 要用來檢索過濾照片，並產生一個屬於該故事版型的框架來輔助使用者敘事創作；接著 說明如何利用設定檔(config.xml)定義該故事版型，及如何將這些設定轉換為系統參考點。
完成故事版型設定後，我們定義該敘事創作回憶平台的架構，並說明如何實作該架構的 二個重要核心模組(1)相似度模組(Similarity Module)、(2)創作記錄模組(Storytelling Recording Module)。為了要滿足系統架構與簡易化的介面設計，我們選用了以網站架構 做為該系統的實作平台。在環境建置上，我們使用網頁平台(web server)。在核心程式裡，
我們使用了 JAVA 程式語言，因為該程式語言有良好的可攜性與跨平台的應用並支援多 樣化的應用程式要求。在介面的設計上，運用了網站架構裡的動態語法(Html、Javascript、
Groovy 等語法)進行使用者介面開發，因為網站動態語言可實作出各種友善的使用者介 面，例如拖拉、遮罩的效果，達到介面需求完整性。
65
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
第五章
實驗設計與結果分析
為評估本論文中的提出的互動參考點相似度演算法是否可以符合使用者的創作敘事的 需求，以及照片與互動敘事結合的有效性，我們將第四章的實作平台加入了實驗設計。
在此互動敘事平台中，我們設計了三種故事版型，並在每個故事版型中加入了三種挑選 法提供給使用者進行測試。我們找了30位18~35歲之間的受試者協助進行網站的測試，
並針對使用感想進行問卷調查。為了控制實驗變因，系統統一使用同一組的實驗相片集 合以及故事版型給受測者進行敘事創作。受試者在實驗的過程中，每次選擇故事版型後，
必須連續創作三次。系統會利用隨機的方式設定目前測試的挑選法(但不重覆)，而受試 者亦不會得知目前系統所設定的挑選法為何，只需要在最後的問卷中將此次的創作感受 如實填寫即可。
本 研 究 採 取 的 實 驗 設 計 是 在 網 站 平 台 加 入 三 種 故 事 版 型 (1) 關 鍵 字 版 型 (keyword-based story template)、(2)日期版型(Date-based story template)、(3)空間版型 (Location-based story template)來配合三種挑選方法(1)隨機挑選法(Random selection)、(2) 靜 態挑 選 法(Static template selection) 、(3) 動 態參考點挑 選法(Dynamically adjustive selection)。而每種故事版型都將會與三種挑選法進行實驗，每完成一種組合實驗後，受 試者藉由問卷提供系統有效性分數，作為此次演算法實驗的數據。實驗結束後，請受測 者填寫系統易用性的問卷調查，了解該平台的系統設計是否符合使用者需求。最後再進 行數據資料統計，進行系統的衡量。
5.1 演算法有效性評估設計
在第三章中，我們提出靜態、動態參考點與相似度模型的概念後，為了評估本論文演算
66
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
法的有效性，我們提出三種挑選法進行使用者意向評估。下列是三種方法的說明：
隨機挑選法(Random selection)
如圖 5.1 所示，使用者挑選故事版型後，將會在資料庫裡隨機挑選照片當作敘事的推 薦相片，不會將相片過濾出故事版型的框架，也無任何演算法計算。隨機挑選候選照 片回饋給使用者。
圖 5.1 隨機挑選法
靜態挑選法(Static template selection)
如圖 5.2 所示，使用者挑選利用故事版型設定檔(config.xml)設定的故事版型
(Template)。此設定檔會設定所需的各式屬性，例如故事型態、該故事版型參考點和 關鍵字屬性中的人、事、物、感覺中的各項屬性權重。系統會根據故事版型的設定值，
以此版型產生此故事版型的照片網絡(template photo network)。但該方法是單純的利 用設定好的故事版型參考點計算相似度推薦相片。但未根據與使用者的互動即時更新 參考點，屬於靜態網絡故事圖。
67
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 5.2 靜態挑選法
動態參考點挑選法(Dynamic adjustive selection)
如圖 5.3 所示，此方法則加入本研究提出的互動參考點計算相似度。如同靜態挑選法，
利用設定檔將故事版型的條件設定好，系統再產生出相片故事網絡圖。接著在使用者 的敘事創作過程中，根據使用者挑選出的歷程照片，重新計算下一輪候選照片的參考 點，再根據新的參考點重新計算照片的相似度進行推薦，以根據使用者創作意向進行 修正。
68
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 5.3 動態參考點挑選法
5.2 實驗故事版型
在實驗一開始，系統預先設定了三個故事版型，分別是以關鍵字型態為主的「城市光廊」
版型；空間型態是設定於「亞洲實況」版型；而日期型態則是設定檢索的日期區間的「大 時代」版型。接下來，開始說明各實驗版型的設定條件。
5.2.1 關鍵字型態-城市光廊
該版型是檢索以城市為主題的照片，這個故事版型的設定如表 5-1，包含每個屬性的分 數以及在4.2小節中提到的有哪些與該故事版型正相關和負相關的參數屬性。
表 5-1 城市光廊故事版型設定表
編號 分類 代表關鍵字 分數 正相關屬性 負相關屬性
1 人(who) family 4.0 2 friend 4.0 3 child 4.0
69
‧
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
5.2.3 空間型態-亞洲實況
該故事版型是以「相片位置」為主要的過濾條件，我們將GPS的資訊設定於config.XML 中。此故事版型希望能過濾出與亞洲相關的照片，所以在設定的GPS的座標位置為
該故事版型是以「相片位置」為主要的過濾條件，我們將GPS的資訊設定於config.XML 中。此故事版型希望能過濾出與亞洲相關的照片，所以在設定的GPS的座標位置為