App Indexing (圖片取自 App Indexing – Google Developers)
上一篇 談到 Facebook 推出的 App Links 標準，為 Apps 之間的連結跳轉帶來解決方案，而 2015 的 Google I/O 大會推出的 Android M，其中一個亮點就是推出它們對於跨 Apps 跳轉的解決方案 — 也叫 App Links — 但它是透過 json 檔設定實現，這邊就不多做介紹了，有興趣可看 HOKO 的這篇介紹。
而這篇要介紹的是關於 Google 的 App Indexing ，在這個行動裝置當道的時代，App Indexing 的出現便是為了讓 Google Search 亦能搜尋到 App 中的內容，甚至點擊搜尋結果就直接讓使用者透過 Deep Link 連到 App 內的特定頁面。
還是有些抽象？那麼先來看看 Google Developers 釋出的這支影片，有趣地介紹了實際應用的情境。
在行動裝置時代，使用者更常停留在 App 中瀏覽資訊（像是 Facebook），而相對地在 Web 的停留時間就降低了。過去我們在 Web 上透過超連結搭起不同網站之間的橋，而在 App 與 App 之間又如何做到這件事呢？
當然，我們可以透過 URL Scheme 開啟應用程式，但我們並無法得知世上每個 App 的 URL Scheme，甚至是應用程式某個頁面 Deep Link 的 Scheme，而且萬一哪天增修了那又該如何？
我最近一部分的工作就在研究如何加強 App 於 Mobile Web 上的連結體驗，其實各大廠早提出了自己的構想及標準，例如 Google 提出的 App Indexing，以及 Facebook 提出的 App Links。
今天就 App Links 的部份做個簡單筆記與實作參考。App Indexing 等下次有空再寫文介紹囉。
製作案件上遇到的需求，若使用者有安裝 App 便開啟 App (透過 App URL scheme)，若無則導去下載 (Google Play/App Store)。
在 App 內這件事應該是可掌控的（在自己做的 App 中攔截特定網址做處理），但在網頁上要做到這件事就有點麻煩了。一般常見的作法是擺個 Smart Banner，不過只有 iOS Safari 原生就支援，其他的得靠 jQuery Smart Banner（前陣子我也貢獻了修正 Windows Phone 相關錯誤的 pull request :P） 這類的第三方 plugin。
但 Smart Banner 和案件的需求還是有些差異，得靠其他方法解決，在實作的過程中遇到一些小問題與相應的 workaround，特此記錄。
跟公司 QA 部門借了幾台機器，以及測試的瀏覽器分別是：
服用本文前請注意：也許瀏覽器版本更新後，本文的方法就失效了，所以請作為參考就好哦。
之前在案件中，使用下面這段程式碼作為 workaround：
setTimeout(function() {
window.location = scheme_link;
}, 25);
window.location = download_link;
註：其中 scheme_link 是 app 的 scheme，可以是單純開啟 App，或是直接進入 App 的某一個畫面。而 download_link 是下載 App 的 URL 連結，像是 Google Play 或是 App Store 的連結。
之前實測時，在裝置上大部分情況都能如預期的運作，但仍有特殊情況（如特定版本的 Chrome、Android Stock Browser）有點小問題。
而隨著瀏覽器版本更新，這次案件再實測似乎就會出現更詭異的情況了，例如同時打開 App 與 Google Play/App Store 的連結。
於是再度至 stackoverflow.com 尋找其他解決方案，找到 一個 2014 年 8 月左右被更新的解答。
我針對該解答再做些微調後的 workground 整理說明如下：
近期筆者執行了滿多行動版網頁（Mobile Web），同時也是 RWD 設計的專案。光測不同的瀏覽器（IE 8-11、Chrome、Firefox、Safari）就夠忙了，而行動平台上的各種尺寸、瀏覽器與其他變因更是耗費不少前端工程師的青春…XD
而有時候光用桌面瀏覽器模擬手機瀏覽器，並無法完全真實呈現在行動裝置的情況，所以在開發的過程中使用了許多工具來輔助，在開發期就力求盡量測到（並進而解決）不同裝置的「近似」真實的情況。
以下列出十項，個人覺得還不錯的行動網頁開發輔助工具：
這幾年 Node.js 在台灣許多網站都開始使用，我對這項技術一直頗有興趣，在想能怎麼使用這項技術去玩些有趣的互動。
曾照著網上熱心前輩所寫的文章試著寫寫看，也在去年九月參加了 HTML5與Node.js在台灣聯合技術小聚，但一時案子忙碌，實在沒有心力好好研究便停滯了。
最近公司上線的案子（1, 2）剛好能有這個機會讓我來玩玩，目的是讓使用者透過手機網頁來與電腦開啟的網頁做些即時互動。
用 App 寫要考量跨平台與門檻(還要去下載 App，應該會讓一些單純想玩玩 Event 的使用者卻步)的問題，因此便希望能都用 Web 上的技術來達成囉。
此篇便簡單紀錄一下 Node.js 在 FreeBSD 上的安裝，以及簡單製作一個手機與電腦即時互動的網頁。
自認觀念上還不是相當清楚便迫不及待分享了，若有誤之處還請前輩給予指導囉 ：）
即將上線的 Case 花了不少時間在調校手機網頁與電腦網頁互動的工作，是使用 Nodejs 來達成，但這篇講的主題跟 Nodejs 無關，而是在製作手機版網頁時用到 audio 標籤用以播放音效所遇到的問題。
情況描述：Case 中有個互動效果是當使用者開啟手機版網頁後，會進行互動並播放 GIF 動畫（噢，許多舊版本的 Android 裝置是無法播放 GIF 動畫的，這點也要提一下），動畫播放過程中會播放音效。
在 Android 的內建瀏覽器中可自動播放音效，但在 Android 的 Chrome Beta 與 iPhone/iPad 上的 Safari 卻無法正常播放，一點聲音也沒有。而且在桌上型電腦上都可正常地播放。
為什麼呢？
最近在製作手機版的 Event Site，發現許多眉眉角角的東西要不斷地調校。
iOS 也許還好，頂多就是 iPhone 跟 iPad 的差異。
但 Android 就麻煩多了，要顧及各種版本與螢幕大小。喔對了，還有不同瀏覽器的問題。
本例想利用 JavaScript 來判斷使用者的行動裝置正在使用直向或橫向瀏覽，
若非我們預設的瀏覽方向，需秀出警語或遮罩。
當然也可以選擇 CSS 的方式來製作，可以搜尋 “orientation css” 這樣的關鍵字，可以找到許多做法。
但有時候還是需要 JavaScript 的事件來控制一些流程。
以下是在
測試過 OK。
以下是 Code:
Continue reading
最近在 Android 上終於推出繁體中文的 Chrome 測試版瀏覽器，除了不支援 Flash 外，其他部分個人認為都比內建或其他 Android 網頁瀏覽器來的好用。不過只支援 Android 4.0 。
其中更包含「開發人員工具」，讓開發手機版網頁的人可以方便地在電腦上用 Developer Tools 來針對手機上的網頁進行除錯。本篇文章就來簡單介紹一下使用方法。
某個案子要用手機取得使用者所在經緯度的功能，使用 HTML5 可以很快地達成這個需求，但在較舊的 Android 版本瀏覽器上（例如 HTC Magic 的內建瀏覽器，自行刷機就另當別論了XD）會無法透過 HTML5 的 navigator.geolocation 取得定位。找過資料後，發現在這種情況需要透過 Gears 功能來達成（HTC Magic 的瀏覽器支援 Gears）。
下面就是整合這兩種方法的 Code：
最近的案件在製作手機版網頁時，其中有讓使用者輸入「手機」的欄位，這時想到若能善用 HTML5 文字框中 type 屬性，將之設為 tel，在智慧型手機上就能自動呼叫出電話數字鍵盤，那麼使用者輸入手機時會方便許多。
但由於是用 ASP.NET 3.5 製作，似乎在 4 之前的版本，文字框控制項尚不支援 HTML5 的眾多 type 屬性，若強制更改會造成編譯錯誤。
網上搜尋了一下解法，果真有相關的討論，其實做法就如同在文字框控制項加上 keydown 屬性一樣，在 code behind 那邊加上即可。
以本例來說，就會像這樣：
Continue reading