跨平台社群媒體圖文檢索系統之設計與實作 - 政大學術集成

全文

(1)國立政治大學資訊科學系 Department of Computer Science National Chengchi University 碩士論文 Master’s 治 Thesis. 立. 政. 大. ‧ 國. 學. 跨平台社群媒體圖文檢索系統之設計與實作. ‧. Design and Implementation of a Text and. Nat. Media Content al v i n Ch engchi U. n. er. io. sit. y. Image Retrieval Tool for Cross-Platform Social. 研究生：許展嘉指導教授：陳. 恭. 中華民國一百零五年七月 July 2016.

(2) 跨平台社群媒體圖文檢索系統之設計與實作 Design and Implementation of a Text and Image Retrieval Tool for Cross-Platform Social Media Content. 研究生：許展嘉. Student：Chan-Chia Hsu. 指導教授：陳恭政. 國立政治大學資訊科學系. 學. ‧ 國. 立. 治Advisor：Kung Chen 大. ‧. 碩士論文. n. er. io. sit. y. Nat. a. A Thesis. v. l Department submitted to of Computer n i Science C. hengchi U. National Chengchi University in partial fulfillment of the Requirements for the degree of Master in Computer Science. 中華民國一百零五年七月 July 2016.

(3) 誌謝. 研究所的學期歷程，很快的就到了離別的時間了，回想這些年在資科所求學的點點滴滴，無疑是讓我又重新找到資訊人的求新知的慾望，無論是課堂上新的資訊技術與理論，或者是同學之間的相互交流，都使我獲益良多。首先要感謝我的指導教授，陳恭老師，在跟隨教授學習這段時間裡，教授總能不吝的傳授我新的觀念與知識，並且在困惑時導引我正確的研究方向。另. 治政大易理解的方式論述等等溝通的技巧，也是我在教授身上學到非常寶貴的經驗。立一方面，教授更讓我學習到，除了資訊的技術外，要如何有條理、讓人可以容. ‧ 國. 學. 除了指導教授之外，同時也要感謝水火計劃團隊的鄭宇君教授以及陳百齡教授。兩位教授以傳播學上的專業知識，讓我有機會學習以傳播學的角度來研. ‧. 究如何以不同社群媒體的資料特徵來作為檢索的依據，提供相當多寶貴且專業. sit. y. Nat. 的建議，使得本論文能順利完成。. n. al. 鼓勵就是我繼續前進的最大動力。. Ch. engchi. er. io. 最後我要感謝我的女友及我的家人們，謝謝你們一路以來的支持，你們的. i n U. v.

(4) 跨平台社群媒體圖文檢索系統之設計與實作摘要本校數位人文研究學者歷年研究中收集了選舉、災難、社運等重大事件的社群媒體文本資料，包含Twitter、Facebook、批踢踢BBS(PTT)，以及網路即時新聞等來源。這些大量的話語資料反應了網路社群大眾及新聞媒體在重大事件發生時的意見、情緒與互動狀態，非常具有研究價值。但對於這些大量社群媒體文本內容一直未能做充分地分析，其主要原因在於缺乏有效的資料檢索系統來幫助他們. 政治大因此本論文設計並建置一個跨媒體來源的資料檢索系統，依據所收集到的立. 探索與研究來自不同媒體來源的文本內容。. ‧ 國. 學. Twitter、Facebook、批踢踢、即時新聞之文本的data與metadata(後設資料)的特性，經由資料欄位重新定義、關聯式資料轉換、中文斷詞等機制，將data轉換成. ‧. 適合中文檢索的資料集，再透過Elasticsearch這個開放源碼的搜尋引擎進行鉅量. sit. y. Nat. 資料的搜尋，建立一個具有彈性資料查詢界面與使用者的管理機制。方便數位人. al. er. io. 文研究學者可以針對資料集、關鍵字詞、圖片、時間區間等等，快速的搜尋各社. v. n. 群媒體文本內容，並藉由視覺化檢索成果展示不同社群媒體上對特定事件關注程. Ch. engchi. i n U. 度及反應狀況，為跨平台社群媒體圖文檢索做一整合資料來源管道奠定基石。. 關鍵詞：社群媒體、搜尋引擎、資訊檢索. i.

(5) Design and Implementation of a Text and Image Retrieval Tool for Cross-Platform Social Media Content Abstract In the past few years, digital humanities researchers in our school have collected a huge amount of social media text data about major public events such as elections, disasters, social movements from various sources, namely Twitter, Facebook, PTT, real-time news. These text data can reflect largely the opinions, emotion, and interaction. 政治大. state, of the network community at the time of major events, thus being considered as. 立. valuable research assets. However, due to the lack of a proper information retrieval tool,. text data.. ‧. ‧ 國. 學. these researchers have not been able to launch any in-depth studies on these social media. Therefore, this thesis presents the design and implement an information retrieval. Nat. sit. y. system for these cross-media data sets based on the popular search engine, Elasticsearch.. n. al. er. io. Our system first preprocesses the data and meta-data of these social media texts into a. i n U. v. unified yet flexible data schema before building their indices in a way that users can. Ch. engchi. search the full text from both the data proper and various meta-data attributes such as date of publication and authors. We also provide some visualization aid to display the search results in a user-friendly manner. Overall, our system serves as a good tool for researchers to explore the social media text data from various sources in an easy yet effectively way.. Key words :. social media , Elasticsearch , information retrieval. ii.

(6) 目錄第一章緒論................................................................................................................... 1 1.1 研究背景 .......................................................................................................... 1 1.2 研究動機 .......................................................................................................... 2 1.3 研究目的 .......................................................................................................... 2 1.4 研究成果 .......................................................................................................... 4 1.5 論文大綱 .......................................................................................................... 5 第二章相關研究與技術背景....................................................................................... 6 2.1 社群媒體資料特徵 .......................................................................................... 6 2.1.1 Twitter 資料結構特徵 ............................................................................ 6. 政治大 2.1.3 批踢踢 BBS ............................................................................................ 9 立 2.1.2 Facebook 資料結構特徵 ........................................................................ 8. ‧ 國. 學. 2.1.4 即時新聞 ............................................................................................. 11 2.2 跨平台資料檢索之機制 ................................................................................ 11. ‧. 2.3 資料庫及存取技術 ........................................................................................ 13 2.3.1 Elasticsearch .......................................................................................... 14. Nat. sit. y. 2.3.2 Hibernate .............................................................................................. 17. er. io. 2.3.3 PostgreSQL ............................................................................................ 19. al. v i n C h................................................................................ 2.4.1 N-gram 基本原理 21 engchi U n. 2.4 中文斷詞與索引 ........................................................................................... 20. 2.4.2 反向索引基本原理 ............................................................................. 22 2.5 前端頁面技術 ................................................................................................ 23 2.5.1 Spring .................................................................................................... 24 2.5.2 jQuery.................................................................................................... 25 2.5.3 ECharts .................................................................................................. 26 2.5.4 Bootstrap............................................................................................... 27 第三章系統架構與設計............................................................................................. 29 3.1 系統設計理念 ............................................................................................... 29 3.2 資料儲存格式分析 ........................................................................................ 30 iii.

(7) 3.3 Elasticsearch 搜尋引擎溝通之 QUERY DSL.................................................... 33 3.4 Elasticsearch 搜尋引擎處理關聯式 data 機制.............................................. 33 3.5 系統設計與實作 ........................................................................................... 34 3.5.1 使用者操作模組 ................................................................................. 35 3.5.2 資料轉換模組 ..................................................................................... 37 3.5.3 資料搜尋模組 ..................................................................................... 38 3.5.4 資料展示模組 ..................................................................................... 40 3.5.5 資料匯出模組 ..................................................................................... 41 第四章系統實作與驗證............................................................................................. 42 4.1 Elasticsearch 建置 ........................................................................................... 42. 政治大 Java 與 Elasticsearch 互動查詢方法 .......................................................... 45 立. 4.1.1 Elasticsearch Mapping .......................................................................... 43 4.2. 4.3 視覺化呈現-Echarts .................................................................................... 46. ‧ 國. 學. 4.4 系統實作結果 ............................................................................................. 47 4.4.1 資料搜尋介面功能 ............................................................................. 48. ‧. 4.4.2 資料展示介面功能 ............................................................................. 51. sit. y. Nat. 4.5 系統驗證 ..................................................................................................... 59. io. er. 4.5.1 系統驗證方法 ..................................................................................... 59 4.5.2 系統驗證結果 ..................................................................................... 60. al. n. v i n Ch 61 第五章結論與建議..................................................................................................... engchi U 5.1 結論 ............................................................................................................... 61. 5.2 研究限制 ........................................................................................................ 62 5.3 未來發展與建議 ............................................................................................ 62 參考文獻....................................................................................................................... 64. iv.

