設計以照片為主之旅遊故事共同創作平台 - 政大學術集成

全文

(1)國立政治大學資訊科學系 Department of Computer Science National Chengchi University 碩士論文 Master’s Thesis. 立. 政治大. ‧ 國. 學. 設計以照片為主之旅遊故事共同創作平台 Design of Photo-Based Collaborative Authoring. ‧. Platform for Travel Story. er. io. sit. y. Nat. n. al. i n 研C究生：陳雅玲 hengchi U. v. 指導教授：李蔡彥. 中華民國一百零七年九月 September 2018. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(2) 摘要. 近年來旅遊產業持續發展，世界各國的人民也越來越重視生活品質，安排各式各樣大大小小的旅遊活動並且拍照片紀念。一般使用者通常於社群媒體(Social Media)、即時通訊應用軟體(Instant Communications)、雲端空間(Cloud Space)或部落格(Blog)分享旅遊照片，但是這些平台並沒有特別設計共同創作旅遊故事的功能，也沒有提供易於回顧整個旅遊歷程. 政治大照片(Geotagged Photo)的新概念，提供一個讓使用者能透過旅遊的地理標記照片(Geotagged 立. 的功能設計。本研究構想出結合旅遊(Travel) x 共同創作(Collaborative Authoring) x 地理標記. ‧ 國. 學. Photos)來共同創作的平台。針對這些旅遊的地理標記照片(Geotagged Photos)和本系統的網站設計，讓使用者易於搜集和分享旅遊照片，使用者可以使用手機在旅遊當下和夥伴的互動過程中即時記錄美好的一刻，並且進一步使用本系統所提供的共同創作平台設計和回顧. ‧. 旅遊歷程的功能設計等，以旅遊照片為主和文字描述為輔，加上運用豐富的想像力和創意. Nat. sit. y. 點子來共同創作出屬於他們的旅遊故事。我們邀請實驗群組共 10 組，每一群組成員的人數. al. er. io. 至少為兩人(含)以上同一組，總使用者是 21 人。我們線上對使用者進行實驗說明和請使用. n. 者閱讀線上系統熟悉介面的使用手冊，並且要求群組使用者完成實驗任務，最後再透過問. Ch. i n U. v. 卷調查與訪談的方式來探討系統的優缺點。問卷的評分使用 5 分量表，有用性和滿意度的. engchi. 平均分數均超過 4 分以上得知，本系統基本上能夠有效地提供使用者以照片為主來共同創作旅遊回憶故事，讓使用者感到滿意，並且藉由共同創作的互動過程來激發創意思維。至於系統易用性的平均分數為 3.98(接近 4 分)，顯示使用者對於本系統的易用性表示同意，但在操作說明手冊和使用者介面上的設計也提出了一些改善的建議。本系統的主要目的是希望能提供使用者，透過旅遊的地理標記照片(Geotagged Photo)來共同創作旅遊故事的平台，由實驗結果與使用者的回饋顯示，證實了本系統的發展價值。. i. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(3) Abstract. In recent years, the tourism industry has continued to develop, and people from all over the world have paid more and more attention to the quality of life. They have arranged many kinds of tourism activities and took photos for memory. Users usually share travel photos in Social Media, Instant Communications, Cloud Space, or blogs. These platforms don't specifically. 治政 is easy to review the entire travel history. In our research, 大 we conceived a new concept that 立authoring x geotagged photo, to provide a platform for users to combines travel x collaborative design the capability for collaborative authoring and also did not provide functional design that. 學. ‧ 國. collaborative authoring through geotagged photo of travel. Our system makes it easy for users to collect and share travel photos. Users can use the mobile phone to instantly record a beautiful. ‧. moment in the interaction with their partners. Users can base on travel photos and text descriptions to create their own travel stories with creative ideas. We have invited 10 groups. y. Nat. sit. whose total users are 21 to test our system through online user guide and experimental mission.. al. er. io. Finally, the questionnaire survey and interview were conducted after the experiments. The. v. n. scoring of the questionnaire is a 5-point scale. The evaluation results show that the average. Ch. i n U. score for the usability and satisfaction are more than 4 points which show our system is basically. engchi. able to effectively provide users to create a beautiful travel story with collaborative authoring, and stimulate creative thinking through interaction with partners. The average score for the ease-of-use dimension is 3.98 (close to 4 points) which indicate most users agree our system is easy to use, but they also provide some suggestions for user manual and interface design. The main purpose of our system is to provide users to create beautiful travel story with geotagged photos through collaborative authoring. The results reveal that our system is valuable for creating a beautiful travel story by collaborative authoring.. ii. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(4) 致謝. 終於到了寫致謝的時候，在碩士班的研究生涯中，最感謝我的指導教授李蔡彥老師，因為有老師的鼓勵和指導，讓我不斷的進步和成長，也才能順利完成碩士論文，真的很感謝老師。再來要感謝吳筱玫老師和劉遠楨老師給我的論文建議，還有對我的鼓勵。也很感謝 IMLab 的同伴，特別感謝小蜜蜂學長和聖翔學弟給我的各種經驗建議，也很謝謝在寫論. 政治大實驗室的陪伴，大家一起努力的感覺特別好。立. 文的期間有玟璇、莞茜、莞瑜、秋潔、曦曦、毅聖、恩加、育誠、家至、清鈺等學弟妹在. ‧ 國. 學. 特別感謝一樣是在 IMLab 認識的好朋友宅配，謝謝您總是在幫我加油，給我信心和鼓勵。謝謝我的好同事兼好朋友 Chiache, Zoe, Chloe, Cindy, Ian, Joseph, David, Daniel, Burnett,. ‧. Jaylun 等人的加油。也很感謝我的好朋友瑩慈 Eva 在日常生活中，總是給我滿滿的溫暖和正. y. Nat. 面能量。謝謝瑛伶學姊、佩濡學姊、小英姊姊、渝濡妹妹、喬嬪妹妹等人的加油。謝謝我. n. al. er. io. 伴。. sit. 的同學星同、韋光、君孝等人，那些一起認真上課和一起加油打氣的日子，謝謝您們的陪. Ch. i n U. v. 最後，非常感謝爸爸和媽媽讓我繼續念研究所，謝謝您們給我溫暖和愛，我很珍惜可. engchi. 以讀書的機會。也很謝謝哥哥、嫂嫂、可愛的姪子在日常生活上的陪伴，我們一起繼續加油。還有感謝給我溫暖和愛的麗如阿姨等人，謝謝阿姨在日常生活上的各種照顧和陪伴。僅此對於出現在我人生中，曾經幫助過我的各位家人、朋友、同事、學長、學姊、主管和老師，致上我最真誠的感謝之意，謝謝您們。🖤. 雅玲 Yalin 2018/09/25. iii. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(5) 目錄. 摘要 ...................................................................................................................................................i Abstract.............................................................................................................................................ii 致謝 ................................................................................................................................................. iii 目錄 ................................................................................................................................................. iv. 政治大表目錄 .............................................................................................................................................. x 立圖目錄 ............................................................................................................................................ vii. 第 1 章導論 ................................................................................................................................... 1. ‧ 國. 學. 1.1 研究動機 ........................................................................................................................... 1 1.2 研究背景 ........................................................................................................................... 3. ‧. 1.2.1 地理標記照片(Geotagged Photo) ......................................................................... 3. sit. y. Nat. 1.2.2 共同創作(Collaborative Authoring) ....................................................................... 4. io. er. 1.2.3 部落格(Blog)........................................................................................................... 5 1.2.4 創意思維(Creative Thinking).................................................................................. 6. n. al. Ch. i n U. v. 1.3 研究目標 ........................................................................................................................... 7. engchi. 1.4 研究限制 ........................................................................................................................... 8 1.5 論文貢獻 ........................................................................................................................... 8 1.5 論文架構 ......................................................................................................................... 10 第 2 章相關研究 ......................................................................................................................... 11 2.1 地理標記照片(Geotagged Photo) .................................................................................. 11 2.2 共同創作(Collaborative Authoring) ................................................................................ 13 2.3 旅遊部落格(Travel Blog) ................................................................................................. 16 第 3 章系統架構與設計 ............................................................................................................. 18. iv. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(6) 3.1 系統架構 ......................................................................................................................... 18 3.2 地理標記照片(Geotagged Photo)的預先處理和應用 .................................................. 19 3.2.1 處理 GPS 座標..................................................................................................... 19 3.2.2 建立 JSON 檔案 ................................................................................................... 21 3.2.3 Google Maps Platform .......................................................................................... 22 3.2.4 Google Charts ....................................................................................................... 23 3.3 系統的介面設計 ............................................................................................................. 24. 政治大 3.3.2 照片上傳區(Photo Upload) ................................................................................ 25 立 3.3.1 建立旅遊故事(Travel Story Creation) ................................................................. 25. 3.3.3 個人創作區(Personal Creation) .......................................................................... 26. ‧ 國. 學. 3.3.4 共同創作區(Collaborative Authoring) ................................................................ 26 3.3.5 公布旅遊故事(Travel Story Publishing) .............................................................. 29. ‧. 第 4 章系統實作 ......................................................................................................................... 30. sit. y. Nat. 4.1 系統實作流程(System Implement Processing) ............................................................. 30. io. er. 4.2 響應式網頁設計(Responsive Web Design) ................................................................... 31 4.3 群組權限處理(Group Permission Processing) ............................................................... 36. n. al. Ch. i n U. v. 4.4 地理標記照片處理(Geotagged Photo Processing) ....................................................... 39. engchi. 4.5 視覺化呈現(Visualization) ............................................................................................. 40 4.5.1 Google Maps ......................................................................................................... 40 4.5.2 Google Charts ....................................................................................................... 42 4.5.3 Display Stories....................................................................................................... 44 第 5 章實驗設計與結果分析 ..................................................................................................... 48 5.1 實驗目標 ........................................................................................................................ 48 5.2 實驗對象 ........................................................................................................................ 48 5.3 實驗任務 ........................................................................................................................ 52. v. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(7) 5.4 實驗流程 ........................................................................................................................ 52 5.5 實驗結果分析與討論 .................................................................................................... 57 5.5.1 有用性評估 ......................................................................................................... 57 5.5.2 易用性評估 ......................................................................................................... 62 5.6 使用者共同創作故事分析 ............................................................................................ 64 第 6 章結論與未來展望 ............................................................................................................. 68 6.1 研究結論 ........................................................................................................................ 68. 政治大參考文獻 ....................................................................................................................................... 70 立 6.2 未來發展與改進 ............................................................................................................ 69. ‧ 國. 學. 附錄 ............................................................................................................................................... 74 附錄 1 系統熟悉介面使用手冊 .......................................................................................... 74. ‧. 附錄 2 使用者共同創作故事(Style 1) ................................................................................. 79 附錄 3 使用者共同創作故事(Style 2) ................................................................................. 85. n. er. io. sit. y. Nat. al. Ch. engchi. vi. i n U. v. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(8) 圖目錄. 圖 1. 研究動機示意圖 .................................................................................................................. 3 圖 2. 紐約市的旅遊軌跡(遊客 a, b, c)[11]................................................................................. 12 圖 3. 重複創作循環圖[15].......................................................................................................... 14 圖 4. 線性敘述的共同創作概念圖[12]...................................................................................... 14. 政治大圖 6. 共同偏好啟發界面圖[14].................................................................................................. 16 立圖 5. 合作的故事建構概念圖[9]................................................................................................ 15. ‧ 國. 學. 圖 7. 系統架構圖 ........................................................................................................................ 18. 圖 8. 經緯線與經緯度表示圖 .................................................................................................... 19. ‧. 圖 9. 取得 GPS 座標後再經過格式轉換的範例 ........................................................................ 20 圖 10. JSON 物件格式 .................................................................................................................. 21. Nat. sit. y. 圖 11. JSON 陣列格式 .................................................................................................................. 21. al. er. io. 圖 12. json_encode()函式片段範例 ............................................................................................ 21. n. 圖 13. 使用 Google Maps JavaScript API 的範例程式 ............................................................... 23. Ch. i n U. v. 圖 14. 使用 Google Charts 的範例程式(For Pie Charts) ............................................................ 24. engchi. 圖 15. 系統主選單的介面設計圖 .............................................................................................. 24 圖 16. 建立旅遊主題和上傳照片 .............................................................................................. 25 圖 17. 共同創作區的旅遊主題選單 .......................................................................................... 26 圖 18. 共同創作頁面的創作區域 .............................................................................................. 27 圖 19. 維基百科檢視歷史(View History)的頁面 ....................................................................... 28 圖 20. 共同創作頁面的歷史記錄 .............................................................................................. 28 圖 21. 公布旅遊故事和選擇樣式頁面 ...................................................................................... 29 圖 22. 系統實作流程圖 .............................................................................................................. 31. vii. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(9) 圖 23. 網頁中包含的<meta> viewport 元素 ............................................................................. 32 圖 24. 設計網格系統(Grid System) ............................................................................................ 33 圖 25. 網格系統中關鍵的分界點閾值 ...................................................................................... 33 圖 26. Google 行動裝置相容性測試........................................................................................... 34 圖 27. 網頁適合透過行動裝置瀏覽 .......................................................................................... 34 圖 28. 響應式網頁設計實作呈現(兩欄式和單欄式)................................................................ 35 圖 29. 使用者註冊帳號頁面 ...................................................................................................... 36. 政治大圖 31. 系統主選單介面實作概念 .............................................................................................. 37 立. 圖 30. 雜湊(Hash)演算法 SHA256 使用者密碼加密 ................................................................. 36. ‧ 國. 學. 圖 32. 篩選出共同群組成員旅遊主題的程式碼片段 .............................................................. 38 圖 33. 同一群組成員的旅遊主題 .............................................................................................. 38. ‧. 圖 34. 地理標記照片處理的流程圖 .......................................................................................... 39 圖 35. 地理標記照片處理的程式碼片段 .................................................................................. 39. Nat. sit. y. 圖 36. 建立 JSON 檔案的程式碼片段(For Google Maps) .......................................................... 40. al. er. io. 圖 37. JSON 檔案範例(For Google Maps) .................................................................................... 40. n. 圖 38. 客製化 Maps 的程式碼片段 ........................................................................................... 41. Ch. i n U. v. 圖 39. Google Maps 旅遊歷程軌跡(旅遊回顧功能) .................................................................. 42. engchi. 圖 40. 建立 JSON 檔案的程式碼片段(For Pie Charts) ............................................................... 42 圖 41. JSON 檔案範例(For Pie Charts) ......................................................................................... 43 圖 42. 客製化 Pie Charts 的程式碼片段 .................................................................................... 43 圖 43. Pie Charts 視覺化地理標記照片(Geotagged Photo)數量 ............................................... 44 圖 44. 不同顏色對人類情緒的影響 .......................................................................................... 44 圖 45. 旅遊故事呈現頁面(Style 1) ............................................................................................. 45 圖 46. 旅遊故事呈現頁面(Style 2) ............................................................................................. 46 圖 47. 旅遊故事呈現頁面(Style 3) ............................................................................................. 47. viii. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(10) 圖 48. 實驗流程圖 ...................................................................................................................... 53 圖 49. 共同創作區-使用者共同創作故事(Example 1) .............................................................. 64 圖 50. 共同創作區-使用者共同創作故事(Example 2) .............................................................. 65 圖 51. 共同創作區-使用者共同創作故事(Example 3) .............................................................. 66. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. ix. i n U. v. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(11) 表目錄. 表 1. Labov 和 Waletzky 敘事形式的結構模型[7] ..................................................................... 17 表 2. 經緯度定義說明表 ............................................................................................................ 20 表 3. 使用者基本資訊和喜歡旅遊程度 .................................................................................... 49 表 4. 使用者個人寫作與記錄生活之狀況(Part I) ..................................................................... 50. 政治大. 表 5. 使用者個人寫作與記錄生活之狀況(Part II) .................................................................... 50. 立. 表 6. 使用者參與共同創作之經驗(Part I) ................................................................................. 51. ‧ 國. 學. 表 7. 使用者參與共同創作之經驗(Part II) ................................................................................ 51 表 8. 系統評估問卷項目與評分方式 ........................................................................................ 54. ‧. 表 9. 系統功能評估問卷與評估向度 ........................................................................................ 55. y. Nat. 表 10. 系統整體評估問卷 .......................................................................................................... 56. sit. 表 11. 開放性問題問卷題目 ...................................................................................................... 57. er. io. 表 12. 感知有用性問卷分數與平均(Part I) ............................................................................... 58. al. n. iv n C h e nIII)g............................................................................. 表 14. 感知有用性問卷分數與平均(Part 60 chi U 表 13. 感知有用性問卷分數與平均(Part II) .............................................................................. 59. 表 15. 系統功能問卷平均與標準差 .......................................................................................... 61 表 16. 感知易用性問卷分數、平均和標準差(Part I) ............................................................... 62 表 17. 感知易用性問卷分數、平均和標準差(Part II) .............................................................. 62 表 18. 感知易用性問卷分數、平均和標準差(Part III) ............................................................. 63. x. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(12) 第 1 章導論. 1.1 研究動機在忙碌的生活、緊繃且高壓的工作環境下，適度的放鬆往往是維持身心平衡最好的方式。近年來由於旅遊產業持續蓬勃發展，很多人選擇的放鬆方式是安排一趟旅遊行程，藉此來. 政治大好處，例如：增強適應力、擴展視野、更會控制預算、增加創造力、帶來文化或商業上的立新觀點和增添領導力能力[23]。有鑑於此，一般大眾也普遍認同旅遊能增進個人的世界觀、跳脫原本的生活框架。英國 Dailymail 於 2016 年曾經發表了一份研究，列出旅遊能帶來的. ‧ 國. 學. 社會意識以及人生經歷。根據世界旅遊組織(World Tourism Organization, UNWTO)調查顯示， 2017 年國際遊客人數(過夜遊客)達 13.22 億，比前年成長 7%，遠高於 2010 年以來每年穩定. ‧. 成長 4%甚至更多，2017 年是全球旅遊業最美好的一年，預計 2018 年將繼續保持在 4％-5. sit. y. Nat. ％的成長速度[22]，而且旅遊產業也已經成為全球不少城市的重要經濟動力。. er. io. 近年來對於旅遊和飯店產業的研究資訊，此領域的技術已轉移到利用地理標記數據. al. n. iv n C 指出，關於地理標記數據(Geotagged h eData)主要分成 n g c h i 5U大種類：1.地理標記數據的收集和預. (Geotagged Data)來做分析，根據 E.Wong 等人於 2017 年對於旅遊地理標記研究的內容說明. 處理(Geotagged data Collection and Preprocessing)、2.地理標記數據分析(Geotagged Data Analysis)、3.旅遊移動和旅客行為(Tourism Movement and Tourist Behavior)、4.旅遊推薦系統和應用(Tourism Recommendation Systems and Applications)、5.其他相關研究(Others) [17]。這些新興的地理參考資源(Georeferenced Resources)主要是來自於媒體分享服務和手機行動技. 術，使用者通常會基於個人因素來分享和記錄地理參考資源(Georeferenced Resources)，例如：分享個人旅遊經驗、記錄個人生活點滴、管理個人多媒體內容或體育活動分析。這些地理參考資源(Georeferenced Resources)的內容可以由使用者自行控制，使用者可以基於原始資料來增加各式各樣的資訊，用以增強其表達內容和意義，例如：地理位置、時間、視. 1. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(13) 覺圖像和文字描述等。地理標記(Geotagging)是一個增加地理空間資訊、時間資訊或文字描述的過程。現今網際網路上提供不同類型的地理標記數據(Geotagged Data)，包含影片檔 (Video)和文件檔(Document)。影片檔如 YouTube 上面的影片，文件檔如 Wikipedia 或 Twitter 上面的文章或推文。大部份在旅遊和飯店產業的地理標記研究(Geotagging Research)，主要還是專注於使用地理標記照片(Geotagged Photo)來做分析。隨著網際網路的發展與行動裝置帶來的便利性，各種知識工作者更加樂於在社群媒體. 治政作和知識技術，其中維基百科(Wikipedia)又屬於線上集體創作，集結了群眾的智慧和創意。大立根據梁姓研究者[2]對於共同創作的說明，共同創作又名協同創作，是由不同的作者群共同 (Social Media)、部落格(Blog)、YouTube、維基百科(Wikipedia)等線上平台分享個人想法、創. ‧ 國. 學. 編寫同樣一份文章、劇本或任何創作記錄，共同創作的優點在於能夠集結每一位創作者的智慧、技能、以及創意，將創作內容不斷的往外延伸，增加更多的可能性。在共同創作的. ‧. 過程中，互相討論與交流能維持創作的目標，避免雜亂的內容以及故事無限發散。. y. Nat. A.Markman 於 2017 年在哈佛商業評論 (Harvard Business Review) 對於腦力激盪. io. sit. (Brainstorming)的說明中指出，善用發散分歧(Divergence)和收斂聚合(Convergence)的力量才. n. al. er. 能增加新的想法和創意，並且強調創意行動的初期階段「發散分歧」是很重要的，也就是. i n U. v. 說，每個人盡量用各種方式來思考你正在做的事情，之後再進行「收斂聚合」。把想法匯合. Ch. engchi. 成少數幾個作法，然後再思考這些作法的細節 [24] 。由此可知使用有效的腦力激盪 (Brainstorming)方法，可以使共同創作更容易激發新的想法和創意。有鑑於目前一般彼此已認識的遊客，分享照片的方式通常是張貼於社群媒體(Social Media)，例如：Facebook、Twitter、Google+、Instagram、Flickr 等，或是使用即時通訊應用軟體(Instant Communications)，例如：LINE、Facebook Messenger、Skype、Whatsapp、Apple iMessage、Telegram、Messenger、Google Hangouts 等來分享照片。有些使用者也可能會將整份照片檔案存放於雲端空間(Cloud Space)，例如：Dropbox、Google Drive、Microsoft OneDrive、Apple iCloud Drive 等後，再供其他夥伴下載或是直接撰寫部落格(Blog)來分享旅. 2. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(14) 遊經歷心得。但是這些平台並沒有特別設計共同創作旅遊回憶故事的功能，也沒有提供易於回顧整個旅遊歷程的功能設計。如圖 1 本研究結合旅遊(Travel) x 共同創作(Collaborative Authoring) x 地理標記照片(Geotagged Photo)的新概念，提供團體旅遊，不論是跟團旅遊、家族旅遊、公司部門旅遊、班級或社團旅遊、幾位好友共同出旅等，彼此之間可以使用手機或電腦來分享、互動和共同創作旅遊回憶故事的平台。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. i n C圖h 1. 研究動機示意圖 engchi U. v. 1.2 研究背景由於本研究主要是建立在旅遊 (Travel) 、地理標記照片 (Geotagged Photo) 、共同創作 (Collaborative Authoring)、部落格(Blog)、創意思維(Creative Thinking)的基礎上來進行研究，簡要說明相關研究背景如下： 1.2.1 地理標記照片(Geotagged Photo) 隨著科技發展的日新月異和全球定位系統(Global Positioning System, GPS)的普及。GPS 的技. 3. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(15) 術除了應用於目的地規劃與導航、旅遊地標記錄、老人或孩童以及寵物協尋之外，也可以附加於一般照片，進而成為地理標記照片(Geotagged Photo)。製作地理標記照片(Geotagged Photo)最簡易的方式是透過開啟行動裝置(Mobile Device)的定位服務功能並且允許相機使用後，使用者直接拍照片就能拍出含有地理標記內容的照片。行動裝置(Mobile Device)，或稱為手持裝置(Handheld Device)、行動終端、行動通訊終端等，大多數為口袋大小的計算裝置，包括手機、筆記型電腦、平板電腦、POS 機、車載電腦等設備，但多數情況下是指具有多種應用功能的智慧型手機和平板電腦，通常有一個小的顯示螢幕，觸控輸入，或是小型的鍵盤。. 立. 政治大. 地理標記照片(Geotagged Photo)是一個經過地理標記功能處理過後並且附有地理位置. ‧ 國. 學. 的照片。通常給照片標記地理位置至少有經度和緯度，也可以包括海拔，羅盤方位和其他資訊。而利用坐標與數位相機拍攝的相片來進行地理標記(Geotagging)，即可將坐標儲存於. ‧. 相片的 EXIF(Exchangeable Image File Format)中，EXIF 為可交換影像格式文件，它記錄了數位. y. Nat. 照片 JPEG、TIFF、RIFF 等檔案格式的屬性和拍攝時的資訊，包含數位相機拍攝資訊的內容，. io. sit. 例如：日期、光圈、ISO、坐標等，或是影像處理軟體 Photoshop 等的版本資訊[28]。利用. er. 這些資訊與地圖結合，可進行各種應用分析，例如：田野調查或是生活記錄等。. al. n. iv n C 本研究藉由取得地理標記照片(Geotagged Photo)中的拍照日期和經緯度座標等資訊，再 hengchi U 經過格式轉換後，搭配 Google Maps JavaScript API 來呈現出遊客的旅遊歷程軌跡，以方便旅遊夥伴之間易於回顧旅遊行程。 1.2.2 共同創作(Collaborative Authoring) 在創作過程中，大部份的創作都是由一個人獨立完成，但是有時候為了集結每一位創作者的各別經驗和創意想法而進行共同創作的合作。根據著作權法第八條規定：「二人以上共同完成之著作，其各人之創作，不能分離利用者，為共同著作。」在主觀上，各創作人之間要有一同創作之合作意思；在客觀上，還要各創作人之創作不能各別分離利用，才是共同. 4. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(16) 著作。共同創作是藉由二人以上不斷的互動和討論的過程來增加更多新的想法和可能性，彼此之間的創作也不能個別分離利用。大部份的共同創作被應用於藝術創作和故事創作等領域。關於藝術創作的部份，例如：在 2012 年時為了慶祝德國著名的文具商 edding 五十週年，位在德國漢堡的 kempertrautmann 廣告公司與 demodern digital design studio 合作，為 edding 創造了這個可能是虛擬世界中最大的塗鴉牆”Wall of Fame”，透過網路上多人互動的機制，讓每一位連上. 治政思維和增進溝通能力等研究，例如：由 H. Alborzi 等人於研究中設計出故事室(Story Rooms)，大立為小朋友提供身臨其境的講故事體驗，讓這些小朋友們可以將自己的故事和體驗，以創作線的網友一起參與創作[18]。而在故事創作的部分，主要是以輔助兒童學習或激發兒童創意. ‧ 國. 學. 的方式來與其他小朋友分享[4]。. ‧. 本研究將共同創作的概念應用於創作旅遊故事，共同創作的使用者可以先各自挑選自己喜愛的旅遊地理標記照片(Geotagged Photo)並且上傳至本系統。由系統進行初步處理後，. Nat. sit. y. 即可使用系統提供的共同創作介面來記錄創意點子和篩選出適合應用於創作旅遊故事的地. al. n. 1.2.3 部落格(Blog). er. io. 理標記照片(Geotagged Photo)，與夥伴共同完成創作旅遊回憶故事。. Ch. engchi. i n U. v. 部落格(Blog)是一種由個人管理、張貼新的文章、圖片或影片的網站或是線上日記，主要為用來紀錄、抒發情感或分享資訊。一般部落格上的文章通常根據張貼時間，採用倒序方式由新到舊排列。一個典型的部落格結合了文字、影像、其他部落格或網站的超連結、以及其它與主題相關的媒體和能夠讓讀者以互動的方式留下意見。大部分的部落格內容以文字為主，也有一些部落格專注於藝術、攝影、影片和音樂等各種主題。任何人只要在任何部落格服務提供者(Blog Service Provider, BSP)的網站註冊一個帳戶後，即可算是一個部落格作者，依照擅長撰寫的主題又可以分為時尚流行部落客、旅遊部落客、美食部落客、3C 電子部落客等。目前一般使用者常用的部落格服務提供者為 Google. 5. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(17) Blogger、Pixnet 痞客邦、隨意窩 Xuite 日誌、Yam 天空部落和 Medium。撰寫部落格除了可以記錄個人生活點滴、傳達個人自由思想、抒發個人情緒之外，也可以分享與交流知識、技術和創作等。部落格主要是由一個人單獨完成，並未提供團體成員共同創作的功能。本研究參考一般部落格在圖文敘事模式的呈現方式，並且增加共同創作的功能和應用地理標記照片 (Geotagged Photo)的特色，實作出以照片為主軸的旅遊故事共同創作平台。 1.2.4 創意思維(Creative Thinking). 立. 政治大. 思維是人腦對客觀事物本質屬性和內在聯繫的概括和間接反映，以新穎獨特的思維活動揭. ‧ 國. 學. 示客觀事物本質及內在聯繫並指引人去獲得對問題的全新解釋，從而產生前所未有的思維成果稱為「創意思維」，也稱「創造性思維」。再引用鄭先生[19]對於創意的說明來更加瞭解. ‧. 創意的意義和重要性：「創意既是能力，也是心態。人只要不甘於守成不變，便需以創意突圍。詩人誓言《語不驚人死不休》，畫家宣稱《我的傑作永遠是下一幅》，工程師追求《更. y. Nat. sit. 快更小更炫》，或者學習梁啟超先生，不惜以《今日之我與昨日之我挑戰》，這些都是創意。. er. io. 創意是自我提升的活水源頭，成功的動力引擎，現代職場上，人人必備。」創意思維是指. al. v. n. 打破舊有的思考模式，跳出原本框架來思考問題，只要凡事擺脫已有的概念，宏觀地觀察. i n C 四周的事物，每個人也能夠產生新的想法。 hengchi U. 本研究參考 A.Markman[24]於 2017 年在哈佛商業評論(Harvard Business Review)對於腦力激盪(Brainstorming)的說明，善用發散分歧(Divergence)和收斂聚合(Convergence)的力量才能增加新的想法和創意。本系統在設計時，一開始會鼓勵使用者先單獨創作和思考，之後系統會自動統整出同一群組的圖文來讓群組使用者繼續反覆進行共同創作。本系統希望這些使用者在互動的過程中可以彼此激發創作靈感，以新穎有趣的方式創作出屬於他們的旅遊回憶故事。. 6. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(18) 1.3 研究目標旅遊是增廣見聞和調劑身心的最佳方式，相信很多人都有旅遊的經驗，不論是國外旅遊、國內旅遊、輕旅行、微旅行、健行、登山活動或海邊活動。在這愉快的旅遊活動中，大部份的人都會拍很多照片，留下紀念。本研究結合旅遊(Travel) x 共同創作(Collaborative Authoring) x 地理標記照片(Geotagged Photo)的新概念，讓照片不只是紀念用，更可以藉由共同創作來讓旅遊照片發揮更大的用途，激發人類的創意思維。人類在適度的放鬆環境下. 政治大. 比較容易激發創意，比較能夠用抽象的方式思考、聚焦在全貌或特定部份，也比較容易從不同的角度來分析問題。. 立. ‧ 國. 學. 根據 Business Insider[25]報導 2016 年心理學家 Ron Friedman 組織一個談論生產力的線上論壇，與 26 位頂尖生產力專家對話。在論壇期間心理學家與認知科學家 Kaufman 表示他. ‧. 曾做過一項調查發現，72%的人在淋浴的時候迸出創意想法。他的研究是要強調「放鬆對創意思考的重要性。」我們使用旅遊照片為主角，可以使人產生愉快和適度放鬆的感受，. y. Nat. n. al. Ch. er. io. 一起共同創作旅遊回憶故事來激發創意思維。. sit. 而在這種愉悅的情境下來進行共同創作，更容易讓人發揮想像力和創意，藉由跟旅遊夥伴. i n U. v. 本研究主要目標是希望能夠提供一個讓使用者透過旅遊的地理標記照片(Geotagged. engchi. Photo)來共同創作旅遊故事的平台，針對這些旅遊的地理標記照片(Geotagged Photo)和本系統的網站設計，讓使用者易於搜集和分享旅遊照片，使用者可以使用手機在旅遊當下和夥伴的互動過程中即時記錄美好的一刻，並且進一步使用本系統所提供的共同創作平台設計和回顧旅遊歷程的功能設計等，以旅遊照片為主和文字描述為輔，加上運用豐富的想像力和創意點子來寫出屬於他們的旅遊故事。本研究希望使用者除了可以透過本系統來記錄共同旅遊的美好回憶之外，也能藉由和夥伴共同創作的互動過程來激發創意思維。. 7. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(19) 1.4 研究限制本研究限用地理標記照片 (Geotagged Photo) ，因本系統需要透過取出地理標記照片 (Geotagged Photo)的 GPS 座標(經緯度)等資訊，搭配 Google Maps Javascript API 來提供使用者客製化的旅遊歷程軌跡(旅遊回顧功能)。. 1.5 論文貢獻本論文的主要貢獻包含：. 立. 政治大. 1. 提供使用者以照片為主之旅遊故事共同創作平台. ‧ 國. 學. 本系統在網站設計簡潔明瞭，在首頁的頁面設計上只會放重要的內容，並且讓其他的. ‧. 頁面容易回到網站首頁。除了考量顏色的挑選、字體的安排、圖片和文字的配置等，再加入簡單的圖片(Photo)和符號(Icon)來讓網站看起來更有活力和一致性。在共同創作的過程，. y. Nat. sit. 記錄每位使用者撰寫的文字內容，並且提供筆記摘要與思考的區域，方便各旅遊夥伴們隨. er. io. 時查看和進行創作上的分工合作、創意發想和統合。在 Display Story 選單下，本系統提供. al. iv n C 者也可以將發布旅遊故事後的連結，直接分享給親朋好友欣賞。 hengchi U n. 標準樣式供使用者選擇，並且提供使用者發布至系統首頁給其他使用者參考的功能。使用. 2. 以腦力激盪法來設計共同創作的平台腦力激盪法(Brainstorming)，又稱為頭腦風暴法，是一種為激發創造力、強化思考力而設計出來的一種方法。可以由一個人或一組人進行。參與者圍在一起，隨意將腦中和研討主題有關的見解提出來，然後再將大家的見解重新分類整理。在整個過程中，無論提出的意見和見解多麼可笑、荒謬，其他人都不得打斷和批評，從而產生很多的新觀點和問題解決方法。本研究參考腦力激盪法(Brainstorming)來設計旅遊照片故事之共同創作的頁面，這樣的設計方式可以激發使用者進行創意思考。在腦力激盪法的部分，重要的是「發散分歧」. 8. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(20) 和「收斂聚合」。本系統設計讓使用者先各別挑選自己喜歡的旅遊照片和自行記錄旅遊點滴，之後再由系統篩選出同一群組使用者的旅遊圖文，以方便這些使用者繼續進行共同創作旅遊回憶故事。 3. 視覺化呈現旅遊回顧功能和照片數量貢獻度本系統提供易於回顧整個旅遊歷程的功能設計，使用地理標記照片(Geotagged Photo) 搭配 Google Maps JavaScript API 來呈現出遊客的旅遊行動軌跡。使用者在進行共同創作的過. 政治大旅遊夥伴之間更容易回顧旅遊行程，刺激使用者回想旅遊當下情境。本系統計算使用者提立供的地理標記照片(Geotagged Photo)數量，並且搭配 Google Charts 的應用設計來視覺化同. 程中，可以隨時使用我們客製化的 Google Maps 來查看去過那些景點和先後順序，以方便. ‧ 國. 學. 一群組成員之間的照片數量貢獻度，群組成員之間可以藉由照片數量貢獻度的比率來重新討論和分配彼此之間應該提供多少照片來進行共同創作旅遊回憶故事。. ‧. 4. 實驗流程設計和使用者問卷評估設計. y. Nat. sit. 我們設計了一套實驗流程，希望能透過使用者的體驗，進一步瞭解設計以照片為主之. er. io. 旅遊故事共同創作平台是否可以讓群組成員共同創作出屬於他們的旅遊故事？我們想初步. al. n. iv n C hengchi U 新概念，是否可以讓一般使用者所接受？並且我們期望使用者運用豐富的想像力和創意點. 瞭解旅遊(Travel) x 共同創作(Collaborative Authoring) x 地理標記照片(Geotagged Photo)的. 子來撰寫出屬於他們的旅遊故事，藉由使用者之間的互動來激發彼此的創意思維。我們在問卷設計分為兩個部分：使用者基本資訊、系統評估問卷與使用者訪談。我們將系統評估問卷分成三個部分：系統功能評估、系統整體評估和開放性問題。我們依照 3 個系統目標來深入瞭解使用者對於操作系統後的回饋，並且希望透過這三部分的問卷，得到使用者對系統的有用性、易用性產出結果。. 9. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(21) 1.5 論文架構在第二章中，我們會探討過去關於地理標記照片(Geotagged Photo)的應用與視覺化呈現、共同創作的相關研究文獻以及旅遊部落格(Travel Blog)的分析和遊客體驗研究。第三章則為本系統的架構與設計，並且說明地理標記照片(Geotagged Photo)的處理和應用，還有系統的介面設計。第四章會說明系統實作流程、系統實作方法與技術。第五章為實驗設計與實驗結果分析。最後第六章為本研究之結論以及未來規劃。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 10. i n U. v. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(22) 第 2 章相關研究. 在本章節中，我們將會分三個面向討論相關研究：第一部份為地理標記照片(Geotagged Photo)的應用與視覺化呈現、第二部分為共同創作(Collaborative Authoring)的概念和設計方法、第三部分為旅遊部落格(Travel Blog)的分析和遊客體驗研究。. 政治大. 2.1 地理標記照片(Geotagged Photo). 立. 在 García-Palomares 等人的研究[10]中，分析八個主要歐洲城市的熱門旅遊景點，包含雅典. ‧ 國. 學. (Athens)、巴塞隆納(Barcelona)、柏林(Berlin)、倫敦(London)、馬德里(Madrid)、巴黎(Paris)、羅馬(Rome)和鹿特丹(Rotterdam)。他們搜集社交媒體網站(Panoramio)的地理標記照片. ‧. (Geotagged Photo)來進行分析並且考量時間因素，例如：以停留一段時間來區分是遊客或是當地居民所拍的照片，使用地理資訊系統中的空間統計技術來對其遊客的空間模式進行分. y. Nat. sit. 析。研究成果顯示了各城市照片的集中度、分散度和主要熱點之間的差異，而且還發現遊. n. al. er. io. 客和居民所拍的照片位置也有顯著差異，還有各城市之間也存在著不同的差異，例如：在. v. 倫敦和巴黎的遊客比較分散，而在巴塞隆納和羅馬的遊客，則呈現出比較大的空間集中度。. Ch. engchi. i n U. 在 Vu 等人的研究[16]中，分析遊客在香港公園的活動，包含九龍公園(Kowloon Park)、香港公園(Hong Kong Park)和維多利亞公園(Victoria Park)。藉由搜集遊客在社交媒體網站 (Flickr)的地理標記照片(Geotagged Photo)，分析遊客在公園中所感興趣的景點和所從事的活動為何，例如：賞花、賞鳥、看表演活動或是拍摩天大樓等。透過這些資訊可以判斷出吸引遊客注意力的景點，如果能將這些資訊提供給政府相關單位，可以方便更好管理遊客人群的集中問題和安全問題。研究成果顯示在九龍公園(Kowloon Park)的遊客趨於平均分佈，在香港公園(Hong Kong Park)的遊客比較靠近中央湖區，而在維多利亞公園(Victoria Park)的遊客主要集中於南方區域。. 11. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(23) 在 Leung 等人的研究[13]中，指出通常政府機關或私人企業比較會搜集著名熱門景點的資料，但對於比較沒這麼熱門第二線或第三線的景點，其相關的研究相對比較少，例如：寺廟。由於社交媒體網站的迅速發展，很多遊客會於社交媒體網站上分享照片和文字。藉由搜集遊客分享的旅遊照片和文字，研究遊客的旅遊行為和潛在感興趣的景點。此研究分析遊客上傳到社交媒體網站(Flickr)的地理標記照片(Geotagged Photo)，並且找出與香港寺廟有關的旅遊行為分析，進而發現四個香港最受歡迎的寺廟分別為天壇大佛(Tian Tan)、黃大仙(Wong Tai Sin)、東華三院文武廟(Man Mo Temple)和油麻地天后廟(Tin Hau Temple)，而且. 政治大. 還發現這五年來遊客的不同偏好和旅遊行為改變。. 立. 在 Kou 等人的研究[11]中，分析遊客的地理標記資料(Geotagged Data)來總結出熱門的. ‧ 國. 學. 旅遊主題(Popular Travel Topics)，例如：文化旅遊、購物旅遊和親子旅遊。可以根據地理標記照片(Geotagged Photo)的位置和時間資訊來發現熱門的旅遊景點和旅遊順序。此研究可以. ‧. 運用於不同的應用，例如：廣告、促銷策略和城市規劃。圖 2 顯示三位遊客於紐約市的旅. y. Nat. 遊軌跡，例如：遊客 a 的旅遊行程從華爾街(Wall Street)開始，再到自由女神(Liberty)、羅馬. io. sit. 天主教會(Roman Cathotic Church)、帝國大廈(Empire State Building)，最後結束地點是蘋果商. n. al. er. 店(Apple Store)。遊客 a 和遊客 b 有高度共同的旅遊景點，推斷兩者的興趣相似。相較之下，. i n U. v. 遊客 c 的興趣明顯跟遊客 a 和 b 有所不同，因遊客 c 只參觀博物館(Museum)。. Ch. engchi. 圖 2. 紐約市的旅遊軌跡(遊客 a, b, c)[11]. 12. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(24) 2.2 共同創作(Collaborative Authoring) 在 Annette 等人的研究[6]中，指出維基(WIKI)是一個共同創作的網站，免費的百科全書進一步擴展為現在的維基百科，使用者可以在維基上創作新的內容。共同編寫讓使用者有機會運用自己的思想，並將必要的資訊技能應用於真實的活動中。為了要能流利的撰寫資訊，使用者必須能夠在跨學科的各種狀況下，使用他們的技能來解決問題並做出正確的決定。創建和使用維基(WIKI)是一個很好的資訊技能練習，例如：使用者除了專業知識之外，還需. 政治大輯和發布資訊和想法。維基(WIKI)為基於 Web 的開放式編輯工具，可以讓多個使用者輸入、立提交、管理和更新網頁內容。維基(WIKI)提供一個綜合想法和創建一個比傳統寫作環境更廣. 要瞭解撰寫文章的技巧，並且使用維基(WIKI)來做練習。使用者可以選擇、評估、修改、編. ‧ 國. 學. 泛、更深入、更互相關聯的合作機會。. ‧. 在 Swartjes 等人的研究[15]中，提出從故事回饋中不斷重複創作的概念來激發創意，並且將故事生成的技術(Story Generation Techniques)應用於互動敘事系統中，可以明顯地改變. y. Nat. sit. 創作者的創作方式，讓創作者可以更精巧地創作故事內容。這一個重複創作過程的循環為. er. io. 創意生成(Idea Generation)  故事實作(Implement)  演出模擬(Simulation)。由於故事情境. al. n. iv n C hengchi U 然模糊或有部分內容不是很清楚也沒關係，但是可以隨著創作過程的不斷進行而變得更加的初始引導設計形成創作過程的開始。剛開始的時候，創作者可能對於故事情境的目標仍. 清楚。此篇研究還提出了除錯(Debugging)和共同創作(Co-Creation)的概念。除錯(Debugging) 的想法是創作者可以調整故事產生器的結果，使故事的結果和創作者一開始的目標相同。共同創作(Co-Creation)的想法是創作者接受了故事產生器的結果(不可預知和令人驚訝的故事內容)，並且這些新的創意有可能會改變創作者最初的目標。藉由採用這種共同創作的方法，也可以緩解創作者在創作目標和部分無法控制故事結果之間的緊張關係。. 13. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(25) 圖 3. 重複創作循環圖[15]. 學. ‧ 國. 立. 政治大. ‧. 在 Kriegel 等人的研究[12]中，提出一個適用群組成員的工具。每位創作者需要先提供. y. Nat. 一個範例故事，而且為了得到豐富多樣的創作故事內容，這些創作者需要進行集體創作。. sit. 這樣共同創作的優點是意味著讓故事內容更加豐富並且增加更多的可能性。如圖 4 線性敘. al. n. 複雜。. er. io. 述的共同創作概念圖所示，經過三位創作者的參與和修改後，故事的內容變得更加豐富和. Ch. engchi. i n U. v. 圖 4. 線性敘述的共同創作概念圖[12]. 14. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(26) 在 FUKUHARA 等人的研究[9]中，提出一套線上共同合作編輯故事的系統，稱為 POC Communicator。此系統用於共同創作真實的故事內容，真實是讓人類理解內容的重要因素。我們在各種內容中，例如：電影、小說或是家人的故事分享等感受到真實。此研究指出真實故事的創作內容，對於人類的學習和知識分享來說非常重要，但是創作真實的故事內容需要很多技能，例如：除了專業作家或是故事講述者比較懂得如何吸引讀者或是觀眾的注意之外，一般人對於寫作或是敘述他們詳細的個人經驗會比較困難一點。為了解決這個問題，此研究說明如果一般人可以跟他們有相同經歷的人合作時，會比較容易真實地描述出. 政治大內容。此研究提出了一個合作式的故事建構概念，以促進群組成員共同創作，將真實的情立. 他們的經歷。這是因為他們彼此之間可以透過相互添加細節或是補充資訊來共同創作故事. ‧ 國. 學. 境添加到故事內容中。如圖 5 合作的故事建構概念圖所示，群組成員分享訊息和故事，並且共同創作和編輯真實的故事內容。. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 5. 合作的故事建構概念圖[9] 在 Plua 等人的研究[14]中，指出當旅遊推薦系統要求用戶明確且詳細地指定他們個人的偏好時，在填寫資料的過程中可能會讓使用者覺得非常單調乏味和不切實際的，而且會造成某些用戶不願意使用這樣的系統。如果是對某個群組而言，其中一個或是多個使用者不願意填寫的話，也有可能會妨礙到整個群組的使用狀況。此研究說明正在進行的工作應該利用偏好規格，尤其此方式特別適用於當一個群組是屬於非同步的狀況時。這樣的偏好. 15. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(27) 啟發界面可以明確地鼓勵使用者，從偏好啟發的任務中彼此互相幫忙，並且從其他已經完成的使用者中得到好處。如圖 6 共同偏好啟發界面所示，Bjorn 可以參考 Kerstin 的偏好來進行修改。共同偏好的啟發，是可以讓使用者參考其他使用者的偏好來做決定。. 政治大. 立. ‧ 國. 學. 圖 6. 共同偏好啟發界面圖[14]. ‧. 2.3 旅遊部落格(Travel Blog). sit. y. Nat. io. er. 在熊等人的研究[3]中，指出旅遊部落格是遊客的重要資訊來源，為其帶來了虛擬旅遊體驗。部落格作者的主觀想法在遊客體驗中發揮了重要的作用。旅遊部落格具有記錄、分享、延. n. al. Ch. i n U. v. 伸遊客體驗的功能，提升部落格作者的個人價值，為遊客提供不同廣度和深度的旅遊體驗. engchi. 交流平台。部落格作者成為一個體驗後的旅遊者，基於某種特別的心理需求，需要用文字或個性化的符號來記錄自己的旅遊心得體驗或用照片來永恆地記錄旅行的瞬間。受訪者認為撰寫旅遊部落格既可以給自身帶來快樂和滿足感，又可以為他人提供旅遊資訊參考。部落格作者透過撰寫旅遊部落格可以加深對旅遊的認識，使旅遊體驗更加豐富和更有深度。為了更深入探究旅遊部落格作者撰寫部落格的動機而對受訪者的詞頻進行篩選，結果發現使用頻率最高的詞彙分別是回憶、紀念、交流、朋友、他人/別人、分享、參考、方便。還有幾個獨特且具有代表性的理由，例如：讓自己的旅行更加深刻，與別人分享也是一種快樂，能夠提煉一些想法和審視自己的行為等。受訪者的這些想法和鏡像體驗有所關聯。. 16. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(28) 在 Bosangit 等人的研究[7]中，指出部落格已經成為旅遊產品和消費過程的一個觀點。研究將旅遊部落格作為文本文物(textual artefacts)進行檢查，以深入瞭解遊客如何建構秩序。根據身份管理過程中的經驗創作意義，針對三個流量最大的旅遊部落格網站的旅遊文章進行敘述性分析。通過講述的故事，敘述方式和他們如何與自我概念的各個方面聯擊起來，包括價值觀、偏好、技能、社會角色和關係，這些資訊揭露了遊客的真實身份和意義建構。研究認為將旅遊部落格作為”敘述分析”，提供遊客身份識別和意義建構的文本文物 (textual artefacts)，以及對這些文本的敘述分析提供了一種常識性的方法，對遊客的體驗和. 政治大中可以利用與已知的其他人合作來創建敘述，向更廣泛的觀眾傳達自我認同和想法。立. 行為進行更深入和更有意義的理解。敘述是與他人交流和談判的自我意識手段，在部落格. ‧ 國. 學. 部落格的敘述有著普遍的模式，這些模式遵循 Labov 和 Waletzky 的敘事結構。敘事結構模型包含摘要(Abstract)、情況介紹(Orientation)、複雜的行動(Complicating action)、評估. ‧. (Evaluation)、解答(Resolution)和結尾(Coda)六個要素。遊客可以使用這六要素來表達故事內. y. Nat. 容，產出有意義的資訊。雖然有些部落格文章並沒有直接使用摘要(Abstract)的方法開始他. io. sit. 們的敘述，或是以結尾(Coda)來做結束。但是他們的故事總是包含情況介紹(Orientation)，. n. al. er. 這個方法可以讓部落格作者提供有關故事中所涉及的地點、時間和人的資訊。複雜的行動. i n U. v. (Complicating action)是敘述的最大部分，以解答(Resolution)的方式來結束，這個部分可以顯. Ch. engchi. 示出部落格作者是如何解決問題。事件的評估(Evaluation)通常也是在故事的最後才會出現。表 1 描述了此模型的不同元素：. 表 1. Labov 和 Waletzky 敘事形式的結構模型[7] Abstract Orientation Complicating action Evaluation Resolution Coda. Summary of the subject matter Information about the setting: time, place, situation, participants What actually happened, what happened next What the events mean to the narrator How it all ended Returns the perspective to the present. 17. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(29) 第 3 章系統架構與設計. 本章將分三個部分來說明系統的架構與設計：第一部分為系統架構說明、第二部分為地理標記照片(Geotagged Photo)的預先處理和應用，第三部分為共同創作介面的設計。. 3.1 系統架構. 政治大. 圖 7 為我們的系統架構圖，主要分為兩大部分，使用者介面和地理標記照片(Geotagged. 立. Photo)處理，其中使用者介面再分成五個功能區塊，包含：1.建立旅遊故事(Travel Story. ‧ 國. 學. Creation)、2.上傳地理標記照片(Geotagged Photo Upload)、3.個人創作區(Personal Creation)、 4.共同創作區(Collaborative Authoring)、5.公布旅遊故事(Travel Story Publishing)。在地理標記. ‧. 照片(Geotagged Photo)處理的部分，我們會搭配 Google Maps Javascript API 和 Google Charts 來進行視覺化呈現。. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 7. 系統架構圖. 18. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(30) 3.2 地理標記照片(Geotagged Photo)的預先處理和應用本系統取得使用者上傳的地理標記照片 (Geotagged Photo) 後，會使用 PHP 提供的 exif_read_data()函式預先處理。我們使用 JSON 檔案搭配 Google Maps Platform 的 Maps JavaScript API 和 Google Chart 來視覺化地理標記照片(Geotagged Photo)的地理位置和照片數量貢獻度。 3.2.1 處理 GPS 座標. 治政座標系統可用來表示地表現象絕對位置的系統。在小比例尺地圖中，常使用經緯線座標；大立在大比例尺地圖中，則常使用圖網方格座標。經緯線是一套適用於全球的定位座標系統， ‧ 國. 學. 由地心、南極、北極三個定點，以及地軸和赤道兩條定線所構成的球面座標。地表上某地的經度，就是該地經線和本初經線在地心所夾的角度，例如：通過臺北的經線，在本初經. ‧. 線以東，二者在地心的夾角為 121˚30'，所以經度為 121˚30'E。座標單位是平面方格座標一. y. Nat. 種，利用 X、Y 軸座標值(十進位)來標示位置，單位是公尺，不同於球面經緯度座標(六十. n. al. er. io. sit. 進位)以度分秒表示[20]。. Ch. engchi. i n U. v. 圖 8. 經緯線與經緯度表示圖. 19. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(31) 表 2. 經緯度定義說明表項目. 定義. 度量的基線. 經度. 該地經線與零度經線在地心所夾的角度. 緯度. 為該地緯線與赤道在地心所夾的角度. 度數. 零度經線 (本初經線). 東、西經各 180o，共 360o 南北緯各 90o. 赤道. 治政大或 TIFF 圖像檔案中讀取 EXIF 表本研究使用 PHP 提供的 exif_read_data()函式，從 JPG、JPEG 立頭資訊，這樣就可以讀取數位相機所產生的屬性資料(Metadata)。這些屬性資料包含地理標. PHP(Hypertext Preprocessor)是一種伺服器端網頁程式語言，可嵌入於 HTML 中來運行。. ‧ 國. 學. 記照片(Geotagged Photo)的經緯度和拍攝的日期時間等，並且進一步將經緯度的格式轉換後存於 MySQL 資料庫。由 exif_read_data()函式直接取出地理標記照片(Geotagged Photo)的 GPS. ‧. 座標會以六十進位[度數、分數、秒數](DMS)來標示，為了搭配 Google Maps JavaScript API. sit. y. Nat. 和 Google Charts 的應用，我們必須將 GPS 座標的六十進位[度數、分數、秒數](DMS)轉換成十進位度數(DD)的經緯度表示格式。緯度座標的整數需介於 -90 和 90 之間，經度座標的. io. n. al. er. 整數需介於 -180 和 180 之間。轉換公式為 X 度 Y 分 Z 秒 = X + Y/60 + Z/3600，轉換過程可以參考圖 9 範例。. Ch. engchi. i n U. v. 圖 9. 取得 GPS 座標後再經過格式轉換的範例. 20. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(32) 3.2.2 建立 JSON 檔案 JSON 是 JavaScript 物件表示法(JavaScript Object Notation)的縮寫[27]，它是一種用 JavaScript 撰寫的資料格式，也是一種用於交換資料的格式。JSON 用於描述資料結構，有物件(Object) 和陣列(Array)兩種結構。每一個物件由一對大括號( { } )所構成，一個物件包含一系列非排序成對的「名稱：值」{Name : Value}組成，每一成對的名稱和值之間使用分號「：」分割，物件成員之間使用逗號「,」分隔。而每一個陣列是由一對中括號( [ ] )所構成，一個陣列是一個值或多個值[Value, Value]的集合，陣列成員之間使用逗號「,」分隔。. 立. 政治大. ‧ 國. 學 ‧. 圖 10. JSON 物件格式. n. er. io. sit. y. Nat. al. i n C h圖 11. JSON 陣列格式 engchi U. v. 我們使用 PHP 提供的 json_encode()函式，將由資料庫動態取得的資料轉換成 JSON 格式，並且將結果存至 JSON 檔案。之後再使用 Google Maps JavaScript API 和 Google Charts 搭配 JSON 檔案來應用。. 圖 12. json_encode()函式片段範例. 21. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(33) 3.2.3 Google Maps Platform Google 地圖(Google Maps)是 Google 公司向全球提供的電子地圖服務[26]，提供靈活的自訂地圖體驗，透過靜態和動態地圖，街景服務圖像以及 360 度環景，帶給使用者身歷其境的感受。支援地圖的 API 和 SDK 包含如下： 1. Maps SDK for Android：在 Android 應用程式中加入地圖。 2. Maps SDK for iOS：. 政治大. 立. ‧ 國. 學. 在 iOS 應用程式中加入地圖。 3. Maps Static API：. ‧. 運用最少的程式碼，在網站中加入簡單的嵌入式地圖圖片。. sit. y. Nat. io. n. al. er. 4. Street View API：. 使用 360 度全景圖像嵌入實境圖像。 5. Google 地圖網址：. Ch. engchi. i n U. v. 使用跨平台網址配置啟動 Google 地圖並觸發特定動作，例如：搜尋或規劃路線。 6. Maps JavaScript API：在網站中加入互動式地圖，使用您自己的內容和圖像自訂地圖。本研究使用第 6 點的 Google Maps JavaScript API 技術來客製化 Maps，提供使用者旅遊歷程軌跡(旅遊回顧功能)。Google Maps JavaScript API 是專門設計給網頁開發者所使用的開. 22. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(34) 發工具，可以使用此 API 將 Google 地圖安插在自己的網頁中，並且將自己準備的資料呈現於地圖上。而且使用 Google Maps JavaScript API 時會需要一個 API 金鑰，開發者必須先從 Google Developers Console 取得 API 的金鑰才能使用 Google Maps JavaScript API 進行開發，金鑰的取得與使用都是免費的，不過在使用上有配額(Quota)的限制，如圖 13 就是使用 Google Maps JavaScript API 進行開發的範例程式，開發者必須將 API 金鑰填入 YOUR_API_KEY 的位置。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 13. 使用 Google Maps JavaScript API 的範例程式 3.2.4 Google Charts Google Charts 是由 Google 公司提供的互動式圖表工具，可以視覺化使用者所提供的資料。本研究使用 Google Charts 提供的圓餅圖(Pie Chart)來視覺化使用者提供的照片數量貢獻度。. 23. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(35) 立. 政治大. ‧. ‧ 國. 學. Nat. sit. n. al. er. io. 3.3 系統的介面設計. y. 圖 14. 使用 Google Charts 的範例程式(For Pie Charts). Ch. engchi. i n U. v. 本系統介面分為五大部分：如圖 15 編號 1 所示為建立旅遊故事(Travel Story Creation)、編號 2 為照片上傳區(Photo Upload)、編號 3 為個人創作區(Personal Creation)、編號 4 為共同創作區(Collaborative Authoring)、編號 5 為公布旅遊故事(Travel Story Publishing)。本節將依系統介面的各別部分說明設計理念與操作方式。. 圖 15. 系統主選單的介面設計圖. 24. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(36) 3.3.1 建立旅遊故事(Travel Story Creation) 如圖 16 建立旅遊主題和上傳照片所示，我們提供使用者建立旅遊故事(Travel Story Creation) 的頁面，使用者可以按 Create Story 來建立旅遊主題和 Upload Photo 來上傳地理標記照片 (Geotagged Photo)。. 政治大. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 16. 建立旅遊主題和上傳照片 3.3.2 照片上傳區(Photo Upload) 使用者建立好旅遊故事主題後，如果還需要再繼續上傳照片，可以直接到照片上傳區(Photo Upload)選擇之前建立好的旅遊故事主題後，繼續在該主題之下進行上傳地理標記照片 (Geotagged Photo)的動作。. 25. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(37) 3.3.3 個人創作區(Personal Creation) 如圖 15 編號 3 為個人創作區(Personal Creation)，使用者可以按選單 Modify Photo 和 Your Selection 來確認個人上傳的地理標記照片(Geotagged Photo)。我們提供使用者個人地圖的旅遊歷程軌跡，使用者可以預先構思創作內容。還提供使用者基本的修改標題、描述、照片地點、照片記錄、並且也可以進行照片排序、照片刪除和選取照片進入下一階段的共同創作。. 政治大圖 15 編號 4 屬於共同創作區(Collaborative Authoring)，使用者按 Group Selection 後需要先立 3.3.4 共同創作區(Collaborative Authoring). 選旅遊主題。每群組成員可以建立多個旅遊主題，並且只有相同的群組成員才可以看到屬. ‧ 國. 學. 於他們的旅遊主題選單。我們在旅遊主題選單的設計頁面如圖 17 所示，我們將使用者上傳的地理標記照片(Geotagged Photo)顯示為旅遊主題選單的封面，加上群組成員的個人照片以. ‧. 識別出該旅遊主題的共同創作者，提供基本的旅遊主題、旅遊說明、照片數量和刪除功能。. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 17. 共同創作區的旅遊主題選單. 26. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(38) 選擇旅遊主題後即可進入到共同創作頁面，共同創作頁面的創作區域如圖 18 所示，我們會顯示該群組成員所上傳的地理標記照片(Geotagged Photo)，並且顯示出上傳該照片的使用者。我們設計以圖為主和文字描述為輔，提供使用者一些基本功能，使用者可以選擇刪除照片、排序照片或選擇照片至 Display Story。在共同創作區塊，我們提供該群組使用者反覆共同創作文字的功能，並且將修改記錄呈現於歷史記錄區塊，以方便使用者回顧和查看修改過的內容。在構思記錄區塊，我們提供使用者記錄摘要和思考的地方，群組使用者亦可以使用此區塊來討論創意點子等。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 18. 共同創作頁面的創作區域. 27. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(39) 在歷史記錄區塊的呈現方式，我們參考了維基百科[4]的檢視歷史(View History)頁面，以簡單的條列方式呈現。維基百科是一部百科全書，由來自全世界的維基人協同寫作，為維基百科做出貢獻，所有的人都可以對維基百科做出修改。如圖 19 使用者登入維基(WIKI) 個人帳號後，可以在維基百科的檢視歷史(View History)頁面查看到編修記錄，包含修改的日期時間、修改者和修改內容等。如圖 20 在共同創作頁面的歷史記錄設計方式，我們依序顯示修改者、修改內容和日期時間。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 19. 維基百科檢視歷史(View History)的頁面. 圖 20. 共同創作頁面的歷史記錄. 28. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(40) 3.3.5 公布旅遊故事(Travel Story Publishing) 如圖 15 編號 5 屬於公布旅遊故事區(Travel Story Publishing)，使用者可以在此功能下看到群組成員共同建立的旅遊故事主題。如圖 21 公布旅遊故事和選擇樣式頁面所示，使用者可以勾選 Publish this travel story 並且選擇 Style 1、Style 2 或 Style 3，即可將共同創作的旅遊故事公布於系統首頁給其他使用者欣賞，或是將旅遊故事的連結分享給親朋好友欣賞。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 21. 公布旅遊故事和選擇樣式頁面. 29. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(41) 第 4 章系統實作. 本章將分為五個部分來說明系統的實作技術：第一部分為系統實作流程(System Implement Processing)、第二部分為響應式網頁設計(Responsive Web Design)、第三部分為群組權限處理 (Group Permission Processing) 、第四部分為地理標記照片處理 (Geotagged Photos Processing)、第五部分為視覺化(Visualization)呈現時所使用的技術。. 治政 4.1 系統實作流程(System Implement Processing) 大立 ‧ 國. 學. 圖 22 為我們的系統實作流程圖，主要分成五個部分：第一部分先由使用者建立旅遊主題並且上傳地理標記照片(Geotagged Photo)至系統。第二部分由系統預先處理使用者上傳的地理. ‧. 標記照片(Geotagged Photo)，系統會先取得地理標記照片(Geotagged Photo)的經緯度和拍照日期時間，再經過格式轉換後存入資料庫。之後會再搭配 Google Map Javascript API 將旅遊. y. Nat. sit. 照片直接呈現於 Google Maps 來提供使用者旅遊歷程軌跡(旅遊回顧功能)。第三部分為使用. er. io. 者的個人創作區 (Personal Creation) ，系統會顯示登入使用者所上傳的地理標記照片. al. n. iv n C Authoring)，系統會顯出同一群組使用者所上傳的地理標記照片 hengchi U. (Geotagged Photo)和 Google Maps 等資訊，由使用者進行個人的創作和記錄。第四部分為共同創作區(Collaborative. (Geotagged Photo)和 Google Maps 等資訊，並且提供使用者篩選旅遊照片和摘要記錄等功能，由該群組成員透過腦力激盪法(Brainstorming)，反覆進行共同創作出屬於他們的旅遊回憶故事。. 30. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(42) 立. 政治大. sit er. io. a 4.2 響應式網頁設計(Responsive Web Design). y. ‧. ‧ 國. 學. Nat. 圖 22. 系統實作流程圖. n. iv l C n hengchi U 響應式網頁設計(Responsive Web Design, RWD)，或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。這是一種網頁設計的技術作法，可以讓手機、筆記型電腦、平板電腦、桌上型電腦等使用同一網站的圖文內容及資料庫。在不同尺寸或解析度的行動裝置或螢幕上，網頁程式會根據使用者所使用的裝置或設備，以符合版面大小的樣式來顯示網頁的內容。可以減少使用者進行縮放、平移和捲動等操作行為，提昇畫面的可瀏覽性及使用介面的親和度。我們在進行網站功能設計時，加入響應式網頁設計的方法，讓使用者方便於使用各式各樣的裝置或設備來進行共同創作旅遊故事。實作響應式網頁設計(Responsive Web Design)需要設定可視區域(Viewport)、設計網格系統(Grid System)和媒體查詢(Media Query)。. 31. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.

