Partner Studio

[Node.js] 使用 Node.js 來達成電腦網頁與手機網頁即時互動

patw — Wed, 02 May 2012 16:09:43 +0000

這幾年 Node.js 在台灣許多網站都開始使用，我對這項技術一直頗有興趣，在想能怎麼使用這項技術去玩些有趣的互動。

曾照著網上熱心前輩所寫的文章試著寫寫看，也在去年九月參加了 HTML5與Node.js在台灣聯合技術小聚，但一時案子忙碌，實在沒有心力好好研究便停滯了。

最近公司上線的案子剛好能有這個機會讓我來玩玩，目的是讓使用者透過手機網頁來與電腦開啟的網頁做些即時互動。
用 App 寫要考量跨平台與門檻(還要去下載 App，應該會讓一些單純想玩玩 Event 的使用者卻步)的問題，因此便希望能都用 Web 上的技術來達成囉。

此篇便簡單紀錄一下 Node.js 在 FreeBSD 上的安裝，以及簡單製作一個手機與電腦即時互動的網頁。

自認觀念上還不是相當清楚便迫不及待分享了，若有誤之處還請前輩給予指導囉：）

一、安裝

我自家使用的伺服器環境是 FreeBSD，所以這邊就介紹在 FreeBSD 上安裝 Nodejs 的方法。
ports 裡面有喔！直接進去裝就可以了～真是方便！

root@patwbsd [/root] # cd /usr/ports/www/node/
root@patwbsd [/usr/ports/www/node] # make install clean

如果順利的話應該就可以安裝完畢，但有時候會遇到找不到相符版本的情況，那就這樣做吧：

# 看起來 work 裡面沒有最新版 v0.6.14 ... 好吧，自己去抓回來。
root@patwbsd [/usr/ports/www/node/work] # fetch http://nodejs.org/dist/v0.6.14/node-v0.6.14.tar.gz
node-v0.6.14.tar.gz		100% of	10MB 1838 kBps

# 解壓縮：
root@patwbsd [/usr/ports/www/node/work] # tar zxf node-v0.6.14.tar.gz

# 然後進去編譯：
root@patwbsd [/usr/ports/www/node/work] # cd node-v0.6.14
root@patwbsd [/usr/ports/www/node/work/node-v0.6.14] # ./configure
root@patwbsd [/usr/ports/www/node/work/node-v0.6.14] # gmake

# 再出來安裝：
root@patwbsd [/usr/ports/www/node/work] # cd ..
root@patwbsd [/usr/ports/www/node] # make install clean

經過一段時間的等待，終於安裝完了！

可以試一下能不能執行，印出 nodejs 的版本試試：
※小提醒：如果 FreeBSD 還沒認出 node，就 rehash 一下再執行。

root@patwbsd [/root ] # node -v
v0.6.14

安裝介紹至此終了。
接下來是第二單元，來實作囉！：Ｄ

二、實作：使用 Node.js 來達成電腦網頁與手機網頁即時互動

這邊會寫一個簡單的範例來展示怎麼用 Node.js 來達成電腦網頁與手機網頁即時互動。

首先，我們會用上 socket.io 跟 express 兩個套件，先裝好吧：

root@patwbsd [/home/ftp/patw/nodejs] # npm install socket.io
root@patwbsd [/home/ftp/patw/nodejs] # npm install express

裝完之後，應該可以在所在目錄底下看到 node_modules/ 目錄。

OK，準備完畢，開始寫吧。
我們可以將這隻 nodejs 程式命名為 server.js，先簡單寫些內容測試看看：

// 引入 express & socket.io
var app = require('express').createServer()
var io = require('socket.io').listen(app);

// 偵聽在 8081 port，隨你喜歡
app.listen(8081);
console.log('Server running');

// Routing，其實這首頁沒什麼用
app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

存檔，再準備一個預設的 index.html 用來看看 Server 是否有 Run 起來吧。(照慣例打個 Hello world! 好了：Ｄ)

Run run 看：

root@patwbsd [/home/ftp/patw/nodejs] # node server.js
   info  - socket.io started
Server running