(8) 圖次圖 1-1 收集資料區分類型 ............................................................................................. 3 圖 2-1 Twitter 個人檔案頁面 .......................................................................................... 7 圖 2-2 一則推文 Tweet 的結構 ..................................................................................... 7 圖 2-3 Facebook page 用戶檔案界面 ............................................................................. 8 圖 2-4 Facebook 貼文互動結構 ...................................................................................... 9 圖 2-5 PTT 的版面結構 ................................................................................................. 10 圖 2-6 PTT 貼文與回應之結構 ..................................................................................... 10 圖 2-7 全世界資料庫排名 ........................................................................................... 15. 政治大. 圖 2-8 全世界搜尋引擎資料庫排名 ........................................................................... 16. 立. 圖 2-9 全世界搜尋引擎資料庫趨勢排名 ................................................................... 16. ‧ 國. 學. 圖 2-10 Elasticsearch 架構圖 ........................................................................................ 17 圖 2-11 Hibernate 架構圖 ............................................................................................. 18. ‧. 圖 2-12 反向索引示意圖 ............................................................................................. 23 圖 2-13 Spring 運作架構 .............................................................................................. 25. y. Nat. sit. 圖 2-14 ECharts 架構圖 ................................................................................................ 27. n. al. er. io. 圖 3-1 Parent-child relationship 運作機制................................................................... 30. i n U. v. 圖 3-2 QUERY DSL 範例 ................................................................................................ 33. Ch. engchi. 圖 3-3 「跨平台社群媒體圖文檢索系統」之系統架構 ........................................... 35 圖 3-4 使用者操作流程 ............................................................................................... 36 圖 3-5 資料轉換模組流程 ........................................................................................... 38 圖 3-6 資料搜尋模組流程 ........................................................................................... 39 圖 3-7 使用者操作檢索流程示意圖 ........................................................................... 40 圖 3-8 資料匯出模組流程 ........................................................................................... 41 圖 4-1 Elasticsearch 安裝成功示意圖........................................................................... 42 圖 4-2 Elasticsearch-head 示意圖 ................................................................................. 43 圖 4-3 資料庫格式 JSON 示意圖 ................................................................................. 44 v.

(9) 圖 4-4 CJK 中文斷詞設定 .............................................................................................. 45 圖 4-5 ES 搜尋”蔡英文”範例格式 ................................................................................ 46 圖 4-6 ES 搜尋結果-長條圖 .......................................................................................... 47 圖 4-7 ES 搜尋結果-折線圖 .......................................................................................... 47 圖 4-8 關鍵字詞搜尋圖文功能示意圖 ....................................................................... 48 圖 4-9 選擇資料集功能示意圖 ................................................................................... 49 圖 4-10 選擇語言功能示意圖 ..................................................................................... 49 圖 4-11 選擇 news 媒體種類示意圖 ........................................................................... 50 圖 4-12 圖片 id 搜尋圖文功能能示意圖 .................................................................... 50 圖 4-13 限縮篩選功能示意圖 ..................................................................................... 51. 政治大. 圖 4-14 跨平台社群媒體圖文檢索搜尋結果統計圖 ................................................. 52. 立. 圖 4-15 跨平台社群媒體圖文檢索搜尋結果示意圖-Facebook ................................ 52. ‧ 國. 學. 圖 4-16 跨平台社群媒體圖文檢索搜尋結果示意圖-Twitter .................................... 53 圖 4-17 跨平台社群媒體圖文檢索搜尋結果示意圖-PTT ......................................... 53. ‧. 圖 4-18 跨平台社群媒體圖文檢索搜尋結果示意圖-News ....................................... 54. sit. y. Nat. 圖 4-19 跨平台社群媒體圖文檢索搜尋結果圖文示意圖 ......................................... 55. io. er. 圖 4-20 跨平台社群媒體圖文檢索搜尋結果之查看所屬留言 ................................. 56 圖 4-21 跨平台社群媒體圖文檢索搜尋結果之查看原始貼文 ................................. 56. n. al. Ch. i n U. v. 圖 4-22 跨平台社群媒體圖文檢索搜尋結果之動態排序 ......................................... 57. engchi. 圖 4-23 跨平台社群媒體圖文檢索搜尋結果之結果輸出示意圖 ............................. 58 圖 4-24 Elasticsearch-head 搜尋馬英九輸出示意圖-Twitter ...................................... 59 圖 4-25 Elasticsearch-head 搜尋馬英九輸出示意圖-News ......................................... 60 圖 4-26 跨平台社群媒體圖文檢索搜尋馬英九輸出示意圖-Twitter、News............ 60 圖 5-1 跨平台社群媒體檢索系統示意圖 .................................................................... 61. vi.

(10) 表次表 2-1 跨平台資料的查詢條件元素 ........................................................................... 12 表 2-2 關聯式資料庫 vs Elasticsearch ......................................................................... 14 表 2-3 Elasticsearch 中 Standard、CJK 及 Jieba 斷詞比較表 ...................................... 21 表 2-4 N-gram 範例 ....................................................................................................... 22 表 3-1 新版 Schema 資料表......................................................................................... 31 表 3-2 角色讀取權限的等級 ........................................................................................ 36 表 3-3 角色操作權限的等級 ........................................................................................ 37. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. vii. i n U. v.

(11) 第一章緒論 1.1 研究背景根據 StatCounter 於 2016 年 5 月份所發布的的世界社群媒體市佔資訊顯示，市佔率最高的社群網絡媒體為 Facebook1 (81.46%)、第 4 名為 Twitter2 (4.45%)，台灣市場 Facebook 更是逼近九成 (88.42%)，數據背後的涵義讓我們瞭解 Facebook、Twitter 無論是社群群體互動或商業應用都扮演著舉足輕重的角色。. 政治大另根據亞馬遜子公司，Alexa 最新調查，顯示台灣網站流量排名第 3 名為立 3. ‧ 國. 學. Facebook、第 5 名為東森新聞、第 8 名為聯合新聞、第 9 名為自由時報、第 12 名為 nowNews、第 18 名為蘋果日報、第 21 名為批踢踢 BBS、第 23 名為三立新. ‧. 聞，這些數據更顯示，社群媒體及新聞類網站，隨著網際網路技術的普及，使用. sit. y. Nat. 者開始習慣在社群媒體上分享和交流對特定事件想法和意見，使得社群媒體資料. io. er. 量成長十分迅速及多元，並結合線上新聞媒體所含的文本內容，其所隱含的大量資訊，相當具有研究的價值。社群媒體的影響力已經從虛擬開始逐漸擴展到了實. al. n. v i n C h等政治議題的影響，使得公民參與政治相關議體。而近年白衫軍、太陽花學運 engchi U 4. 5. 1. Facebook 官方中文譯名臉書，是一個社群網路服務網站。其名稱的靈感來自美國高中提供給學生包含照片和聯絡資料的通訊錄。除了文字訊息之外，使用者可傳送圖片、視訊和聲音媒體等訊息。 2 Twitter 官方中文譯名推特，是一個社群網路和一個微網誌服務，它可以讓使用者更新不超過 140 個字元的訊息，這些訊息也被稱作「推文（Tweet）」。 3. Alexa 是亞馬遜公司的一家子公司，總部位於加利福尼亞州舊金山。Alexa 分析提供各種網站的. 相關資訊與網頁瀏覽量，以其 Alexa.com 網站聞名。透過收集使用者的上網資訊，以便統計網站流量及相關資訊。 4. 白衫軍運動，是臺灣 2013 年洪仲丘事件發生後引爆的社會運動，是臺灣媒體取公民 1985 行動聯盟號召眾人穿「白衣」要求「真相大白」的概括性稱呼，. 5. 太陽花學運，又稱 318 學運、太陽花運動、佔領國會事件等，是指 2014 年 3 月 18 日至 4 月 10 日間，臺灣的大學生與公民團體共同發起佔領立法院的社會運動事件。 1.

