【O專欄】手機傾斜、搖一搖,新技術讓網頁能知道,不用透過特定 App

【O專欄】手機傾斜、搖一搖,新技術讓網頁能知道,不用透過特定 App

相信大家在玩智慧型手機時,都有接觸過一些需要用到手機本體來控制方向的遊戲。例如賽車遊戲,使用者直接把手機當方向盤使用,增加互動的樂趣。而現在瀏覽器也可以透過 <device>元素標籤,讓網頁抓取到使用者的裝置方向,與網友的裝置進行互動。

首先,我們來看一段 App 和行動裝置互動的影片:

▲Instapaper付費版示範影片,手機往後傾,畫面就向下捲。(http://vimeo.com/1540283

加速度計妙用多

一般來說,網頁方向的應用就是大家所熟知的橫向模式(landscape)和直向模式(portrait)。當你把手機打橫或是擺直,網頁內容也隨之以橫向或是直向方式呈現出來了。試想,如果你要讓手機辨認它在X、Y、Z三度空間裡的座標位置,要怎麼辦到呢?

【O專欄】手機傾斜、搖一搖,新技術讓網頁能知道,不用透過特定 App

▲想要判讀手機目前的方位,就得經由感測器裡輸入的X、Y、Z軸相關訊息來得知。

答案就是借助手機上的加速度計(accelerometer)等感測裝置。至於加速度計在現實生活中有什麼應用?先從使用它的應用程式來看看。無論在 Apple 的 App store 或 Android 的 Google Play,都有一些非常棒的相關程式,比方Instapaper付費版,可以傾斜手機讓頁面上下捲動,讓閱讀本身出現新的操作方式。還有AccuPedo – Pedometer、AccuPedo-TE之類的計步器小程式,都是利用加速度計所產生的應用。

位移角度辨方位

制定網頁技術標準的全球資訊網協會W3C,將裝置方向標準化,這表示連網頁上也可以輕鬆使用這些技術,而且能夠跨平台。瀏覽器廠商也都會支持這個功能,其中Opera、Chrome、Safari、Firefox在手機上也已經推出了支援orientation功能的瀏覽器。透過符合標準的瀏覽器,開發人員可以利用以下的JavaScript函式取得裝置的方位資訊:

window.addEventListener('deviceorientation',update,true)

其中x軸(前後移動)以beta數值代表,y軸(左右移動)角度大小以gamma數值代表,z軸(裝置面向的角度)以alpha數值為代表,由於可以得知手機傾斜的方位,所以也可以當指南針來用。

【O專欄】手機傾斜、搖一搖,新技術讓網頁能知道,不用透過特定 App

▲藉由讀取裝置方向,手機網頁也可以變指南針。

網頁直接看視訊

以往,倘若要抓到本機攝影鏡所拍攝的即時影像,必須運用Flash之類的外掛程式才行。現在瀏覽器也可以直接辦到,在W3C中瀏覽器廠商達成了共識,以JavaScript API取代了以往的外掛程式。

【O專欄】手機傾斜、搖一搖,新技術讓網頁能知道,不用透過特定 App

▲只要開網頁就能看到攝影機的畫面。

用瀏覽器抓取攝影機影像很簡單,只要使用getUserMedia這個API就可以了。

<script type="text/javascript">
 var video = document.getElementsByTagName('video')[0],
   heading = document.getElementsByTagName('h1')[0];

 if(navigator.getUserMedia) {
 navigator.getUserMedia('video', successCallback, errorCallback);
 function successCallback( stream ) {
 video.src = stream;
 }
 function errorCallback( error ) {
 heading.textContent =
    "An error occurred: [CODE " + error.code + "]";
 }
 } else {
 heading.textContent =
  "Native web camera streaming is not supported in this browser!";
 }
 </script>

試想,以後大家拿著手機就可以將影像透過網頁即時分享出來,你也不必安裝特定的視訊軟體,就可以隨時隨地在有網路的地方進行視訊會議,相當方便。目前Opera的手機版瀏覽器已經率先支援這項技術了。

未來應用更多元

有了各種可以和硬體裝置溝通的API,未來的網頁操作會更令人耳目一新,特別是編寫HTML5原生應用程式也有更多可能性。當然,新技術同時也會對舊的使用模式帶來衝擊。當網站可以擷取用戶裝置上的攝影鏡頭時,會產生個人隱私上的問題,W3C也正在積極解決。但可以預期的是,裝置方向和本機攝影鏡頭這兩項功能在不久的未來,將在網頁上有更多的運用。

延伸閱讀:

設計手機版網頁,不是等比例縮小就好

Wiki 加速規的介紹

HTML 5 裡有關的介紹

HTML5 網路的大未來,各家瀏覽器的實際應用與未來發展

作者簡介:謝子斌 /Zi Bin, Cheah

【O專欄】手機傾斜、搖一搖,新技術讓網頁能知道,不用透過特定 App馬來西亞華人,網路標準專家。長期從事網際網路標準研究,經常來往於中國、印尼、馬來西亞、北歐等地宣導。現於挪威Opera軟體公司奧斯陸總部擔任網路標準講師(Web Evangelist)。(Twitter個人網站

謝子斌(Zi-Bin)
作者

目前Opera挪威總部擔任Opera網路宣講師,在世界各地宣講網路標準技術,包括HTML5、CSS3等。此外也於W3C擔任HTML小組成員、HTML5中文小組主席。

使用 Facebook 留言
Brian Chen
1.  Brian Chen (發表於 2012年4月23日 01:27)
原來,Instapaper 的付費版 App,有可以傾斜手機讓頁面上下捲動的功能啊,太方便了!
74a85d777b5cec936b56f57b6cfb9a5d?size=48&default=wavatar
2.  Julia Yu (發表於 2012年4月27日 11:50)
很好誒!有的時候往下滑網頁真的很麻煩
發表回應
謹慎發言,尊重彼此。按此展開留言規則