順利的話應該可以看到執行後的兩行訊息，其中 Server running 是我們在程式中用 console.log 印出的。
然後連線到 http://你的ip:8081/ ，應該就可以看到剛剛我們所設定的 index.html 內容。

接著，我們要增加偵聽事件，讓 Nodejs Server 在接收到訊息後再發出動作，以達到互動的效果。
一樣是改 server.js 這支：

var app = require('express').createServer()
var io = require('socket.io').listen(app);

app.listen(8081);
console.log('Server running');

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

// 連線
io.sockets.on('connection', function (socket) {

	// 偵聽 send 事件
	socket.on('send', function (data) {

		// 然後我們依據 data.act 做不同的動作
		switch ( data.act )
		{
		    // 這個是使用者打開手機網頁後發生的事件
		    case "enter":
			io.sockets.emit('get_response', data);
			console.log("Sending getEnter");
			break;

		    // 這個是使用者在手機網頁中點擊按鈕，讓電腦網頁背景變色的事件
		    case "changebg":
			io.sockets.emit('get_response', data);
			console.log("Sending changeBg");
			break;
		}

	});

});

OK，存檔。一樣用 node server.js 讓它運行。

伺服器端的程式差不多了，再來是電腦網頁與手機網頁的撰寫囉。
要怎麼讓特定手機網頁能夠控制特定電腦網頁呢？思考方向是──設定一組專屬的 KEY，一對一，就可以知道只聽到某個 KEY 的手機網頁呼叫，電腦網頁才會動作。

為了讓手機使用者方便輸入，這邊將網址包含 KEY 變成一組 QRCode。 (使用 Google Charts)

流程大致是這樣：

使用者開啟電腦網頁→用手機掃描網頁上的 QRCode→手機打開了專屬 KEY 的網頁→電腦網頁透過 Nodejs 伺服器知道這個 KEY 被打開了→開始互動

電腦網頁的 code 如下：



	
		
		Nodejs - 電腦網頁

至於手機版網頁的 code 如下：(本例用 PHP 撰寫，目的是取得 querystring 的 key 值)

Nodejs - 手機網頁

打開手機網頁成功！快看看你的電腦螢幕吧！

最後放個成果的 DEMO 影片：

以上，與大家分享。
也希望有心得的朋友一起討論喔：Ｄ看能做出什麼更有趣的東西

iPhone/iPad 等行動裝置上的 audio 標籤無法自動播放 (autoplay) 與預載 (preload) 的問題

patw — Mon, 30 Apr 2012 07:32:53 +0000

即將上線的 Case 花了不少時間在調校手機網頁與電腦網頁互動的工作，是使用 Nodejs 來達成，但這篇講的主題跟 Nodejs 無關，而是在製作手機版網頁時用到 audio 標籤用以播放音效所遇到的問題。

情況描述：Case 中有個互動效果是當使用者開啟手機版網頁後，會進行互動並播放 GIF 動畫（噢，許多舊版本的 Android 裝置是無法播放 GIF 動畫的，這點也要提一下），動畫播放過程中會播放音效。

在 Android 的內建瀏覽器中可自動播放音效，但在 Android 的 Chrome Beta 與 iPhone/iPad 上的 Safari 卻無法正常播放，一點聲音也沒有。而且在桌上型電腦上都可正常地播放。

為什麼呢？

後來查到 Safari 官方的規範文件 Safari HTML5 Audio and Video Guide 中提到：

User Control of Downloads Over Cellular Networks

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

This plays the movie:

This does nothing on iOS:

這是為了防止使用者使用以量計費的行動網路時，自動播放或預載就會不知不覺地花去網路費用。

除非這個播放是使用者「主動」點擊觸發的，不然設什麼屬性都不會自動播放/預載。

能了解它們的立場，是立意良好啦，但在製作一些需要互動體驗的效果上就會受此限制了。跟此篇作者最後的看法一樣，為何不跳出選項（像要求存取 GPS 一樣）讓使用者自由選擇是否要預載/播放聲音呢？

在我的 Case 中，確實是在使用者「主動觸發」，不過是在觸發播放 GIF 動畫後「一段時間」( 我是用 setTimeout 或是 Nodejs 的偵聽來等待 ) 才會播放聲音，那一樣會被判定為「非使用者主動點擊」。