(12) 題與社群媒體愈來愈緊密，甚至藉由社群網路媒體迅速將重要訊息擴散開來，達到資訊零落差，進而將原本被動獲得資訊的人轉為實際行動的參與者。另新聞媒體亦在重大事件發生時，亦會對特定議題發表的一些看法、評論等等資料，在收集社群媒體、新聞媒體的資料後，如能好好利用並交叉比較，將是相當具有研究價值的一門課題。. 1.2 研究動機數位人文研究學者所收集到的資料，過去的研究較偏重於資料的數量與形式. 政治大. 分析，對於這些大量社群媒體文本內容一直未能做充分地分析，主要原因在於缺. 立. 乏有效的整合檢索界面，來幫助數位人文研究學者檢索來自不同媒體來源的文本. ‧ 國. 學. 內容。然而這些本文內容，是相當值得深入研究的，如何能夠將這些不同特徵資料且格式差異甚大的大數據，以單一檢索介面呈現，並依研究者所需，提供彈性. ‧. 的檢索功能，是我們想要研究的主要動機。同時因檢索本文內容時，大部份是輸. Nat. sit. y. 入中文關鍵字詞，而這也影響檢索的結果是否正確的最重要因素，主要是仰賴中. n. al. er. io. 文斷詞適切是否，故中文斷詞機制的選擇亦是我們想要了解的方向之一。傳統上. i n U. v. 使用的資料庫類型大多為關聯式資料庫，但近年來隨著社群網站的興起，NoSQL. Ch. engchi. 等非傳統的資料庫也開始快速發展了起來。也讓研究人員在建立檢索資料庫時，思考該如何在這兩類資料庫之間進行選擇上傷透腦筋。. 1.3 研究目的數位人文研究學者在收集到的大量社群媒體資料後，依照平台的特性，包括非連續型的資料(例：Twitter, Facebook)，通常指的是單一特定事件所衍生的資料(如：2016 總統大選)；連續型的資料(例：批踢踢 BBS、即時新聞)，通常指自某一個時間點開始持續收集特定版面(如：八卦版)或特定媒體來源(如：蘋果日 2.

(13) 報)發送的所有內容，資料區分類型如圖 1-1 所示，這些資料的格式與特性差異極大且檢索資料不易，因此本研究目的為建置出一套依社群媒體資料特徵為主要查詢條件的跨平台社群媒體檢索系統，透過改善中文斷詞的檢索機制、資料關聯階層儲存機制、視覺化關聯式資料展示等等來檢索及呈現這些鉅量的社群媒體及新聞類資料。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. C圖 h1-1 收集資料區分類型U n i engchi. v. 在本研究實際設計一個可以對不同社群媒體進行關鍵字詞圖文檢索功能的一個跨平台社群媒體圖文檢索系統。並改善目前數位人文研究學者在分別收集完各種的社群媒體及即時新聞資料以後，所產生的一些問題。1、資料儲存分散，不易管理；2、無整合檢索介面；3、無跨平台資料統計分析；4、不易展示圖文關係。希望透過建立一套跨平台社群媒體資料查詢機制，將上述問題一一解決。而 3.

(14) 檢索系統關鍵性的成敗因素是在於 Search Engine 的選擇，我們選擇 Elasticsearch6，藉由它來斷詞、建立 index、檢索，使用者可透過相關的關鍵字詞可以至各社群媒體平台進行鉅量資料的搜尋功能，並以視覺化的功能展示其搜尋結果。我們所收集到的各社群媒體資料，大致可以根據以下四個類型的資料特徵來建立查詢條件： 1、資料平台類型：Twitter, Facebook, 批踢踢、即時新聞 2、用戶類型：一般個人帳號、個人粉絲頁、媒體帳號、機構或組織帳號 3、貼文類型：標題、貼文內容（文字、圖像、影片、超連結） 4、背景資料：時間資料、地理位置資料、使用載具等後設資料. 政治大. 要在複雜的 Facebook、Twitter 社群媒體網絡中找出貼文和留言的關聯性、. 立. 貼文和圖片的關聯性，我們選擇透過 Elasticsearch 中的 Parent-Child Relationshop. ‧ 國. 學. 功能達成在 NoSQL 中需要有關聯性的需求。在使用者管理機制方面，為了讓不. 制區隔不同使用者所能使用的檢索功能。. er. io. sit. y. Nat. 1.4 研究成果. ‧. 同使用者彼此之間的使用操作介面依等級而有所區別，我們以使用者身份認證機. al. n. v i n Ch 我們實作了「跨平台社群媒體圖文檢索系統」 Facebook, U e n g c h i ，用以蒐集Twitter, 批踢踢BBS、即時新聞等等相關本文資料，成功整合跨平台社群媒體資料儲存方式、中文斷詞規則、關聯式資料規則、檢索介面等等，讓數位人文研究學者分析或研究時能贏在起跑點上，可以透過簡單且彈性的查詢方式來檢索特定的議題，亦可將檢索的結果匯出，做更進一步的本文探索使用。故本系統的關鍵性特色如下： 1、跨平台資料搜尋，提供便捷、彈性的搜尋介面；2、限縮篩選範圍功能查詢，. 6. Easticsearch 是一個基於 Lucene 的搜尋服務器。它提供了一個分散式多用戶能力的全文搜索引擎，基於 RESTful web 接口。Elasticsearch 是用 Java 開發的，並作為 Apache 許可條款下的開放源碼發布，是當前流行的企業級搜索引擎。 4.

(15) 可照依第一次搜尋的結果，再次的縮小範圍搜尋；3、跨平台貼文與圖片關聯式查詢；4、跨平台貼文與留言雙向關聯式查詢;5、跨平台社群媒體數據視覺化呈現。. 1.5 論文大綱本論文主要分為五個章節，第一章緒論，其內容為介紹本論文研究的由來與研究成果，包含研究背景、研究動機、研究目的、研究成果及論文大綱；第二章，介紹實作系統開發設計所使用的相關研究與技術背景；第三章，說明我們研. 政治大. 究的系統設計架構理念；第四章說明我們系統的實作成果與驗證結果；最後，於. 立. 第五章提出本論文的結論與未來可能的發展。. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 5. i n U. v.

(16) 第二章相關研究與技術背景 2.1 社群媒體資料特徵根據不同社群媒體平台的界面設計，可以產出不同的互動與資料形式，研究者經常分析的類目，我們歸納出社群媒體資料收集的幾個面向，其中 Facebook 與 Twitter 做為社交媒體，以交織的人際多數的互動是在用戶相互的頁面下進行，同時具有用戶檔案資料與貼文互動資料，論壇資料、即時新聞則以貼文內容為主，資料來源為輔。相較於 Twitter, Facebook 等社交網絡平台，以用戶做為訊息流動的主要節點，批踢踢 BBS 站的形式則接近傳統的網路論壇，用戶必須到一. 政治大. 個的特定的虛擬空間參與討論。而即時新聞則是由各大網路媒體業者所發布的新. 立. 聞資料。上述四種類型的資料，是我們系統主要的來源 data。. ‧ 國. 學. 2.1.1 Twitter 資料結構特徵. ‧. Twitter 的資料結構可分為二大部分，第一是用戶個人檔案，第二是貼文互動. y. Nat. sit. 資料。在歷經多次變化之後，目前 Twitter 個人檔案的呈現方式也愈加豐富，包. er. al. n. 等，如圖 2-1。. io. 含個人圖片、自我介紹、追蹤人數(following)、追蹤者人數(followers)、發文內容. Ch. engchi. i n U. v. 在個人檔案中用來分析的最重要欄位，包括用戶帳號(user id，以@user 表示，不可更改)、用戶名稱(screen names，可編輯)、用戶描述，研究者可從這些資料來判斷該用戶的身份；其餘欄位用戶的追蹤人數(following)、追蹤者人數 (followers)則可用來瞭解用戶與社群的互動關係，甚至可進一步收集該用戶的 following/ follower 清單，以建立用戶之間的社會網絡關係，但這二個數目卻會隨時變化，每一刻鐘都可能新增或減少人數。. 6.

(17) 政治大. 立圖 2-1 Twitter 個人檔案頁面. ‧ 國. 學. 其次，在 Twitter 上，一則貼文(tweet)的結構，如圖 2-2，主要為貼文本文，當中內含主題標籤(hashtag)、超連結(hyperlinks)等延伸資訊。用戶與其他用戶的. ‧. 互動也都具體包含在一則推文之中，除了原創貼文之外，若該則貼文是轉推(分. y. Nat. 享)自其他用戶的貼文，則會顯示 RT 在貼文句首，若用戶在該則貼文內與其他用. n. al. er. io. sit. 戶對話，則可直接用 reply 表示，則在內文中會出現@User 的標示。. Ch. engchi. i n U. 圖 2-2 一則推文 Tweet 的結構 7. v.

(18) 2.1.2 Facebook 資料結構特徵本系統的 Facebook 資料來源，是 Facebook Page(粉絲頁)的公開資料，以下即以粉絲頁的資料結構特徵為例說明，由於 Facebook 更強調社交互動，在用戶檔案界面上的設計更加豐富多元，如圖 2-3。. 立. 政治大. ‧. ‧ 國. 學 er. io. sit. y. Nat. n. a圖l 2-3 Facebook page 用戶檔案界面i v n Ch U engchi. 圖 2-3 呈現了 Facebook 粉絲頁檔案中用來分析的最重要欄位，包括用戶帳號(user id，不可更改)、用戶名稱(screen names，可編輯)、粉絲頁類型、用戶描述，研究者可從 API 取得這些資料。另外，Facebook 的貼文互動結構則比 Twitter 複雜，Twitter 將用戶的互動水平呈現在貼文內容裡，但 Facebook 用貼文互動則是階層化，每一則貼文本身具有三個數字指標：按讚數、分享數、留言數，這三個指標可以反應這則貼文引起的用戶投入度(user engagement)，而具體的貼文互動內容最多可包含三層內容：貼文(post)評論(comment)回應(reply)，每一層內容都包含了發言者名稱與內 8.

(19) 容(文字、圖片)，留言也可以有按讚數為依據。Facebook 的貼文互動結構，如圖 2-4 所示。. 立. 政治大. ‧. ‧ 國. 學圖 2-4 Facebook 貼文互動結構. n. al. er. io. sit. y. Nat 2.1.3 批踢踢 BBS. Ch. engchi. i n U. v. 根據《數位時代》的最新報導，批踢踢實業坊簡稱 PTT，目前有超過 2 萬個分類看板，每天有超過 2 萬篇文章更新，從八卦、娛樂、運動、政治、文學、旅遊等各種主題皆有，註冊帳號約有 150 萬，尖峰時段有 15 萬人同時在線，年齡集中在 18～35 歲，是台灣最有影響力的網路社群。以最熱門的八卦版為例，它是台灣鄉民爆料的主要地方，PTT 的版面結構，如圖 2-5 所示。. 9.

