JavaScript

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

五月 3rd

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

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

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

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

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

More >

FreeBSD, node.js, Nodejs, socket.io, 即時互動, 手機版網頁

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

四月 30th

Posted by patw in JavaScript

No comments

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

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

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

為什麼呢？

More >

Android, audio, autoplay, HTML5, iOS, iPad, iPhone, preload, 自動播放, 預載

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

四月 23rd

Posted by patw in JavaScript

No comments

最近在製作手機版的 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:
More >

javascript, landscape, orientation, portrait, 手機版網頁, 橫向, 直向

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

四月 20th

Posted by patw in Action Script 3

No comments

由於要在網頁中呼叫 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); }
}

就醬子。

ExternalInterface.call, Flash, IE9, javascript

[Facebook][jQuery] 讓「讚」顯示完整的數字

三月 1st

Posted by patw in Facebook

No comments

我們在網頁中嵌入 Facebook 的「讚」按鈕，當被讚超過一定數量，就不會顯示明確的數字，如下圖：

但這個案子希望能顯示完整的數字，要怎麼解決呢？

對了，順帶一提，「讚」的數字包含「讚」以及「分享」次數。（ The count on the Like button will include all likes and shares — from Faceook Developer, Like Button）

思路是這樣，將原有的數字藏起來，然後加入我們用 Graph API 查詢出來的明確數字，噢對，你還得準備數字對話泡泡的圖檔。

註：不知道這樣的解法是否有違反 Facebook 使用規範品牌引用許可資源中心 – 使用方針 – Facebook 讚按鈕中的「你可以依照所需調整大小，但是不能以其他任何形式修改「讚」按鈕（如變動設計樣式）」。

More >

Facebook, like, 按讚

[Flash][JavaScript] 蓋在 Flash 上面的 DIV 與中文輸入的問題

三月 1st

Posted by patw in Flash

No comments

好久沒發文了，最近公司的案子都好多又好趕。
這陣子除了在規劃案子、趕案子外，另一方面在自學 ASP.NET MVC 3 並應用在案子上，有什麼心得會再發文的。

扯遠了，來記錄一下最近案子遇到要將 Facebook 粉絲專頁按讚的按鈕蓋在 Flash 內容上面的問題與解法。

相信很多人都遇過這個問題，我們會將 DIV 設 z-index，然後在 Chrome 中 DIV 會正常地蓋在 Flash 上面，但到 IE8 上面就被蓋住了。
改 wmode="transparent" 是常見的解法，但在舊版（如 13.0.782）的 Chrome 中便無法切換輸入法為中文（註：測試在 Chrome 版本 17 中無此問題）。
最後我是寫一段 JavaScript 來判斷，瀏覽器是 IE 就多帶 wmode 為 transparent，反之就不帶。

以下是實際的 code。
More >

div, Flash, 中文輸入