當初我們決定要將 Firefox OS 應用到智慧電視 (Smart TV) 上時，第一個遇到的問題便是操作介面的不同。在一般的電視使用情境下，使用者通常不會有滑鼠或是觸碰螢幕，能拿來操作的是那少少幾個按鍵的電視遙控器 (好吧，其實現在電視遙控器上的按鍵還不少)。在將 Firefox OS 這樣一個...

近年來在資訊業最火熱的話題無疑就是虛擬實境 (Virtual Reality，VR) 了。除了 Oculus 推出 Oculus Rift 之外，其他如 HTC、Google、Samsung 等科技大廠亦各別推出自己的解決方案。VR 目前在遊戲、 電影、多媒體內容都有其龐大的市場需求。Mozilla...

感測器元件是連接實體世界和數位世界的橋樑，將物理現象轉化為電子訊號帶入軟體的次元。感測器元件的存在更是人機互動體驗的必要條件，如利用加速規（accelerometer）、陀螺儀（gyroscope）等動作感測器把手機當方向盤的 REAL RACING賽車遊戲、 利用近距感測器（proximity s...

invert 在各大平台上的 App 商店裡，影像處理相關的應用程式總是在熱門排行榜上佔有一席之地，Web Platform 當然也不落人後的提供建構影像處理 APP 的相關功能。在這篇文章裡，我們將介紹如何利用 HTML5 的 getUserMedia() API 來建構一個影像處理應用程式的架構...

Web這幾年最夯的主題之一就是Web Components [1][3]。透過它，我們能使用其他人開發好的Widgests來提高開發效率，不過風險是目前有些瀏覽器支援並不完全或必須手動開啟支援[6]，而我相信不久後所有瀏覽器就會完全支援囉[2]！ 今天，小弟想跟各位簡介如何使用Firefox OS的...

Firefox OS 上的瀏覽器 APP 利用 Gecko 提供的 Browser API 來管理網頁瀏覽，並利用 HTML5 技術提供使用者界面。根據不同的實作它可以實現分頁，瀏覽歷史，書籤… 等等功能。這篇文章示範如何建立一個可以在 Firefox OS 裝置上使用的瀏覽器 APP，它包含了最基...

手機產品是 Firefox OS 的重要任務之一，Phone app 與 Callscreen app 實現了撥打/接聽電話功能，背後與底層溝通的媒介 Telephony API [1] 佔了非常重要的地位，安全性的考量下，Telephony API 僅開放給 Certified app 使用，不過...