(20) 政治大. 圖 2-5 PTT 的版面結構. 立. ‧ 國. 學. 從圖 2-5 來看，PTT 的版面上有每則貼文的發文標題、作者 id、發言時間，以及每則貼文獲得回應數目，每則貼文的回應又可分為「推」（正面回應）與. ‧. 「噓」（負面反應），因此一則貼文及回應的結構可參見圖 2-6。. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. 圖 2-6 PTT 貼文與回應之結構. 10. v.

(21) 2.1.4 即時新聞即時新聞資料來源主要是數位人文研究學者透過開源軟體 News diff 可以收集目前台灣多家平台的線上即時新聞發佈，所收集的資料欄位包括：媒體名稱（source name）、新聞標題（news title）、發佈時間（time）、新聞內文（news content）、該則新聞超連結（link）。即時新聞資料收集平台的設計，在概念上類似 Google news 平台所展示的樣貌，將各家媒體每日發佈即時新聞收集並儲存於資料庫中，做進一步的分析應用，像是計算每日新聞的熱門關鍵字、偵測突發的新聞議題等等功能。. 政治大. 立 2.2 跨平台資料檢索之機制. ‧ 國. 學. 社群媒體做為一個眾多使用者及內容互動之平台，研究者所收集到的大量社. ‧. 群媒體資料中包含了眾多的資料與後設資料，為了方便研究者進行資料檢索與查詢，我們必須先根據學術使用者所需研究目的，找出研究者經常需要使用的查詢. y. Nat. io. sit. 條件，搭配社群媒體的資料特徵，建立所需要的查詢 schema。. n. al. er. 根據本研究目前所收集的資料，可根據以下四個類型的資料特徵來建立查詢條件：. Ch. engchi. i n U. v. 1、資料平台類型：Twitter, Facebook, 批踢踢、即時新聞 2、用戶類型：一般個人帳號、個人粉絲頁、媒體帳號、機構或組織帳號 3、貼文類型：標題、貼文內容（文字、圖像、影片、超連結） 4、背景資料：時間資料、地理位置資料、使用載具等後設資料由於 Twitter、Facebook、批踢踢 PTT、即時新聞的資料欄位差異很大，且 Twitter、Facebook 是依據特定事件或主題才收集的資料集，如：太陽花學運、 2016 總統大選等，而批踢踢 PTT、即時新聞則是自某一個時間點開始持續收集特定版面(如：八卦版)或特定媒體來源(如：蘋果日報)發送的所有內容，這二種類型的資料集屬性差異頗大。為了建立跨平台的資料查詢機制，根據目前所收集四 11.

(22) 個平台的資料結構，我們需要先找出共同的基本欄位，建立對應的名稱做為主要的查詢條件。根據上述說明了四種不同資料來源的平台結構與貼文特徵，我們歸納了跨平台資料的查詢條件及各平台相對應的名稱，如表 2-1：. 表 2-1 跨平台資料的查詢條件元素. 發言者的層. 內容的層級. 級. V. (page). (版) 即時新聞. V. reply. V. V. V. V. (likes). (likes). V. (likes) V (Retweet). al. n. V. comment. Image. link. V. V. V. V. y. V. io. 批踢踢. shared post. (likes). Nat. Twitter. 貼文. ‧. ‧ 國 V. 回應. 學. 立 Facebook. 轉貼內容評論政原始治大題. user 標. sit. Source. V. V. Ch. V. er. platform. V. engchi. i n U. v. V. V. (+/-). V. V. (media) 註：V 表示該平台有這項欄位. 從表 2-1 來看，Facebook 的資料形式最為複雜，在發言者層級即可分為某粉絲頁或個別用戶發言，內容部分則為多層級的互動結構，可分為原始貼文、轉貼內容、第一層評論(comment)、第二層的回應(reply)，每一種內容都有按讚數做為 12.

(23) 熱門度指標，內容同時也包含圖像或超連結；相較之下，Twitter 的資料形式較為簡單俐落，無論是機構或個人使用者都是同樣層級的用戶帳號，貼文的互動也都只反應在單一層內容，僅以 RT 或@user 來區隔互動的方式，它也會帶有圖像與超連結。而批踢踢與即時新聞的資料結構較為單純，批批踢的發言者層級區分為八卦版及個人帳號，內容層級則是標題、貼文內容、評論，比較特別的是評論可分為「推」或「噓」兩種正負面評論，每一則貼文都帶有一個特定超連結網址，可連回批踢踢網站原始內容；即時新聞資料的發言者層級目前僅區分為媒體來源，雖然每則新聞幾乎都有「記者某某報導」，但目前許多家新聞來源（如：蘋果日報、聯合新聞網）都未將記者名稱單獨設立一個欄位，因此目前「記者某某報導」被視為貼文內容的一部分，在內容層級則可分為標題、貼文內容，每一則即時新聞. 政治大透過表 2-1 的分析整理，一個好的跨平台的資料檢索界面(UI)，應該是方便研立. 也都指向一個特定的超連結網址，可連回新聞網站的原始內容。. ‧ 國. 學. 究者進行資料檢索，研究者可選擇資料平台、特定來源(如:FB 粉絲頁、八卦版、蘋果日報)，設定特定的資料時間區間，然後在標題或內容進行關鍵字檢索與查詢，. ‧. 最後可統計所查詢的資料筆數及概況，並由研究者選擇是否彙出為 csv 格式檔案。. sit. y. Nat. er. io. 2.3 資料庫及存取技術. al. n. v i n Ch 在跨平台社群媒體圖文檢索系統實作中，最重要的部分即是資料的保存及其 engchi U 搜尋功能，因此資料庫的選擇亦成為本研究很重要的一環。市面上目前有關聯式資料庫及 NoSQL[1]兩種較受歡迎的資料庫種類。雖然關聯式資料庫發展已相當成熟，但是在時代的演進下，NoSQL 漸成大數據資料庫儲存的主流，且收集到的資料會愈來愈多，在需要有處理鉅量的能力及又要兼顧搜尋速度的功能下，因此我們選擇 Elasticsearch(ES)作為本研究成果系統使用之資料庫。比較關聯式資料庫和 Elasticsearch 在處理鉅量資料搜尋的優缺點如表 2-2 所示。. 13.

(24) 表 2-2 關聯式資料庫 vs Elasticsearch. 關聯式資料庫. ES(parent-child 機制). table 之間的關係. 高耦合. 低耦合. 關聯式對應 key 值. Primary key、. Parent id. Foreign key. 立慢. 快. 學. ‧ 國. data 搜尋速度. 政治大. 好. 斷詞功能. 無. 支援. 無. 支援. y. sit. n. al. er. io. 分散式功能. ‧. 差. Nat. 全文檢索效率. 擴充性. Ch. 差. engchi. i n U. v. 好. 2.3.1 Elasticsearch Elasticsearch 是由荷蘭開發者 Shay Banon 所創造之開源分散式搜尋分析系統，是一個基於 Apache Lucene(TM)的開源搜索引擎。無論在開源還是專有領域，Lucene 可以被認為是迄今為止最先進、性能最好的、功能最全的搜索引擎. 14.

(25) 庫。但是，Lucene 只是一個 Library。想要使用它，你必須使用 Java 來作為開發語言並將其直接集成到你的應用中，然而 Lucene 非常複雜，你需要深入了解檢索的相關知識來理解它是如何工作的。Elasticsearch 也使用 Java 開發並使用 Lucene 作為其核心來實現所有索引和搜索的功能，但是它的目的是通過簡單的 RESTful API 來隱藏 Lucene 的複雜性，從而讓全文搜索變得簡單。因此，所有的功能被集成到一個服務裡面，你的應用可以通過簡單的 RESTful API、各種語言的客戶端甚至命令行與之溝通。由於其容易學習與架設，且同時具有很高的可擴充性(scalability)與可用性(availability)，以及極強的資料處理效能，因此近年來在. 治政大名，如圖 2-7，SEARCH Elasticsearch 行名年年上升，全部資料庫中排名第 11 立. 資訊業界非常熱門。根據 2016 年 6 月 DB-ENGINES 發表的資料庫市佔排名，. ENGING 更是排名第 1 名，如圖 2-8、2-9 所示。. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2-7 全世界資料庫排名引用來源：http://db-engines.com/en/ranking. 15.

(26) 圖 2-8 全世界搜尋引擎資料庫排名引用來源：http://db-engines.com/en/ranking. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2-9 全世界搜尋引擎資料庫趨勢排名引用來源：http://db-engines.com/en/ranking. 國外各大型內容網站包含 Facebook、紐約時報、英國衛報、Netflix 也紛紛開始使用 Elasticsearch 來完成其內容搜尋與資料處理分析的工作。Elasticsearch 架 16.