解法有點取巧，就是「先 play 再 pause，接著再 play 」。

Code 如下：

測試 audio 標籤於行動裝置瀏覽器能否播放

主要是 playsound() 這個 function 裡面的 code 啦。
測試過其實用 load() 方法來代替 play() & pause() 也可以，只是在按第二次 playsound 按鈕時會無法再播放一次。
這段 code 在 Android & iPhone (iOS 5.1) & iPad (iOS 4.3.3) 上測試過都可正常播放。

順帶一提，$(document).ready() 中的這段播放音樂 code，在桌上型電腦、Android 內建瀏覽器上都可以在網頁載入後自動播放的，也許是設計規範上的不同吧。

OK，這篇就這樣囉。
行動版網頁的製作上許多眉眉角角，除了聲音外還有很多需要注意的細節哩。

[JavaScript] 判斷手機為直向或橫向

patw — Mon, 23 Apr 2012 15:55:06 +0000

最近在製作手機版的 Event Site，發現許多眉眉角角的東西要不斷地調校。
iOS 也許還好，頂多就是 iPhone 跟 iPad 的差異。
但 Android 就麻煩多了，要顧及各種版本與螢幕大小。喔對了，還有不同瀏覽器的問題。

本例想利用 JavaScript 來判斷使用者的行動裝置正在使用直向或橫向瀏覽，
若非我們預設的瀏覽方向，需秀出警語或遮罩。

當然也可以選擇 CSS 的方式來製作，可以搜尋 "orientation css" 這樣的關鍵字，可以找到許多做法。
但有時候還是需要 JavaScript 的事件來控制一些流程。

以下是在

SAMSUNG I9100 (Android 4.0.3): 內建瀏覽器、海豚瀏覽器 8.0.0、Chrome Beta 0.18.4409.2396、Opera Mobile 12.00.ADR-1203051631
Sony XPERIA S: 內建瀏覽器
HTC ONE X: 內建瀏覽器
SonyEricsson Xperia Arc S: 內建瀏覽器
Apple iPhone 3GS 內建瀏覽器(Safari)
Apple iPhone 4S 內建瀏覽器(Safari)
Apple iPad2: 內建瀏覽器(Safari)

測試過 OK。

以下是 Code:

(請先引入 jQuery)

var checkOrientation = function(){

	    mode = Math.abs(window.orientation) == 90 ? 'landscape' : 'portrait';

	    // 在 Android 上使用 Opera Mobile 測試, 發現要另外這樣判斷
	    if ( $.browser.opera )
	    {
		    width = screen.width;
		    height = screen.height;
		    mode = width > height ? "landscape" : "portrait";
	    }

        // 本例為希望在使用者用橫向瀏覽時，就秀出遮罩或警示訊息
        if (mode == 'landscape')
        {
           // 警語遮罩 顯示
           $("#mask").show();
        } else {
           // 警語遮罩 關閉
           $("#mask").hide();
        }
};

window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);
setInterval(checkOrientation, 500);

參考資料：

http://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript

[Android] 好用的 Chrome 瀏覽器之開發人員工具 – USB 網頁偵錯功能

patw — Sat, 21 Apr 2012 12:59:18 +0000

最近在 Android 上終於推出繁體中文的 Chrome 測試版瀏覽器，除了不支援 Flash 外，其他部分個人認為都比內建或其他 Android 網頁瀏覽器來的好用。不過只支援 Android 4.0 。

其中更包含「開發人員工具」，讓開發手機版網頁的人可以方便地在電腦上用 Developer Tools 來針對手機上的網頁進行除錯。本篇文章就來簡單介紹一下使用方法。

測試環境：

手機：

SAMSUNG i9100 SII (Android 4.0.3)

Chrome Beta 0.18.4409.2396

電腦：

Windows 7 64bit

已安裝好 Android 驅動程式

首先，在手機上須設定開啟 USB 偵錯。位置在設定→開發人員工具裡面。

然後打開 Chrome Beta，進去設定→開發人員工具，將「啟用 USB 網頁偵錯功能」打開：

而電腦端需有 Android SDK，因為我們要使用其中的 adb.exe 。

還沒有的朋友可以在官方網站下載，解壓縮到特定目錄，本例為 F:\android-sdk\ 。

