第二章 文獻探討
第四節 小結
Tableau
(試用版) Gephi
如：D3.js‧
本章將針對本研究實作之「區域智慧資本治理創新系統（Regional Intellectual Capital and Governance Innovation System，RIC-GIS）」詳細介紹說明。首先探討 網站之架構與應用技術，以提高使用者經驗為設計理念，採用 Bootstrap、D3、
AngularJS 等目前大型網站廣泛應用的前端網頁技術，實現響應式網頁設計
（Responsive Web Design，RWD）與單一頁面應用（Single Page Application，SPA）。 本研究資料的來源包括縣市重要統計指標查詢系統、觀光局行政統計系統、文化
依據國際標準化組織 ISO 9241-210 規範，使用者經驗定義（User Experience，
UX）如下：「當使用者在接觸產品、系統、服務後，所產生的感知反應與回饋。
使用者經驗包含使用者的情緒、信念、偏好、認知、生理及心理反應、行為及成 就來源，其發生在產品系統服務使用的前期、中期以及後期。[23]」簡單來說，
UX 就是使用者使用一項產品時所產生的行為、情緒或是想法。「排除使用者的負 面經驗，創造使用者的愉悅經驗」，即是 UX 的最終目標。
AJAX 之父（Jesse James Garrett, 2000）[20]針對網站設計提出使用者經驗要 素模型，如圖 3.1，由下而上分別為策略層（Strategy），包含用戶需求與企業對網 站的期望目標；範圍層（Scope），包含功能規格與內容需求；結構層（Structure）
包含互動設計與資訊架構；框架層（Skeleton）包含資訊設計、介面設計與導航
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
設計；以及表現層（Surface）視覺設計。
圖 3.1 Garrett（2000）使用者經驗要素模型[引用自[20]]
3.1.2 響應式網頁設計（RWD）
響應式網頁設計（RWD）概念於 2010 年為網頁設計師 Ethan Marcotte 所提 出的概念。早期的網頁設計預設對象大多以一般家用電腦或筆記型電腦的瀏覽者 為主，所以在製作網頁時會以此規格作為預設頁面的大小，然而隨著平板電腦及 智慧型手機的普及，傳統的網頁設計方式已無法滿足所有的網頁瀏覽裝置，使用 畫面較小的平板或智慧型手機來瀏覽傳統設計的網頁時，將會因為頁面寬度過寬 而導致瀏覽者在瀏覽頁面時的不便，因此為了滿足手機瀏覽者的需求，一般在進 行網站製作時通常會再另外製作「手機版」的網站，以滿足這些族群的需求，然 而手機版網站雖然可以解決大多數手機瀏覽網頁者的不便，但對於花錢進行網站 建置的企業來說，將額外增加一個網站建置的成本。為解決這樣的窘境，現在有 越來越多的企業選擇 RWD 的技術來製作網站。
RWD 設計網站使用 CSS3，以百分比的方式以及彈性的畫面設計，在不同解 析度下改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站，提供 最佳的視覺體驗，使網站可以針對不同設備（桌面電腦顯示器、平板電腦、智慧
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
型手機與其他行動產品裝置等）不同尺寸螢幕瀏覽網頁時，網頁會對應不同的解 析度，而有不同的呈現方式，如圖 3.2，也就是說可以讓最重要的訊息在有限的 版面中清楚的呈現給用戶。
圖 3.2 跨平台網站版面配置之需求[引用自[2]]
3.1.3 單一頁面應用（SPA）
單一頁面應用（SPA）指一個網頁或網站從載入到關閉網頁的操作沒有任何 網頁重新載入，網頁前端透過 JavaScript 動態更換網頁上的內容，達到使用者不 需要換頁就可以瀏覽整個網站的網站架構。（Mesbah, 2007）[30]於 Delft University of Technology 的 Software Engineering Research Group 的技術報告裡指出，傳統的 網站設計為多頁模式（Multi-Page Model）存在網頁互動與回應性不佳的問題，
SPA 的設計模式就因而被提出。如圖 3.3 所示，SPA 設計框架，每次查詢只需傳 輸更新部分畫面的資料至伺服器端，所占資源較少，可以更快速的回應客戶端的 查詢需求，使用者經驗（UX）較好，經典的 SPA 網站如 Gmail、facebook。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 3.3 傳統與 SPA 網頁週期差異圖[引用自[31]]
第二節 系統實作
根據第二章的 BI 工具評估，SpagoBI、Tableau、PowerBI 均屬於套裝軟體，
客製化的功能需求研發較為不易，並因應目前網頁開發的設計趨勢、RWD 跨平 台使用需求與提高 UX 使用者經驗，本研究系統採用 ASP.Net Web From（SPA）
網站專案，後端搭配 C#語言開發，線性規劃求解使用 OML 元件，前端框架包括 Bootstrap、D3、AngularJS 等技術，後端資料庫使用的是 MS SQL Server。
3.2.1 Bootstrap
Bootstrap 是由 Twitter 團隊共同研發建造出來的開放原始碼[4]，用於網站和 網路應用程式的工具，包括 HTML、CSS 及 JavaScript 的前端框架，提供字體排 印、表單、按鈕、導航及其他各種元件，並提供了 JavaScript 擴充套件，旨在使
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
動態網頁和 Web 應用的開發更加容易。所謂「前端」指的是展現給最終用戶的 界面，與之對應的「後端」是在服務器上面運行的代碼。Bootstrap 是 2011 年面 世的，次年 1 月發布了 2.0.0 版。至 2016 年 1 月，Bootstrap 已被更新至 3.3.6 版。
圖 3.4 系統應用 Bootstrap —網頁檢視樣式
圖 3.5 系統應用 Bootstrap —行動裝置檢視樣式
本系統可因應使用這不同上網裝置，或網頁大小變動時，均可流暢使用，如 圖 3.4 表示使用一般桌上型或筆記型電腦使用所見樣式（螢幕解析度 1440 x 799 為例），圖 3.5 則為手持行動裝置使用時所見樣式（手機以螢幕解析度 320 x 480 為例、平版電腦以螢幕解析度 768 x 1024 為例）。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
3.2.2 D3（Data-Driven Documents）
D3 是一個用動態圖形顯示數據的 JavaScript 函式庫，為數據可視化的工具，
兼容 W3C 標準，並且利用廣泛實現的 SVG（Scalable Vector Graphics）、JavaScript 和 CSS 標準。D3 於 2011 年面世，同年 8 月發布了 2.0.0 版。至 2016 年 1 月，
D3 已被更新到了 3.5.12 版[14]。
D3 支援 GeoJSON 的地圖格式，它是一種將地圖以點、線、多邊形包裝而成 的 JSON 資料格式。由於在 GeoJSON 中各個行政區塊是各別描述的，重疊的邊 界會讓檔案變得比較大，D3 作者 Mike Bostock 按拓樸學（Topology）制定了另 一種格式 TopoJSON，把共用的邊集合在一起，再用這些邊組成地理區塊，且地 理座標使用整數，不使用浮點數，因此省下將近 80%的檔案大小。D3 則提供可 讀取 TopoJSON 並轉換成 GeoJSON 的格式的函式庫。
本研究實作系統所需台灣行政界線資料，可由政府資料開放平臺取得，政府 資源提供「全國縣（市）行政區域界線」、「鄉（鎮、市、區）行政區域界線」、
「村里界圖」三種層級的台灣地圖資料，但檔案類型為 shapefile（ESRI ArcGIS 檔案結構）非 D3 可支援，故本系統使用的行政界線資料，實際由零時政府 g0v.tw 平台下載之 TopoJSON 格式，結合 Google Maps A.P.I.繪製之台灣行政界線圖，如 圖 3.6 所示。
圖 3.6 系統應用 D3 —結合 Google Maps 繪製台灣行政邊界圖
‧
3.2.3 AngularJS
AngularJS 於 2009 年由 Misko Hevery 等人創建，後為 Google 所收購、傾力 打造的前端 JavaScript 框架[6]，至 2015 年 10 月 Angular 穩定版本為 1.4.7 版，
本研究實作之系統則採用 Angular 1.4.3 版。
與其他 JavaScript 框架最大的不同在於，AngularJS 直接延伸現有的 HTML 架構，透過宣告式語法（Directives Syntax）讓 Web 應用程式在元件化的過程變 得極其簡潔有力。所謂宣告式語法是指開發者於前端網頁的指令，可使 AngularJS 的 HTML 編譯器（$compile）將特定的行為繫結至 DOM 元素（如屬性、元素名
AngularJS 為前端工程的 MVC（Model–View–Controller）框架，以投入產出 效率分析模組為例說明如下：
(一) 模型（Model）主要負責應用程式中的商業邏輯，實作演算法，以及資料 庫與使用者介面之間資料的交換。Model 層封裝了應用程式中對資料的存 取並提供可重複使用的函式庫，像是資料庫存取的抽象化、資料的驗證與 稽核都會發生在此。如圖 3.7，後端程式計算 DEA 效率值，產生
DEAModel 物件，透過 Json.NET 元件轉成 JSON（JavaScript Object Notation）字串，以 AJAX（Asynchronous JavaScript and XML）的方式傳 送至前端網頁。
(二) 控制器（Controller）用於控制應用程式的流程，處理事件並作出響應。
「事件」包括使用者的行為和資料 Model 上的改變。如圖 3.7，dea.js 將接
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
收到的 JSON，依 DEA 效率值計算色階、綁定數據至 D3 台灣地圖。
(三) 檢視（View）呈現自 Model 層取得的資料與蒐集使用者互動資料的網頁，
HTML / CSS / JavaScript 都是使用於此層的技術。如圖 3.7，dea.html 負責 配置網頁的呈現樣貌。
圖 3.7 系統應用 AngularJS —MVC 框架[圖片參考[44]]
圖 3.8 系統應用 AngularJS —雙向資料繫結
‧
資料驗證規則、商業邏輯、資料存與驗證等；使分析師專注於 Controller，設計網 頁與後端的互動關係；開發人員則專注於 View，決定前端呈現的細節、實做網 頁互動的程式碼與 HTML、CSS 等編修工作。
數據綁定在 AngularJS 中 Model 和 View 之間是自動同步，當 View 發生變 化時會直接反射繫結至 Model，反之亦然，此即為 AngularJS 雙向資料繫結（Two
Way Data-binding）的特性。開發人員可以將 Model 視為單一可信賴的來源，相
對於傳統的網頁程式，開發人員須撰寫 Model 資料綁定 DOM 物件的程式碼，並 於使用者操作異動畫面資料後，再撰寫 View 資料綁定 Model 的程式碼，AngularJS 雙向資料繫結的特性讓開發變得直覺，前端語言也變得更純粹乾淨。系統應用如 圖 3.8 所示。AngularJS 實現自動雙向繫結其後端機制，是頻繁檢查（Dirty Check）的反 覆比對，意思是當 Model 有任何異動，所有註冊該 Model 的 View 就會重新掃一
AngularJS 框架尚有幾個重要的特色，如前端範本（Client-side Templates）、 相依性注入（Dependency Injection，DI）、關注點分離（Separation of Concerns，
SoC）
。前端範本為由開發者定義，具有重用性的 HTML 代碼。相依性注入是反 轉控制（Inversion of Control，IoC）常見的方法之一，乃物件導向程式的一種設 計原則，主要用來降低偶合性並且能夠抽換工作類別，可以大幅降低元件設計的‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
（關注點）相關聯的軟體組成部分進行「標識、封裝和操縱」的能力，由於關注 點混雜在一起會導致複雜性大大增加，所以能夠把不同的關注點分離開來、分別 處理就是處理複雜性的一個原則，也是物件導向的程 式設計的核心概念。
AngularJS「關注點分離」的部分，在於控制器（Controllers）與檢視（Views）之 間切割的非常乾淨，再搭配模組（Module）與相依性注入（DI）相關實作，如工 廠（Factory）與服務（Service）、提供者（Provider）與常數值（Value）等等，在 在落實了「關注點分離」這個觀念。系統應用如圖 3.9 所示。
圖 3.9 系統應用 AngularJS —相依性注入
透過上述前端框架優勢，本系統實作之功能，均可視為一個小工具（Widget）， 依不同的頁面分類需求，使用者可以自行修改該頁面預設載入的工具，如圖 3.10 所示，競爭者資料分析模組中，現有提供「競爭者辨識」與「投入產出分析（DEA）」
透過上述前端框架優勢，本系統實作之功能，均可視為一個小工具（Widget）， 依不同的頁面分類需求，使用者可以自行修改該頁面預設載入的工具，如圖 3.10 所示，競爭者資料分析模組中，現有提供「競爭者辨識」與「投入產出分析（DEA）」