(27) 構如下圖 2-10 所示：. 立. 政治大. Nat. y. ‧. ‧ 國. 學圖 2-10 Elasticsearch 架構圖引用來源：. n. al. er. io. sit. https://infaye.gitbooks.io/elasticsearch-fornorth/content/lucene&elasticsearch.html. 2.3.2 Hibernate. Ch. engchi. i n U. v. Hibernate[6]是一套架構於 Java 程式語言下的 ORM7(Object Relational Mapping)解決方案，其使用 GNU 通用公共許可證發行的自由、開源的軟體，提供了一個簡便的框架支援物件導向程式設計中的資料模型與關聯式資料庫的對. 7. ORM 就是將關聯式資料庫映射至物件導向的資料抽象化技術。其理念是將資料庫的內容映射為物件，讓程式開發人員可以用操作物件的方式對資料庫進行操作，而不直接使用 SQL 語法對資料庫進行操作。 17.

(28) 映。在 ORM 架構提出之前，程式多使用 SQL 語法對資料庫進行存取，將 SQL 語法撰寫於程式內，但此方法容易造成許多問題，譬如著名的 SQL 注入攻擊8等，容易造成系統出錯。而在推出 ORM 架構之後，則改由透過 DAO(Data Access Object)9存取資料庫，相較之下於程式碼部分也較精簡，以物件方式也較簡便，因此 ORM 的架構逐漸成為主流的資料存取解決方案。而本研究主要採用 Hibernate 作為存取資料庫的技術之一，Hibernate 架構如下圖 2-11：. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2-11 Hibernate 架構圖引用來源：http://www.waheedtechblog.in/2013/04/. 8. SQL 注入攻擊(SQL-Injection)是指 SQL 語法上的漏洞，藉由特殊字元來改變語法上的邏輯，如此一來駭客就能取得資料庫的內容。. 9. DAO 框架進行資料庫存取時，無須接觸到與所使用特定資料庫的技術相關細節，全名為 Data Access Object，在應用程式中需要使用到資料存取時，是透過一個資料存取介面來操作，而實際上進行資料庫存取的物件要實作該介面。 18.

(29) Hibernate 使用之優點如下： 1. 可減少 SQL 語言的撰寫，爾後若調整資料庫欄位也可以透過修改設定即可同步調整完畢。 2. 若更換不同的資料庫，可以透過調整參數快速完成資料庫轉移的程序。 3. 存取過程中自動產生對應的 SQL 語法，精簡開發者撰寫 SQL 語法的工作。 4. 可有效避免 SQL-Injection 攻擊，提高系統的安全性。除上述優點之外，Hibernate 使用上的缺點則是在串聯多表格查詢時的支援度有. 政治大. 限，所以少部分語法仍必須以 Native SQL 語法進行查詢。. 立. ‧ 國. 學. 2.3.3 PostgreSQL. ‧ sit. y. Nat. PostgreSQL10是一套功能強大、開放原始碼物件關聯資料庫系統，已開發超. al. er. io. 過 15 年，在系統可靠性、資料完整性和正確性獲得極佳評價。PostgreSQL 可以. v. n. 在各種常見作業系統上執行，包括 Linux、UNIX 和 Windows。PostgreSQL 完全符. Ch. engchi. i n U. 合 ISO ACID11，全面支援 Foreign Keys、Joins、Views、Triggers 與 Stored Procedures。支援大多數的資料型態，包括 Integer、Numberic、Boolean、 Char、Varchar、 DATE、INTERVAL 與 TIMESTAMP，也支援儲存二進制(binary)大型物件，如圖片、聲音或視訊。. 10. 現在被稱為 PostgreSQL 的對象-關係型資料庫管理系統（有一段時間被稱為 Postgres95）是從伯克利寫的 POSTGRES 軟件包發展而來的。. 11. ACID 是 ISO/IEC 10026-1:1992 對資料庫系統(DBMS)在處理資料異動所定義需要具備的功能，要求資料庫管理系統在寫入/異動資料的過程中，為保證資料庫交易(transaction)的正確可靠，必須具備以下四個特性：不可分割性(Atomicity)、資料一致性(Consistency)、獨立性 (Isolation)、持久性(Durability)。 19.

(30) PostgreSQL 可稱得上是一套企業級資料庫系統，具備先進資料庫系統功能，如多版本並行控制(Multi-Version Concurrency Control, MVCC) ，時間點資料還原，表格空間(tablespaces) ，非同步資料複製(Asynchronous Replication) ，巢狀交易，線上/熱備份，複雜的查詢規劃器/優化，支援容錯能力的優先寫入日誌檔。 PostgreSQL 支援國際字元集，多位元組字元編碼, Unicode 等資料格式的排序與區分大小寫，是一套高擴展性、可處理大量數據資料及可負荷大量使用者同時存取的資料庫系統。. 2.4 中文斷詞與索引. 立. 政治大. ‧ 國. 學. 詞是最小有意義且可以自由使用的語言單位。任何語言處理的系統都必須先能分辨文本中的詞才能進行進一步的處理，例如機器翻譯、語言分析、文本分. ‧. 析、資訊抽取等。因此中文自動斷詞的工作成了語言處理不可或缺的技術。. Nat. sit. y. 而在 Elasticsearch[2][3]中，我們比較了 Standard(Elasticsearch 預設)、CJK 及. n. al. er. io. Jieba 斷詞優劣後如下表 2-3。由於中文詞集是一個開放集合，不存在任何一個詞. i n U. v. 典或方法可以盡列所有的中文詞。當處理不同領域的文件時，領域相關的特殊詞. Ch. engchi. 彙或專有名詞，常常造成分詞系統因為參考詞彙的不足而產生錯誤的切分。故選擇較適合我們的系統的斷詞方式 CJK 來使用 Elasticsearch 全文檢索功能(原理是反向索引)。. 20.

(31) 表 2-3 Elasticsearch 中 Standard、CJK 及 Jieba 斷詞比較表比較項目. Standard. CJK. Jieba. 斷詞規則. unigram. bigram. dictionary. 單詞搜尋. 支援. 不支援. 大部份支援. 支援. 支援. 支援. 1 個字的詞. 2 個字的詞. 字典中的詞. 蔡、英、文. 治政蔡英、英文大. 蔡、英文. 最新 2.3. 1.5. (全文檢索) 多詞搜尋 (全文檢索) Term 搜尋 (index 搜尋) 範例. 支援版本. 最新 2.3. ‧. ‧ 國. 立. 學. (蔡英文). y. Nat. er. io. sit. 2.4.1 N-gram 基本原理. al. v i n Ch 音中 N 個項目（item ）的序列。項目（item i U e n g c h）可以是音節、字母、單詞等等 n. N-gram 是計算機語言學和概率論範疇內的概念，是指給定的一段文本或語. 等。通常 N-grams 取自文本或語料庫。N=1 時稱為 unigram ，N=2 稱為 bigram ，N=3 稱為 trigram ，範例如表 2-4。N-gram 是經由不同單元的組合以及統計結果找尋出一個機率最高的解答，著名的例子就是 Google 的搜尋引擎，它使用大量的 N-gram 演算法，去猜測使用者輸入的字彙以及其最有可能接續的詞語。. 21.

(32) 表 2-4 N-gram 範例 type. unigram. bigram. trigram. example: 臨時大總統. 臨、時、大、總、統. 臨時、時大、大總、總統. 臨時大、時大總、大總統. 2.4.2 反向索引基本原理反向索引（英語：Inverted index），也常被稱為倒排索引、置入檔案或反向檔案，是一種索引方法，被用來存儲在全文搜尋下某個單詞在一個文件或者一組文件中的存儲位置的映射。. 立. 政治大. ‧ 國. 學. 反向索引是文件檢索系統中最常用的資料結構。一個未經處理的資料庫中，一般是以文件 ID 作為索引，以文檔內容作為記錄。而 Inverted index 指的是將單. ‧. 詞或記錄作為索引，將文件 ID 作為記錄，這樣便可以方便地通過單詞或記錄查. sit. y. Nat. 找到其所在的文件。. n. al. er. io. 當我們在閱讀一本書的時候，通常使用頁數來查找相關內容。每一頁上具有. v. 一定數量的文本，這些文本記錄的資訊。當使用倒排方式後，不再有整頁整頁的. Ch. engchi. i n U. 資訊，資訊被分割成一個個的關鍵字，並輔以關鍵字所在的原書中的頁數，而構成一個倒排基本單位。例如，一本旅遊類書籍的第 214 頁說明了“福爾摩沙”的來歷，在經過倒排後，“福爾摩沙”被作為一個單獨的關鍵字切分出來，保存在索引中，同時還帶有其頁碼 214，作為索引的內容。這樣當資訊系統檢索“福爾摩沙”這個關鍵字的時候，系統可以迅速的給出其頁碼，然後再到原書中取出相關頁面文本內容。這種搜尋方式比從第一頁開始線性匹配所有文本，找出包含有“福爾摩沙”的頁面內容快得多，如圖 2-12 所示。 22.