備好上述工具後，用 USB 線將 Android 手機與電腦連接，

然後打開「命令提示字元」(cmd.exe)，切換至 android-sdk 目錄，然後進到 platform-tools 子目錄，鍵入：

adb.exe devices

如果有正確抓到手機裝置的話，應該會列出像下面資訊：

List of devices attached
001ase655ac97e device

然後是重頭戲，設定 USB 網頁偵錯功能：

F:\android-sdk\platform-tools>adb.exe forward tcp:9222 localabstract:chrome_devtools_remote

然後打開瀏覽器，連到 http://localhost:9222 試試看吧！

可以看看介面，就如同 Chrome 電腦版的開發人員工具喔！

就不多介紹操作方法了，真的很方便！

例如我在 Elements 中選擇這個 div 元素：

這時手機 Chrome 瀏覽器中也會顯示這個區塊被選擇了：

當然也可以即時在電腦上進行修改 CSS 樣式、增加或刪除元素等等的操作，手機 Chrome 瀏覽器上也會立即呈現喔！

更少不了好用的 Console 工具，一樣可以用 console.log 偵錯，或是即時輸入 javascript 執行。

例如在電腦上試著輸入 alert 來輸出 "Hello World from PC" 印出對話框：

手機上也馬上就蹦出來了：

這邊還有個介紹影片，有興趣了解的可以看看：

http://www.youtube.com/watch?feature=player_embedded&v=s4zpL4VBbuU

利用 Android 的 Chrome 瀏覽器工具，往後進行手機網頁製作時就更方便囉！

在 IE9 / IE8 中 Flash 的區塊高度未 100% 顯示的問題

patw — Fri, 20 Apr 2012 15:05:37 +0000

在處理 Flash Event Site 時遇過一個問題，特此紀錄。
於 Chrome 時瀏覽 100% 寬高的 Flash Site 時都很正常，但到了 IE9 / IE8 中測試卻變成下圖這樣，僅有不到一半的區塊大小：

這是一頁 ASP.NET Webform 的頁面，裡面包了

標籤，就是這個 form 標籤在 IE9/8 中的高度解釋造成 Flash 區塊高度無法到達 100% 瀏覽器高度。
解決方法如下：

只要將 form 標籤加上 style="height:100%;" 就解決了。

參考來源：
IE 9 flash loads but only half seen, IE flash does not load – every other browser works great – stackOverflow

在 IE9 中 ExternalInterface.call 無法作用的解決方法

patw — Fri, 20 Apr 2012 12:41:41 +0000

由於要在網頁中呼叫 Flash 裡面用 ExternalInterface.addCallback 加入的事件，
除了 HTML 中Flash 物件加入時要設定 id & name，還有 allowScriptAccess params 使其允許、AS 中也要加入 flash.system.Security.allowDomain(sourceDomain) 外，
在不同瀏覽器上也會因為 js 抓取 flash 物件的方式不同而要個別判斷。

Calling a custom FLASH method from IE7 & IE8 – stackOverflow 提供了一個方法，可通用於 IE, Chrome, Firefox:

 function thisMovie(movieName) {
     return document[movieName] || window[movieName];
 }

然後如果要 call Flash 中的 function 的話可以這樣寫:

function callExtFunction(g){
	var flash = thisMovie('flash物件的id&name');
	if (flash) { flash.flashFunction名稱(g); }
}

就醬子。

Office 2010 的貼上選項只剩「只保留文字」的解法

patw — Sun, 15 Apr 2012 12:51:07 +0000

最近遇上在 Microsoft Office 2010 中，複製某些東西想要在文件內按右鍵貼上時，原本右鍵選單中的「貼上選項」卻只有一項「只保留文字」，原先應有三個選項：「保持來源格式設定」、「合併格式設定」與「只保留文字」。

情況如圖：

最後在 Microsoft Answers 中找到解法：

若瀏覽器有安裝 Skype Click to Call 外掛的話，會造成這樣的問題，因此只要至控制台的新增移除程式將之移除即可。

參考資料：

[Facebook][FQL] 取得使用者 Timeline 封面照片的方法

patw — Sat, 31 Mar 2012 09:51:04 +0000

