使用台北市政府公開資料平台 建構HTML5標準行動裝置網頁服務
78
0
0
全文
(2) 使用台北市政府公開資料平台建構 HTML5 標準行動裝置網頁服務 林垂頤. 摘要 在資訊爆發的現在，智慧型手機發展速度遠超過數年前的情況，而平板裝置 的戰場也隨之展開廝殺，行動裝置的軟體開發成為業界當中最火紅的趨勢之一， 不論是遊戲、資訊提供、產品推銷或是應用加值方面，無不利用軟體作為延伸的 方式，提供使用者另一種體驗。 開發行動應用服務，以目前的環境而言，就有如 Android、iOS、Windows Phone 等數家作業系統可以選擇，但由於環境原生語言的支援各異，使得開發者必須在 同一套軟體上，針對不同的系統同時維護多個版本的開發，除了徒增開發及維護 成本以外，也必須因應各系統自身的改版，隨時修正軟體內的功能。 本研究利用目前正逐漸成形的 HTML5 標準，撰寫適用於行動裝置平台上的 網路應用程式，由於遵循同一套標準，能大幅減少開發上的成本；而除了善用手 持裝置的行動定位優勢外，也整合了 Google Maps 的地圖平台，實作使用者多人 定位等功能，呈現出多彩的地理資訊應用，並利用目前能見度逐漸增加的 node.js 技術，以 JavaScript 語言統整伺服器端與使用者端的開發環境，提升開發應用服 務的效率。 而台北市政府於 2011 年開放了公開資料平台的服務，這是政府便民的一種 趨勢，本研究也利用此資料平台，強化地理資訊服務的附加功能，透過即時資訊 服務的更新，再配合使用者角色的情境變化，獲得適用於各種使用者的生活資 訊。 （關鍵詞：HTML5、node.js、地理資訊服務、公開資料、情境感知）. i.
(3) Building a HTML5-standard mobile Web Application using OpenData@Taipei Chui-Yi Lin. ABSTRACT In the era of information explosion, the development of Smartphone has far more than past few years. Software develop of smartphone become the most popular trend now. In order to provide another user experiment, software is normally developed at Game, Information provide, Business sales and Add-In Application. Now, if you try to develop a mobile application service, there are so many operation systems to choice, such as Android, iOS, Windows Phone, and etc. However, because develop languages of each environment are different, developers must maintain various versions for single software. This causes the cost increment of develop and maintain. With the system patch, developers must test and debug functions of software immediately. This search uses HTML5 standard to design a web application for mobile devices. Because the HTML5 standard is unique, so it can decrease the cost of develop for multiple devices. In addition to use the advantage of location detection for mobile devices, it integrates Google Maps platform to implement multi-user geolocation and so on. It also uses the new javascript technology – node.js – to integrate the development environment of server side and client side. Taipei government releases the OpenData@Taipei at 2011. This kind of services will be the trend for the future. The search also uses OpenData@Taipei to enhance the information and functions of Location-base service. We use the real-time information updates, and context-aware of user roles to get kinds of life information for each user. （Keywords：HTML5、node.js、Location-based Service、Open Data、Context-Aware）. ii.
(4) 誌謝 這篇論文的撰寫跟發表，經歷了許多的波折，題目方向也有所改變，一路從 學生、入伍、直至開始工作才完成，除了後悔自己對於時間掌握上的失準之外， 也遺憾自己在研究上沒有痛定思痛的決心。 在這裡真的非常感謝葉耀明教授，不論是在學期間的指導，在我迷失的時候 也從沒有放棄我，然而儘管我在實驗室參與的工作不夠多，但在大型會議及計畫 的參與過程中，還是增進了許多見識，也十分感謝葉教授對我的包容以及指導， 讓我能夠在蟄伏多年後，仍能將這份論文完成及發表。 口試當日，也非常感謝黃文吉教授及陳永昇教授能前來擔任口試委員，兩位 教授以及葉教授的共同指導，除了提點了我論文上不足的地方，提供修改方向之 外，也讓我思考了許多關於未來發展的可能性，對我的日後發展大有幫助。 最後要感謝的人很多，除了感謝家人及周遭的朋友能夠一路扶持體諒，也感 謝士翔、智翔、鼎元學長在學習期間的關心，感謝傢桐、哲豪、哲凱、龍福、秋 菊在課業上的鼓勵協助，也感謝彥辰、長助、琮緯、裕舜、宗瀚等等，你們讓我 感受到實驗室的溫暖跟活力。. 國立台灣師範大學 資訊工程系 XML 實驗室 林垂頤 iii.
(5) 目錄 摘要 ................................................................................................................................. i ABSTRACT ................................................................................................................... ii 誌謝 ............................................................................................................................... iii 目錄 ............................................................................................................................... iv 圖目錄 ........................................................................................................................... vi 表目錄 .......................................................................................................................... vii 程式碼目錄 ................................................................................................................ viii 第一章. 緒論 ............................................................................................................... 1. 第 一 節 研 究 背 景 .............................................................................................................. 1 第 二 節 研 究 動 機 與 目 的 ................................................................................................. 2 第 三 節 論 文 架 構 .............................................................................................................. 4. 第二章 文獻探討 ...................................................................................................... 6 第 一 節 HTML5 技 術 應 用 ............................................................................................... 6 第 二 節 電 子 地 圖 應 用 服 務 ............................................................................................. 9 2.2.1 地圖應用環境簡述 ................................................................................................ 9 2.2.2 Google Maps JavaScript API ................................................................................. 9 第 三 節 JavaScript Framework...................................................................................... 12 2.3.1 jQuery ................................................................................................................... 16 2.3.2 jQuery mobile ....................................................................................................... 17 2.3.3 JSON ..................................................................................................................... 18 第 四 節 node.js ................................................................................................................. 20 2.4.1 socket.io ................................................................................................................ 21. 第三章 系統架構與設計 ....................................................................................... 23 第一節. 系 統 架 構 ............................................................................................................ 23. 第 二 節 Web Socket 架 構 ............................................................................................... 24 3.2.1 node.js 實作多方談話 .......................................................................................... 25 3.2.2 node.js 實作多人同時定位 .................................................................................. 29 第 三 節 地 理 資 訊 系 統 架 構 ........................................................................................... 31 3.3.1 Geolocation 定位功能 .......................................................................................... 31 3.3.2 新增地標圖層 ...................................................................................................... 34 第 四 節 Web Storage 應 用 ............................................................................................. 36 3.4.1 使用者資訊暫存 .................................................................................................. 36 第 五 節 Open Data 服 務 介 接 ........................................................................................ 39 iv.
(6) 第四章 系統實現 .................................................................................................... 44 第 一 節 系 統 建 置 環 境 與 使 用 情 境 .............................................................................. 44 第 二 節 介 面 呈 現 ............................................................................................................ 46. 第五章 效能分析 .................................................................................................... 58 第六章 結論與未來展望 ....................................................................................... 62 第 一 節 研 究 成 果 探 討 ................................................................................................... 62 第 二 節 未 來 展 望 ............................................................................................................ 64. 參考文獻 ..................................................................................................................... 65 附錄一 台北市政府公開資料平台現有服務 .................................................... 67. v.
(7) 圖目錄 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖 圖. 1 美國智慧型手機市佔率趨勢圖..................................................................... 2 2 美國智慧型手機作業系統分布圖................................................................. 3 3 HTML5 整合應用架構圖 .............................................................................. 8 4 JavaScript Framework 架構圖 ..................................................................... 12 5 Ajax 網頁技術與傳統網頁技術之比較 ...................................................... 15 6 JSON object 格式定義 ................................................................................. 18 7 JSON array 格式定義 ................................................................................... 19 8 JSON value 格式定義 .................................................................................. 19 9 系統架構圖................................................................................................... 24 10 Web Storage 架構圖 ................................................................................... 37 11 以瀏覽器檢視 Web Storage 狀況 .............................................................. 39 12 系統使用情境案例圖................................................................................. 45 13 Eclipse 開發環境介面 ................................................................................ 46 14 使用者主要入口頁面................................................................................. 47 15 使用者角色選擇......................................................................................... 48 16 使用者在輸入框中輸入訊息..................................................................... 49 17 送出訊息並即時更新畫面......................................................................... 50 18 使用者進行定位及圖面顯示..................................................................... 51 19 拖放定位圖示以進行街景呈現................................................................. 52 20 圖面點位資訊以及其詳細資料呈現......................................................... 53 21 多點資訊經由 MarkerClusterer 處理後的畫面 ........................................ 54 22 使用者依角色切換圖層功能..................................................................... 55 23 ”最近的資訊”功能畫面呈現 ..................................................................... 56 24 多人同時定位畫面呈現............................................................................. 57 25 等待 5 分鐘後使用 3 台設備登入多方對談............................................. 58 26 等待 5 分鐘後使用 3 台設備進入地圖定位............................................. 59 27 使用瀏覽器進行記憶體耗用觀察............................................................. 60. vi.
(8) 表目錄 表 表 表 表 表 表 表 表 表. 1 2 3 4 5 6 7 8 9 . Web Socket 服務介面定義 .......................................................................... 25 多方談話伺服器實作服務........................................................................... 26 多方談話客戶端訊息處理服務................................................................... 28 多方談話訊息格式定義............................................................................... 28 多人同時定位訊息格式定義....................................................................... 30 Geolocation 標準資料回傳型態 .................................................................. 32 google.maps.MarkerOption 設定格式 ......................................................... 34 公開資料平台介接資訊............................................................................... 41 公開資料平台介接欄位說明....................................................................... 43. vii.
(9) 程式碼目錄 程式碼 程式碼 程式碼 程式碼 程式碼 程式碼 程式碼 程式碼 程式碼 程式碼 程式碼. 1 jQuery 的鏈式語法示範 ...................................................................... 17 2 Web Socket 服務介面定義 .................................................................. 25 3 建構子網域的 Web Socket 伺服器 ..................................................... 26 4 多方通話服務訊息處理....................................................................... 27 5 GUID 亂數產生方式實作.................................................................... 28 6 多人定位服務處理過程....................................................................... 29 7 多人定位時，清除過期定位資訊之過程........................................... 30 8 Geolocation 取得地理資訊標準函式 .................................................. 32 9 取得裝置定位流程............................................................................... 33 10 以程式進行圖台座標繪製流程......................................................... 35 11 利用 Ajax 執行跨網站服務要求 ....................................................... 42. viii.
(10) 第一章. 緒論. 第一節 研究背景 手機在近幾年來，已經逐漸成為人們身上不可或缺的電子產品，從最早期的 傳呼機演變而來，至今已將近十餘年，而在手機上的傳輸行為，也從簡單的數字 傳訊，演變為簡訊；而到了今日，甚至已能透過網際網路進行各式各樣的通訊行 為。. 而由於現今的智慧型手機，不僅結合了 PDA 的特性，以及這幾年日益成熟 的手持面板觸控技術，新一代的智慧型手機不但兼具了行動記事本以及行動秘書 的功能，搭配強大的運算能力，甚至能夠取代多媒體裝置，成為每個人口袋中的 影音及電子娛樂媒介；而在網際網路的蓬勃發展，以及雲端同步技術的成熟之下， 手機更進一步整合了個人化雲端服務，讓使用者可以利用各種不同的裝置，存取 雲端上同一份資訊，諸如電子郵件、行事曆、通訊錄等資訊，而智慧型手機正是 最常使用到這些資訊的媒介。. 根據美國 Nielsen Online 在 2012 年 2 月所做的一份市場調查報告指出，目前 智慧型手機（Smartphone）與以往的傳統手機（Feature Phone），在 2012 年 2 月 的市佔率已呈現交叉曲線，智慧型手機儼然已經成為市場上的主流。. 1.
(11) 圖 1 美國智慧型手機市佔率趨勢圖 而在台灣的行動網路環境越趨成熟之下，手機可以隨時隨地存取網路上豐富 的資訊內容，諸如路況，天氣，新聞等等，在智慧型手機的市占率每年爆發性成 長的今日，行動通訊成為資訊界近幾年來最矚目的話題。. 第二節 研究動機與目的 目前的智慧型手機系統可說是各家爭鳴，在市場上已有多個系統相互抗衡， 有來自 Apple 的 iOS 作業系統、Google 的 Android 系統、Microsoft 的 Windows Phone、 以及 RIM 的 BlackBerry 等等，每種系統都有各自的市占率以及支持族群。而在 手持裝置蓬勃發展的今日，手機上的應用程式開發，更是如雨後春筍般呈現大幅 度的成長，且都有著各自的線上軟體商店。 2.
(12) 手機系統的發展雖有助於行動應用程式的發展，但以開發人員的觀點來看， 則會面臨到選擇開發平台的問題，由於各家的軟體開發環境不盡相同，所以在跨 平台軟體的開發上，必須針對各家系統做不同的設計，才能夠在其平台上順利運 作；除了開發平台不同的問題外，還有各家系對於軟體開發所收取的開發費用不 盡相同，這對於以非營利為主的軟體開發者來說，無疑也是一個門檻。. 圖 2 美國智慧型手機作業系統分布圖 本次研究的目的，是以一個各家瀏覽器都努力支持的 HTML5 協定，設計一 個網頁端應用程式（Web Application） ，並利用模組化的開發概念，將各種功能分 3.
(13) 散開發並協同運作，藉以實作一些簡單易用的功能，達到跨平台的效果；而本論 文也使用台北市政府所提供的公開資料平台系統，存取即時的地理資訊，並以 Google 地圖的輔助，提供一個動態的地圖查詢平台。. 第三節 論文架構 本論文一共分為六個章節，第一章為緒論，介紹本論文之研究背景、研究動 機與目的，並簡介論文架構。. 第二章為文獻探討，除了介紹 HTML5 現今的發展外，也介紹了 Google Maps JavaScript API 應用服務，並以 JavaScript Framework 為引，簡述 jQuery 這套 JavaScript 程式開發介面。最後介紹 node.js 作為服務平台開發端核心服務。. 第三章為系統架構及設計，介紹本研究服務實作的技術核心以及其組成架構， 包括使用者端的 Html5 網頁設計架構，利用 node.js 架設的 Web Socket 伺服器， 以及如何引入台北市政府公開資料平台的資訊等。. 第四章為系統實作部分，此章節詳細介紹本系統的運作步驟以及其對應功能， 包含於 Google 地圖平台上的定位，點資訊的呈現，搭配行動手機平台進行撥號等 行為，以及利用 Web Socket 展示多人交談，定位資訊呈現等功能。. 第五章為系統效能分析，測量本研究所架構的服務，在資料介接、多人通訊 時的系統反應速度，以及 node.js 伺服器所佔用的 CPU 及記憶體資源分析等。 4.
(14) 第六章為未來展望，簡述 HTML5 在未來發展上的趨勢，以及本研究於未來 趨勢下可持續發展的部份。. 5.
(15) 第二章 文獻探討. 第一節 HTML5 技術應用 自 HTML4（HyperText Markup Language 4）訂定以來，瀏覽器經歷了一段長 時間的變革，由於 HTML4 在追求當時環境下的統一及穩定，於是訂下了許多關 於靜態標籤的規範，但經過了十多年的演進（HTML4 的最後一個版本為 4.01， 於 1999 年 12 月發布），除了瀏覽器功能的日益進步，使用者的裝置也越來越能 運作更複雜的功能，於是各家瀏覽器廠商便制定了新的 Web Application 標準，也 就是現今 HTML5 的前身。. 目前的 HTML5 版本（HTML5 Draft 25，於 2011 年 5 月 25 日釋出）較 HTML4 新增了約 28 項新功能，有的是完全基於瀏覽器的新支援，有的則是為了取代舊 式 HTML4 的基礎功能，大部分都是為了讓 HTML 的文件結構更嚴謹，支援多媒 體播放以及更高自由度的畫面繪製等，而原有關於視覺化部分的標籤，都已盡量 移除而交由 CSS 負責呈現。. HTML5 增加了幾項矚目的新技術：. 1. 定位功能（Geolocation）: 在裝置上支援行動定位的功能，瀏覽器即可 透過向使用者要求允許的方式，以取得使用者目前的位置。. 2. DOM Storage: DOM 在 HTML5 中扮演著重要的角色，DOM Storage 在 6.
(16) HTML5 被廣泛稱為網頁儲存（Web Storage），其分為 sessionStorage 以 及 localStorage 等存取方式，sessionStorage 的生命週期如同以往的 Session 一樣，localStorage 則是一種更直接的存取方式，程式直接將資 訊寫至使用者瀏覽器的快取資料中，對應到自己的網域，日後即使你關 閉該頁面離開該網域，下次再回頭瀏覽時，程式仍可以存取你寫至瀏覽 器快取的資訊。sessionStorage 與 localStorage 最大的差別即在其資訊存 活的生命周期。. 3. 新增 canvas 標籤：此標籤主要用於呈現更靈活的動態資訊呈現，從一些 簡單的控制項拖動，乃至於更複雜的 SVG 繪圖運算等等，都可藉由在 canvas 標籤中實作。. 4. 增強標籤定義：HTML5 針對舊有的標籤名稱做更進一步的擴充，新增 如 header、footer、section、article 等等更容易閱讀的文件結構，除了讓 程式設計師更容易管理外，也增加了 HTML 文件的易讀性，屎標籤有 語意上的定義，進而增加程式對於 HTML 全文的處理速度。. 5. 增加多媒體格式標籤支援，如 video、audio 等等。但目前各家瀏覽器除 了 mp4 標準編碼都已支援外，其他格式支援仍然各有相異。. HTML5 定義出來的應用程式設計技術，其實以更精確的層面來說，是 HTML5 + JavaScript + CSS 的整合應用，他透過更嚴謹的標籤定義，劃分出各司其職的資 訊範圍，其中透過 CSS 來定義畫面以及事件反應，再透過 JavaScript 呈現更複雜 7.
(17) 的控制項行為，以及背後的資訊處理等等。. HTML5 + JavaScript + CSS 的一大優點是隨寫即用，由於 JavaScript 是直譯式 語言，不需要進行編譯即可由瀏覽器執行，所以很適合進行短期程及精簡的功能 實作；而另一個特點即是良好的網站伺服器支援，只要該網站伺服器能提供檔案 的瀏覽權限，就能將架構好的 HTML5 + JavaScript + CSS 網站放置運作，不需安 裝任何特定的 framework。. 但由於 JavaScript 是一種在使用者端進行的 Script Language，其運作可能會 有安全性方面的疑慮，更甚者甚至會遭到使用者環境的監護軟體阻擋。. 圖 3 HTML5 整合應用架構圖. 8.
(18) 第二節 電子地圖應用服務. 2.2.1 地圖應用環境簡述. 早期的地圖資訊其實是以向量圖資為主，但由於一般裝置的運算能力有限， 而處理龐大的向量資料必須經過稍微繁雜的運算，所以在地圖的呈現上並不那麼 流暢，所以在經過變革後，地圖資訊的處理改採點陣圖預存的方式，讓使用者針 對所需的區域，下載運算後的點陣圖範圍。只是這樣的作法，雖然減少了運算量 的負擔，其實卻大幅增加了所需的網路頻寬。. 而現今的手持裝置運算能力越來越強大，對於向量資料的處理能力可望能得 到大幅度的改善，Google 已於日前在其 Google Maps 的應用上，增加了 MapGL 的功能讓使用者試用，其功能便是利用繪圖的方式來呈現地圖上各種符號，這樣 的改變可望有朝一日能實做於手持裝置上，除了不需如此大量的依賴頻寬外，也 能針對地圖上的各種符號作更具變化性的設計。. 2.2.2 Google Maps JavaScript API. Google 致力於線上圖資的發佈及應用，在 Google 地圖推出之後不久，即釋 出了有關 Google Maps 存取的應用服務 API，目前的 Google Maps JavaScript API 已經來到了第３版，將原本需要 API Key 的限制移除，而在使用者操作的反應上 也更快更靈敏。Google Maps API 區分為免費版及專業版，專業版除了提供更高 9.
(19) 的使用流量、HTTPS 安全性協定以外，最重要的當然是技術服務上的支援。. Google Maps JavaScript API 包含了以下功能：. 1.. 地點搜尋：這是 Google Maps 服務中最常被使用的部份，藉由 API 的幫 助，程式可以快速的從一個經緯度搜尋出地址，或是藉由地址反查經緯 度；此外，Google 也導入了 Google Place API 服務，可藉由特定的地點 往外延伸，搜尋附近的店家及景點等資訊。. 2.. 路徑規劃：藉由提供起始及目的地點，Google Maps API 可藉此搜尋出 一條至數條適合行進的路線集合，此外也可以選擇交通方式，計有行人、 大眾運輸、以及開車前往等等，利用多種前往方式找出不同的路徑及估 算出花費時間。. 3.. 圖層管理；Google Maps 利用全球經緯度系統，架構出人們最常用的街 道、衛星、高度等圖層，利用 Google Maps API 則可以自由的利用程式 做圖層切換另外，Google 地圖也加入街景服務的功能，可針對世界各大 都市的道路做街景的呈現及路況圖層，讓使用者能夠更輕鬆掌握路面情 況。. 4.. 自定義圖層：Google Maps JavaScript API 也允許使用者自行增加圖層， 除了最常使用的定位點圖層，可以快速找到自己的位置外，還可利用 KML 格式的檔案匯入，繪製出自定義的圖層架構，甚至能夠利用 GeoRSS 協定，蒐集網路上定期釋出的地理資訊，如 USGS 國際地震資 10.
(20) 訊、洪水及颱風資訊等等。. 2.3.3 球面三角學. 由於地球是一個球體，在測量地球上兩點之間的最短距離，也就是計算球面 上兩個點索相連的一段弧長，在這裡最常會使用到的便是球面三角學中的半正矢 公式（The haversine formula）。. 求得弧長的公式定義如下：. . d 為兩點之間的弧長. . r 為球體的半徑. . 分別為點 1 和點 2 的緯度. . 分別為點 1 和點 2 的經度。. 而當中以夾角帶入計算的半正矢公式如下：. 利用此公式，即可計算出兩個經緯度座標之間的弧長。 11.
(21) 第三節 JavaScript Framework JavaScript 一路走來，擺脫了過去難以撰寫以及難以維護的缺點，漸漸的被各 大瀏覽器所接受，其執行速度甚至比以往的 CGI 或 VBScript 等語言更快更穩定， 在 HTML5 當中也直接明定了許多 JavaScript API，試圖以規範的方式統一動態網 頁的撰寫方式，達成共通的跨平台協定。. JavaScript Framework(jQuery, …). JavaScript Plugin. JavaScript Engine, CSS parser, …. Browser. . 圖 4 JavaScript Framework 架構圖 但 JavaScript 目前也仍存在一些相容性的問題，由於各家瀏覽器所使用的 JavaScript 解析引擎各不相同，導致部分功能在各瀏覽器的呈現結果略有不同，其 支援程度也有所差異，為了閃避這些瀏覽器上的差異，使用者往往必須在程式碼 上下更多的功夫去判斷，不僅讓程式碼膨脹，導致維護成本及難度增加，甚至由 於必須重複驗證，導致效能上的低落。. 因此，為了統整瀏覽器上的撰寫環境，部分開發團隊便開始撰寫適用於各大 瀏覽器平台的 JavaScript Framework，企圖解決瀏覽器平台的相容性問題，由於 12.
(22) Framework 的發佈方式，都是以.js 檔的方式發行，所以開發者在使用這些 Framework 時也非常方便，只要將其檔案掛載於網頁前端，瀏覽器便會自動在解 譯期間先將這些 Framework 載入。. 目前的 JavaScript Framework 依照功能取向，協助一般的網頁開發者解決了 以下的幾個問題：. 1. HTML 文件詢覽. 早期的 HTML 動態網頁程式撰寫，在 HTML 文件解析為 DOM 物件控制時， 如果沒有對該文件的架構有一定的了解，往往需要在整份文間中，利用遞迴的方 式往返尋找，才能取得所需的元素並進行控制，此為早期 DOM 架構比較令人詬 病的問題。. 之後由於 XPath 的誕生，簡化了開發者在管理 DOM Tree 時的步驟，利用 Path 的觀念對文件進行瀏覽跟控制，不過在撰寫程式時，仍然必須了解文件的架構， 才能較精準的搜尋到所需要的元素。. 而現今的 JavaScript Framework，大致上都已解決了 DOM 文件在搜尋及管理 上的問題，例如 jQuery 採用簡易的 DOM Selector 觀念，以指定名稱讀取標籤， 直接尋找該元素的位置並進行控制，不但精簡了以往程式邏輯上的繁雜，甚至在 瀏覽器的引擎配合之下，大幅壓縮了其處理 DOM 文件上的速度。. 2. 使用者介面 13.
(23) 早期的 HTML 靜態網頁，在控制網頁元素的呈現上經常使用 CSS 版型，但 在動態網頁的設計則上欠缺靈活以及變化性，許多動態的功能，必須等待動態網 頁技術（如 ASP.NET/JSP）背後的 Framework 逐步的開放支援，才能做出較為生 動的介面。. 在 Adobe 發表了 Flash 技術後，由於多彩的動畫及介面為 Flash 最擅長的部 分，而其設計工具也非常親民易用，許多網頁設計師紛紛在門面上利用 Flash 來 實作介面，使得 Flash 成為動態網頁技術的主流長達十年之譜，但其實 Flash 並非 網頁技術上的一環，而是以內嵌資源檔的方式運作，在 Flash 設計越來越複雜的 情況下，其資源佔用的情形亦越趨嚴重，加上一般使用者仍然必須自行安裝執行 環境，增添了一些不必要的困擾，所以即使日後微軟的 Silverlight，甲骨文的 JavaFX 紛紛加入戰局，在其執行架構雷同的情況下，亦無法左右 Flash 的市佔。. 這一切在 Google、Opera 及 Apple 全力支持 HTML5 之後有了改變，在新版 CSS 標準逐步成型之時，JavaScript 也隨著瀏覽器的更新，獲得更完善的畫面控制， 以及更多樣化的動態網頁撰寫方式，使得目前的純 HTML 網頁技術，能夠設計出 不輸給 Flash，甚至在效能上更加超越 Flash 的動態網頁。. 3. Ajax 支援. Ajax（Asynchronous JavaScript and XML）的具體概念，由 Jesse James Garrett 於 2005 年提出，他定義了 Ajax 的技術組成如下：. . 使用 XHTML+CSS 標準來設計 14.
(24) . 利用 JavaScript 操控標準的 DOM 元件，來達成動態呈現效果. . 利用 XML 以及 XSLT 來進行資料交換及轉換. . 使用 XMLHttpRequest 物件，與網頁伺服器做非同步資訊交換. . 一切的程式運作皆以 JavaScript 做串連. 圖 5 Ajax 網頁技術與傳統網頁技術之比較 自從 Ajax 問世以來，所謂的非同步處理技術，便成為網頁設計上的顯學，其 不需將整份網頁回傳至伺服器的特性，不但減少了使用者回傳資料至伺服器的次 15.
(25) 數，讓伺服器端的處理負荷降低，同時也讓動態資訊呈現的設計架構更完善，帶 給使用者更流暢的操作體驗。. 但由於 Ajax 在設計上採非同步架構，使得許多情況下，程式設計者必須多耗 費一些精神處理資料上的順序問題，而由於資訊處理通常在背景執行，當處理的 資訊量較大時，使用者會困惑網頁是否已經正確送出訊息，往往會不知覺的重複 做送出的動作，這些情況皆需要在網頁設計時加入考量。. 以下介紹的是本研究所使用的 JavaScript Framework。. 2.3.1 jQuery. jQuery 由 John Resig 在 2006 年 1 月的 BarCamp NYC 上釋出第一個版本，為 目前最被廣泛使用的 JavaScript 函式庫，其強調的宗旨為少量的程式碼，但能做 大量的事。. jQuery 有下列幾項特色：. . 完全相容於 HTML5. . DOM Selector： jQuery 的特色就是利用$()函式，輕鬆選取 DOM 文件當中任何一個或多 個元素，而 jQuery 採用所謂”鏈式語法”，讓每個函式的回傳值都是該元 素本身，所以可以透過一連串的函式呼叫來達成連續的處理。 16.
(26) 程式碼 1 jQuery 的鏈式語法示範 . 簡單的 Ajax 事件實作： 其中的.ajax()函式可以直接透過 Ajax 的方式，在背景執行其中指定的 XMLHttpRequest 方法，而 jQuery 定義的所有元素行為，預設也利用 Ajax 進行動態呈現。. . 特效及過場動畫： jQuery 在切換頁面，點選按鈕等事件時，都提供了過場動畫的呼叫選擇， 利用屬性或是程式碼的方式，即可做出不輸 Flash 的動態切換效果。. 而 jQuery 也釋出了 jQuery mobile 函式庫，引用了原有的 jQuery 函式庫，並 針對行動裝置的特性做了一些擴充功能。. 2.3.2 jQuery mobile. jQuery mobile 為基於 jQuery 函式庫實作而來的開發工具，其包含以下幾個特 點：. . 針對行動裝置設計的介面： jQuery mobile 採用仿 iOS 手機介面的設計風格及過場動畫，實作出各種 HTML 元件的風貌，官方網站上並釋出了 ThemeRoller 設計工具，提供各種 17.
(27) 不同的配色設計，並匯出成.css 檔，可供網頁直接套用。 而 jQuery mobile 也特別針對觸控介面作最佳化，並使不同平台瀏覽器的觸控 事件能達成一致的事件觸發。. . 跨行動平台的相容性： jQuery mobile 針對目前各種不同裝置上的瀏覽器，解決了版本之間的相容性 問題，使開發者在跨平台測試時，不需撰寫多餘的程式碼，來應付各種平台 上針對同一個功能產生的相異問題。. 2.3.3 JSON. JSON(JavaScript Object Notation)是一種輕量級的資料交換定義格式，最初在 JavaScript Programming Language, Standard ECMA-262 3rd Edition 此書中定義為 JavaScript 中一個 object 的子集。JSON 的格式定義如下：. JSON object：以大括號包含起來的部分即為一個 JSON object。裡面包含一至 多組不等的 key／value。. 圖 6 JSON object 格式定義 18.
(28) JSON array：以中括號包含起來的部分即為一個 JSON array。裡面包含一至 多組不等的 value。. 圖 7 JSON array 格式定義. JSON value：任何稱為 value 的欄位皆可稱為 JSON value。其可以是字串 （string）、數字（number）、JSON object、JSON array、布林值或是空值（null）。. 圖 8 JSON value 格式定義. 以往的網頁傳輸標準格式，皆由 XML 語言繼承而來，但由於 XML 為嚴謹定 義的巢狀格式語言，在解譯其標籤時，在驗證上往往須耗費較多的資源，於是 JSON 在定義出來之後，便成為網頁傳輸資料時更為適合的選擇，因其也具有巢 19.
(29) 狀架構的特性，key／value 型態也很適合作為標籤語言的替代品，加上省略了許 多標籤定義，JSON 構成的字串，在傳輸量上遠小於一份 XML 文件。. 由於 JSON 的格式是由 JavaScript 物件定義而來，所以 JavaScript 可直接利用 eval()函式直接對 JSON 格式的字串進行轉換，而現今瀏覽器也都已實作了 JSON 物件，可以直接利用 JSON.parse()函式，此函式實作了更具安全性的格式驗證轉 換功能。. 第四節 node.js JavaScript 其實是一個弱型別概念的物件導向語言，但由於環境的因素， JavaScript 通常被放在瀏覽器底下執行，也因此被侷限而成為一個沒有整體物件導 向觀念的 Script Language，因為瀏覽器的 JavaScript Engine 往往缺乏有效的記憶 體管理機制，即使是目前新興的瀏覽器（如 Chrome/Firefox 等）背後的 JavaScript 引擎都已有效的實作了記憶體回收機制，雖然使 JavaScript 能夠處理更為複雜的 資訊，但本質上仍然不是一個獨立的執行環境。. CommonJS 的架構概念是由 Kevin Dangoor 於 2009 年一月提出，此架構定義 了一套以 JavaScript 語言為基礎架構的伺服器端應用開發模型，主要強調以下功 能的實作：. 20.
(30) 1. 模組化：CommonJS 要求必須以模組化的方式，來擴充伺服器應用功能 的擴充。. 2. 輸出入介面： 此架構必須定義出一套與系統的輸出入介面搭配的功能函 式。. 3. Http 功能對應：此架構必須實作一個基於 Http 協定的網頁伺服器架構， 以回應如 JavaScript 當中的 XmlHttpRequest 訊息要求。. node.js 便是以此架構所開發出來的一套執行環境，其開發者之一 Ryan Dahl 於 2009 年開始在 Google 論壇（Google Group）提出此架構實作的理念，此套系 統使用 Chrome 的 V8 Engine 作為 JavaScript 的解譯工具，使其成為一個和 python/ruby 一樣，成為可以獨立執行運作的伺服器架構。. node.js 的模組化功能性非常豐富，且已經有許多支援的模組可供下載，本研 究選用 socket.io 作為 Web Socket 對應的伺服器開發。. 2.4.1 socket.io. HTML5 在導入 Web Socket API 之後，使得一般網頁連線的機制有了一個新 的選擇，以往的 JavaScript 網頁端程式大多使用 PostBack 機制，不但必須等待網 頁伺服器回應，而且開發者也必須在後端進行不少資料的暫存取出動作，無形中 增加了網頁伺服器的運算負擔，而且在使用者持續增加時，還必須承擔伺服器連 線數過高無法回應的風險。在 Ajax 技術成熟後，網頁端改採非同步的機制，先在 21.
(31) 背後對伺服器非同步的進行送出（Post） ，等待資訊回傳之後再更新網頁上的內容， 雖然看似增加了網頁端的回應速度，但因背後的運作仍然是以 Post 作為傳遞資訊 的機制。. 在 HTML5 當中，訂定了一個 Web Socket API 的標準規範（目前仍在草稿階 段） ，允許開發者在使用者端，利用 JavaScript 進行類似 Socket 的伺服器／客戶端 單一溝通介面。socket.io 是一個 node.js 的模組開發工具，藉以實作出 HTML5 協 定中支援的 Web Socket 的伺服器端服務。. socket.io 其實不是一個真正的 Socket 機制，他是採非同步輪詢，當使用者送 出 Web Socket 請求之後，由 node.js 引擎所啟動的服務，便會將該請求送入一個 堆疊機制，待服務進入堆疊處理時，才會依序回覆使用者傳遞來的訊息，而使用 者在開啟跟關閉服務時，便會由 JavaScript 的回呼（callback）機制，產生出一個 類似 Socket 接通（accept）及關閉（close）的訊息，通知伺服器是否接續處理客 戶端的資訊。. 22.
(32) 第三章 系統架構與設計. 第一節. 系統架構. 本研究透過 HTML5 當中所規範的幾個新增屬性，實作出地圖定位以及多方 談話功能，實作的功能計有：. . Web Storage：暫存使用者暱稱及定位資訊等. . Web Socket：實現多方談話. . Geolocation：取得使用者所在定位. 在伺服器端，利用網頁伺服器負責存放本系統使用掌端的網頁以及 JavaScript 原始碼，以提供使用者端存取。在 Web Socket 的實作上，必須要有一個能夠支援 Web Socket 伺服器架構的應用服務，這裡使用的是 node.js 可擴充服務，並利用 擴充套件實作出一個簡易的 HTTP 伺服器，而在 socket 支援上必須安裝 socket.io 擴充套件。實作上由 node.js 啟動一份.js 文件，以提供多方談話，及多人定位兩 個服務。. 23.
(33) 圖 9 系統架構圖. 第二節 Web Socket 架構 Web Socket 由於採用 HTTP 協定，通常並不會受到防火牆阻擋，在加上其輕 便快速的特性，在反應速度上的表現頗為亮眼。. node.js 提供了一個稱為 socket.io 的模組，用來架設符合 Web Socket 規範的 伺服器端應用服務，其溝通是透過 JavaScript 定義的 XMLHttpRequest，作為伺服 器與客戶端兩者之間的要求方式，再透過回呼函式（callback）的方式達成回應， 讓整體行為看起來就像是一個 Socket 行為。. socket.io 的 Schema 定義如下程式碼所示： 24.
(34) 程式碼 2 Web Socket 服務介面定義 其中 require()函式用來呼叫符合 CommonJS 規範的模組匯入引擎，將 socket.io 模組匯入，並將服務綁定於 HTTP 的 80 埠。. 服務的’connection’定義了當 Web Socket 的客戶端進入連線時的行為，而在連 線狀態底下，我們利用兩個函式來進行互連：. 函式名稱. 定義. Socket.on(). 當使用者透過定義的名稱傳送訊息至伺服器端時，此函式自動 被呼叫。（本例名稱為’my other evet’）. Socket.emit() 當伺服器需要傳遞資訊時，須主動呼叫此函式，並傳送定義的 名稱，以供客戶端辨識。（本例名稱為’news’） 表 1 Web Socket 服務介面定義 以下是本研究實作的兩個主要 Web Socket 服務說明。. 3.2.1 node.js 實作多方談話. 多方談話應用在 Web Socket 架構上，必須利用一個伺服器，作為統一的資訊 出入口，在多方談話伺服器部分，由 node.js 負責啟動 index.js 檔，並架設起一個. 25.
(35) Web Socket 伺服器介面，在接收的服務方面，定義了兩個方法如下：. 服務名稱. 方法. message. 當接收到使用者的訊息時，回傳所有伺服器上保留的訊息至 使用者. request all message. 使用者主動要求回傳所有訊息 表 2 多方談話伺服器實作服務. 由於本系統需要的介接服務超過一個以上，所以在伺服器端的撰寫方面，採 用了類似子網域的指定方式來建構，示範如下：. 程式碼 3 建構子網域的 Web Socket 伺服器 當有使用者端藉由 http://(domain-name)/chat 試圖要求 Web Socket 服務時，便 會進入 io.on()當中，等同於 Socket 當中的 appect()行為。. 此外，由於訊息陣列必須經過處理才能回傳，所以在伺服器啟動時，也必須 同時啟動一個 JavaScript Timer，以處理訊息的部份。. 26.
(36) 程式碼 4 多方通話服務訊息處理 其中訊息必須先透過 timestamp 排序，將最新的訊息至於頂端，而這裡我們 暫時限制使用者只能接收最後 50 則訊息，以避免訊息接收量過於龐大，影響效 能的情形，也避免手持裝置畫面在訊息過多時不好閱讀的情形。Timer 的執行週 期為 50000 毫秒。. 客戶端部分，也必須定義一個訊息接收的方法，以等待接收伺服器傳來的訊 息： 27.
(37) 服務名稱. 方法. all message. 接收伺服器上保留的所有訊息 表 3 多方談話客戶端訊息處理服務. 多方談話的訊息格式，定義部分如下：. 變數名稱. 變數型態. 方法. username. DOMString. 使用者暱稱. guid. DOMString. 使用者單一識別碼. target. DOMString. 目標（目前無功能，擴充用）. message. DOMString. 訊息內容. timestamp. Number. 訊息產生的時間戳記 表 4 多方談話訊息格式定義. 目標資訊的部份，可用於指定傳遞的對象，這裡並無實作。. 而在訊息的部份，使用到了 GUID（Globally Unique IDentifier）作為判斷使 用者唯一性的判別方法，由於這裡須視各種裝置的環境而異，其可能會使用到機 器內部機碼的機制，所以沒有依循第四版 GUID 的標準來實作，而是利用函式產 生一個亂數的 GUID 字串，並符合 GUID 第四版的格式規範，實作方式如下：. 程式碼 5 GUID 亂數產生方式實作. 28.
(38) 3.2.2 node.js 實作多人同時定位. 使用者定位的部份，同樣是由 node.js 負責啟動 index.js 檔，呼叫當中的 Web Socket 伺服器介面，在定位服務部分較為單純，服務只需持續不斷的接收使用者 的點位資訊，並等待使用者要求存取所有定位資訊即可。. 定位資訊接收的方法細節，如以下程式碼：. 程式碼 6 多人定位服務處理過程 當使用者利用’my locate’服務傳遞座標資訊至伺服器時，伺服器必須先判斷 該使用者是否曾將該資訊傳遞進來，若沒有該使用者的資訊，則將其座標資訊加 入至一個單一維護的陣列，若不存在的話則新增至陣列中。最後伺服器會將陣列 29.
(39) 中所有使用者的定位資訊，回傳至發出’my locate’服務需求的使用者裝置。. 此服務在啟動時也建立了一個 JavaScript Timer，處理過程如下：. 程式碼 7 多人定位時，清除過期定位資訊之過程 在 Timer 中，必須檢查陣列中的定位資訊是否已過期，我們用定位資訊的時 間戳記（timestamp）來判斷，若是存放時間超過 300000 毫秒（即五分鐘） ，便將 該定位資訊從陣列當中移除。. 定位資訊的傳輸座標格式定義如下：. 變數名稱. 變數型態. 方法. username. DOMString 使用者暱稱. guid. DOMString 使用者單一識別碼. latitude. Number. 使用者所在位置緯度. longitude. Number. 使用者所在位置經度. timestamp. Number. 訊息產生的時間戳記. 表 5 多人同時定位訊息格式定義 當使用者得到回傳的經緯度座標陣列時，會將資訊先行儲存起來，當需要繪 30.
(40) 製定位圖層時，再取出來作處理。. 第三節 地理資訊系統架構 由於 HTML5 定義了定位裝置資訊的接收，現今大部分瀏覽器都已支援經緯 度資訊的偵測，當裝置上配有 GPS 衛星定位設備時，可以得到最精確的位置，而 當裝置上並沒有定位設備時，亦可透過 3G、WiFi 或是 ISP 網路路由估算等方式， 取得粗略的定位資訊。. 由於各家瀏覽器實作粗略定位的方式各不相同，除了以 GPS／APGS 取得衛 星定位的方式最為準確外，其他定位方式往往會造成一些誤差，導致在同一台設 備上，因瀏覽器的不同，可能出現天南地北各不相同的定位結果，目前已知在擁 有無線裝置的環境時，由於瀏覽器會詢問使用者是否願意回傳有幫助的資訊，瀏 覽器在實作上，通常會用此種方式來試圖收集無線 WiFi 裝置的大概位置，增強 定位的準確度：但在有線裝置上就無法這樣做，只能透過 ISP 的路由資訊，粗略 的推算其裝置的定位位置。. 3.3.1 Geolocation 定位功能. 依據 W3C 的標準規範，瀏覽器必須可以取得行動裝置或電腦上的定位裝置 資訊，並要求裝置回傳目前的定位數據。目前各大瀏覽器皆以實作 Geolocation 物件，以下進行說明： 31.
(41) 程式碼 8 Geolocation 取得地理資訊標準函式. getCurrentPosition()標準函式需要傳入三個變數型態：. . successCallback：一個帶有地理資訊參數的回呼函式. . errorCallback（選擇性） ：當錯誤時會呼叫處理，並會回傳一個錯誤訊息物件 的回呼函式. . opsitionOption（選擇性） ：回傳資料時的細部設定. 其中成功回傳的地理資訊格式如下：. 變數名稱. 變數型態. 方法. latitude. double. 所在緯度. longitude. double. 所在經度. altitude. double. 所在海拔高度（視裝置有否支援）. accuracy. double. 經緯定位精確度. altitudeAccuracy. double. 高度定位精確度（視裝置有否支援）. heading. double. 視角（以正北為 0，視裝置有否支援）. speed. double. 速度（視裝置有否支援）. 表 6 Geolocation 標準資料回傳型態 當使用者進入地圖畫面時，為了取得目前所在位置的地圖畫面，必須先利用 Geolocation 取得目前所在的經緯度，再利用 Google Maps JavaScript API 呼叫地圖 物件作呈現。. 32.
(42) 程式碼 9 取得裝置定位流程 首先必須檢查此裝置是否支援 HTML5 的 geolocation，接著利用 Geolocation 取得定位資訊後，宣告 google.maps.LatLng 座標物件來設定其經緯度位置，再透 過宣告 google.maps.Marker 物件，將定位座標資訊繪製到地圖上。. Google.maps.Marker 可利用 google.maps.MarkerOptions 來對其座標點資訊進 行細部的設定，條列如下：. 33.
(43) 變數名稱. 變數型態. 說明. animation. Animation. 選擇新增座標時的動畫. clickable. boolean. 指定座標按下是否觸發事件. cursor. string. 設定滑鼠移至該座標時，是否顯示滑 鼠圖示. draggable. boolean. 設定座標是否可拖動. flat. boolean. 設定座標陰影是否顯示. icon. string|MarkerImage|Symbol. 自定座標圖示. map. Map|StreetViewPanorama. 設定座標放至的地圖物件. optimized. boolean. 將座標圖示的外觀作視覺最佳化處 理. position. LatLng. 座標經緯度資訊（必要設定）. raiseOnDrag. boolean. 設定當拖動座標時，是否呈浮起. shadow. string|MarkerImage|Symbol. 自定陰影圖示. shape. MarkerShape. 設定滑鼠／觸控事件時的可點擊區 域. title. string. 標題名稱. visible. boolean. 座標是否可見. zIndex. number. 座標對應於地圖物件上的 z 軸相對位 置. 表 7 google.maps.MarkerOption 設定格式. 3.3.2 新增地標圖層. 在 Google Maps JavaScript API 當中，實作地標圖層的方式，是透過建立一個 儲存座標資訊的陣列，利用迴圈將其放置在地圖上，以繪製公開資料平台的點位 為例：. 34.
(44) 程式碼 10 以程式進行圖台座標繪製流程 當進行繪製座標時，為了避免資訊過多導致畫面延遲，會先擷取目前畫面上 的地圖範圍，在這裡是以 google.maps.Map.getBounds()來取得一個方框範圍的物 件，此物件可以藉由 getNorthEast()及 getSouthWest()來取得邊界點的經緯度。. 再透過 Bounds 物件的 contains()方法，來檢查座標點是否在這個方框範圍內， 判斷是否需要繪製在畫面上，而當畫面離開範圍時，藉由座標的 setMap(null)方法， 可以將其從地圖上移除。. 在這裡利用了一個小技巧，稍微延伸方框的範圍至原本的 1.2 倍，可使使用 者在操作上，並不會覺得座標是在操作過程中才放置上去，增進了使用者的使用 體驗。. 35.
(45) 實作多人同時定位的方式，與新增資料地標圖層相同，也是透過實作一個座 標陣列，藉由操作陣列裡的座標物件，將點位放置在地圖上，唯在座標圖示上， 為了與資料圖層作區隔，而使用不同的圖示以示區隔。. 第四節 Web Storage 應用 3.4.1 使用者資訊暫存. Web Storage 中定義了 sessionStorage 以及 localStorage 兩個層級，其中的 sessionStorage 的使用情境，如同以往的 session 性質，儲存的變數在瀏覽器／分 頁籤關閉後即會消失，而 localStorage 在將資料存入後，會一直存放在對應網域 的 localStorage 當中，直到應用服務將之清除，或是使用者透過瀏覽器進行快取 的清除，存放的資料才會消失。. 在本研究中，使用 sessionStorage 的時機，在於存放使用者每次定位後的經緯 度資訊，而 localStorage 則用來存放跟隨使用者裝置的一些變數，使用者個人的 暱稱以及其裝置唯一碼等等。. 36.
(46) sessionStorage. localStorage. Web Storage. 圖 10 Web Storage 架構圖 W3C 關於 sessionStorage 的 Schema 標準定義，定義出三個基本的操作函式 必須進行實作，在此條列如下：. . DOMString window.sessionStorage.getItem(DOMString key) 取得指定 session 名稱的變數。. . void window.sessionStorage.setItem(DOMString key, DOMString value) 以指定名稱設定或新增一個變數。. . void window.sessionStorage.removeItem(DOMString key) 移除一個指定名稱的變數。. 使用 sessionStorage 必須注意到一點，由於目前的 sessionStorage 並沒有到期 時間（expired time）的設定，所以其生命週期必定會在瀏覽器或分頁關閉時即結 37.
(47) 束，而其存活的區域也限定在單一頁面或分頁，所以在跨頁面存取時，若是涉及 到開啟新分頁的行為，則 sessionStorage 並沒有辦法幫你做到傳遞變數的動作，必 須利用 localStorage 來進行傳值，再自行手動清除。. 而對於 localStorage 的 scehma 同樣也定義了三個實作函式：. . DOMString window. localStorage.getItem(DOMString key) 取得指定 localStorage 名稱的變數。. . void window. localStorage.setItem(DOMString key, DOMString value) 以指定的名稱設定或新增一個變數。. . void window. localStorage.removeItem(DOMString key) 移除一個指定名稱的變數。. localStorage 存放在瀏覽器的快取資料，與以往 cookie 不同的是，他並沒有創 造實體檔案位置，而是統一交由瀏覽器作快取管理，因此在效率上比起 cookie 要 來的好，而使用者可以從瀏覽器工具中，觀察該網域目前 Web Storage 的使用狀 態，也可利用瀏覽器支援的管理工具，作管理及刪除動作。目前 IE9 及 Chrome 都有內建支援的管理工具。. 38.
(48) 圖 11 以瀏覽器檢視 Web Storage 狀況 目前 W3C 針對 Web Storage 的協定，只允許存放 DOMString 屬性參數，並 不允許存放如物件等變數型態。. 第五節 Open Data 服務介接 台北市政府在 2011 年，提供了公開資料平台的服務，針對台北市政府公共 區域服務的資訊，實作出一套可供使用者利用程式存取的平台，不僅提供了 JSON ／XML／KML 等介接格式，部分也提供了 CSV 或 XLS 的格式，讓一般民眾也 能下載觀看。. 本研究使用的是 JSON 的資料來源格式，JSON 帶來的好處已在第二章詳細 描述，而本公開資料平台，在取得資料時，必須在呼叫的網址後方，加 上”?format=json”，代表所要求的資料回傳格式為 JSON。 39.
(49) 台北市公開資料平台背後是使用 Windows Azure 雲端服務架設，故此資料平 台在實作上，採用了一個 JSON 的擴充協定，稱為 JSONP（JSON with Padding）， 此種作法有以下幾點特色：. . 可以透過傳遞參數的方式，告知伺服器在回傳資料時，可以主動執行自 定義的回呼（callback）函式，這種作法可以省去自行定義非同步函式的 處理流程。. . 在要求資料時，可以規避跨網站的存取限制，當網頁透過 JavaScript 進 行 Ajax 跨站要求時，會因跨網站存取權限的問題遭到阻擋，而 JSONP 協定可以躲避跨網站的問題，直接回傳資訊。. 但由於 JSONP 可以跨網站要求資訊的特性，這也相繼造成了一些安全上的疑 慮，而因本系統為公開資料平台，一切資料都沒有保密性的問題，故此服務仍使 用此非官方的擴充協定，讓程式在擷取資訊時能夠透過 Ajax 進行存取，並搭配主 動回呼函式，加速資料的處理速度。. 公開資料平台上計有 72 個服務，在資料介接的部份，特別挑出其中的 8 個 服務，由於挑選出來的資料中皆帶有經緯度，故可直接使用經緯度資訊，作為地 理資訊對應的來源，並將資訊放置在地圖上：. 40.
(50) 資料名稱. 敘述. 觀光客. 居民. 運動員. 臺北市寺廟點位 分布圖. 各區寺廟位置. V. 臺北市教會點位 分布圖. 各區教會位置. V. 停水資訊. 各區停水資訊. V. 自行車道(河濱). 周邊自行車道. V. V. 城市公園. 台北市各區公園. V. V. 臺北公眾區免費 無線上網熱點資 料. 公開區域的無線上網熱點. V. V. 臺北市公廁位置. 包含餐廳附設廁所資訊. V. V. 臺北市垃圾清運 路線圖. 包含時間及地點. V. 表 8 公開資料平台介接資訊 選擇的資料皆有附帶經緯度資訊，可以直接利用不需再查詢，回傳的格式以 JSON 字串的方式，這裡以 Ajax 的方式在背後進行服務要求，要求資訊的方式如 下：. 在資料的使用上，利用到的是情境感知的簡易應用。情境感知可依下列資訊 做邏輯上的判斷劃分：. . 人：使用者的身分. . 事：使用者即將要做的事. . 時：使用者所處的時間區塊. 41.
(51) . 地：使用者所在的位置. 利用使用者角色的功能，可以區分出適合於使用者的資訊，當中包含了“人” 以及“事”的意義。目前的使用者角色有以下定義：. . 居民：居住在台北市的民眾，可提供關於居家資訊等等。. . 觀光客：從外地進入台北市，提供關於景點以及便民的資訊，諸如無線網路 分布以及公廁位置等. . 運動員：利用台北市的運動公共資源，例如公園及自行車道等資訊。. 程式碼 11 利用 Ajax 執行跨網站服務要求. Ajax 在背後以 POST 方式進行 XMLHttpRequest，data 為網址引入參數，並 指定利用 processData()函式作回呼（callback），dataType 為服務回傳格式，在這 裡指定以 jsonp 的方式回覆。取得的資訊格式如下：. 變數名稱. 敘述. PartitionKey. 系統辨識碼 42.
(52) RowKey. 資料庫辨識碼. Timestamp. 時間戳記. entityid. 資料辨識碼. stitle. 標題名稱. xpostdate. 資料發佈時間. xbody. 資料內容. xcreateddate. 資料生成時間. xaddress. 住址. gtag_longitude. 經度座標. gtag_latitude. 緯度座標 表 9 公開資料平台介接欄位說明. 43.
(53) 第四章 系統實現. 本章第一節簡述系統建置環境與使用情境，第二節展示手機平台及平板使用 的介面呈現，並簡述其流程跟說明。. 第一節 系統建置環境與使用情境. 本系統建置環境分為兩個部分，其中網頁伺服器部分環境如下：. . Java 執行環境（JRE）：版本 1.6.0. . Apache Tomcat：版本 6.0.0. 有關 node.js 的環境如下：. . node.js 服務：版本 v0.6.18. . npm 擴充套件管理：版本 1.1.21. . socket.io 套件：版本 0.9.6. 44.
(54) 本研究利用 HTML5 及 JavaScript，實作一個行動平台互通的使用者介面，可 在具有支援 HTML5 標準瀏覽器的任何裝置上執行，並提供使用者進行地圖介面 的導覽與查詢。. 圖 12 系統使用情境案例圖. 在開發環境上，使用的是 Mac OS X 作業系統，搭配 Eclipse 的開發環境，進 行 JavaScript 以及 HTML5 的程式碼撰寫及偵錯，其中的自動排版功能以及程式 碼自動完成功能可以加速協助程式開發的進行。並利用 Google Chrome 瀏覽器觀 察程式碼的執行過程及錯誤，進行細節的偵錯及修改。. 45.
(55) 圖 13 Eclipse 開發環境介面. 第二節 介面呈現 本系統開發期間，主要藉由手機介面進行測試，因手機的硬體資源比電腦平 台薄弱，在測試上反而比較容易判斷介面的盲點，以及效能上的問題，加上手機 裝置的定位功能齊全，也正契合本研究的研究目標。. 46.
(56) 圖 14 使用者主要入口頁面 主介面包含兩個主要功能的按鈕，一個角色選擇的下拉式選單，以及暱稱設 定。兩個主要功能分別為 Google 地圖查詢以及 WebSocket 即時對話功能。在暱 稱的部分，使用了 localStorage 來存放本機的暱稱資訊，預設名稱為 guest，而當 進行設定之後，日後進入畫面就會以之前設定的暱稱預設顯示。. 在主畫面時並不會進行 Web Socket 的連線動作，分別實作在地圖服務以及即 時對話兩個系統當中。. 47.
(57) 圖 15 使用者角色選擇 使用者在主頁面時，即可自行選擇使用者的角色設定，在服務內容部分也會 隨著角色的不同，展示不同的結果。. 角色的選擇如下：. . 居民：以居住在台北市的居民為主，提供生活化的資訊。. . 觀光客：以外地前往台北市的族群為主，顯示的是即時方便的資訊。. . 運動員：以在台北市區域內活動的族群為主，顯示運動設施等資訊。. 48.
(58) 圖 16 使用者在輸入框中輸入訊息 進入多方談話介面，如同一般的聊天介面，使用者透過對話框輸入訊息，將 訊息送出，這裡使用的是 Web Socket 架設的多方談話服務，當使用者在輸入框中 輸入欲送出的訊息，送出後便會透過 Web Socket 立即送交服務處理。. 49.
(59) 圖 17 送出訊息並即時更新畫面 當服務收到訊息後，會立刻將目前存放於服務中的歷史訊息，全部回傳至介 面上，依照新＞舊的順序排列，訊息顯示包含發話人暱稱，訊息內容，以及發送 日期時間等等。. 介面背後，利用一個 Timer 不斷的檢查伺服器上的訊息，若是訊息內容有變 動，便會立刻將資料更新至畫面上。. 50.
(60) 圖 18 使用者進行定位及圖面顯示 當進入地圖介面時，首先會使用到的是 Geolocation 功能，此時瀏覽器會跳出 視窗詢問使用者是否願意提供裝置的定位資訊，以便進行圖面上的定位，這是 Geolocation 標準當中一個隱私權的設計，以提醒的方式告知使用者，避免在同意 提供定位資訊後，造成不必要的誤會。. 在利用裝置偵測目前的經緯度資訊後，會將自己的定位座標放置在地圖畫面 上，以小貓的圖示呈現，進入地圖介面後，背景的 Timer 便會開始運作，不斷的 將自己的座標位置傳送至 Web Socket 服務。. 左下角的定位功能，能夠將畫面快速的定位至自己的位置，以便觀看周邊的 點位資訊。 51.
(61) 圖 19 拖放定位圖示以進行街景呈現 而在 Google 地圖介面中，除了可使用地圖的兩指縮放（部分裝置無法完全支 援，因蘋果擁有相關的觸控專利技術），還提供了一個街景導覽的功能，使用者 可使用地圖左上的衣夾人，將之拖曳至街道上，此時街道會呈現藍色的描繪線， 代表該路段已經支援 Google 街景服務，將手指放開定位後，圖台便會切換到街景 功能，顯示該路段的實拍街景相關資訊。. 52.
(62) 圖 20 圖面點位資訊以及其詳細資料呈現 台北市政府提供的公開資料平台，在部分服務當中，提供了有關經緯度的地 理資訊，在選擇服務之後，便會利用這些經緯度資訊，將服務提供的點位資訊放 置在圖台上，每種不同的服務都有相對應的圖示。. 點選點位圖示之後，會以氣泡框的方式將其中的詳細資訊帶出，其中包含簡 介、地址、電話、聯絡人、以及距離自己多遠等資訊，距離的部份採即時運算， 會依照使用者目前所在位置計算，利用的便是球面上弧長的公式。. 53.
(63) 圖 21 多點資訊經由 MarkerClusterer 處理後的畫面 由於公開資料平台的服務當中，有些服務的資料量龐大，會在地圖上繪製過 多的點，不但影響地圖呈現的效能，也會讓地圖變得不好閱讀，因此在這裡使用 了 MarkerClusterer 這個元件來簡化點位的呈現。. 當地圖進行縮放時，由於一個區域當中聚集的點較多，便會將這些點位轉成 一個 Cluster 點，並顯示該區域點的數量，而當地圖逐漸放大至較小的比例尺區域 時，則會以顏色較淡的 Cluster 點表示。. 54.
(64) 圖 22 使用者依角色切換圖層功能 使用者可以隨時切換欲查詢之圖層，可切換的圖層則是視使用者的角色來做 規劃，當圖層切換後，會立刻重新繪製地圖上的資訊點圖示，所以在這裡可能會 因圖台大量的存取動作而有操作上的延遲感。. 55.
(65) 圖 23 ”最近的資訊”功能畫面呈現 當使用者點選畫面右上的“最近的資訊”時，會跳出一個由 jQuery 設計的小對 話框，顯示距離使用者一公里內圖層上的訊息，當周圍沒有資訊時則會保留空白， 而在使用者一邊行進一邊操作地圖時，當使用者逐漸靠近其他點位資訊至一公里 內時，右上的按鈕則會開始閃爍，以提示使用者目前已經接近所查詢的目標圖層 當中的點了。. 56.
(66) 圖 24 多人同時定位畫面呈現 當多人同時在使用此系統時，每個使用者皆會在背景不斷的傳遞自己的位置， 並隨時接收系統中所有使用者的資訊，包含經緯度等，以便在畫面上呈現出來。 而因為效能考量，在設計上只繪製出畫面涵蓋範圍的使用者圖示，以減輕運算上 的負擔。多人定位圖示每隔 25 秒即更新一次。. 57.
(67) 第五章 效能分析. 本研究分兩個部分來進行效能分析，一是測量在 Web Socket 傳輸時，伺服器 的處理速度及佔用記體體分析，二是利用電腦端的瀏覽器偵測工具，觀察在網頁 端進行操作時的記憶體和 CPU 使用情形。. 底下為伺服器開啟五分鐘內，每分鐘所做的記憶體記錄表：. 等待5分鐘後使用3台設備登入多方 對談 . 10分鐘 . 9分鐘 . 8分鐘 . 7分鐘 . 6分鐘 . 5分鐘 . 4分鐘 . 3分鐘 . 2分鐘 . 1分鐘 . 等待5分鐘後使用3台 設備登入多方對談 . 0分鐘 . 9000 8000 7000 6000 5000 4000 3000 2000 1000 0 . 圖 25 等待 5 分鐘後使用 3 台設備登入多方對談. 系統在開啟時佔用約 8,228K 記憶體，經過一分鐘後逐漸下降至 6,340K 記憶 體，之後約保持在平衡狀態。而當過了五分鐘後，試著利用三台裝置進入多方談 話功能，並持續傳送數則訊息後，記憶體使用量就上升到約 7,312K 的記憶體用 量，而再經過五分鐘之後，記憶體用量在 7,588K 記憶體維持平衡。 58.
(68) 接下來測試的是經過五分鐘後，利用三台裝置進入地圖進行多人定位功能， 記憶體耗用狀況的圖表：. 等待5分鐘後使用3台設備進入地圖 定位 . 10分鐘 . 9分鐘 . 8分鐘 . 7分鐘 . 6分鐘 . 5分鐘 . 4分鐘 . 3分鐘 . 2分鐘 . 1分鐘 . 等待5分鐘後使用3台 設備進入地圖定位 . 0分鐘 . 16000 14000 12000 10000 8000 6000 4000 2000 0 . 圖 26 等待 5 分鐘後使用 3 台設備進入地圖定位. 在開啟伺服器時，伺服器佔用記憶體約在 8,148K，而經過約兩分鐘之後達到 6,246K 記憶體用量。當經過五分鐘後，使用三台設備進入地圖介面，進行背景執 行的多人定位功能時，記憶體用量提昇至 14,920K 記憶體，而再經過五分鐘後， 記憶體用量約落在 15,024K。. 而在訊息處理速度方面，在去除網路延遲，只觀察訊息處理速度來看，多方 談話在收到訊息回傳至使用者端耗費的時間，幾乎都落在 0 毫秒，僅有零星的處 理時間約落在 15～16 毫秒左右。. 而在地圖定位訊息的處理速度方面，定位送出時間皆落在 1～2 毫秒附近。. 59.
(69) 而在 CPU 使用量方面，node 啟動的服務幾乎完全保持在 0%，完全沒有提昇 或是競爭的情形。. 在瀏覽器效能測試部分，這裡為了讓模擬環境與手機平台較為接近，因此使 用一個獨立的分頁，並將分頁大小縮至約 960x640，開始進入主頁面進行分析。. 以下為測試情境，在開啟主頁面後五分鐘，進入多方談話介面進行交談及操 作，並在第十分鐘後退出，直接進入地圖介面操作。下圖為使用過程中，每分鐘 的記憶體用量變化情形：. 記憶體用量 140 120 100 80 60 . 記憶體用量 . 40 20 0 . 圖 27 使用瀏覽器進行記憶體耗用觀察. 當主畫面停留較為靜態的多方談話介面時，記憶體用量都約平衡維持在 80MB 以下，但當進入地圖平台並開始拖動畫面時，由於需要大量的讀取地圖圖 檔，因此在記憶體用量方面也會提昇。 60.
(70) 有關 CPU 用量部分，當畫面沒有進行操作時，CPU 總用量皆不超過 5%，但 當使用者開始操作介面時，由於涉及到許多事件的觸發，CPU 就會提昇使用率來 處理這些事件。. 61.
(71) 第六章 結論與未來展望. 第一節 研究成果探討. 本研究的目的，在於建立一個模組化的工具集，以輕量化的伺服器作為服務 提供工具，經過驗證之後可以發現，node.js 在處理訊息跟 Web Socket 的速度非 常快，耗用的系統資源也相當低，足見透過 V8 Engine 進行解譯的 node.js 非常適 合作為小型應用服務提供者。. 而在應用程式的速度及反應方面，由於使用瀏覽器開啟的緣故，有時在速度 的表現上的確不如利用原生環境開發的軟體，而諸如手機軟體支援的訊息通知等 功能，也必須包裝成軟體才能使用；但在 HTML5 標準下的功能都能執行無慮， 也不限定僅有手機可以使用，利用 CSS 排版甚至可以做到對應平台呈現出不同的 使用者介面。. 本系統未來可以針對以下幾個部分做改進：. 1. 政府機關的公開資料平台是未來的一種趨勢，但目前僅有台北市政府提供公 開資料平台的服務，期望日後在其他縣市，也加入公開資料平台的服務，此 研究便可直接進行擴充。. 62.
(72) 2. 針對多人定位圖層及多方對談的部份，由於目前的採樣數量還不夠多，若是 在多人共同上線的情況下，系統對於 Web Socket 處理上的負擔可能會加重。. 3. jQuery moblie 所提供的轉場動畫，由於是跨頁面的 Ajax 動態呈現，有時會在 單一頁面上，造成頁面資料無法初始成功的情形，必須先行將所有頁面載入， 或是暫時關閉 Ajax 的轉場效果，以達成畫面切換。. 4. 目前使用的公開資料平台介接服務，是以有提供經緯度的服務資訊為主，僅 有住址的部份暫時沒有引入系統，由於將地址轉為經緯度必須經過服務作反 查，Google Maps JavaScript API 雖有提供相關服務，但由於免費的版本對單一 IP 的每天使用限制為 2500 筆，而且頻率不能夠過高，否則皆無法正常回應查 詢結果，因此在介接上並沒有採用此種作法。目前的權宜作法，是利用程式 在後端進行限制次數及頻率的批次反查，並將反查結果存回至資料庫以供查 詢，但這樣的作法缺乏即時性，而且必須額外經過前處理。. 5. HTML5 還包含了 video、audio 等標籤定義，目前各家瀏覽器皆已個別實作出 對應的功能，只是目前各瀏覽器所使用的視訊／音訊編碼格式仍然尚未統一， 在檔案的支援上難免顧此失彼，日後規格統一化後，在實作上必定更為方便。. 63.
(73) 第二節 未來展望 由於 HTML5 逐漸的成熟，現今許多手持裝置的軟體，如 iOS 以及 Android， 其實在開發上會選擇採用 HTML5 標準規範，來開發網頁端的應用服務，再以中 介語言開發套件，將整個網頁系統封裝至軟體中。目前已有許多套件提供軟體封 裝的功能，如 PhoneGap，Titanium 等等，這類的套件強調你只需要具備一般 HTML 及 JavaScript 的開發能力，便可以將撰寫完成的服務，以應用軟體的方式包裝起 來，達成跨平台移植的效果。雖然在執行的流暢程度，尚且不如完全以環境語言 開發出來的軟體，但其開發速度及移植成效，已經足以滿足許多基本功能。. 另一方面，Mozilla 近期正在著手進行一項全新的手機作業系統開發計畫，名 為 Firefox OS（前身為 Boot to Gecko） ，該作業系統的特點，即是從使用者介面層 開始，完全使用符合 HTML5 標準規範的網頁程式語法來進行開發，舉凡撥號攝 影等功能全是以 HTML+JavaScript 語法撰寫而成，而其背後所使用的引擎，便是 Mozilla 自行研發，應用於 Firefox 上的網頁編譯技術，目前已有實際展示成果。. 綜觀以上趨勢可以發現，HTML5 的到來，開始改變了傳統的網頁程式開發 環境，在進行本研究的過程中，也逐漸挖掘出 JavaScript 語言的前瞻性跟延展性， 期許日後單純的網頁語法，不再只是瀏覽器底下的附屬品，而是能在更多平台上 活躍的跨平台開發語言。. 64.
(74) 參考文獻 [1] [2]. HTML5 Working Group，http://www.w3.org/html/wg/ HTML5 differences from HTML4，. [3]. http://www.w3.org/TR/2011/WD-html5-diff-20110525/ Google Maps JavaScript API 第 3 版，. [4]. http://code.google.com/intl/zh-TW/apis/maps/documentation/JavaScript/ Ajax: A New Approach to Web Applications，. http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications [5] JSON，http://www.json.org/ [6] jQuery: The Write Less, Do More, JavaScript Library，http://jquery.com/ [7] jQuery Mobile，http://jquerymobile.com/ [8] 台北市政府公開資料平台，http://taipeiogdi.cloudapp.net/ [9] JavaScript 技術 -- JSON 與 JSONP，http://ccckmit.wikidot.com/js:jsonp [10] 球面三角學 - 维基百科，自由的百科全書， http://zh.wikipedia.org/wiki/%E7%90%83%E9%9D%A2%E4%B8%89%E8%A 7%92%E5%AD%B8 [11] Globally unique identifier - Wikipedia, the free encyclopedia， http://en.wikipedia.org/wiki/Globally_unique_identifier [12] Nielsen: first time Smartphone and Feature Phone usage equal， http://www.slashgear.com/nielsen-first-time-smartphone-and-feature-phone-usag e-equal-30220760/，2012 Feb [13] Geolocation API Specification，http://dev.w3.org/geo/api/spec-source.html，2012 Apr [14] The Web Sockets API，http://www.w3.org/TR/2009/WD-websockets-20091222/， 2009 Dec [15] Web Storage，http://www.w3.org/TR/webstorage/，2011 [16] Standard ECMA-262 ECMAScript Language Specification，ECMA International， 2011 Jun [17] MarkerClusterer: A Solution to the Too Many Markers Problem， http://googlegeodevelopers.blogspot.tw/2009/04/markerclusterer-solution-to-toomany.html [18] 林彥辰，多維度情境感知資訊擷取與交換之研究，國立台灣師範大學碩士論 文，2009 [19] 許儷玶，整合Google Map 與Location-Based Workflow Service之平台建置與 探討，國立台灣師範大學碩士論文，2009 65.
相關文件
• 雖然 Flash 可以接受任何 Unicode 文字（包含中 文）， 但為了確保與其它版本的 Flash 相容， 也
(三)使用 Visual Studio 之 C# 程式語言（.Net framework 架構）、Visual Studio Code 之 JavaScript 程式語言（JavaScript framework 架構） ，搭配 MS
本專題研究目的旨在活用 kinect 捕捉人體動作，並設法順暢與 設備連動的方法；同時對 HTML5(少許)與 javascript 進行研究，設
本專題研究目的旨在活用 kinect 捕捉人體動作，並設法順暢與 設備連動的方法；同時對 HTML5(少許)與 javascript 進行研究，設
第三節 研究方法 第四節 研究範圍 第五節 電影院簡介 第二章 文獻探討 第一節 電影片映演業 第二節 服務品質 第三節 服務行銷組合 第四節 顧客滿意度 第五節 顧客忠誠度
HA’s and FA’s broadcast their presence on each network to which they are attached Beacon messages via ICMP Router Discovery Protocol (IRDP). MN’s listen for advertisement
為了更進一步的提升與改善本校資訊管理系 的服務品質，我們以統計量化的方式，建立
審查整理呈現資料：蒐集到的資料應先審核 是否完整、正確、合理與一致，然後利用敘
