基於 QR Code 的行動導覽系統設計 - 以臺北孔廟為例 The Design of a QR Code-based Mobile Navigation System-Take Taipei Confucius Temple as an Example 1. 盧東華 dhlu888@gmail.com 1,2 曾莛鈞 tseng1057@gmail.com 臺北市立大學資訊科學系 2. 臺北市立大龍國民小學 1 摘 本論文試著設計一套 QR Code 系統 - 以台北孔廟為例, 並且在 Android 系統平台上, 針對旅遊 ( 導覽 ) 類的 App 進行設計 開發 實作 為了將現行的導覽方式加以改進, 本研究試著將現階段的 QR Code(Quick Response Code) 及行動介面設計進行結合, 並探討和定義出適切與主要的功能 這套系統以 QR Code 技術, 結合六藝體驗的方式, 給使用者帶來樂趣及獲得遊覽訊息, 加上後端伺服器的支援, 讓參訪者可即時互動, 進而增加愉悅感, 提升行動導覽效果, 讓參訪者更了解古蹟寺廟的內涵 以易用性原則為基礎, 使用者可透過 App Store 將導覽系統下載並隨身攜帶, 不再局限於固定的機器上, 讓參訪者可以加深對於台北孔廟的印象跟了解, 讓文化得以傳承 關鍵詞 :Android QR-Code 行動導覽 App Store 要 Abstract This paper tried to design a QR Code-based mobile navigation system on the Android platform for Taipei Confucius Temple. After analyzing existed tour guide systems and function of QR Code, we obtained some essential functions of our App. With the information provided by back-end server and friendly user interface of our App, users can use this tool to experience the beauty of the Six Arts, and obtain more information about the historic connotation of the temple. As a result, tourists can deepen the impression of the Taipei Confucius Temple, and the culture can be inherited more easily. 1. 前言 隨著行動載具 (mobile devices) 越來越普及, 以及 CPU 的技術演進 硬體輕量化 無線通訊技術的進步, 造就了行動載具所扮演的角色就類似一台行動的輕量型電腦, 運用觸控式螢幕, 及不斷推陳出新的系統作業平台, 更讓 App Store 引領風騷, 各大廠也相繼推出, 以維持競爭力 導覽的操作工具也由過去的 PDA 漸漸被智慧 型手機或平板電腦取代, 導覽與 App 的結合, 讓遊客體驗導覽活動, 只需要透過網路下載, 無須任何的費用, 就可以得到專業級的導覽服務, 本研究認為結合 App 行動導覽較傳統導覽節省許多成本, 由於 App 導覽具有無時空 低成本 易存取的特性, 對於使用者沒有時間 地點 行動裝置的限制, 就可以使用行動導覽, 只要持有行動載具及對映的 QR Code 條碼, 就可以立即取得豐富的資訊內容, 而且依自己有興趣的展品得到個人化解說的效果,QR Code 的優勢是未來行動導覽解說的趨勢, 運用 QR Code 條碼, 立即顯示景點豐富的解說內容, 建構更佳的行動導覽體驗 本研究作者上班鄰近台北孔廟, 臺北市近年來透過文化觀光據點的改造 創新以及整體行銷的規劃, 展現孔廟歷史城區獨特的儒家文化, 將其打造成為儒學重鎮及國際觀光亮點, 藉此帶動地方再生與地區整體性的發展 [1], 台北孔廟運用活潑 多元的多媒體設施及高科技設備, 打造孔子學堂巡禮 體驗六藝 ( 禮 樂 射 御 書 數 ) 內涵之空間, 現行導覽方式有 DM 紙本導覽, 人員預約導覽, 網頁多媒體導覽, 在民國 100 年度 1 至 11 月遊客共計 33 萬 780 人次參訪, 其中本國遊客共 13 萬 6,332 人次, 外籍遊客 ( 含大陸 ) 共 13 萬 4,418 人次, 平均每日 970 人次造訪孔廟 [2], 本研究便是以台北孔廟為例, 利用 Android 系統平台及 QR Code 來設計及實作戶外行動導覽系統 2. 文獻回顧與探討 2.1 行動導覽 所謂行動導覽就是利用行動載具 ( 如行動電話 掌上電腦 平板電腦等 ), 透過無線傳輸工具 ( 如無線基地臺 紅外線傳輸 藍芽 射頻辨識系統 Radio Frequency Identification, RFID 近場通訊 (Near Field Communication, NFC) 全球定位系統 (Global Positioning System) 等, 讓參訪者對欲參訪的對象進行訊息擷取或觸接的動作 [3], 由於展覽單位或使用者有不同的需求, 所以在使用的載具上, 無線連結的機制上, 行動載具導覽內容與形式上皆有不同, 可以取代傳統沉重的書面資料與導覽
手冊, 無線技術不斷進步的今天, 更提供了絕佳的行動導覽環境, 若能搭配合合適的訊息擷取技術, 當能建立良好的行動導覽系統, 而常看到的三種識別技術為 NFC (Near Field Communication) 又稱近距離無線通訊 [4] RFID (Radio Frequency Identification) 又稱無線射頻識別系統 [5] QR Code(Quick Response code)[6], 為了讓我們行動導覽系統 App 可以更貼近參訪者, 本研究也探討近年來利用這些識別技術的國內外 pp, 使的導覽系統可以更加完善 本研究所開發的行動導覽系統, 係以平板電腦及上網手機為載具, 這兩者載具支援 RFID 及 NFC 技術較少, 若要外掛讀取設備, 需要有額外的一筆花費, 建置成本較高, 所以本系統不予採用 ;QR Code 有製作成本低廉, 可讓任何行動載具, 只要有上網功能, 不須外加任何設備, 皆可使用, 所以本行動導覽系統採用 QR Code 二維條碼的技術來識別及實作, 並且分析行動導覽系統所運用的軟硬體 ; 透過行動載具的分析以及辨識技術的比較, 了解行動導覽在 APP 的現況, 釐清現況與問題, 並且審視本研究的設計, 減少導覽系統設計盲點及失敗率, 而在開發行動導覽系統 APP 時, 能對於服務提供方式 介面設計準則 數位媒材等方面加以整合 2.2 Android Android[7] 系統採用了分層架構, 從高層到較低的應用層 (Application), 應用程式框架層 (Application Framework), 函式庫 (Libraries) 和 Linux 內核層 (Linux Kernel),Android 可以拆解功能不同的應用程式, 其中每個組件都能單獨操作, 這種設計的好處是, 當每一個組件單獨工作, 能減少應用程式的記憶體需求, 而 Android 使用 Activity 生命週期 (Lifecycle) 的機制來管理資源的分配, 當記憶體不足, 系統會依照優先等級進行回收, 在開發應用程式時, 能考量資源使用狀況, 對系統的穩定與執行的效能是相當有幫助的 本研究行動導覽系統選擇 Android 作業系統為系統平台, 主要為開放原始碼的開發平台以及相關技術文件的提供, 再加上應用程式生命週期的自動化管理且可相容於各種型號的 Android 系統, 免去為各種不同機型開發的困擾, 而 Android SDK 內包含著許多工具與 API, 並使用 Java 作後端程式處理運算以及前端圖形介面的 XML 程式設計, 使程式開發者能快速上手與容易操作 UI 的設計更是與本研究所開發的導覽系統息息相關, 好的 UI 設計可以讓使用者更容易上手, 本系統利用 Fragment 類別來設計 UI 介面, 讓本研究所開發的行動導覽系統, 可以在平板電腦和智慧手機均可兼顧, 而實務設計方面, 可以用開源軟體 eclpise 搭配 Android Development Tools (ADT) 進行 Android 的程式開發 2.3 QR code QR Code 是一種矩陣碼, 或二維空間的條碼, 1994 年由日本 Denso-Wave 公司發明 QR 是英文 Quick Response 的縮寫, 即快速反應的意思, 源自發明者希望 QR Code 可讓其內容快速被解碼 [6] 關於 QR Code 有一些的重要特性如 : 規格開放且有定位功能 文字條碼化且能快速反應 可容錯抗汙且資料量大 製作容易且成本低廉, 這些 QR Code 特性, 非常適合用在本研究欲開發的行動導覽系統中, 其中本研究使用開放原始碼的 google code ZXing [8] 來開發 QR Code 功能, ZXing 用於解析多種格式的 1D/2D 條碼, 是開放原始碼的函式庫, 其支援的格式如下 :UPC-A and UPC-E EAN-8 and EAN-13 Code 39 Code 93 Code 128 ITF Codabar RSS-14 (all variants) RSS Expanded (most variants) QR Code Data Matrix Aztec PDF 417, 並支援各種平台, 本研究利用此函示庫來處理 QR Code 解碼及編碼的部分, 並將之整合到本行動導覽系統中 3. 系統架構 本研究所開發的行動導覽系統功能在首頁包含資料更新下載 最新消息 還有行動導覽系統如何使用, 最後可以透過設定知道版本 更改語系 ( 本研究以繁體中文優先考量 ) 關於我們可以介紹官方網站及在 Google Play 給評分星等 六藝體驗中設計一系列與 QR Code 及影音相關的導覽, 孔廟之美介紹孔廟的建築藝術, 除了一般的文字及圖片導覽之外, 更加入了影音導覽, 而認識孔子也利用了文字 圖片 影音來導覽, 讓參觀者可以更深刻的認識儒學, 這三個功能是整個導覽系統的核心, 都可以利用 QR Code 的條碼連結到所需的導覽介面上 周遊列國介紹了附近的景點及小吃及周邊的地圖, 讓參觀者可以到處去走走, 交通資訊讓參觀者可以利用巴士 捷運 汽車路線 停車等資訊很快到達孔廟,QR Code 掃瞄會開啟相機鏡頭, 瞄準 QR Code 條碼, 辨識不同的 QR Code, 開啟語音導覽或是孔廟之美及認識孔子導覽的詳細頁面, 圖 1 為本行動導覽系統的系統功能圖
4. 系統設計與實作 圖 3 連線系統架構圖 開發 app 時必須考慮軟硬體支援性, 探討系統的背後要運用何種設備與技術, 一旦考慮要資料更新 影音分享等功能, 就要考慮要把這些資料數據存在什麼地方, 用什麼技術, 透過何種機制才能傳送到使用者的手上,QR Code 要如何與導覽結合, 導覽介面設計, 如何在 Android 平台下平板與手機共存, 本研究依系統功能及架構開發出四個系統 4.1 App 使用者介面 圖 1 系統功能圖 本研究也設計了離線功能如圖 2, 一般的文字 圖片導覽, 在下載 App 時就已經包含, 透過 QR Code 就可以導覽 隨著 Android 3.0 與 Android 4.0 的推出, 尤其是 Android 4.0 下平板與手機共存的狀態, Google 開始強烈推薦開發者在設計 App 時能多使用 Fragment,Fragment 的設計是為了讓大尺寸的螢幕有更動態更有彈性的 UI 設計 本研究所開發的導覽系統也是以 Fragment 為基礎, 開發出能適合平板與手機的 UI 介面, 如圖 4 為系統的起始畫面 圖 2 離線系統架構圖 當連線時一些較大的導覽資料才需下載下來或利用線上瀏覽導覽資料, 本研究設計的 QR Code 六藝體驗, 也要透過 3G 或 WiFi 才能使用, 其架構如圖 3 所示 圖 4 系統 UI 畫面資料來源 : 研究者擷取
4.2 導覽系統 孔廟之美及認識孔子兩個功能頁面是行動導覽系統中重要的核心之一, 在孔廟之美功能頁面中可以選擇黌門 禮門 萬仞宮牆及泮池 櫺星門 儀門 西廡及東廡 大成殿 崇聖祠 明倫堂 義路 泮宮, 在認識孔子功能頁面中可以選擇好學青年 杏壇講學 仕宦於魯 周遊列國 傳學後世, 這些都可以利用文字 圖片及影音來介紹孔廟及孔子如圖 5 為導覽功能流程圖 圖 6 樂之導覽流程 射 : 收集參觀者導覽過的 QR Code 如果已掃描過這個 QR Code 會出現提示訊息, 告知使用者已掃過, 若使用者掃瞄到非孔廟中的 QR Code, 也會出現提示訊息說明掃瞄到的圖案不在孔廟範圍之內, 掃描過的 QR Code 會收集在一個戰利品頁面, 讓參觀者可以查詢, 如圖 7 射之導覽流程 圖 5 導覽功能流程圖 4.3 QR Code 六藝體驗系統 本研究以 QR Code 技術結合六藝 ( 禮 樂 射 御 書 數 ), 體驗不同的導覽方式 首先要引用 QR Code 函數庫到 Android 平台上, 有很多免費 QR Code 函數庫可以用, 其中比較有名的是 ZXing, 可直接載入到 Android 機器上,ZXing 提供強大的功能, 在掃描時自動對焦, 中間有一條紅線, 方便使用者對準, 而且掃描速度極快, 一開啟掃瞄器, 一旦正確掃描到 QR Code, 會立即解碼, 並且遵照條碼標準, 解碼後可以開啟網站 地圖 撥打電話 發送 e-mail, 利用這個 ZXing 所提供的函數庫來設計六藝體驗 禮 : 每年九月 28 日教師節的祭孔大典, 利用 QR Code 可以看到祭孔大典的影片如圖 5 禮之導覽流程圖 圖 5 禮之導覽流程圖 樂 : 讓參觀者先聽樂器的聲音, 再去找相關樂器的 QR Code, 看看是否正確, 正確就可以看到相關的樂器導覽, 錯誤就重找如圖 6 樂之導覽流程 圖 7 射之導覽流程 御 : 透過 GPS 技術, 呈現在功能頁面上, 在 Google 地圖上加標記 (markers) 繪製線條與多邊形 (polygons), 以及改變地圖呈現方式 書 : 利用漢字古今字資料庫 [], 來達到此功能, 此資料庫是由行政院國家科學委員會經費補助, 收錄的字形涵蓋甲骨文 金文 戰國文字 小篆及楷書, 總數超過十八萬字 數 : 參觀者輸入自己的身高, 透過資料庫, 可以查詢與自己身高相符的古人 4.4 後端伺服器系統 後端網路伺服器的軟體環境, 本研究則是藉由 Java 程式語言來進行一系列的運算分析 資料儲存, 及 Web 網頁服務建置, 在網頁應用伺服器上, Apache 為眾多伺服器的首選,Apache 的特點是簡單 速度快 性能穩定, 而對於 JSP 的服務來說當然是以 Tomcat 為主要的選擇,Tomcat 為一個 Servlet 容器, 在目前的主流上若要使用 JSP 開發 Web 網頁程式的話, Apache 和 Tomcat 當然是最佳選擇, 最後資料庫是利用 MySql,MySql 是一個快速穩定多執行緒多使用者的資料庫, 整合這些 Service 成為本研究的後端伺服器 前端導覽系統有幾項功能會須要用到後端的
伺服器, 如最新消息 資料下載 六藝體驗, 圖 8 為前端功能頁面與後端伺服器流程圖 圖 8 前端功能頁面與後端伺服器流程圖 4.5 實作結果登入系統後可以看到本行動導覽的系統介面如圖 9, 下面有其六個功能選單分別為孔廟之美 認識孔子 周遊列國 交通資訊 六藝體驗 其他訊息, 進入認識孔子選單的頁面, 中間也有條列式選單進入導覽畫面 圖 10 是交通資訊的選單畫面, 圖 11 為六藝體驗 QR Code 畫面 5. 結論與展望 圖 11 為六藝體驗 QR code 畫面資料來源 : 研究者擷取 本研究是以 Android 為平台, 利用 QR Code 技術與導覽做結合的行動導覽系統, 透過台北孔廟一系列的導覽活動, 加上 QR Code 技術的特性, 讓導覽活動與參訪者有更多的互動, 使導覽可以更多元化, 也更貼近參訪者, 本系統也達到以下的目的 : 本行動導覽系統 App UI 介面, 可以適合任何大小尺寸的行動載具, 並以 QR Code 技術為主, 發展禮 樂 射 御 書 數的六藝體驗活動, 縮短人與古蹟及歷史建築的距離, 並以易用性原則為基礎, 將開發的行動導覽 App 發佈在 Google Play 上, 讓參訪者可以自由下載, 能適時 適地的提供豐富的導覽資訊 本行動導覽系統也期望未來可以加入手機及平板中更多元的元素, 如陀螺儀等功能, 並可利用本系統加以實驗, 分析本行動導覽系統是否優於現有的書面導覽方式 參考文獻 圖 9 本行動導覽系統介面資料來源 : 研究者擷取 圖 10 交通資訊的選單畫面資料來源 : 研究者擷取 [1] 台北市孔廟儒學文化網 http://www.ct.taipei.gov.tw/zh-tw/home.htm,2011. [2] 台北市政府 http://www.taipei.gov.tw/ct.asp?xitem=25819201&ct Node=52693&mp=100093,2011 [3] 宋曜廷 張國恩 于文正 (2006) 行動載具在博物館學習的應用 : 促進 人 機 境 互動的設計 博物館學季刊,20:1,p17-34 [4] wiki Near field communication http://en.wikipedia.org/wiki/near_field_communicati on,2013 [5] wiki Radio-frequency identification http://en.wikipedia.org/wiki/radio-frequency_identifi cation,2013 [6]wiki Quick Response Code http://en.wikipedia.org/wiki/qr_code,2013 [7] android developers http://developer.android.com/index.html,2013 [8] zxing http://code.google.com/p/zxing/,2013