Partner Studio
patw 的筆記、生活、隨筆
[Node.js] 使用 Node.js 來達成電腦網頁與手機網頁即時互動
五月 3rd
這幾年 Node.js 在台灣許多網站都開始使用，我對這項技術一直頗有興趣，在想能怎麼使用這項技術去玩些有趣的互動。
曾照著網上熱心前輩所寫的文章試著寫寫看，也在去年九月參加了 HTML5與Node.js在台灣聯合技術小聚，但一時案子忙碌，實在沒有心力好好研究便停滯了。
最近公司上線的案子剛好能有這個機會讓我來玩玩，目的是讓使用者透過手機網頁來與電腦開啟的網頁做些即時互動。
用 App 寫要考量跨平台與門檻(還要去下載 App，應該會讓一些單純想玩玩 Event 的使用者卻步)的問題，因此便希望能都用 Web 上的技術來達成囉。
此篇便簡單紀錄一下 Node.js 在 FreeBSD 上的安裝，以及簡單製作一個手機與電腦即時互動的網頁。
自認觀念上還不是相當清楚便迫不及待分享了，若有誤之處還請前輩給予指導囉 ：）
iPhone/iPad 等行動裝置上的 audio 標籤無法自動播放 (autoplay) 與預載 (preload) 的問題
四月 30th
即將上線的 Case 花了不少時間在調校手機網頁與電腦網頁互動的工作，是使用 Nodejs 來達成，但這篇講的主題跟 Nodejs 無關，而是在製作手機版網頁時用到 audio 標籤用以播放音效所遇到的問題。
情況描述：Case 中有個互動效果是當使用者開啟手機版網頁後，會進行互動並播放 GIF 動畫（噢，許多舊版本的 Android 裝置是無法播放 GIF 動畫的，這點也要提一下），動畫播放過程中會播放音效。
在 Android 的內建瀏覽器中可自動播放音效，但在 Android 的 Chrome Beta 與 iPhone/iPad 上的 Safari 卻無法正常播放，一點聲音也沒有。而且在桌上型電腦上都可正常地播放。
為什麼呢？
[JavaScript] 判斷手機為直向或橫向
四月 23rd
最近在製作手機版的 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 >
[Android] 好用的 Chrome 瀏覽器之開發人員工具 – USB 網頁偵錯功能
四月 21st
最近在 Android 上終於推出繁體中文的 Chrome 測試版瀏覽器，除了不支援 Flash 外，其他部分個人認為都比內建或其他 Android 網頁瀏覽器來的好用。不過只支援 Android 4.0 。
其中更包含「開發人員工具」，讓開發手機版網頁的人可以方便地在電腦上用 Developer Tools 來針對手機上的網頁進行除錯。本篇文章就來簡單介紹一下使用方法。
在 IE9 / IE8 中 Flash 的區塊高度未 100% 顯示的問題
四月 20th
在處理 Flash Event Site 時遇過一個問題，特此紀錄。
於 Chrome 時瀏覽 100% 寬高的 Flash Site 時都很正常，但到了 IE9 / IE8 中測試卻變成下圖這樣，僅有不到一半的區塊大小：
這是一頁 ASP.NET Webform 的頁面，裡面包了 <form id="form1″ runat="server"> 標籤，就是這個 form 標籤在 IE9/8 中的高度解釋造成 Flash 區塊高度無法到達 100% 瀏覽器高度。
解決方法如下：
在 IE9 中 ExternalInterface.call 無法作用的解決方法
四月 20th
由於要在網頁中呼叫 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 的貼上選項只剩「只保留文字」的解法
四月 15th
最近遇上在 Microsoft Office 2010 中，複製某些東西想要在文件內按右鍵貼上時，原本右鍵選單中的「貼上選項」卻只有一項「只保留文字」，原先應有三個選項：「保持來源格式設定」、「合併格式設定」與「只保留文字」。
情況如圖：
[Facebook][FQL] 取得使用者 Timeline 封面照片的方法
三月 31st
有個需求是要取得使用者 Facebook Timeline 的封面照片(Cover Photo)，就是最上方那一塊啦。
當然，要先透過應用程式取得使用者的 user_photos 權限。
這次用 FQL 來達成目標。
[Facebook][ASP.NET] 使用 IE 瀏覽 Facebook 頁籤應用程式時遺失 Session 的解法 – 使用 P3P Header
三月 8th
其實這個問題在用 PHP 撰寫 Facebook 頁籤應用程式時就遇過，最近在用 ASP.NET 時又遇上了。
測試時使用 Internet Explorer 瀏覽，過程中有使用到 Session，但在送出表單後到下一頁面時 Session 卻遺失了。
這是因為 IE 的隱私設定預設會阻擋 iframe 跨域網站的 Cookie，而 ASP.NET 的 Session 需使用 Cookie，因此導致 Session 失效。
More >
[ASP.NET][C#] 取得 Youtube 影片觀看次數
三月 1st
取得 Youtube 影片觀看次數。
參考資料：YouTube APIs and Tools – Reference Guide: Data API Protocol
近期迴響