(33) 立. 政治大. 圖 2-12 反向索引示意圖. ‧ 國. 學. 在反向索引中，關鍵字的數量並非隨著文本內容的增長也線性增長。這因為. ‧. 不論多大數量的文本資料庫，總能規範出一個關鍵詞表，它的增長率在文本資料. sit. y. Nat. 庫達到一定規模後可以忽略不計。. n. al. er. io. 而在索引系統從建置索引到進行檢索時，在這整個過程中，最消耗時間的應. i n U. v. 該倒排階段。因為在倒排時，需要對文本進行分析，斷詞，還要構建索引結構，. Ch. engchi. 記錄位置資訊。雖然這一階段花時間，但是一旦完成，在搜尋時將會大大節省時間。故搜尋速度才是影響用戶最終體驗的直接因素。. 2.5 前端頁面技術前端頁面在本研究之成果系統中扮演著關鍵重要的角色，因此簡潔的版面以及順暢的操作流程都是前端頁面必須具備的基本要素，舉凡現今有許多的網站開發工具都非常方便開發者使用，而其中 ORACLE 推出的 JAVA 更包含有一整套的 23.

(34) 開發工具及程式語言完整的套件，此外再搭配一些開發前端頁面技術常用的套件如 jQuery[4]及 JAVA 的前端框架 Spring[5]等讓頁面呈現能更豐富完整。另外本研究相關統計圖表也使用了百度所開發的 JavaScript 的圖表套件 ECharts[7]，以便將相關統計數值以圖形視覺化的方式呈現。. 2.5.1 Spring Spring 的核心是個輕量級（Lightweight）容器（Container），實現了 IoC （Inversion of Control）模式的容器，基於此核心容器所建立的應用程式，可以達. 政治大. 到程式元件的鬆散耦合（Loose coupling），讓程式元件可以進行測試，這些特性. 立. 都使得整個應用程式可以在架構上與維護上都能得到相當程度的簡化，其特色如. ‧ 國. 學. 下：. 輕量級（Lightweight）：Spring 的核心在檔案容量上只有不到 1MB 的大小，. ‧. 而使用 Spring 核心所需要的資源也是很小的，Spring 是個非侵入性. y. Nat. sit. （Nonintrusive）框架，它的目的之一，是讓應用程式不感受到框架的存在，減. n. al. er. io. 低應用程式從框架移植時的負擔。. Ch. i n U. v. 容器（Container）：Spring 核心本身是個容器，管理物件的生命週期、物件. engchi. 的組態、相依注入等，並可以控制物件在創建時是以原型（Prototype）或單例（Singleton）的方式來建立。 IoC（Inversion of Control）：Spring 的核心概念是 IoC，更具體而易懂的名詞是依賴注入（Dependency Injection），使用 Spring，自己不需在程式碼中維護物件的依賴關係，只需在組態檔中加以設定，Spring 核心容器會自動根據組態將依賴注入指定的物件。持久層：Spring 提供對持久層的整合，如 JDBC、O/R Mapping 工具. 24.

(35) （Hibernate、iBATIS）、事務處理等。 Web 框架：Spring 也提供 Web 框架的解決方案，但也可以將自己所熟悉的 Web 框架與 Spring 整合，像是 Struts、Webwork 等，都可以與 Spring 整合而成為適用於自己的解決方案。Spring 運作架構如下圖 2-13：. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2-13 Spring 運作架構引用來源: http://www.jcombat.com/spring/architecture-spring-framework. 2.5.2 jQuery jQuery 是一套跨瀏覽器的 JavaScript 函式庫，簡化 HTML 與 JavaScript 之間的操作。由約翰·雷西格（John Resig）在 2006 年 1 月的 BarCamp NYC 上釋出第一 25.

(36) 個版本，目前是由 Dave Methvin 領導的開發團隊進行開發。全球前 10,000 個存取最高的網站中有 65%使用了 jQuery，是目前最受歡迎的 JavaScript 函式庫。透過 jQuery 可以用最精簡少量的程式碼來輕鬆達到跨瀏覽器 DOM (Document Object Model) 12操作、事件處理、設計頁面元素動態效果、 AJAX 互動等。 jQuery 特色如下： . 跨瀏覽器的 DOM 元素選擇. . DOM 巡訪與更改：支援 CSS 1-3. . 事件（Events）. . CSS 操縱. . 特效和動畫（移動顯示位置、淡入、淡出）. . Ajax. . 延伸性（Extensibility）. . 工具：例如瀏覽器版本（已取消內建，改由 jQuery Migrate plugin 外掛提供）和 each 函式。. . JavaScript 外掛模組. . 輕量級. 立. 政治大. ‧. ‧ 國. 學. n. al. er. io. sit. y. Nat 2.5.3 ECharts. Ch. engchi. i n U. v. ECharts 是百度公司用 JavaScript 所撰寫的一個圖表函式庫, 能夠很簡單便捷的在 Web 網站添加豐富、漂亮、互動式的圖表，ECharts，縮寫來自 Enterprise Charts，商業級數據圖表，一個純 JavaScript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11， chrome，firefox， Safari 等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可高度個. 12. DOM 文件物件模型(Document Object Model) 是 HTML，XML 和 SVG 文件的程式介面。它提供了一個文件（樹）的結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法。DOM 提供了文件以擁有屬性與函式的節點與物件組成的結構化表示。節點也可以附加事件處理程序，一旦觸發事件就會執行處理程序。本質上，它將網頁與腳本或程式語言連結在一起。 26.

(37) 性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K 線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向佈局圖、地圖、儀錶盤、漏斗圖、事件河流圖等 12 類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等 7 個可交互組件，支持多圖表、組件的聯動和混搭展現。ECharts 架構如下圖 2-14：. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2-14 ECharts 架構圖引用來源: http://echarts.baidu.com/echarts2/doc/doc.html. 2.5.4 Bootstrap Bootstrap 原名 Twitter Blueprint，由 Twitter 的 Mark Otto 和 Jacob Thornton 編寫，它簡潔靈活，使得 Web 開發更加快捷。Bootstrap 是一組用於網站和網路 27.

(38) 應用程式開發的開源前端（所謂「前端」，指的是展現給終端使用者的介面。與之對應的「後端」是在伺服器上面執行的代碼）框架，包括 HTML、CSS 及 JavaScript 的框架，提供字體排印、表單、按鈕、導航及其他各種元件及 JavaScript 擴充套件，讓在使動態網頁和 Web 應用的開發更加容易。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 28. i n U. v.

(39) 第三章系統架構與設計本章之目的為設計及實作跨平台社群媒體圖文檢索系統，因需對數位人文研究學者的研究中收集了選舉、災難、社運等重大事件的社群媒體文本資料及新聞媒體資料進行儲存、中文斷詞及檢索。這些大量的話語資料如被統一儲存在資料庫中，不但可以依照本身的需求做搜尋，亦可將搜尋的結果匯出，以做後續的進階文本分析使用，因此透過建置彈性的資料檢索界面，幫助數位人文研究學者儲存及檢索來自不同媒體來源的文本內容，建置一個整合性跨媒體來源的資料檢索工具，是我們設計的重點。. 3.1 系統設計理念立. 政治大. ‧ 國. 學. 本研究之實作系統「跨平台社群媒體圖文檢索系統」在系統設計上，首先考. ‧. 量來源資料內容如 Twitter, Facebook, PTT, News 的資料欄位差異大，為了建立跨平台的圓文資料查詢機制，故先找出共同的基本欄位，建立對應的名稱，做為主. y. Nat. er. io. sit. 要的關鍵字詞查詢條件，其次在中文斷詞部份，因使用 Elasticsearch 中的全文檢索功能，固選擇使用 CJK 來做為我們斷詞的主要依據。然而有些社群媒體資料是. al. n. v i n 存在某種關係的，如 post 與 comments Elasticsearch C h 間的關係，因此我們使用了 engchi U 中的 Parent-Child Relationship 的機制，如圖 3-1 所示，來實現關聯式資料的儲存. 方式。最後友善的前端使用者操作介面，亦是我們考量的重要環節，讓使用者可透過簡易的操作檢索功能，並經由視覺化的統計分析圖表進一步了解各社群媒體間的對特定事件反應的分布狀況。故我們設計概念如下： 1. 簡易操作：系統提供簡易輸入的操作介面，使用者只需輸入關鍵字詞即可開始操作。 2. 跨平台搜尋：可依照自行勾選的平台，進行搜尋功能。. 29.

(40) 3. 圖文檢索：可以依據圖 id 找文本內容、亦可以依據文本內容找圖。 4. 權限管理：可以依照登入的使用者，做權限上的控管管理。. 政治大. 立. Nat. n. al 3.2 資料儲存格式分析. er. io. sit. y. ‧. ‧ 國. 學圖 3-1 Parent-child relationship 運作機制. Ch. engchi. i n U. v. 我們將Twitter, Facebook, PTT, News的資料欄位做一整合的處理並產出一個適合的Schema，以便能在搜尋時，能夠有效的找到該關鍵字詞，新版Schema如表 3-1：. 30.

