Vorlon.js: 同時測試多瀏覽器網頁呈現的好工具

VorlonJS 是由微軟的開發體驗推廣部門所開發的一個測試及偵錯網頁在不同瀏覽器狀況的工具,網頁開發人員可以使用這個工具在同一處同時測試及除錯網頁(過去您可以需要每個瀏覽器各自開啟開發工具,甚至平板或行動裝置的除錯工具不方便操作等),這套工具全以 JavaScript 寫成,除了具有跨平台(Windows, Linux 及 Mac OSX)執行的能力之外,可透過 npm 來安裝,而這套工具也完全開源在 GitHub 上。 如何使用 首先是安裝 VorlonJS,只要直接使用 npm 來安裝即可。(系統裡必須先安裝 Python 2.7) npm i -g vorlon 安裝完成後,直接執行 vorlon 指令就可以讓它執行起一個小的網頁伺服器跑 VorlonJS 的相關工具,而它預設會跑在 port 1337,如果要更換就設定 PORT 這個環境變數即可,像 Windows 下要使用 port 3000 的話就這樣執行: C:\> set PORT=3000 & vorlon 若順利執行起來,開啟瀏覽器到 http://localhost:1337/ (如果沒有更改 port 值的話)就可以開始使用 VorlonJS 的工具,會看到這樣的畫面: 同時,還要在你要除錯的網頁中加入一行 <script src="http://localhost:1337/vorlon.js"></script> 讓 VorlonJS 的工具可以與這網頁溝通,所以你可以把 VorlonJS 工具縮小,然後把網頁以不同的瀏覽器開啟,應該就會看到…


使用 Microsoft Azure 網站服務架設網站服務或網站應用程式(適用 ASP.NET, PHP, Python, Node.js, Java)

文章更新: 2014/10/13 Microsoft Azure 是微軟推出的雲端平台,它並不是單一功能的產品或平台,而是數十種用來建置雲端服務平台產品的集合。而 Microsoft Azure 網站服務是一個可以快速建置網站(靜態網站或網站應用程式)的平台服務(PaaS, Platform-as-a-Service),而且具有雲端平台的特性——用多少付多少,所以您不必事先估算需要的機器資源而進行採購,在網站運行的任何時間都可以動態調整資源,有需要時調高、沒需要時調低,更有效地花費服務的預算。此外,這個平台服務有著開放、跨平台的使命,不論原本是使用 ASP.NET、PHP、Python、Node.js 還是 Java 撰寫的網站都可以直接放在這個平台上運行,而且支援多種部署網站的方式,所以也不限制開發人員要用什麼平台(PC、Unix-like、Mac 等皆可)、開發工具來開發網站。以下是我在 Channel 9 上錄製的影片,用來簡介 Microsoft Azure 網站服務是什麼樣的平台: 這裡我將影片提到的部份分為幾個重點來逐一介紹: 做為網站的虛擬主機 部署網站 延展網站所需的資源 Staging/Production 的部署環境分離 背景程式的運作 網站的備份及還原 跨資料中心的流量管理 為網站提供 CDN 與企業網路混合連接 使用其它服務強化網站應用程式 開始瞭解 Microsoft Azure 帳號之前,可以先註冊一個免費試用的 Microsoft Azure 訂閱帳號,並且試試看網站服務來運作您的網站。 做為網站的虛擬主機 使用 Microsoft Azure 來架網站最大的好處就是不必自己管理伺服器,當然也不用安裝維護作業系統或是伺服器軟體,只要把網站程式寫好了部署上去立刻就開始服務了,對於網站開發人員來說相當方便快速。 當有了 Microsoft Azure 訂閱帳戶後,便可以直接在管理後台中建立多個網站服務,一個網站就建立一個 此外,也可以安裝 Azure 跨平台命令列工具,在 console mode 下面用…


跨行動裝置 App 開發: 使用 Visual Studio 2013 + Apache Cordova (PhoneGap)

在 TechEd North America 2014 研討會期間,Microsoft Open Technology 宣佈了 Visual Studio 與 Apache Cordova 合作的計劃,而 Apache Cordova 則是大家熟知的 PhoneGap 目前的專案名稱,與 Visual Studio 合作的意義便是 -- 在 Visual Studio 裡可以使用 JavaScript/HTML5 技術來開發橫跨 Windows Phone、iOS 及 Android 的 app。 跨平台開發與 Xamarin 的異同 2013 年 11 月時,微軟也宣佈了正式與 Xamarin 合作,在 Visual Studio 上可以使用 C# 作為程式語言來開發跨 Windows、Android 及 iOS 行動平台的 app,而與…


使用 WebVTT 作為 HTML5 影片播放時的字幕格式

