應用ArcGIS JavaScript API設計互動式電子遊記
The Design of an Interactive E-Travel Note Using ArcGIS JavaScript API
楊懷恩 黃昱森
Kawas Lejen Yu-Sen Huang
Abstract
With
the development of Web2.0 and the cloud computing technology, the applications
and processing capacities for spatial information have improved in recent
years. This brings along the Application Processing Interface (API) service,
whose “mash-up” of various web services from different sources will be the
future trend for web GIS platform. For instance, Google map and its combination
with real-time traffic information give birth to the real-time traffic query
system.
On
the other hand, after the enforcement of two-day weekend, travel has become a
necessity. With the explosive growth of mobile network and mobile device users,
the check-in service in the location-based social networking service (LBSN) on
mobile apps has become more and more popular. Such service is employed mostly
in leisure activities or travel, and it integrates three elements that are
location, time, and real-time information, into the social networking platform.
Many e-maps have just one-way information reception, without dynamic two-way
interaction like time-flow or social activities. For this reason, based on the
idea of “e-Travel passport platform,” this study applies representational state
transfer (REST) web service to “mash-up” user’s check-in records and ESRI
ArcGIS JavaScript API to develop an
“interactive e-Travel note platform.” When an e-Traveler checks-in, the
geographical location and real-time information will be uploaded to the
platform immediately. Travel is to move within places. Through this platform,
e-Travelers can not only present their journeys in a way of spatial data but interact
with other friends on the social network.
Keywords: web GIS, location-based social networking service, check-in,
ArcGIS JavaScript API, e-Travel Note
摘要
隨著Web2.0與雲端技術的蓬勃發展，近年來空間資訊所應用的各項技術與處理能力已較以往先進。以其所帶動的應用程式介面(Application Programming Interface, API)服務來看，將不同來源的網路服務加以混搭(mashup)，如以Google Map為核心，將即時交通資訊結合成為即時交通查詢系統，此為未來網際網路地理資訊系統(Web GIS)平台的新趨勢。
另一方面，周休二日政策實行後，旅遊已是國民日常生活的必需品。伴隨著行動網路與行動裝置使用者的爆炸性成長，行動裝置應用程式(Mobile App)上的行動社交服務(Location-based Social Networking Service, LBSN)的打卡(check-in)功能亦在國內大規模流行，尤以從事休閒活動與旅遊時的應用最常見。打卡可以結合地理位置、時間與即時資訊上傳分享至社交網路平台。由於許多電子地圖所設計的旅遊地圖皆為靜態單向資訊接收，缺乏時間流動與社群交流等動態雙向互動。因此本文根據筆者以新穎的打卡功能開發「電子旅遊護照平台」的概念，透過REST(Representational State Transfer)網路服務混搭使用者的打卡資訊，以ESRI ArcGIS JavaScript API設計網頁版互動式電子遊記，當遊客打卡後，其地理位置與即時資訊會同步混搭至電子遊記平台上。由於旅遊是人們空間的移動，此互動式電子遊記，不僅將旅程以空間形式呈現在地圖上，亦可與其他社群朋友進行互動交流。
關鍵詞：網際網路地理資訊系統、行動社交服務、打卡、ArcGIS JavaScript API、電子遊記
（論文初稿未經同意請勿引用）
一、前言
近年來，以地理資訊系統(Geographic
Information System, GIS)為核心的服務長久以來都需要支付龐大的經費，隨著空間資訊所應用的各項技術與處理能力更迅速後，直到2005年Google地圖服務的出現，讓全球民眾可以不用支付任何費用即發現原來地球可以這樣玩，GIS服務亦逐漸大眾化。
網際網路已是人們生活不可或缺的一部份，根據台灣網路資訊中心2012年「台灣寬頻網路使用調查」報告[1]，全國地區上網人口約有1,753萬，上網率達75.44%，儼然Web2.0技術的應用為其網路普及化的重要因素。然而，Web2.0的出現使得網路服務(Web Service)如雨後春筍般竄出，其主要因應現今商業需求，如Microsoft的.NET戰略，IBM發布的Web Service
Toolkit(WSTK)，這也使得W3C始推出了Web Service的標準和規範，Web Service即廣泛應用在各種資訊系統中。而現今的Web Service大都是透過其所提供的應用程式介面(Application Processing
Interface, API)，將不同來源的網路服務加以混搭(Mashup)，組合成各自需求與目標的網路應用程式(web-app)（Benslimane et al., 2008; 榮峻德等，2011）。
另一方面，社群網站是基於Web2.0發展的新技術，像是地圖日記、Google+、iPeen愛評網以及Yahoo!生活+等，均因市場需求而生。在現今眾多的社群網站中，以Facebook成長最為快速，其強而有力的人際連結，使得2007年至今已累積了五億多名會員。因此結合行動定位服務(Location-based
Service, LBS)的發展，加上Facebook的地標打卡(Check-in)服務的推出，「打卡」這個動作因而隨之風靡，許多商家亦紛紛推出打卡即優惠的策略吸引顧客上門。然而在周休二日政策實行後，旅遊已成為國民日常生活的必需品，因此在打卡化的現代生活中，從事休閒活動與旅遊時，許多遊客漸漸手持智慧型手機，隨著幾行「到此一遊」的心得與照片即透過手機「打卡」上傳自Facebook，猶如遊記般記錄生活中的每個點滴。
不過由於Facebook上的塗鴉牆(Wall)混雜了個人所有分享的資訊，且打卡訊息僅是在貼文上附註地標名稱，而非整合於地圖介面；但Flickr[2]卻完美地利用Mashup技術利用檔案附加的地理位置資料將相片呈現在地圖上。再加上許多電子旅遊地圖皆為靜態單向資訊接收，缺乏時間流動與社群交流等動態雙向互動，因此為了兼具互動性、趣味性與典藏價值，透過Facebook開放的Graph API文檔[3]，本研究欲以開發人員角色，根據楊懷恩（2012）利用新穎的打卡功能開發「電子旅遊護照平台」的概念，透過Mashup技術將ArcGIS JavaScript API與Facebook Graph API於以Google Map為基底[4]上整合成為一個互動式電子遊記的Web Service平台。此平台利用JavaScript的擴展，以RESTful Web API架構的概念混搭Facebook Graph API傳回的使用者打卡資訊，並編寫PHP腳本語言實現其介面。因此當遊客打卡後，其地理位置與即時資訊會同步混搭至本電子遊記平台上，同時亦可與Facebook的好友進行互動交流。
二、相關文獻回顧
Web2.0是一個集體參與、相互分享、打破成規、共同受惠的「匯集群體智慧網路運用」。其典型例子即是「網誌(blog)」──藉著Web2.0概念強調的網路「互動、參與和共享」精神。「blog」是「weblog」的縮寫，即網路(Web)的流水式日誌(log)，簡單來說即是網路上的流水記錄。其類似於電子佈告欄(BBS)的個人版、個人新聞台以及網路交換日記，其共同特色為文章皆是以時間順序來排序且內容更新頻繁。部落格內容依部落客(blogger)的個人喜好而定，可以是主題誌、個人日誌和研究討論等（Goldsborough, 2003; 林克寰，2004）。
遊記是以散文形式描寫旅行遊覽中所見聞如風土民情、山川名勝等，亦可稱旅遊日誌，其取材範圍極廣，以古時文人的遊記為例，像是有帶議論色彩的，如《岳陽樓記》、《遊褒禪山記》；有帶科學色彩的，如酈道元的《三峽》；亦有帶抒情色彩的，如柳宗元的《小石潭記》等。然而隨著現今科技進步、網路普及化，遊記的形式大多漸漸以blog呈現，如筆者於無名小站發表的機車環島日記[5]，以及地圖日記上的單車軌跡紀錄遊記[6]等，使遊客可即時、簡易、迅速地將遊記分享在網路上。不僅如此，隨著網路技術革新與頻寬持續性地擴增，加上社群網站的崛起，提供了更即時、影音媒體與傳輸大量封包的檔案形式，因而造就了微型網誌(Micro-blog)的誕生，如推特(Twitter)、噗浪(Plurk)和臉書(Facebook)等(Kaplan &
Haenlein, 2011)。
微型網誌為社群媒體(social media)的主要服務，較傳統網誌不同之處在於其貼文具有簡潔有力的主題，大多是使用者的即時動態訊息，亦可上傳媒體影音檔案並附加在貼文中，其較迅速的貼文形式與強韌的社群連結使得朋友瀏覽率大過於傳統網誌，為目前網路使用的新趨勢（何振誠、邱張名琪、陳威助，2009）。另一方面，四方廣場(Foursquare)與Facebook於近年發布的新服務「打卡」(Check-in)，是以地理位置發布即時訊息的新穎形式，正在國內大規模流行，尤以從事休閒活動與旅遊時的應用最常見。
Mashup是將不同支持Web API的應用進而堆疊建構的一個新的Web Service，其利用了從外部資料來源查詢的內容創建全新的服務，將不只一個來源內容進行組合的加值服務。這些開放式API文檔的公開使開發人員利用Mashup技術即可輕易建立個性化Web應用服務，例如：流行病與癌症數據和Yahoo地圖的結合，研究疾病發病的發病地點與分部規律；將天氣、災害資訊與GIS數據相結合，建構災害預警防治系統等（翟石豔，2009）。
在國外相關研究，Bamford等人(2007)設計一個LBS概念的行動旅遊部落格(Travel Blogging)稱LocoBlog，該平台將行動裝置所拍攝的旅遊照片透過Mashup技術，並根據地理位置呈現於Google地圖上，使用者可以在遊程結束後檢視其遊程路徑與照片等，是個性能很完整的行動遊記平台。而在國內，楊懷恩（2012）則以「打卡」特性設計虛擬紀念戳章，並以Foursquare APIv2開發「電子旅遊護照平台」的LBS服務，遊客可在所在地打卡與蓋章，並上傳圖片與旅遊心得至平台上，此亦可稱作行動社交服務(Location-based Social
Networking Service, LBSN)。
三、研究方法
本研究主要是根據Facebook的打卡記錄以ArcGIS JavaScript API設計一個互動式電子遊記平台，因此研究方法將以平台功能架構、功能介紹和系統設計進行說明。
(一) 平台功能架構
根據圖1，本研究將平台功能架構分為瀏覽器Client端、Web Service Mashup、平台功能與伺服器端四大部分，其中Client端是建構Web GIS概念於瀏覽器的網頁應用程式(Web-App)，根據ESRI網站(2011)對於ArcGIS API for
JavaScript文檔的說明，目前各大瀏覽器如Chrome、Firefox、Internet Explorer 7-9等都支援此API服務。在Mashup技術上，本研究應用了Facebook Graph API和ArcGIS JavaScript API等Web Service進行混搭， 其中ArcGIS JavaScript API應用了時間軸(TimeSlider)的展示與JavaScript的混搭語法。
此外，本平台使用的Facebook Graph API為RESTful Web服務架構，將重要的遊記元素透過控制器(Controller)進行HTTP 請求方法，藉以將需求(Demand)傳至Facebook API雲端伺服器，產生資料後回傳至Client端，如社群交流功能使用POST方法（以紅線表示）於伺服器的個人帳戶空間新增數據；查看遊記資訊則應用了GET方法（以綠線表示），將請求服務回送JSON 資訊至控制器，待其接受後以解析語法將資訊呈現至Client端頁面。
圖1 互動式電子遊記系統功能架構
(二) 功能介紹
根據圖1的系統功能架構，本平台以四個主要的功能服務如下表1介紹：
表1
互動式電子遊記功能介紹
功能名稱
|
Web Service
|
功能服務內容
|
採用方法
|
社群交流
|
Facebook Graph API
|
於Clinet端的遊記貼文介面設計留言欄與按讚等功能服務，使用者可於Facebook帳戶同步進行社群交流
|
HTTP請求POST方法
|
查看遊記資訊
|
Facebook Graph API
|
根據地理位置設計遊記貼文介面於Client端地圖上，除了可瀏覽個人遊記內容，亦可查看朋友回覆的資訊
|
HTTP請求GET方法
|
將遊記匯入網誌
|
Facebook Graph API
|
將取得的打卡資訊整合成旅遊日記匯入並發佈至Facebook網誌
|
HTTP請求POST方法
|
時間軸展示
|
ArcGIS JavaScript API
|
利用時間軸(TimeSlider)進行遊程展示功能服務
|
JavaScript
語法
|
資料來源：本研究整理
(三)系統設計
為建構一個基於Web GIS概念的互動式電子遊記Web-App，本研究以Facebook Graph API和ArcGIS JavaScript API為主要設計元素：
1. Facebook Graph API
Facebook API可應用於多種環境下，包括網站(Website)、Facebook應用程式(Apps on Facebook.com)以及行動應用程式(Mobile Apps)等，由於其開發簡單快速， Facebook也將常用到的服務包裝成套件供開發者直接套用，稱之為Social Plugin，其中包含最常見的包括「按讚」、「朋友的動態」、「留言系統」等。而其實Facebook API是希望能夠擷取使用者以及與使用者相關物件之間的鏈結，也因此Facebook將這個概念濃縮成為一個核心概念，稱之為Social Graph。而存取這些關係的API，就稱之為Graph API（黃彥傑，2012）。
Graph API與Foursquare APIv2一樣，採用OAuth2.0認證方式，為了確保第三方授權而進行的身分確認，當開發人員的App通過認證後，並可取得存取鑰匙(access key)，之後向Graph API索取(GET)或創建(POST)資料時，只需附加令牌(access token)即可，如下所示：
https://Graph.Facebook.com/me?access_token=ACCESS_TOKEN
|
上述GET請求可獲得下列JSON格式的使用者資訊：
{
"id":
"100000268547184",
"name": "Willy
Yang",
"first_name":
"Willy",
"last_name":
"Yang",
"link":
"http://www.facebook.com/ayu1114",
"username":
"ayu1114",
"gender":
"male",
"timezone": 8,
"locale":
"zh_TW",
"verified": true,
"updated_time":
"2012-08-12T16:17:41+0000"
}
|
根據上述的資料，即可以PHP解析語法輕易地取得欲獲得的資訊並呈現於API介面上。
2. ArcGIS JavaScript API
ArcGIS API for JavaScript (JavaScript API)為一個專為開發人員設計基於瀏覽器Client端服務，通常用於開發高效能、輕量級的Web GIS地圖應用，其主要是由ESRI ArcGIS online託管的免費服務。使用ArcGIS JavaScript API 僅需在HTML Head中引用CSS樣式與JavaScript腳本文件，即可在腳本標籤中編寫多樣化的地圖應用(ESRI, 2011)。
ArcGIS JavaScript API除了可以REST風格的架構透過ArcGIS Server的REST API端點存取服務外，更因其建構於Dojo框架上，因此在編寫前需要宣告一些Dojo Toolkit的方法如dojo.require(esri.map)。在互動式地圖的呈現上，Dojo根據使用者瀏覽網頁的特性，使用了DOM事件(Event)機制的dojo.connect方法，透過事件傳播的特性增加了使用電子地圖的應用程式上的動態互動性。
四、系統實作與結果
(一)介面介紹
圖2為本研究所設計互動式電子遊記的介面，以筆者的Facebook API帳戶，於2011年11月27日至28日的旅遊打卡紀錄進行平台測試。由圖中可以看出本平台分左右兩側，左側呈現表格式遊記資訊，並可以HTML5語法的Popup連結更改打卡紀錄時間區間的設定，為完整呈現資訊，本研究以時間、旅遊景點和旅遊心得呈現微型網誌作為電子遊記的內容；另一方面，右側以打卡附加的照片取代地標圖案，並根據其打卡的地理位置顯現於Google Map上，使用者只要點圖案或左側的文字資訊，即可迅速瀏覽遊記內容。
圖2 互動式電子遊記介面
(二)執行畫面
當使用者單擊照片及文字資訊後，即以Popup呈現遊記詳細資訊，同時可瀏覽朋友的留言內容以及進行交流，而在右下角則是時間軸的展示，使用者只要單擊播放鍵即可像幻燈片式地瀏覽遊記內容，亦可以鍵盤的左、右方向鍵瀏覽。另外，單擊「發佈至網誌」後，即可連接自己的Facebook帳戶將打卡紀錄整理成遊記形式匯出並發佈至Facebook網誌（圖4），使此平台更具互動性與典藏價值。
圖3 時間軸展示互動
圖4 匯入至Facebook後即發佈成為電子旅遊日記
五、結論
數位趨勢機構Ad Age(2011)公布了2012十大數位媒體的發展趨勢報導，其中即期懷舊狂(Short-term nostalgic
obsessions)和地理資訊服務新探索(Location-based discovery)表達了最近時興的打卡服務將去到哪裡、吃過什麼、曾經作了什麼事，隨時記錄、保存地方不斷轉換的容顏，在數位典藏的觀點，以時空概念建置的新功能，都可能是令使用者感興趣的工具與服務。
Facebook自2008年推出繁體中文版網頁後，在國內至今已突破1,000萬人使用，根據創市際（2011）的調查亦顯示，Facebook的使用率占所有社群網站的71.6%，使用程度高之因除了網路小遊戲外，2011年2月推出的Place地標打卡服務也吸引了許多行動上網用戶使用。伴隨著智慧型手機、平板電腦的普及，過去旅遊達人利用高曝光度的個人部落格分享自己旅行的經驗，如今人手一支智慧型手機，透過打卡服務，就可以即時以微型網誌形式分享旅遊經驗，這種旅人們新的體驗模式正逐漸風靡。
因此，本研究結合ArcGIS JavaScript API和Facebook Graph API等開放平台網路服務，根據Facebook使用者打卡記錄，利用Mashup技術設計互動式電子遊記平台，此平台除了將打卡資訊地圖化外，亦可互動式地以時間軸模式觀看旅程記錄以及與社群朋友進行交流；此外，此平台還可以將遊記內容匯入並發佈至使用者的Facebook網誌。透過開放式Web API進行平台設計與開發，讓社群媒體在數位典藏加值應用上更趨多元化。
參考文獻
Ad Age (2011,
December 19). Ten Digital Trends Set to Go Mass-Market In 2012[DIGITALNEXT].
Retrieved from
http://adage.com/article/digitalnext/ten-digital-trends-set-mass-market-2012/231653/
Benslimane,
D., Dustdar, S., and Sheth, A. (2008). Services mashups: The new generation of
web applications. Internet Computing,
IEEE, 12(5), 13-15.
Bamford,
W., Coulton, P., Edwards R. (2007). Space-Time
Travel Blogging Using a Mobile Phone. In
Proceedings of the ACM conference on Advances in Computer Entertainment
Technology, ACM Press, New York, NY, 1-8.
ESRI
(2011). ArcGIS JavaScript API[ArcGIS Resource Center]. Retrieved from
http://help.arcgis.com/en/webapi/javascript/arcgis/index.html
Goldsborough,
R. (2003). 'Blogs': The Latest Opinion in Raising Your Voice Online. Consumers' Research Magazine, 86(6), 32.
Kaplan,
A. and Haenlein, M. (2011). The early bird catches the news: Nine things you
should know about micro-blogging, Business
Horizons, 54(2), 105-113.
何振誠、邱張名琪、陳威助（2009）。從網誌到微網誌：網路社會參與型態的演變介紹，資訊社會研究，17，1-51。
林克寰（2004年5月11日）。「你不能不知道的部落格」。取自http://jedi.org/blog/archives/003856.html
榮峻德、張志祥、孫志鴻、連敏芳、鍾崴仁（2011）。圖形化混搭GIS網路服務平台－以ArcGIS Server網路服務為例，2011台灣地理資訊學會年會暨學術研討會，國立臺灣大學，臺北。
楊懷恩、陳哲銘（2012）。應用行動定位服務設計電子旅遊護照平台，2012台灣地理資訊學會年會暨學術研討會，逢甲大學，臺中。
翟石豔（2009）。基於Web Service的城市地理數據共享與應用研究，河南大學地圖製圖學與地理資訊工程碩士論文。
黃智偉（2011）。塗鴉牆的秘密-Facebook Graph API實戰開發手冊，佳魁資訊，臺北市。
黃彥傑（2012）。Facebook API簡介【ITeye技術網站】。取自http://yogurt.iteye.com/blog/1472638
創市際場研究顧問股份有限公司（2011年8月29日）。2011.07創市際月刊報告書【 InsightXplorer創市際場研究顧問電子報】。取自http://news.ixresearch.com/?p=4299
[1] 財團法人台灣網路資訊中心2012年「台灣網路資訊中心網路使用調查」，網址：http://news.cnyes.com/Content/20120709/KFLI9KMRJRAMM.shtml
[2] http://www.flickr.com/
[3] http://developers.facebook.com/docs/reference/api/
[4] 或稱為開放式地理資訊系統協會(OGC)的網路地圖服務(WMS)概念標準
[5] 楊懷恩於2007年在其部落格分享的機車環島日記，網址：http://www.wretch.cc/blog/ayu1114/7881149
[6] 此為國立交通大學傳播與科技學系數位創意與行銷策略實驗室之研究計畫《讓單車客，不只是過客！》，並建置於地圖日記網站上讓遊客可至此已單車遊程軌跡分享遊記。網址：http://www.atlaspost.com/act/nctubike/
0 意見:
張貼留言