(41) 表 3-1 新版 Schema 資料表. 欄位名稱. 欄位需求. 欄位敘述. _id. optional. 唯一編號. platform. must. 媒體來源. content. must. 文本內容. Uri. must. 來源網址. Time. must. 發文時間. content_language. optional. 政治大內文語言 optional 留言數立. comments_count. 事件敘述. favorite_count. optional. 收藏次數. from_parent_id. optional. 回文的層級id. optional. 發布頁面/看板id. optional. 媒體名稱. al. y. sit. n. media_like_count. er. io. media_name. Nat. media_id. ‧. ‧ 國. optional. 學. Event. optional. Ch. engchi. i n U. v. 喜歡數/按讚數. from_user_category. optional. 粉絲頁發佈類別. from_user_id. optional. 發文者id. nt. optional. 發文者按讚數. from_user_language. optional. 發文者語言. from_user_location. optional. 發文者地區. from_user_name. optional. 發文者名字. from_user_nick. optional. 發文孝暱稱. from_user_like_cou. 31.

(42) from_user_realname. optional. 發文者真實姓名. Geo. optional. 經緯度. twi_hashtags. optional. Twitter標記. fb_hashtags. optional. Fb標記. like_count. optional. 按讚數發文類別 (post,comment,reply.. post_type. optional. share_target_uri. optional. ..). 政治大正向分享網址 optional 正向分享的標題立. share_target_title. 短網址所屬之網域. shared_initial_uri. optional. 短網址. shared_title. optional. 轉貼標題. shared_uri. optional. 還原短網址之最終層. optional. 被分享數. y. sit. io. v ni. 發文型態（link,. n. al. er. Nat. shares_count. ‧. ‧ 國. optional. 學. shared_domain. Ch. engchi U. status, photo,. status_type. optional. video, offer）. story_tag. optional. 引用別人貼文的tag. tags_id. optional. 被tag的使用者id. tags_name. optional. 被tag的使用者名稱. Title. optional. 標題. update_time. optional. 更新時間. domain. optional. 網域. 32.

(43) dataset. optional. 資料集名稱. 3.3 Elasticsearch 搜尋引擎溝通之 QUERY DSL Elasticsearch 支援多種查詢方式，其中一種就是 QUERY DSL(Domain Specific Language)，他是類似英文語言的述敘方式，把請求寫在 JSON 格式中，然後進行相關的查詢請求功能。如圖 3-2 所示。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 3-2 QUERY DSL 範例資料來源：http://slideplayer.com/slide/7321986/kit. 3.4 Elasticsearch 搜尋引擎處理關聯式 data 機制現實世界裡，關聯式資料庫中的關係（relationship）是尤其重要的：像是貼文包含留言、貼文會包含圖片等等。每個實體（entity，或者行 row）可以由一個主鍵唯一識別實體都是正規化後的結果。對唯一實體的數據依附在實體主鍵 33.

(44) 上。但是關聯式資料庫除了不支持全文檢索外，還有一個大的缺陷。就是在查詢時進行 join 常常消耗大量資源。故依賴不同的硬體執行實體的 join 並不實用。這也就給存放在一個服務器上的數據量造成了一定限制。然後 NoSQL 強調反正規化，即看文檔看成是扁平狀態，因此就不會有 JOIN 的相關問題，然而關係其實是重要的，故 Elasticsearch 因此提供了四種方式來管理關聯式的資料結構： 1.Application-side joins、2.Data denormalization、3.Nested objects、4.Parent/Child relationships，沒有最好的方式，我們必須了解其需求，選擇最合適的解決方案。因我們數據模型和數據關係是純粹的層次（或者可以映射到一個純粹的分層. 政治大. 模型），因選擇了 Parent/Child relationships，優缺點如下：. 立. A. parent 文檔可以不需要重新索引 children 進行更新。. ‧ 國. 學. B. child 文檔可以被添加、修改或者刪除，而不影響 parent 或者其他 children。. sit. y. Nat. C. child 文檔可以被作為搜索請求的結果返回。. ‧. 這在 child 文檔很多和增改頻率很高的時候尤其有用。. io. al. er. Elasticsearch 維護了一個 parent 到 children 的映射。所以在查詢時刻的連. n. 接（join）會很快，但是這樣也給 parent-child 關係帶來了限制：parent 和所有. Ch. children 必須處在一個分片上。. engchi. i n U. v. 3.5 系統設計與實作本研究實作系統之各項開發工作，主要分為：1.使用者操作模組、2.資料轉換模組、3.搜尋模組、4.資料展示組、5.資料匯出模組。在開發工作上所採用之主要技術架構如下圖 3-3 「跨平台社群媒體圖文檢索系統」之系統架構。. 34.

(45) 立. 政治大. ‧ 國. 學. 圖 3-3 「跨平台社群媒體圖文檢索系統」之系統架構. ‧. 3.5.1 使用者操作模組. y. Nat. sit. 使用者操作模組其主要功能為提供使用者彈性且簡易的相關操作介面，使用. n. al. er. io. 者前端操作介面有其特定之權限差異，在設計上有採用有管理者的功能去管理一. i n U. v. 般使用者的權限。權限管理包含帳號管理、資料集管理功能，並使用 PostgreSQL. Ch. engchi. 做為儲存權限管理的資料庫。為了限制各使用者誤接觸他人的資料，且每個使用者所能操作的功能也不盡相同，故會依使用者的權限來展示操作介面亦會層次上的不同，使用者操作介面功能如下圖 3-4。. 35.

(46) 立. 治政圖 3-4 使用者操作流程大. ‧ 國. 學. 使用者角色與其所屬讀取權限，我們依其等級高至低分成四種角色，依序為 admin、dataset admin、user、guest，如表 3-2 所示。有了上述的四角色後，我們. ‧. 再賦予其能夠操作權限上的控管，包含角色的管理、資料集管理、資料匯出管理. n. al. 角色 / 公開程度. i n U. 表 3-2 角色讀取權限的等級. Ch. engchi. er. io. sit. y. Nat. 等等，如圖表 3-3 所示。以使用者的角色來決定有哪些資料集可供其檢索，哪些是可匯出，是我們系統上的一大特色。. v. private. group. public. demo. admin. V. V. V. V. dataset admin. V. V. V. V. user. X. V. V. V. guest. X. X. X. V. 36.

(47) 表 3-3 角色操作權限的等級. 角色 / 操作. 指派角色. 刪除資料集. 增修資料. 匯入資料. 匯出資料. 集. admin. V. V. V. V. V. dataset admin. X. X. V. V. V. user. X. X. X. X. V. guest. X. X. X. 立. 政治大 X X. ‧. ‧ 國. 學. 3.5.2 資料轉換模組. y. Nat. er. io. sit. 資料轉換模組，使用者依其特定事件所其集收完成的資料如 Twitter, Facebook, PTT, News 的本文轉透過此模組換成統一的 Schema，以利後續匯入資料. al. n. v i n 庫後，並讓檢索時能有較一致性、且快速的搜尋優勢，如下圖 3-5 所示。 Ch engchi U. 因某些資料與資料間，像是 post 與 comments 之間，post 與 image 之間會有某種關係存在，故在做轉換時，會特別考量彼此之間的關係，做一個適當的轉換，將其分別存在不同的 type(table)上。. 37.

(48) 立. 政治大. ‧. ‧ 國. 學. n. al. er. io 3.5.3 資料搜尋模組. sit. y. Nat. 圖 3-5 資料轉換模組流程. Ch. engchi. i n U. v. 使用者輸入可依其關鍵字詞等等條件，例如輸入一定要出現的”關鍵字詞”、或一定不出現的”關鍵字詞”、或是任一出現即可的”關鍵字詞”來做搜尋的條件，當然也可以依照系統給予的選擇條件來做搜尋條件，例如日期、資料集、各平台社群媒體、新聞媒體等等，資料搜尋模組會將其所選擇或輸入的條件，組合成可被 Elasticsearch 接受的搜尋條件，可依照使用者需求來檢索的一種彈性搜尋方式。另外，如 Facebook 的 comment 或是 image 時，因之前轉換模組已經建立 38.

(49) parent-child 關係，故 Elasticsearch 將其組合在一個搜尋結果內，以 JSON 的方式一併做返回全部的 DATA。限縮篩選範圍功能，則可依照使用者第一次的篩選條件後，再次縮小其搜尋的範圍，將第一次和第二次所搜尋的條件組合，並至 Elasticsearch 查詢後，將結果呈現出來，達到類似進階搜尋的功能。該組模流程圖如圖 3-6：. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 3-6 資料搜尋模組流程. 如以使用者的操作檢索流程面向來看的話，使用者會依據使用者所鍵入的關鍵字詞，進行檢索，檢索時會依其資料的特性，來呈現不同的資料檢索結果，如圖 3-7 所示。. 39.

(50) 立. 政治大. ‧. ‧ 國. 學. n. al. er. io. sit. y. Nat 圖 3-7 使用者操作檢索流程示意圖. Ch. engchi. i n U. v. 3.5.4 資料展示模組資料展示模組，提供一視覺化的搜尋結果統計圖，依媒體種類 Twitter、 Facebook、批踢踢 BBS、News 分別列示，並可一步觀看明細的資料，各個媒體種類顯示的明細欄位皆不相同，預設是 10 筆在同一頁面顯示，可依照自己定義的筆數來做分頁功能。如需要作動態排序則可以在明細欄位上面做選擇排序的標準。. 40.