app screenshot 之前在 Eric [[1]](https://tech.mozilla.com.tw/ref1) 與 Owen 的文章 [[2]](https://tech.mozilla.com.tw/ref2) 已經介紹了如何使用 Geolocation API [[3]](htt...

在看過 Part I 部分，相信大部分人都可以了解如何完成一個 Firefox OS 地圖應用程式。在了解了地圖的基本應用之後，我也想要做一個簡單的程式。我想要完成一個可以在地圖上呈現更多資訊的地圖應用程式。除了顯示個人地理位置資訊，可以把我們感興趣的地圖資訊也呈現出來。 我們生活中常用的就是交通的...

05.EMULATOR 地理位置（Geolocation）的應用相信大家每天會使用到，早上查看上班前的交通狀況，傍晚打開手機 app 查詢附近的餐廳，上菜後照相打卡，看看週末旅行的城市天氣如何，或是用運動 app 記錄自己慢跑的速度，路線。在這篇短文，筆者將介紹如何在 Firefox OS 上，使用...

photocredit by mike demersphoto credit by mike demers 網頁應用（Web App） 網頁或網站設計是門很容易上手，但卻很難精通的領域。特別是近年來網頁相關技術隨著 HTML5、Node.js、Cordova 等的發展，網頁可適用的邊界進入了爆炸性擴...

Firefox 最受歡迎的特色之一就是量多而且質精的附加元件 (Addon)，在 Firefox Addons 網站 [[1]](https://tech.mozilla.com.tw/ref1) 您可以找到各式各樣的附加元件滿足您的各種上網需求。在這篇文章中我們將會介紹如何利用 Firefox A...

當 HTML5 發展日漸成熟之際，在多媒體的輸出原生支援方面，目前已經支援了大多數網路常見的格式，所以開發者可以使用 audio 或是 video tag 來進行影音播放控制。但輸入方面，目前各家瀏覽器並無統一的 API 實作，為解決此問題，W3C 委員會在 2013 年開始制定了MediaReco...

10yearssvg不知道大家有沒有注意到，這次的 Firefox 十週年活動網站上出現了一些特殊的動畫元素。這些元素不是 GIF 圖素，也不需要複雜的動畫套件，而是運用了 SVG 本身具備的動畫功能。 使用 SVG 來做動畫有幾個好處： 首先因為是向量圖形，所以任意縮放變形都不怕出現鋸齒顆粒。 多...

在 Mozilla 開發 Firefox OS 的歷程中，使用者體驗是我們非常著重的項目。在近期開發的 Firefox OS 版本（2.0）上，我們大幅修改了鎖定畫面（Lock Screen，或稱螢幕鎖）的外觀。下圖左是舊版畫面，圖右是新版畫面。 OldNotification NewLockscr...

RWD 全稱為 Responsive Web Design（適應性網頁設計），簡單來說就是讓你的網頁能夠伸縮自如的設計方式。在前兩篇文章介紹完九個 RWD 小撇步之後，接下來小小分析一些常見的 RWD 流言，並不是說這些流言都是胡謅一通，但我們如果常因為流言中的一些負面模糊形容而卻步，很可能就錯失了...

接續上一篇所介紹的一些基本 CSS 排版小技巧，本文第一部分開始介紹 CSS media queries 常見的使用方式，以及一些在開發初期就要先注意的地方；第二部分則介紹一些適應性設計相關的工具及 Javascript 套件。希望這些小撇步可以幫助你在開發網站上事半功倍囉！ 運用 CSS medi...

隨著超低價的市場崛起，我們對各項資源也開始斤斤計較。不論是 CPU、RAM、及 Flash，每一個項目都是我們努力減少的目標。先前丹尼兄及艾倫兄已分別為大家介紹過 gecko 在處理記憶體管理上的文章[1][2]。這些都是著墨在記憶體管理上，今天醬糊小弟將向各位介紹一個在 gaia 存在已久的可視範...

先前 EragonJ 跟大家介紹過 Inter App Communication 的使用情境以及使用範例程式碼，本篇將繼續討論 InterApp Communcation（文章後面將縮寫為 IAC ）其他較少為人知的面向。 雙向通訊連線 使用 IAC 建立連線的程式碼通常如下： navigator...

自 ECMAScript 5.1 開始 JavaScript 加入了兩個關於陣列的函式：Array.prototype.map/reduce。這兩個函式可以針對陣列，讓開發者更清楚的描述接下來程式碼所要表達的運算性質。除此之外，也簡化了每次手寫迴圈進行尋訪陣列的繁瑣過程，特別是當尋訪實際上是要將原本...

前面介紹過了去年九月份活動頁的 Canvas 刮刮樂、以及照片上傳元件。 這次重頭戲來啦！ 登登登！傳說中的～視差動畫！ 設定你的視差捲軸動畫 視差效果視差效果（圖片取自 Wikipedia） 先構思好動畫的進行方式，視差故名思義就是景物因遠近不同造成視線內移動速度的差異， 最常見的例子是在坐車時，...

接續前一篇介紹 Canvas 刮刮樂的文章， 本篇介紹的是去年九月份 Firefox OS 讓你盡情享受每一刻 活動的照片上傳作法。 有做過上傳表單的人一定對瀏覽器提供的預設上傳元件有一些意見， 它的外觀光用 CSS 來設定樣式也救不了，而且上傳圖片沒有前端預覽很不直覺。 幸好可以搭配<label元...

Mozart 專案是一個利用多個 Web API 來完成的線上遊戲，它使用了 1. Device Motion 來讀取使用者透過手機晃動的幅度, 2. Web Audio 來當成 MIDI 的聲音輸出, 3. Web Socket 來當成手機與伺服器之間的即時通訊。我們只要簡單的搖晃手機，身邊的電腦...

iac 在開發 App 的時候，我們有時候需要在App之間傳遞資訊，而今天我們要介紹的主角就是新引入的 WebAPI: IAC (Inter App Communication)，有了這個好東西，我們就可以輕易的在 App 間傳遞訊息，以下就用筆者遇到的例子來說明吧： User story 當使用者...

我就先不賣關子，底下這個 fiddle 就是這篇文章的刮刮樂範例完整版。 可以玩玩看，試著瞭解裡面的程式腳本，或是 fork 來改改看。 有興趣但看不太懂 code 的話， 就跟著本篇文章的介紹帶你入門吧！ 如果大家有看過九月份的「Firefox OS 讓你儘情享受每一刻」活動網頁（註 1）， 應該...

85154743dabstractdigitalcodeconnection [1] 問： 常常我們會收到某些 Gecko 的問題，但卻是 log 不足或是可能需要在手機上摹擬某些特殊/額外的資訊才有可能重現問題。而我們又確定這個問題，大概會從 Gecko 的 JavaScript 檔案下手。但是，...

Rhino Art Firefox OS 裡的 Gecko 層，主要是由 C 和 JavaScript 兩種程式語言編寫而成。不過 Gecko 裡的 JS 程式碼長相和我們常見的 clientside JS 非常不一樣。剛開始閱讀程式碼時，常常會看到一些奇妙的玩意。 比方說，JS 裡頭竟然會有 if...

Emscripten Logo 在提到 Emscripten 之前，我們先來回顧一下 JavaScript 的發展歷史。 JavaScript 的歷史 JavaScript 在 1995 年問市時，目標是在瀏覽器中打造一種輕量的腳本語言，用來輔助頁面的呈現以及與使用者互動。為了這個目的，JavaSc...

testdemo.js 在 Firefox OS 中，我們經常使用 marionette 這套測試框架來進行 web API 的測試，當 test case 越寫越多時，開始會有一些 bad smell 浮現，在這邊我們用 telephony 的 marionette test case 為例，看看...

各種常見的螢幕大小 我們發現到：要讓網頁應用支援多種設備，開發者需要根據設備的「像素密度」（Pixel Density）與「螢幕大小」（Screen Size），處理相對應的「排版」與「圖片」問題。接續前一篇，本篇將闡述處理「螢幕大小」（Screen Size）的方式。 （現在Gaia關於多重設備支...

credit http://en.wikipedia.org/wiki/File:DaVinciVitruveLucViatour.jpg 使用網頁技術開發應用的好處，是讓使用者不管在什麼設備上，只要有瀏覽器支援，基本上都能使用自己習慣的服務。同時若有需要，也可以較容易地透過 Apache Cord...

MeettheFirefoxOSMascotaFoxThatsonFire 二十餘年前，網站慢慢開始出現在世界各地，起初就像盤古開天闢地一般，沒有複雜的東西，網站都相當簡易，大多以文字和些許的圖片構成，連頁面也沒有太多。經過好一陣子的發展，慢慢有了比較複雜的結構，那時候人寫網頁的邏輯慢慢的會受到干擾...

所謂的 ECMAScript，其實就是我們日常在用的 Javascript，只是當初因為商標的問題，所以後來把這個語言的規範改叫作 ECMAScript。目前市面上的瀏覽器已經支援到 ECMAScript 5，也就是 ECMAScript 262 5th Edition了。但 ECMAScript ...

功能簡介 Alarm API 最初是為了 FireFox OS (FFOS) 所特別開發的一種 Web API，可以在預定時間自動喚醒系統去執行特定作業；這種功能可以套用在許多實際的應用上，最容易聯想到的功能就是 Alarm Clock 的應用，有了這個 API 我們就可以要求 FFOS 在某個時間...

你習慣用手指在螢幕上滑來滑去，用手勢 ( gesture ) 代替你處理大小事嗎？ 在現今行動裝置的世界裡，手勢 ( gesture ) 儼然成為與裝置溝通的最主要管道。無須其他的輸入設備，動動手指就可輕易將手中的手機或平板操控自如。不管是 Android 、iOS 甚至 Windows 都有針對手...

大家都知道 JavaScript 是一個很方便的語言，想要一個新物件? 沒問題，new 一下就有了。需要一個陣列來做暫存空間? 也是交給 new。不像其他，比如說 C，等較低階的語言，JavaScript 的使用者絕大多數時候都不必煩惱實際上資料被放到什麼地方，也不需擔心用完了卻忘記要交還給系統而造...

單元測試一直以來都是確保軟體品質的一種方式，在日益錯綜複雜的軟體中更是重要。Firefox OS 的應用層 Gaia 理所當然的也由單元測試來確保軟體品質。設置妥當後，當你打開任意編輯器對 Javascript 檔案編輯，並且按下『Save』的那一刻，unit test agent 就會默默的被喚起...

香蕉人又登場了，今天要來教大家使用 Persona 囉！這是什麼? 能吃嗎?! 是新口味的香蕉嗎？！ 有在發落Mozilla Taiwan 部落格的捧油應該不陌生啦，新朋友別緊張啦~ Persona 的詳細介紹可以看 http://blog.mozilla.com.tw/posts/1061/安全可...

開發 Mozilla 專案主要會使用兩種程式語言：C++ 與 JavaScript。第一次接觸到這份代碼時，我心中就產生了一個疑問：C++ 是強型態、靜態編譯的語言，而 JavaScript 則是弱型態、直譯式的語言，這兩種特性截然不同的程式語言該如何溝通呢？以下讓我們來分析一下 C++ 與 Jav...

Web activity 是由 Mozilla 設計並開發，用來使 web app 之間共享資源的框架。在 Firefox OS 中已經存在 Platform/UI 上的實作，並且有一些內建的主要 Web app 已經利用 Web activity 來達成跨應用程式溝通的目的。（如：Gallery ...

在 HTML framework 技術突飛猛進的今日，我們嘗試著用新的 HTML5/CSS3/JavaScript 來完成更多的事情。Chrome Web Store 裡就有各式各樣的 Web application 來告訴你目前 HTML framework 的能耐。除了視聽娛樂輕鬆實現的應用外，...

謀智台客曾在五月份時為各位介紹 Firefox OS (原 Boot To Gecko, 簡稱 B2G) 的模擬器 — B2G on Emulator。今天則要就模擬器進行進一步的說明，與各位分享如何基於模擬器和 Marionette automation driver 進行 Boot To Gec...

接續上週的介紹，今天來談談，為~~~什麼我們要多用 CSS 而少用 JS 來做動畫呢? 原因之一，就是今天的主角 media queries 啦！Media queries 主要可以用來對付來自四面八方，奇奇怪怪的解析度。 你或許會問，這些奇奇怪怪的解析度打哪來的呢?! 除了現在人手 N 支智慧型手...

一個「生動」的網站絕對少不了 Javascript (JS) 的幫忙，很多有趣的特效交給 JS 或甚至丟給 Jquery 就對了！不過我們仔細看看 JS 裡到底做了什麼事讓我們的網站活起來呢，其實大部分的特效，JS 只是幫我們動態的去改變元素的 CSS 而已。那可以直接就在 CSS 中完成特效嗎？！...

Gaia 是一個基於 HTML5 技術為基礎，且為 Firefox OS ( 原 Boot to Gecko 專案，以下簡稱 B2G ) 手持系統而生的，使用者界面開發專案。開發 Gaia 的程式語言不外乎使用 HTML5/CSS/JavaScript 等技術，這更是一個不折不扣的 Web 應用程式...

正如之前幾篇謀智台客文章所介紹的， Firefox OS (Boot to Becko, 以下簡稱專案名 B2G ) 計劃提供了一個全新的平台，讓開發者能夠以 HTML5 等網頁技術來開發各種行動應用 (mobile apps)。這對於開發者眾多且已累積多樣化 JavaScript library ...

如大家所熟知，JavaScript 是一種具有許多特性的動態語言，能應用於 metaprogramming ，換句話說，其可以操作程式及改變程式。Metaprogramming 的能力在於動態 (runtime) 改變和定義程式的行為，具有高效率的表達程式結構和邏輯的優點。然而，metaprogra...

Mozilla Firefox 的程式大部份是用 C++ 寫成，但也有不少的元件是以 JavaScript 完成，在開發 B2G 的時候免不了就要寫一些 JavaScript。 在跌跌撞撞的參考 Mozilla 的 Coding Style Guide 完成 patch 並接受 review 之後，...