最近在工作上常運用 Channel 9 以及 YouTube 作為線上影音平台,來播放製作的一些教學或是新知通報的影片。而這兩個平台都支援用 HTML5 的方式來播放影片,也就是直接使用 <video /> 標籤來嵌入影片。 播放教學影片時掛上字幕的效果 由於處理的是一些教學影片,影片內容會提及許多專有名詞,或是很關鍵的概念,所以我都會再製作字幕,而處理字幕的這個部份,如果是在電腦裡播放影片的情況,一般而言不外乎是: 字幕嵌在影片裡 字幕檔另外掛上 第 1 種方法很單純,字幕就是影片的一部份,所以只要能把影片播起來,字幕也會出現,只是這樣的方式,如果影片輸出後發現有一段字幕打錯了,那影片就要重新再輸出,又或者想要放上多語系的字幕,N 種語言就要輸出 N 部影片,實在相當而且耗費儲存空間(有些影片格式可以嵌入多個字幕軌,再由播放器選擇使用哪個字幕)。而第 2 種方法也很常見,同一部影片就可以配上不同的字幕檔案來播放,就算字幕錯了也只需要修改字幕檔的內容就可以了。 而在 web 技術上,使用 HTML5 的 <video /> 來播放影片,也可以使用另外掛上字幕檔的方式來顯示字幕,這個功能在目前桌上的主流瀏覽器都已經支援(參考 Can I Use),主要是支援 WebVTT 及 TTML 兩種字幕檔格式,我個人比較喜歡 WebVTT,主要是它格式簡單、可以用簡單的 HTML tag 作格式、與流行的 SubRip (.srt) 檔案類似、多數流覽器實作還有多個影音平台(包括 YouTube)支援,所以我現在製作影片的字幕,都是使用 WebVTT 的字幕檔案格式來完成。 WebVTT 字幕檔格式 WebVTT 檔(文字編碼使用 UTF-8,檔名為 *.vtt 檔,MIME…


[Windows市集應用程式] 解構「格線應用程式」(Grid App) 範本 – 使用JavaScript

說明 開啟Windows市集應用程式的開發工具之後,可以看到內建的應用程式範本有一個「格線應用程式」(英文版是 Grid App) 的專案範本,這個範本是一個最基本以 modern style 設計的app範本,不過範本預設會產生不少程式碼,本文將逐一解構這個範本的結構,讓使用此範本開發的開發人員能夠更快上手。 本文以 JavaScript 版本作介紹。C# 的版本請參考這裡。 索引 範本做了什麼 範本產生的檔案 如何開始客製化 程式的進入點 客製化資料 首頁 群組頁面 資料細節頁面 補完計劃 範本做了什麼 格線應用程式是一個三層式的頁面架構,它最適合用來顯示一系列具有分類 (同一分類的資料為同一群組) 的資料,像是按照不同口味分類的菜單、食譜,或是不同類型的商品,也可以是按照隊伍區分的少女團體等等這類型的資料。 這個 app 的第一頁就是按群組分類的資料顯示,如下圖所示: 首頁 – 資料按群組排列 這頁可以看到資料按照群組 (group) 的方式排列,每一個群組有一個群組名稱,如果以滑鼠點擊 (或是觸控) 群組名稱 (如圖中的 Group Title 1 >) 之後,App 便會進入到第二頁 – 該群組的頁面: 群組頁面 – 顯示群組資料 在群組頁面裡,可以看到最前面的區域是顯示群組的內容,接著後面再擺放該群組內的資料,比起首頁來說,每個資料顯示更多的訊息。而不論是從首頁,還是群組頁面中,點擊任何一個資料都會進入資料細節頁面: 資料細節頁面 – 顯示資料完整訊息 資料細節頁面當然就是最完整呈現該資料最完整的內容囉,而在這一頁按下返回的箭頭,就會回到首頁或是群組頁面,端看是從哪裡進入的。 而此格線範本還針對「貼齊畫面」(snapped…


快速瞭解 TypeScript 是什麼東西

今天微軟釋出了一個新東西--TypeScript,這個 project 主要的負責人是 Anders Hejlsberg (C#, TurboPascal 之父),它可以幫助 JavaScript developers 更容易撰寫及維護「application-scale」的應用程式,我很快地研究及把玩了一下,發現它與過去很多類似的專案有許多不同之處,而這些不同之處也讓 TypeScript 更具有實用性及競爭力。 從這裡可以看一段 Anders Hejlsberg 自己來介紹 TypeScript 的影片:(出處 可下載MP4/WMV) 完全基於 JavaScript 語法 由於 JavaScript 的語法 (嚴格來講是 ECMAScript 262 3/e 或 5/e) 在 typing (資料型別) 上沒有很完美的解決方案,而且又有一些眉眉角角跟幾個大家熟悉的程式語言(如:C/C++、Java、C# 等)習慣不同,所以要使用 JavaScript 開發大型的應用程式,必須要有很小心的規範以及開發人員必須很深入瞭解 JavaScript 的「good/ugly/awful parts」(參考:JavaScript: The Good Parts)。 所以一直以來都有各式各樣的 project 想要改善這個問題(參考這裡有人整理了一個列表),最常被大家提到的就像 GWT (Google Web Toolkit) 、Script# 或是 CoffeeScript,它們都希望減輕 JavaScript…


輕鬆開發「雲端化」的 App

在 app 的開發中,我們常會在網路上建立網頁應用程式或是網站 API 來將資料儲存在雲端,如此一來,使用 app 的人,除了重新安裝 app 也能存取得到原本儲存的資料之外,若是在不同裝置上使用同一個 app 也能夠存取相同的資料。而對開發人員而言,更能夠因為資料與 app 各自獨立,能更容易在其它的平台利用這些資料再做應用及服務。 這篇文章將會介紹如何運用 Windows Azure 所提供的 Mobile Service 來輕易地完成一個「雲端化」的記帳 app 開發。 建立 Windows Azure Mobile Service 服務 由於目前 Mobile Service 在 Windows Azure 上還是預覽服務,所以已經有 Windows Azure 訂閱帳戶的話,可以直接至預覽功能的頁面申請試用,稍待一段時間等待認證通過時便可以立即使用,如此便能夠開始建立 mobile service app。Windows Azure Mobile Service 目前先推出 Windows 8 的支援,未來也將會支援更多的應用程式平台 (如:Windows Phone、iOS 及 Android 等) 首先點下 Create new…


Metro Style App: 使用 WebAuthenticationBroker 做 Facebook 帳號驗證

因為 Facebook 的流行,現在很多開發人員都會運用 Facebook 帳號作為應用程式的身份驗證,在 WinRT 中有一個很好用的一組 API: WebAuthenticationBroker,它提供了一個架構,讓應用程式很容易就能完成 OAuth 的驗證機制。過去要在應用程式中完成 OAuth 驗證,總是會很麻煩地在應用程式或網頁瀏覽器之間切換 (因為網站登入及授權須在網頁中完成) ,容易造成使用者的混淆,這組 API 讓整個驗證的過程皆在應用程式的對話盒中完成,可以讓使用者留在應用程式中完成一切的動作。 在 Metro Style App 中使用 WebAuthenticationBroker 以 Facebook 為例 參考 Facebook 的開發文件,整個驗證的工作可以歸納成幾件事情: 註冊你的應用程式,取得一個應用程式的身份,得到一個「應用程式 ID」 視你應用程式的需要,組合成一個 URL,接著讓使用者透過這個 URL 來授權你的應用程式 (使用者須登入 facebook) 完成授權,取得 access_token 以便呼叫 facebook APIs。(當然要處理授權失敗的狀況) 這些動作要使用 WebAuthenticationBroker 來完成便非常簡單,直接來看程式碼 (JavaScript) 就好瞭解了: 值得注意的是,在 authUrl 中的 display=popup 參數一定要設定,才會符合 Metro Style App…


IE9 的鎖定網站及跳躍清單(下)

在前一篇文章中介紹了鎖定網站中可以使用 <meta> 標籤來建立跳躍清單中的工作。這一篇文章將介紹如何利用 JavaScript 來製作動態的跳躍清單選項。 判斷是否已被鎖定 網頁開發者可以利用 JavaScript 來判斷目前網站是否已經被使用者鎖定(pinned),只要利用 window.external.msIsSiteMode() 方法: // 檢查是否有定義 window.external.msIsSiteMode if (window.external && window.external.msIsSiteMode && window.external.msIsSiteMode()) { // 是鎖定的網站 } 如此一來,在確定使用者已經鎖定網站之後,以下的動作才有意義。 建立自訂的工作類別 使用 <meta> 標籤所建立的跳躍清單選項,都會被置放於「工作」(Tasks)的類別下,如果網頁開發者想要自行建立類別,則可以透過 JavaScript 呼叫 window.external.msSiteModeCreateJumpList 方法: if (window.external.msIsSiteMode()) { window.external.msSiteModeCreateJumpList(“我的自訂類別"); …. } 參數就是自訂類別的名稱,若參數為空白,則表示移除所有的自訂類別。 加入自訂的工作項目 建立了自訂類別之後,若要再加入自訂的動作,則是使用 window.external.msSiteModeAddJumpListItem() 方法來加入工作項目: if (window.external.msIsSiteMode()) { var ex = window.external; ex.msSiteModeCreateJumpList(‘我的自訂類別’); ex.msSiteModeAddJumpListItem(‘Action 1’, ‘http://www.example.com/path/to/action1’,…