(51) 另有關 post 則可以點擊觀看其所屬的 comment，反之亦然。而如有 image 的資料，也會呈現在明細的欄位上，讓使用者可以點擊顯示原始圖片的資訊。. 3.5.5 資料匯出模組使用者可依照本身搜尋的結果，依照媒體種類區分為Twitter、Facebook、批踢踢BBS、News等資料，並且按下結果輸出按鍵，可將資料整個匯出做後續相關分析使用，匯出流程如圖3-8。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. 圖 3-8 資料匯出模組流程. 41. v.

(52) 第四章系統實作與驗證為了實作「跨平台社群媒體圖文檢索系統」，我們用 Elasticsearch 做為資料庫及檢索使用，中文斷詞選用 CJK 模式，並以 Java Jest[8]做為 RESTful. 13. api. client 端與資料庫介接。權限管理則使用 Hibernate 和 PostgreSQL[9]做為儲存權限管理的資料庫。網頁呈現方面則是以 Java Spring 框架做為開發架構，最後用 Echarts 做為視覺化展示的工具。至於驗證部份，我們將以抽查的方式，來比較從我們所建置的系統和由 Elasticsearch 所檢索出來的筆數是否相同來判斷我們所做的系統與 Elasticsearch 溝通結果和 Elasticsearch-head14 之檢索結果是相符合的。. 立. 政治大. ‧ 國. 學. 4.1 Elasticsearch 建置. ‧. 我們使用 Elasticsearch 2.2 版本做為檢索的資料庫，安裝成功畫面如圖 41 所示，為使開發人員能夠更輕易的查詢，一併安裝 Elasticsearch-head 外掛介. y. Nat. n. al. er. io. sit. 面，建置完成後如圖 4-2 所示，至此已確認完成資料庫的初始化建置。. Ch. engchi. i n U. v. 圖 4-1 Elasticsearch 安裝成功示意圖. 13. Restful 一種軟件架構風格，設計風格而不是標準，提供了一組設計原則和約束條件。用於客戶. 端和伺服器端溝通。基於這個風格設計的軟件可以更簡潔，更有層次，更易於實現緩存等機制。 14. Elasticsearch-head 是由 html5 所編寫而成的集群管理工具、數據可視化、增删改查工具。 42.

(53) 圖 4-2 Elasticsearch-head 示意圖. 4.1.1 Elasticsearch Mapping. 立. 政治大. Elasticsearch 是以 JSON 做為最基本的儲存格式，在開始匯資料之前，需要. ‧ 國. 學. 先做 mapping 的設定，就我們前一章節所規劃的資料儲存格式進行 JSON 格式編排後如圖 4-3 所示，以此做為本系統儲存的 schema 格式。中文斷詞部份我們. ‧. 改變了原本 default 的 Standard 部份，改以 CJK 為斷詞的方法，需要一併在. Nat. n. al. er. io. sit. y. mapping 做設定，設定完成後如圖 4-4 所示。. Ch. engchi. 43. i n U. v.

(54) 立. 政治大. ‧. ‧ 國. 學 er. io. sit. y. Nat. n. al. i n C 圖 4-3h資料庫格式 JSON 示意圖 engchi U. 44. v.

(55) 立. 治政圖 4-4 CJK 中文斷詞設定大. ‧ 國. 學 ‧. 4.2 Java 與 Elasticsearch 互動查詢方法. Nat. sit. y. 本研究使用 Java Jest 與 Elasticsearch 做介接，至於 query 的組合則是透. n. al. er. io. 過 boolQueryBuilder 來做複雜式的條件搜尋，如 must、should、not must 等條. i n U. v. 件的組合，例如輸入”蔡英文”關鍵字詞來搜尋，如圖 4-5 所示，透過 Jest client. Ch. engchi. 將組合後的 query 送給 Elasticsearch，再透過 Jest result 接收結果資料。. 45.

(56) 立. 政治大. ‧ 國. 學圖 4-5 ES 搜尋”蔡英文”範例格式. ‧ sit. y. Nat. er. io. 4.3 視覺化呈現-Echarts. al. n. v i n Ch 透過視覺化的方式，可以讓使用者快速的了解各平台間資料量的差異程度， engchi U 跨平台的資料卻以直覺、簡單的方式呈現，將有助於研究本身的效率，可減少人工統所帶來的不便。本系統提供長條圖如圖 4-6 所示、折線圖如圖 4-7 所示，皆可自行轉換及儲存。. 46.

(57) 圖 4-6 ES 搜尋結果-長條圖. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 4-7 ES 搜尋結果-折線圖. 4.4 系統實作結果本章節介紹我們系統實作的介面及各項功能，在使用者介面上，其主要可分為操作搜尋介面及資料展示介面。. 47.

(58) 4.4.1 資料搜尋介面功能資料搜尋介面主要可區分為：1 關鍵字詞搜尋圖文功能、2 圖片 id 搜尋圖文功能、3 限縮篩選範圍搜尋功能。. 4.4.1.1 關鍵字詞搜尋圖文功能. 圖 4-8 為系統的關鍵字詞搜尋圖文功能，其主要可依照特定字詞、任一字詞、不出現字詞、時間、資來源來等等做搜尋的基本條件。另可更改每頁顯示筆. 政治大. 數來調整每頁顯示數量多寡的功能。. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 4-8 關鍵字詞搜尋圖文功能示意圖. 48.

(59) 另亦提供了三種特殊的查詢選項，供使用者選取，1、Facebook 資料集選項；2 、Twitter 是語言選項；3、News 媒體種類選項，如圖 4-9 為選擇 2016 總統大選資料集範例、4-10 為選擇繁體中文的語言範例、4-11 為選擇蘋果日報的媒體範例，可依照資料的特性，將一些較常查詢的條件抽出變成選取模式，讓使用者可以更快速的以此為搜尋條件，來檢索相關的文本內容。. 立. 政治大. ‧ 國. 學圖 4-9 選擇資料集功能示意圖. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. 圖 4-10 選擇語言功能示意圖. 49. v.

(60) 圖 4-11 選擇 news 媒體種類示意圖. 4.4.1.2 圖片 id 搜尋圖文功能. 立. 政治大. ‧ 國. 學. 圖 4-12 為圖片 id 搜尋圖文功能，其主要可依照圖片的 id 搜尋相關的圖文功能，可找出圖與相對貼文之間的從屬關係。. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 4-12 圖片 id 搜尋圖文功能能示意圖. 4.4.1.3 限縮篩選範圍功能. 圖 4-13 為限縮篩選圖文功能，主要特色是可以依照目前的搜尋結果，再次. 50.

(61) 限縮範圍；換言之，可再次輸入特定字詞將第一次篩選的條件加上第二次篩選條件的功能。此範例即為第一次搜尋”蔡英文”，第二次再加上”馬英九”做限縮篩選條件。. 政治大. 立. ‧ 國. 學圖 4-13 限縮篩選功能示意圖. ‧. io. sit. y. Nat. 4.4.2 資料展示介面功能. n. al. er. 資料展示介面主要區分為：1 跨平台資料統計圖功能、2 圖文顯示功能、3、. Ch. i n U. v. 貼文及留言從屬關係展示功能、4 動態排序功能、5 搜尋結果輸出功能。. engchi. 4.4.2.1 跨平台資料統計圖功能. 圖 4-14 為系統的搜尋結果展示介面，此範別為搜尋特定字詞”蔡英文”，資料來源全選(Facebook、Twitter、PTT、News)，其所顯示的搜尋結果：Facebook 共 1,311 筆如圖 4-15 所示，Twitter 共 127,181 筆如圖 4-16 所示，PTT 共 46 筆如圖 4-17 所示，News 共 571 筆如圖 4-18 所示，各資料來源顯示的欄位皆不相同，採彈性且切適的顯示模式，並將其關鍵字詞 highlight 成黃色以利使用者方便. 51.

(62) 檢閱。. 政治大. 圖 4-14 跨平台社群媒體圖文檢索搜尋結果統計圖. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 4-15 跨平台社群媒體圖文檢索搜尋結果示意圖-Facebook. 52.

(63) 立. 政治大. ‧ 國. 學. 圖 4-16 跨平台社群媒體圖文檢索搜尋結果示意圖-Twitter. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 4-17 跨平台社群媒體圖文檢索搜尋結果示意圖-PTT 53.

(64) 立. 政治大. ‧ 國. 學 ‧. 圖 4-18 跨平台社群媒體圖文檢索搜尋結果示意圖-News. y. Nat. n. al. er. io. sit. 4.4.2.2 圖文顯示功能. i n U. v. 圖 4-19 為系統的操作結果展示介面之圖文顯示功能，此範別為搜尋特定字. Ch. engchi. 詞”蔡英文”，會將其所屬圖片一併帶出，另可點擊小圖秀原始的大圖。. 54.