第四章 創作過程記錄
第二節、 手機互動頁面創作說明
國
立 政 治 大 學
‧
N a
tio na
l C h engchi U ni ve rs it y
手機互動與虛擬司儀之概念。對於「器樂劇場」形式的創作，創作者因先前曾執導 馬來西亞團體進行相關的排練與演出，因此在腳本撰寫上速度相較比較快。
因此對於整體想像到內容撰寫大致花費 6 個月的時間，撰寫完畢後即時和指導 老師討論可行性，當中也考量執行的簡易性而刪除了某些概念，直到大綱口試版本 為本計畫的最終版本。
本計畫實際開始執行為 2014 年 9 月份，亦為口試結束後，積極的與國立政治 大學華夏國樂社進行討論，該社對於新概念形式抱有著滿滿的想像空間，也願意透 過期末公演的方式與創作者進行合作，設定約 3 個月的團練時間，利用社課的時間 練習本計畫中的曲子。
第二節、 手機互動頁面創作說明
在撰寫本次計畫書的口試本的同時，創作者已開始進行手機互動的草案設計，
如使用者互動介面該如何呈現、互動行為為何、曲子與互動如何進行等（如創作論 述說述）。對於選擇的開發工具，創作者希望整合大學和研究所所學的技術，利用 網頁程式設計語言的擴充性，去完成一項手機互動的開發。創作者觀察目前手機應 用程式（Mobile Application，本文簡稱 APP）市場趨勢發現，因開發語言的開放與 整合便利性，目前該市場處於過度氾濫的時代，製作 APP 的門檻因降低了許多，
只要擁有一般程式設計的能力即可開發 APP，導致目前 APP 市場上相似且重複性 質的 APP 漫山遍野。大部分使用者需要先行下載並重新學習使用客製化的 APP，
顯然並不符合 Bruce 在互動設計模式中提出的易學性（Bruce, 2014），因此創作者 希望能夠降低使用者的學習曲線，利用大眾常用且現有軟體程式既熟悉之介面：內 建瀏覽器（build-in browser），讓觀眾能夠在短時間內學習並完成互動行為。
‧ 國
立 政 治 大 學
‧
N a
tio na
l C h engchi U ni ve rs it y
本次手機互動利用網頁設計語言：JavaScript 為互動開發工具，創作者也思考 並充分的利用目前 Javascript 語言的擴充性，套用不一樣的開發庫（JavaScript Libraries17）去整合不一樣的功能；利用 Node.js18為後台 TCP 伺服器資料庫連接，
前台則為基本的超文本標記語言（HyperText Markup Language，簡稱 HTML）頁 面，讓使用者在看到此介面的時候能夠簡單明了的操作此介面。
圖 4-1 平板頁面螢幕顯示 圖片來源：本創作資料整理
前 台 的 部 分 ， 創 作 者 運 用 了 4 大 開 發 庫 資 源 ： （ 1 ） SoundJS 、 （ 2 ） Socket.IO、（3）Bootstrap、（4）jQuery。SoundJS19為一套簡單的網路音頻應用程 式介面（web audio API），它能夠讓網頁以預載（preload）的方式先行處理音頻訊
17 Javascript Libaries 又稱 Javascript 框架，亦指將 JavaScript 語言整合成一個套裝語言，利用更簡單 的寫作方式即能完成某些複雜的功能，語言的基礎結構仍未 JavaScript 本身。目前最有名的 JavaScript 開發庫即為 jQuery，官網中將 jQuery 解釋為：一套跨瀏覽器的 JavaScript 函式庫，目的 為簡化 HTML 與 JavaScript 之間的操作。
18 Node.js 是一個事件驅動 I/O 伺服端 JavaScript 環境，基於 Google 的 V8 引擎。目的是為了提供撰 寫可擴充網路程式，如 Web 服務。
19 SoundJS 開發資料庫頁面： http://www.createjs.com/#!/SoundJS
‧ 國
立 政 治 大 學
‧
N a
tio na
l C h engchi U ni ve rs it y
號，然後再透過點擊播放該音頻，非常符合本次的互動設計之需求。Socket.IO 為 本次互動創作的核心，Socket.IO 屬於 WebSocket20規範下，以 Node.js 引擎啟動 WebSocket 的網頁雙向溝通功能，讓觀眾能在不必重新載入頁面下即可與他人互 動。Bootstrap 的部分為一組用於製作網站及網路應用程式的模組，裡面包含有 HTML、層疊樣式表（Cascading Style Sheets，簡稱 CSS）21及 JavaScript 的框架，
提供字體排印、表單、按鈕、導航及其他各種元件，並提供了 JavaScript 擴充套 件。本次手機互動主要利用 Bootstrap 作為前台視覺呈現設計的架構，讓整體頁面 能夠在短時間內完成。jQuery 則為 JavaScript 的簡化核心，主要在於操控某些客製 化的判定與文件物件模型（Document Object Model，簡稱 DOM）頁面的控制。
圖 4-2 手機頁面螢幕顯示 圖片來源：本創作資料整理
20 WebSocket 是 HTML5 開始提供的一種在單個 TCP 連線上進行全雙工通訊的協定。WebSocket 通 訊協定於 2011 年被 IETF 定為標準 RFC 6455，WebSocketAPI 被 W3C 定為標準。
21層疊樣式表（CSS）為一種用來為結構化文件（如 HTML 文件或 XML 應用）添加樣式（字型、
間距和顏色等）的電腦語言，將程式語言轉換成呈現段讓使用者能夠擁有圖像化簡易的操作，由 W3C 定義和維護。
‧
Socket.IO 的 NPM 模組工具，省去了 WebSocket 語言的撰寫，利用前台與後台的相 互連接關係讓網頁能夠在短時間內產生雙向溝通，且也省去了撰寫過長的傳統 JavaScript 和 WebSocket 語言（詳細程式解說如附檔中附表 9-1）。藉由以上的開發工具與語言，創作者為本次音樂會設計了一個網頁，此網頁為
22 Apache HTTP Server（簡稱 Apache）是 Apache 軟體基金會的一個開放原始碼的網頁伺服器，可 以在大多數電腦作業系統中運行，由於其跨平台和安全性，被廣泛使用，是最流行的 Web 伺服器 端軟體之一。
23 內置模組管理工具，又稱 Node 包管理器，是一個 Node.js 的包管理器，運行在命令行下，用於管 理應用的依賴。
‧ 國
立 政 治 大 學
‧
N a
tio na
l C h engchi U ni ve rs it y
圖 4-3 手機互動示意圖 圖片來源：本創作資料整理
本次手機互動設備架設的方式需要一台電腦，此電腦需安裝 Node.js 環境為後 台，再透過藝文中心大禮堂的固定 IP 連接與分享器的連接，讓外部網路能夠順利 的連接進來，觀眾只需要透過手機掃描場內提供的 QR 碼24，利用瀏覽器連接藝文 中心的 IP 地址，即可連接到本台電腦，以手機操控音效，透過音響設備放出來。
24 QR 碼（全稱為快速響應矩陣碼；英語：Quick Response Code）是二維條碼的一種，於 1994 年由 日本 DENSO WAVE 公司發明。QR 來自英文 Quick Response 的縮寫，即快速反應，因為發明者希 望 QR 碼可以讓其內容快速被解碼
‧ 國
立 政 治 大 學
‧
N a
tio na
l C h engchi U ni ve rs it y
圖 4-4 手機互動執行示意圖 資料來源：本創作整理繪製