(43) HTML5 提供<meta>標籤讓網頁設計師可以控制可視區域(Viewport)，Viewport 是使用者在網頁上的可見區域，它會隨著設備(Device)而變化，在手機上的顯示畫面比在電腦螢幕小。<meta> viewport 元素為提供瀏覽器有關如何控制頁面尺寸和縮放的說明。如圖 23 是在網頁中包含的<meta> viewport 元素，其中 width = device-width 是指將頁面寬度設置為遵循設備的屏幕寬度，initial-scale=1.0 是指畫面載入初始的縮放比例為 100%。. 立. 政治大. 圖 23. 網頁中包含的<meta> viewport 元素. ‧ 國. 學. 設計網格系統(Grid System)的部分，我們參考 Bootstrap 提供的一套響應式、移動設備優先的流式網格系統，隨著屏幕或可視區域(Viewport)尺寸的增加，系統會自動分為最多 12. ‧. 列。Bootstrap 網格系統(Grid System)的工作原理是指網格系統(Grid System)經過一系列包含. sit. y. Nat. 內容的行和列來創建頁面佈局。下列為 Bootstrap 網格系統(Grid System)運作原理[30]：. n. al. er. io. 1. 行必須放置在.container class 內，以便獲得適當的對齊(alignment)和內邊距(padding)。 2. 使用行來創建列的水平組。. Ch. engchi. i n U. v. 3. 內容應該放置在列內，且唯有列可以是行的直接子元素。 4. 預定義的網格類，比如.row 和.col-xs-4 ，可用於快速創建網格佈局。 5. 列通過內邊距(padding)來創建列內容之間的間隙。該內邊距是通過.rows 上的外邊距 (margin)取負，表示第一列和最後一列的行偏移。 6. 網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如：要創建三個相等的列，則使用三個.col-xs-4。. 32. DOI:10.6814/THE.NCCU.EMCS.012.2018.B02.