有個需求是要取得使用者 Facebook Timeline 的封面照片(Cover Photo)，就是最上方那一塊啦。
當然，要先透過應用程式取得使用者的 user_photos 權限。

這次用 FQL 來達成目標。

撈到的似乎不一定是使用者目前使用的那張，而是最新的那張：

SELECT src_big FROM photo WHERE object_id IN (SELECT cover_object_id from album where aid IN (SELECT aid, name FROM album WHERE owner=me() AND name="Cover Photos"))

你也許可以發現這不是最大尺寸的那張，那麼列出全尺寸吧：

SELECT images FROM photo WHERE object_id IN (SELECT cover_object_id from album where aid IN (SELECT aid, name FROM album WHERE owner=me() AND name="Cover Photos"))

第一張就是了。

如果要取得所有的封面照片：

SELECT src_big from photo where aid IN (SELECT aid, name FROM album WHERE owner=me() AND name="Cover Photos")

可以在這裡測試：
http://developers.facebook.com/docs/reference/rest/fql.query/

[Facebook][ASP.NET] 使用 IE 瀏覽 Facebook 頁籤應用程式時遺失 Session 的解法 – 使用 P3P Header

patw — Thu, 08 Mar 2012 05:53:19 +0000

其實這個問題在用 PHP 撰寫 Facebook 頁籤應用程式時就遇過，最近在用 ASP.NET 時又遇上了。
測試時使用 Internet Explorer 瀏覽，過程中有使用到 Session，但在送出表單後到下一頁面時 Session 卻遺失了。

這是因為 IE 的隱私設定預設會阻擋 iframe 跨域網站的 Cookie，而 ASP.NET 的 Session 需使用 Cookie，因此導致 Session 失效。

解決方法有二，一是請使用者調整瀏覽器隱私設定，但實際案例中不大可能要求每個使用者一一調整。
因此第二條路是，需在程式端下 P3P Header 來告知瀏覽器我們的隱私規範。
※關於 P3P 的相關說明相當複雜，請自行上網 Google 囉。

ASP.NET 中可以建立一 Global.asax，加入以下內容：

protected void Application_BeginRequest(Object sender, EventArgs e)
{
    HttpContext.Current.Response.AddHeader("p3p", "CP=\"CAO PSA OUR\"");
}

參考資料：
使用P3P Header解決跨網域IFrame Session遺失問題 – 黑暗執行緒
 iframe Applications and P3P HTTP Headers – Facebook 開發者論壇
 如果您在 Internet Explorer 6 中使用 FRAMESET 將會遺失工作階段變數 – Microsoft 技術支援

[ASP.NET][C#] 取得 Youtube 影片觀看次數

patw — Thu, 01 Mar 2012 13:38:02 +0000

取得 Youtube 影片觀看次數。
參考資料：YouTube APIs and Tools – Reference Guide: Data API Protocol

        /// 
        /// 取得 Youtube 影片觀看次數
        /// 
        /// Youtube 影片碼
        /// 
        public static string GetYoutubeViewcount(string youtubecode)
        {
            string url = string.Format("http://gdata.youtube.com/feeds/api/videos/{0}?alt=json", youtubecode);
            System.Net.HttpWebRequest request = WebRequest.Create(url) as HttpWebRequest;

            try
            {
                using (HttpWebResponse response = request.GetResponse() as HttpWebResponse)
                {
                    StreamReader reader = new StreamReader(response.GetResponseStream());
                    string retVal = reader.ReadToEnd();

                    JObject googleSearch = JObject.Parse(retVal);
                    return googleSearch["entry"]["yt$statistics"]["viewCount"].ToString();
                }
            }
            catch
            {
                return "0";
            }
        }

使用方法範例：

Response.Write(GetYoutubeViewcount("RCsCw9Vz7Nc"));

順便提一下取得縮圖的方式：
http://www.reelseo.com/youtube-thumbnail-image/

可用下面網址取得：

http://img.youtube.com/vi/VIDEO_ID/#.jpg

# 可以為 0, 1, 2, 3

說明：

#	尺寸	第幾張縮圖
0	480×360	1
1	120×90	1
2	120×90	2
3	120×90	3