Use Firefox OS "lightsaber" on Flame

EN: I'll make a note as a "lightsaber quick install guide" here.

Firefox OS 新的 Add-on 等功能都在 lightsaber 上，要安裝稍微得費點勁，這邊分享一下最速達陣手法：

「不必」自己 build Gecko

EN: You don't have to build the whole gecko from mozilla-central, just use the nightly and it works. Check Updating your Flame and choose the https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame-kk/ builds.

lightsaber 上面叫你自己從 mozilla-central 重新自建 Gecko，但其實光是要嘗試新東西的話無此必要，只要更新 Flame 到 mozilla-central 的 nightly-build 就好：

https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame-kk/

如果不知道怎麼升級，請見 Updating your Flame

拿把光劍

EN: then, follow the quick setup section in the README.md of lightsaber, but be sure to remove the "GAIA_DEV_PIXELS_PER_PX=2.25" part.

接著就要把光劍裝上去，其 Readme 裡有最速捷徑：

sudo npm install -g bower && sudo npm install -g gulp && sudo npm install -g apm && sudo npm install -g grunt-cli && sudo npm install -g browserify
git clone https://github.com/fxos/lightsaber
cd lightsaber
make install
make sync

我這邊故意少複製了一行，原因有三：

1. 我在 make sync 時有跳錯誤，如果發生錯誤無論如何就上網查一下，通常都是什麼東西沒裝好。
2. 這邊有可能會問你要裝哪種 gaia-icon，我反正是挑最新的
3. 這份 Readme 主要寫給 Z3C 用，如果你好傻好天真地照辦那在 Flame 上就有問題了。

最後一行是真的要把 Gaia 裝上去，作為日用機，我常用的參數是這樣：

• 要掛 Mozilla 的品牌: MOZILLA_OFFICIAL=1
• 日用，跳過測試用 App: PRODUCTION=1
• 跳過啟用導覽與設定: NOFTU=1
• 開啟 adb 連線除錯: DEVICE_DEBUG=1
• 開英文跟注音鍵盤: GAIA_KEYBOARD_LAYOUTS=en,zh-Hant-Zhuyin

如果你也要裝中文語系和設定上去，參考小帥提提供的古早資料，將語系抓下來，再以 language.json 指定一下啟用的語系即可。你的最後一行指令可能長得像這樣：

DEVICE_DEBUG=1 PRODUCTION=1 MOZILLA_OFFICIAL=1 GAIA_KEYBOARD_LAYOUTS=en,zh-Hant-Zhuyin LOCALE_BASEDIR=locales/ LOCALES_FILE=locales/l.json make reset-gaia

最後

沒有下一步了，就是這樣喵。雖然手上有 Flame 又不屬於 MoCo 的華人不多，但還是分享一下順便當自己的筆記 -- 我近兩年前寫的 build Firefox OS 筆記，現在還是很好用 :P

Google Tag Manager 新版學習札記

先前稍微玩了一下 Google Tag Manager 但一直沒有正式放到網站上（主要是... 沒有人有時間再去研究，還有一堆 GA 調整的票掛在那邊沒時間做啊啊啊啊），但因為某顆布丁說要有光就有了光，於是我這星期又重新把沈寂數個月的「研究轉換到 GTM」那張票挖出來。

快速分享一些東西，或許能幫上跟我狀況 / 程度差不多的人。

這篇文：

• 不是教學，是快速概覽：我是站在「如果是我的話，看了以後可以省一些摸索時間」來寫的，而介面選項在哪裡什麼的，自己摸吧 XD
• 不是去技術文：GTM 本身雖然沒有限制是開發人員才能使用，但會不會 JavaScript 影響規劃時能用的把戲，我直接以小會一點 js 的角度來看

那就開始囉！

改名

如果你用過舊版的，有些名詞換了，個人認為是更好懂：

• Rules 改稱為 Trigger
• Macro 改稱 Variable

改名這種事情，其實對初學者來說超級重要的，因為在求助時，找到的文件可能都還是舊版。

概念

基本流程如下

1. 新增 Container，就是... 意義上可以歸類的一組東西
2. 請開發人員將 Container 產生的 GTM 程式碼放上網站。理想上無論你以後怎麼改設定，這就是少數幾次真的會動到網站程式碼的時候了。
3. 在 Container 中可以新增各種 Tag，可以想為「要做的事」
4. 每個 Tag 可以藉由多種 Trigger「觸發」
5. 另外 Trigger 跟 Tag 中可以藉由各種 Variable 來設定雜七雜八的東西
6. 設定完畢後，可以用 Preview / Debug 來測試
7. 測試沒問題就發佈，相關設定就會直接套用到網站上
8. 若以後有要改什麼，就從 Step 3 再走一遍，而開發人員理想上不用更動什麼程式碼

舉例：「使用者在進入這一頁點選『喝我喝我』按鈕後，就告訴 GA 這人在進來多久以後才按這個鈕」，這句話裡：

• Tag 是「就告訴 GA 這人在進來多久以後才按這個鈕」
  • 其中「進來多久」很可能是 Variable
• Trigger 是使用者「點選『喝我喝我』按鈕」

Tag 與 Trigger

Tag 的設定不盡相同。簡單的狀況：以設定「讀入此頁時，就在 GA 中記上一筆 pageview」這樣的事情來說，只要新增一個 GA 的 Tag、選擇 Pageview、並且設定在 All page 觸發就結束了。

但複雜的話就很複雜：一樣以 GA 為例，你有「一大堆」的欄位可以指定要傳送怎樣的資訊給 GA，舉凡 UserID、Enhanced eCommerce data 等等都可以（也必須）在這裡設定。這部分有必要搭配相關的開發文件來查閱該怎麼傳。

每個 Tag 都可以指定讓很多種 Trigger 觸發，這裡會是聯集，也就是說如果你設定了 3 個 Trigger，那只要符合 3 個中的任一種情形，都會觸發此 Tag。若想用「交集」，也就是要符合所有條件才會動，那設定上得自己兜成一個 Trigger（單一 Trigger 內的各條件是交集），或者另外新增 Exception。

舉例：我們希望在使用者登入的情況下（這裡有個 Variable 可以得知使用者是否登入），點擊某頁 A 上的某個連結 B 會觸發 Tag。有兩類設定方式：

1. 在一個 Trigger 裡，設定在 A 頁啟用 Link Click 追蹤，並僅在使用者已登入 且 點擊 B 連結時觸發
2. 或者，也可以設定某個 Trigger 是在 A 頁啟用 Link Click 追蹤，並僅在點擊 B 連結時觸發。此時該 Tag 還要記得另外新增一個若使用者未登入則不觸發此 Tag 的 Exception

兩種方式主要看規劃，講簡潔好維護當然是 1，但或許某些時候還是會想用 2。

Exception 其實也是一種 Trigger，你可以想成「如果符合這個 Trigger 的條件，我就不觸發」。正所謂敵不動我不動，敵一動我亂動（此句意味不明。）

當然一個 Trigger 也可以觸發兩個以上的 Tag。

Variable

記得先進 Variable 把一些預設的 Built-In Variables 開起來，例如我開了 Page 跟 Click 的大部分。

這些做啥用？例如 Click Element 可以作為 Trigger 的條件，讓你做到「如果點選了 DIV.triggerme 底下的 A 元素，就觸發這個 Tag」，以此類推。

Variable 有許多類型，我覺得比較有用的東西例如：

• Constant: 常數（固定值），例如 GAID 會用在很多 Tag 上，先拉出來做常數設定好。一個重點是在這邊設定好以後就會變成各欄位的下拉選單。
• Custom JavaScript: 大概是變化最多最厲害的一種，可以用 JavaScript 抓/拼出各種想要的值交給 GTM。
  
  • 一行看熱鬧： function(){ return {{Click Element}}.getElementsByClassName("text")[0].getAttribute("data-event-label"); }
  • 其中 {{Click Element}} 是 Variable 的引用方式
  • GTM 高人 Zorro 曾指點，其實 GTM 內建 jQuery，所以不見得要像我那樣用原生 DOM API 抓東西。但... 我就習慣了... 然後沒有公開說支援的東西我也會擔心不告而別壞光光 :/
• Data Layer Variable: 網頁上送來的 Data Layer 資訊要從這裡轉成變數給其他人用
• Lookup Table: 如果你會 JavaScript 的話差不多就是 Switch ... Case 的精簡版，需求簡單又懶得寫程式時是蠻方便

Preview / Debug

GTM 內建的除錯工具，啟用後在瀏覽網頁時下半部會分割視窗顯示，平常測試起來會比用瀏覽器內建的 developer console 方便非常多。主要功能是查閱各種狀態（網頁載入、DOM 完備、網頁讀完、各種點擊事件）下：

• 到底哪些 Tag 被觸發了
  • 以及，送出了什麼資訊
  • 而如果沒被觸發又因為哪些條件沒滿足（這個非常好用）
• 各自訂變數值

由於他會把各狀態當下的所有數值記錄下來，所以你也可以在十幾個事件之後才回頭查第三次 click 觸發了什麼東西。下圖代表在剛載入的時機點由於網頁 URL 不符規則，於是沒有觸發。

Preview 時的 GTM 設定只有你才看得到，或者你也可以分享給其他特定人。總之，即使在 production 上測試也是沒問題的。

其他筆記

• 瀏覽器相容性：寫 Custom JavaScript 要注意瀏覽器相容性，畢竟這段 js 碼是真的會在瀏覽器上跑。
• 由於 GTM 的設計，只要你會寫 JavaScript 就幾乎可以不靠開發人員調整網頁，就能自幹所有的變數（例如，自己爬最終訂單畫面來解析出訂單內容資料）。
  • 不過基礎 Metadata 我會仍然傾向商請網站開發人員送 Data Layer 過來，以免網頁結構有些許更動時讓 GTM 死在路邊。
• 閱讀文件後我認為 GTM for iOS / Android App 實際作用倒沒有像網站上那麼大，開發人員仍然得自己送出幾乎所有的事件（App 沒有 DOM 可以抓啊...），差異點是：
  1. 有些設定過的 Data Layer 值可以直接重複使用
  2. 可以在軟體發佈以後才透過 GTM 改一些設定值

小結

網站分析師善用 GTM 的話可以省很多「等開發人員有空」的時間，有什麼要調整的東西時開發人員也比較不會覺得很煩。站在「網站企劃分析人員多少都得懂點網頁技術」的角度上，是蠻推薦每個人都可以學學。不過相較 GA 已經深入行銷人的領域、在用詞與操作上幾乎只要懂網路基本原理就可以用，GTM 就還是很技術人的工具。

當然，即使你完全不會寫 JavaScript，也還是可以用 GTM 快樂做些事情、不用等 RD 幫你處理，但會寫 JavaScript 的情況下，用起來根本不是同個級別的。無論如何，Google 提供不少範例，或可作為一個入口。

有打算下個月或下下個月在摩茲工寮弄個簡單的 GTM 分享，有興趣的下面留言一下吧。

菜鳥 Maker，之前

是一種連菜鳥都還稱不上的狀態。

黑熊用講歷史的姿態，告訴我臺北有哪些地方可以買：

• 昌吉街，螺絲
• 景西街，木料
• 太原路，塑膠製品（泡棉那種都是）

陳飛說他們都去大學美術社買卡碘西德。黑熊補充：或許熟一些後，可以去找招牌廣告行買人家比較零的，便宜多。

卡碘西德先買 6 才 / 2 尺來試玩。那檯裁紙機的 plugin 不支援 Mac 了，但還有另外一套軟體可能支援，還沒試 - 因為週末，美術社都休息。

關於木工。鴻旗覺得手作木工需要保留那樣的味道，就是要不整齊啊！

蜂巢板應該是個意外貴的素材；代木是均質的東西；角鋼很便宜，合板也很便宜（意外地超級便宜），廁所門版是超級便宜的白板。

至於什麼時候才要升級成菜鳥？想做的事情實在太多了，義鴻說就慢慢來吧，我說，就是把這件事情放著讓它慢慢來了，才會拖了半年多啊～

就跟我永遠沒學的吉他一樣，於是大概就不會再去北海道了。

「我殺了他」，想法、筆記與推斷

三不五時會買一本小說（不然，通常在他處看完便不會再看了），既然買了、又對真兇有一定把握，或許參加一下書商辦的活動也不錯 :P

幾點感想：

• 「我殺了他」裡的加賀恭一郎還是只出場一下下，不過搭配腦海裡阿部寬的臉，倒不會太不起眼。（但，小說裡的寫法感覺不太到個性呢，好像是哪個刑警都可以的樣子。）
• 且先不論好不好看（我是盡可能在短時間內看完了），這真的是本奸詐的小說。最後幾章努力讓所有嫌疑犯都有一樣的機會（例如，所有人都有機會持有兇器），過程中的描述有時也故意模糊了主詞。
• 最後一章給的解說太明顯了。我原先蓋上最後一章時覺得：humm 那如果不用消去法的話難道要輸了嗎？我不想先用消去法，畢竟那大前提就得像暴風雪山莊一樣，「只可能是這裡的人做的」，總覺得刑警在開放空間不能這樣推斷吧？但，解說裡給的提示讓我靈光一閃，對照證物傳遞路徑之後... 靠，果然有個可能的破綻在那邊。再翻了一下前後的相關描述，一切都齊全了。

那麼因為我要參加這個，所以接下來要說明我的推斷（才不會只「三選一」勒），會有雷，也歡迎有看過的來討論討論。（可以跟我借噢，我超貼心的這次把筆記都另外寫 :P）

關於 Google Analytics 「不得追蹤單一個體」的誤解？

昨天 Google Analytics 把 Universal Analytics 送進公測，我終於有機會到處看看。新的 Measurement Protocol 要求每個 Request 都要送個 Unique-id 給 GA，以便辨識是同一人（使用 Web 版或行動 SDK 的人，程式會自己幫你搞定這一點，一切都跟以前一樣），因此我覺得或許我以前誤解了 Google「不得識別單一個體」的條文。後來看 Universal Analytics 的資料找到這條：

You will not upload any data that allows Google to personally identify an individual (such as certain names, social security numbers, email addresses, or any similar data), or data that permanently identifies a particular device (such as a mobile phone’s unique device identifier if such an identifier cannot be reset), even in hashed form.

「您不可以上傳任何能讓 Google 識別特定個人（如姓名、身分證字號、電子郵件地址等）或特定設備（例如手機上無法更動的唯一設備號碼）的資料，即使雜湊過也不行。」

這好像跟我原本的認知就已經不同了，畢竟他很強調「不可讓 Google 識別」，而不是不可讓我識別。於是又回頭看服務條款：

You will not (and will not allow any third party to) use the Service to track, collect or upload any data that personally identifies an individual (such as a name, email address or billing information), or other data which can be reasonably linked to such information by Google.

「您不可（亦不能授意第三方）使用此服務追蹤、搜集、上傳任何可用以識別單一個人的資料（如姓名、電子郵件地址、賬單資訊等），或其他可由 Google 合理連結此等資訊的資料。」

好像仍然只是在強調不可以陷 Google 於不義。也就是說，依照此兩條解釋，其實如果我自己為使用者定一個 ID（例如 35009a79-1a05-49d7-b876-2b884d），然後設定 Custom Value 去追這個 ID，並不違反 Google 的條款。因為只有我自己才可能知道 35009a79-1a05-49d7-b876-2b884d0f825b 是誰，Google 無從得知，除非他駭進我後台系統，或者我笨笨的在前台就把這個 ID 跟前述使用者個人資料連在一起。

HTTPS 的 referrer 狀況筆記

很快筆記一下，周三去聽喬后演講時，她講了個我從前不知道的事：HTTPS 的網站連向 HTTP 網站時，瀏覽器不會送 referrer。以目前大部份網站都沒用 SSL 的情況來說，這會讓分析時高估直接流量（自以為有很多人加入書籤？XD）、且可能低估某些來源的威力。剛巧又有人貼了 Search Engine Land 的文章，說 iOS 6 因為預設搜尋引擎與 Firefox 相同，都轉往 SSL Search，所以就不送 referrer 了。如此推算，被低估的部份就變成自然搜尋，但這是網站健康程度的指標之一，雖然重要性就看個人，但若有需求該怎麼解決？

那就測試一下吧！Dropbox 的空間可以用 SSL 存取，所以我做了個簡單的網頁來顯示 referrer，想等 Google 去索引此網頁後再來測試搜尋。但，後來想到更快的方法：Facebook 也是 HTTPS 吧？那就從 Facebook 去連這個檔案就好。

• 原始網址 https://dl.dropbox.com/u/3280872/referrer.htm
• Facebook proxy link (from HTTPS) https://www.facebook.com/l.php?u=https%3A%2F%2Fdl.dropbox.com%2Fu%2F3280872%2Freferrer.htm&h=YAQH98kqz

好，所以事實證明，若 HTTPS 網站轉進另一個 HTTPS 網站時，還是會送 referrer。所以，如果想避開這種狀況帶來的影響，讓自己的網站也採用 HTTPS 就好了。花錢能解決的事情都是簡單，接下來的問題只在值不值得花。

不過現在大部份網站並不採用 HTTPS，那按理說會造成一部份的自然搜尋來源蒸發現象。但以我可以看到分析資料的網站而言，在 Firefox 預設改用 SSL Search 後，這種事情卻沒有發生，難道這代表 Firefox 的使用量已經低到無法撼動任何東西了嗎？ XD

這倒也不是。其實 Facebook 等網站或許因為廣告等需求，就算你用 HTTPS 連，他的 proxy link 仍採用 HTTP 未加密連線。也就是說

1. 你使用 HTTPS 來連 Facebook，並點擊一個看到的對外連結
2. 這個對外連結會先跳到 HTTP 連線的 proxy link：以我的測試網站來說，就是 http://www.facebook.com/l.php?u=https%3A%2F%2Fdl.dropbox.com%2Fu%2F3280872%2Freferrer.htm&h=YAQH98kqz
3. 這樣正式連過去另一個站的時候，對方無論是否採 HTTPS 連線，仍可收到來自 facebook.com 的 referrer

實際上 Google 也是如此，即使你採用 SSL Search，按照 Search Engine Land 的方法到 whatismyreferer 測試，對方也能正確顯示你從 Google 來。因為 Google 也用 proxy link 當跳板，然後這張跳板也刻意僅用 HTTP 連線。這是 Firefox 採用 SSL Search後，在數據上沒有造成任何影響的原因。

最後一個問題 - 那為什麼 iOS6 採用 SSL Search 後，搜尋上會造成這種影響？從剛剛的各種線索推算，答案就簡單了：因為 Google 行動版的行為不同。Google 行動版雖然也用 proxy link 來計算點擊數，但這個 proxy link 卻採用 HTTPS 連線，所以瀏覽器發現連線對象是 HTTP 網站時，也就很快樂地把  referrer 擋下來了。你可以用 Firefox for Android 搜尋 whatismyreferer 後，長按搜尋結果連結來證實此點。

喔，這樣才是置入性行銷啊 :)

在 Aptana 中開啟 JSLint，即時打槍你的 JavaScript

設定一下就好了，享受邊寫 JavaScript 邊被打槍的淒慘感覺，從失敗中邁向光明之路。不知道 JSLint 是什麼的可以參考歐三哥哥的文章，很詳細：JavaScript Best Practice Part.1: JSLint

24 個你可以提昇 Firefox 使用體驗的機會

Firefox 使用體驗團隊的頭兒 Alexander Limi 貼了篇文，列了 24 + 9 個 UX 團隊希望能在 Firefox 4 解決的問題。這些問題，都（還）不會阻擋 Firefox 4 釋出，卻也不單是修圖、微調那類的東西。希望能人異士出手相助，幫助大家提昇使用體驗，或者最少，如果你覺得這問題很重要，到 Bugzilla 提出 block 的建議。以下依據優先序筆記一下前幾項的內容：

1. 升級時，將未經使用者明確授權即安裝的第三方附加元件（Plug-ins or so）停用，主要影響啟動效能。有點類似 IE9 Beta 啟動時提醒你某個附加元件太拖累的東西，但另外也在意「不經使用者授權即自行安裝」的元件（如 Skype、Norton 軟體、Java 等）。
2. 自動清理重複的附加元件，又是 Java，似乎 Microsoft DRM 也會重複灌版本號碼不同、但只是升級而已的套件。這應該是沒有好好指定套件 ID 的緣故。
3. Windows 下視窗最大化時，分頁與標題列同置一行，就像 Google Chrome 一樣，增加瀏覽空間。這好像有人在試了。
4. 在 Windows 上啟動時，螢幕繪製的狀況比 Fx 3.6 慘。
5. 更聰明的網址自動補完。有人動手了。
6. 即便是 HTTPS 的網站，當掉後也要能自動復原。似乎是政策問題多過實做。

7. 合併停止與重新讀取鈕後，不應使停止鈕出現「停用」狀態。

   萬一頁面讀得很慢，使用者想按下「停止」鈕的時候會發生兩種狀況：

   • 順利停止網頁讀取，或是
   • 網頁在按下前的一瞬間已經讀取完畢、按鈕變成「重新讀取」，所以使用者按到的是「重新讀取」鈕、暴怒。

   為了防止這種情形發生，目前的作法是在網頁讀取完畢後仍暫時顯示「停止」鈕、但採停用狀態以防止誤觸。雖然實際上對網頁讀取速度沒有影響，但多那半秒的「停止」模樣可能會讓使用者以為網頁讀取變慢了。

   又，你覺得 Firefox「抄」其他瀏覽器嗎？這個 Bug 有 Google Chrome 的開發者上去分享 Chrome 設計的理由 XD 且不論「原創」所指為何，請搞清楚在這個世界裡的共創理念。（這個 bug 有人動手了）

8. 網址列中，網域部份加重顯示，其實我記得以前 Firefox 曾經有過測試版是如此作用的，但沒加到最後版本的原因不明。有人動手了。
9. 強化拖曳分頁時的視覺提示，MozTW 討論區之前有人提過，目前沒人動手，我也很想要這個功能 :/
10. 減弱搜尋欄圖示的干擾，或者更準確點描述問題：「那個區域現在已經有星星、RSS icon、重讀、停止等各種顏色的圖示會出現，搜尋引擎的圖示則是另一種本身就五顏六色的干擾源」。不過個人覺得，現在 Fx 的搜尋欄已經是各家有此功能的瀏覽器中最好的一種了（我尤其不喜歡 Safari 的方式，原因同 Comment 5），接下來可以走的方向應該就只有與位址列合併了吧？
11. 在選單中增加縮放控制的介面元素，類似 Google Chrome 現在的作法。討論中，我不是很喜歡 Google Chrome 7 dev 實做選單中多重控制項的方法，尤其 keyboard inaccessible、and no tooltips 這些小細節。
12. 「應用程式分頁」中的外部連結，應該開在新分頁裡。可以來討論「什麼叫做外部連結」 XD
13. 應用程式分頁隱藏瀏覽工具列等元素。好處：很多 Web 應用程式確實不需要瀏覽器內建的導覽列。 壞處：但，有的需要啊！又，「外部連結」的 Bug 裡有人提到，這會讓辨識釣魚網站變得比較困難。應該是不用期待 Firefox 4 會有這個。
14. 多重選取分頁，又一個邁向提姆所謂「Firefox OS」的東西？

因為我也沒有每個 bug 都點進去看，所以先紀錄到這裡吧。有興趣的可以去看一下原文。其實整份清單還很長，如果你對相關的問題有興趣，可常回 Mozilla Wiki 上參考完整清單。

Mozilla 2010 年第一季網路現況統計

昨天（或說不久前）Mozilla 發布了 2010 年第一季的網路現況統計報告，當然內容大部分與 Firefox 有關、即便無關也是以 Firefox 蒐集的，必然有所限制、但仍可參考。內容要點，茲列如下：

佔有率

• 經由很多網站來的綜合評比，Firefox 今年首季的全球瀏覽器市場佔有率約為 30%
• 亞洲區約為 26.6%，而歐洲區毫無意外以 39.2% 拿下第一名 -- 扣掉南極洲（80%）的話 :P
• Fx 佔有率最大幅成長的地區為義大利
• 關於佔有率，我隨後將另寫一篇來說明一下自己的看法

使用人數

• 最多的還是美國
• 俄羅斯過去一季的使用者人數成長了 20%，嘖嘖。「巧合」的是，Mozilla 基金會的主席 Mitchell Backer 訪問俄羅斯時，Firefox 下載量一時大增。

以美國人來說，哪裡的人們最早起工作？

用瀏覽器開啟時間來算，夏威夷人最早起（或者最宅、宅到早上起來第一件事情是開瀏覽器上網），最晚的是紐約。但我個人覺得這個統計方法還蠻有爭議的 :P

哪裡人最愛妝點、自訂自己的瀏覽器？

• 要妝點，最輕鬆愉快的方法是 Firefox 3.6 內建的 Personas。單以此來看，南美洲的人最愛妝點（超過 20% 的 Firefox 3.6 使用者用了 Personas）、非洲（低於 15%）最不愛。
• 又或者用使用 1 個以上的套件來算，這時亞洲人反而是套件的高度使用族群，有接近 2% 的 Firefox 3.6 使用者使用套件，成為第一名 -- 還是一樣，扣掉南極洲（超過 4%）的話 XD
• 超過 4% 是什麼意思？南極上面只有大概 1000 個人，而一月起的套件下載量為 538 次。

使用者通常都開幾個分頁？

• TestPilot 日前對上萬名志願參與者做的調查結果顯示，大致上一次約開啟 2 到 3 個分頁左右。
• 這個調查中的最高紀錄是平均 675.6 個！
• BlueT 應該沒有來得及參加這次的調查，有興趣參加日後調查、不花腦筋就可協助 Mozilla 改善易用性的各位，別忘了去下載 TestPilot！

詳情

這份報告的簡報以及圖表可以在 Mozilla Metrics 下載。

Native Personas in Firefox 3.6

Information and code example are mainly come from Dao's article.

Light-wight theme (aka. native Personas) has landed on trunk. If you are using a recent nightly build of Firefox, just click the image below and press "Allow" on information bar shows up.

Any site can provide themes for visitors, please check the source code in this blog post. If you wanna preview the theme just like what you can with Personas, you have to add the site's URL in Allowed Sites list (the Exceptions… button in Preference > Security,) which is "blog.bobchao.net" in this case.

So how to uninstall the installed themes? Just like what you did from Firefox 1.0, check the Theme Manager in Tools > Add-ons.

---

練習寫英文的分隔線

---

Firefox 3.6 最新的 Trunk 已經把原生的「輕量佈景主題」功能 (就是 Personas 啦) 加進去了，如果你剛巧就在使用最近的 nightly，點選下面這張圖片、然後按下訊息列的「允許」試試。

任何網站都可以提供佈景主題給人裝 (設計師福音啊)，程式碼也簡單到炸開、看這篇文的原始碼就行。為了安全起見，如果你也想跟在 getpersonas 一樣、擁有預覽佈景的功能，那得先把該網站加入允許網站清單中 (偏好設定 > 安全 裡的「例外網站」給他按下去)。例如你把 blog.bobchao.net 加進去，就可以看到我以後提供的佈景預覽… 所以快加吧 XD

那裝了的佈景怎麼刪掉？就去「工具 > 附加元件」裡的佈景主題刪囉。(BTW，我順手測試一下：用 Zotero 儲存這篇網誌應該可以嵌入 CC 資訊，但不是正規的 ccREL)

姓名標示，要標什麼？ 法律嚴肅版

之前曾寫過姓名標示，要標什麼？要標哪裡？一文，大概說明我個人看法。其實 CC 授權條款裡面也有明確告訴你要標哪些東西，我們以 3.0 預演版的條文來說明一下。首先是 4. 限制的 (a)：

您必須在您散布或公開演播的每份重製物上，附上本授權條款複本或「統一資源識別符」(Uniform Resource Identifier) …… 保留所有與本授權條款有關的注意事項以及免除保證責任聲明

所以這邊就有兩個：授權條款的複本或 URI (粗略想成是授權條款的網址吧)，與保留授權條款有關的注意事項及免除保證責任聲明 (原來有的請別刪，原來沒的也不用加)。

接著是 4(d)，這邊很多一段段來看：

(i) 若有提供原始著作人姓名（或筆名），則您應提供之，且（或）若原始著作人及（或）授權人，在授權人的著作權聲明、使用條款或藉由其他合理方式指定第三人（例如，贊助機構、出版者、期刊）為姓名標示的對象（「姓名標示對象」），則您應提供該第三人的姓名；

簡單講就是作者指定的名稱，看是本名、筆名或其他單位 (例如贊助商、公司等) 的名稱。

(ii) 本著作名稱；(iii) 在合理實際可行的範圍內，授權人所指定與本著作相關之統一資源識別符，除非該統一資源識別符並非連結至本著作的著作權聲明或與關於本著作之授權資訊；

作品名稱跟作者指定的網址。

在改用作品的情況，則必須註明在改用作品中使用了本著作（例如「原始著作人之本著作的法文譯本」、「依據原始著作人之原著作而改編的電影劇本」等）

如果是改用作品 (修改他人作品而成的新作品)，則要標註使用了哪些東西。不過有鑑於單一改用或彙編著作可能利用了太多作品、會標到天荒地老又耗費資源，這邊有個折衷方法：

在改用作品或彙編之情況，對改用作品或彙編全部有貢獻之作者若使用單一的表彰時，則本項所要求的表彰，最低程度應作為前述表彰之一部分，並至少與其他具有貢獻之作者的表彰方式同等明顯。

意思就是說只要所有被引用的作品標示的方式都一樣明顯的話，可以允許從上面那幾種標示方法裡選一部份使用即可，不需全放。

所以到底要放什麼？

整理一下，如果你只是單純引用、重製散佈別人的著作，那麼記得標上：

• 原始作品授權條款的複本或授權條款的 URI，以及
• 作者指定的標示名稱，沒指定就是放他本名或筆名。還有
• 作品名稱跟授權人指定的網址，沒指定的話可以不放網址。

也就是說，最少會放上授權條款 URI、作品名稱跟作者姓名。

如果這是改用或彙編(編輯)著作，那麼就是依據同樣的原則、把每個用到的作品都標上去。但只要所有用到的作品標示都一樣明顯，則作品名稱、作者姓名、授權人指定的網址這三者可以不用全放。(原著使用的授權條款要標示，不然會很混亂。)

其他可能？

4(a)裡其實有一個特殊的部份：

若您創作彙編，則應在收到任一授權人通知時，於實際可行的範圍內，依其要求移除彙編中，如第4條第(c)項所定對於原始著作人及／或其指定第三人的表彰。若您創作改用作品，則應在收到任一授權人通知時，於實際可行的範圍內，依其要求移除改用作品中，如第4條第(c)項所定對於原始著作人及／或其指定第三人的表彰。

意思就是說，在改用及彙編作品的情況下，原始作品授權人可以要求不要放他的名字 —— 除非已經獲得明示說可以不放，不然還是得先放上去喔！

@font-face 的問題？

之前就在實驗 @font-face 動態連結字型的問題，中文會遇到的問題比英文多，略列如下：

1. 中文字型檔好肥，多在 8MB 之譜，加上
2. 自由的字型也超少，還有
3. 據說 Safari 目前的實作方式是，等下載完動態連結字體才顯示出來，請想像使用者在開啟網頁、另外開小遊戲玩了十來分鐘以後終於看到網頁文字的感覺。

第二個問題無解，要就自己刻，不然就去談；第三個問題目前無解，我覺得這樣實作很詭異… 完全沒考慮字型檔很大的情況要怎樣讓使用者「接受」；第一個問題目前看起來解法有二：

• 用小一點的字體，例如 Droid Sans Fallback 大概是 3-4MB，「或許」你可以接受… 吧
• 使用unicode-range指定要下載的範圍，僅下載需要的文字
• 用不知道何年何月會出現的動態組字技術，不是為了拼罕見字、而是為了拼出字型

Safari 已經支援 unicode-range，所以至少我們有個瀏覽器可以試試看效果如何(我還沒試)。有另一個問題是，我怎麼知道我用了哪些字範圍要從哪裡到哪裡？unicode-range 規格上可以指定多個不連續範圍、而不是笨笨的只能從 A 到 B，所以我的想法是可以弄個小程式動態去掃自己網頁上的文字，指定一個最佳範圍給你。

不過這樣在 Safari 裡好像還會有一個要測試的問題：假設要這樣搞，我勢必要利用 JavaScript 在網頁讀取完畢後掃描網頁文章、escape 後判斷出範圍，接著也以 JavaScript 指定 @font-face 需下載範圍。但剛才說 Safari 要讀完字型才給看文字… 這樣會不會發生我指定完範圍結果套不上去的慘劇？

結果到最後好像還是要利用 Flash 或 圖片 (爆炸)

教育部資訊志工期初：CC 與 Web2.0, 其之 2

之前提過南區分享的事情，這回是中區的部份。簡報基本上沒有修，不過還是先在這裡集成一下資訊方便大夥下載：

創用 CC

• 投影片
• Share creative works / 分享創造力
• 創用 CC: 簡介、標示、應用實例 (原始檔下載)
• 影片：
• Jesus Christ the Musical (這段因為沒時間所以沒放)
• Wanna Work Together (這段因為沒時間所以沒放)
• 澳洲創用 CC 介紹 (中文配音/字幕)
• 網站：
• 創用 CC 搜尋
• 台灣創用 CC
• 教育部創用 CC 資訊網

雖然收到「時間不足、不講 Web 2.0」的指令，不過我仍「置入」了「我不要三聚氰胺」網站當作合作範例，略為提一下現在在網路上面彼此合作、以及與 CC 之間的關係及好處。如果想知道本來會講些什麼，可以參考個人式數位典藏上的資料。

無論如何希望大家還滿意

參加 Norton 的活動

這篇主要會是活動方式觀察與心得，軟體本身要看我女友跟我爸用得怎樣再說…

去參加了 Norton 防毒軟體的活動。我本來想，在這麼有趣的活動地點 (台北 101 的會議室)，贈送的東西感覺又砸了很多資源，「限 30 個人」或許只是種說法而已，但很不可思議的是居然真的只找 30 個人。嚴格說起來，這不該叫作 blogger 聚會，而是廠商找了一群 blogger 參加發表會 — 當然這沒什麼不好，與 blogger 多少該是能有更多的溝通。不過，就「加強溝通」這點，我其實不曉得該怎麼做。廠商與 blogger (即使是科技專業) 多少還是在兩個集團，怎麼先切入有效的話題呢？這或許是我之後會再多觀察的重點，以今天的交談水準來說、大致就是一般的 Social，少有涉入防毒軟體相關的主題。

我一直對 blogger 與公共關係、行銷效益等的事情很有興趣，也如同我在 Twitter 說的：「無法評量效果時我們並不曉得如何選擇，所以有時我也十分懷疑他們可以怎麼選擇。」所以這該怎麼評估呢？與工作人員提及，花這麼多資源請 30 個人來、雖說是有計劃地邀請但由於一些狀況而多少放了幾發「散彈槍」，就說他打中 3 個好了，這 3 個人帶來的效益值不值這麼多資源呢？

對方給的答案倒也誠實 (這個自然，請見後方利益揭露)，說賽門鐵克這回鐵了心，在全球都有辦類似的聚會、而且還只是個開端。看來，他們想建立長期關係，那麼這「值不值」或許也不是那麼快可以蓋棺論定的。

雖然在原先的活動邀請函跟報名網站介紹處中都提到會有Anti-Virus Girl 勁歌熱舞，不過會場唯一穿著比較像 Show Girl 的也僅是負責拍照而已 — 是為參加者拍照，不是合照。舞蹈把防毒殺毒這件事情給具像化了，多少也帶來了娛樂，不過我個人是覺得真的有娛樂效果的是「神祕光速遊戲」，用快速秀過的物體讓大家猜的，還不錯、我本來在看一些文章也被吸引得抬起頭來。

對我來說會後跟強者我同學聊天是比較有收穫的事情，報到台的小姐蠻可愛而且我都有握到手 (因為我是幸運兒…)

---

不過原先說的空姐服到哪裡去了？ XD 這我不是很在意，只是說了怎麼沒做呢 XDD

---

關於這篇的利益揭露：強者我同學是這家公關公司的職員，我們高中起關係還不錯。

Wikidot 吃 HEMiDEMi RSS 時的標題重複問題

Quick Note: 最近在弄三聚氰胺相關網站，採用我的愛用品 Wikidot。要以內建 Feed 模組嵌入 HEMiDEMi 共享書籤 RSS 時一直出現重複標題的問題，例如

司法部"有奶便是娘" | 香港獨立媒體

會顯示為

司法部"有奶便是娘" | 香港獨立媒體司法部"有奶便是娘" | 香港獨立媒體

本來嫌沒什麼時間處理，也就放著；剛剛花了一點時間看 HEMiDEMi RSS 的原始碼，發現是 Wikidot 模組的問題。HEMiDEMi RSS 的 item 長這樣：

<item>
 <title>專家與政策 - 沙米家</title>
 <description>(...描述太長略過...)</description>
 <pubDate>Wed, 01 Oct 2008 04:57:57 +0000</pubDate>
 <image>
  <url>http://www.hemidemi.com/image/bookmark/157/865693.png</url>
  <title>專家與政策 - 沙米家</title>
  <width>100</width>
  <height>75</height>
 </image>
 <guid>http://blog.roodo.com/ifan1976/archives/7271423.html</guid>
 <link>http://blog.roodo.com/ifan1976/archives/7271423.html</link>
 <dc:creator>annpo</dc:creator>
</item>

所以，由於 image 中也有個 title，Wikidot 就笨笨地把兩者都抓出來了，也就造成了標題重複的問題。繞過這問題並不難，刪掉 image 標籤就可以了，我是丟進 FeedBurner 燒成標準 RSS 1.0、在保留 dc:creator 的情形下刪掉 image。

OLPC 筆記：中文篇

因為某些因素，我又跟 OLPC 結緣了，而且還做了從前的趙柏強絕無可能做的一件事情：花了USD$400 買了一台... 為此，我被女友足足念了一個多小時。

其實會買這台決非偶然，甚至幾天前把玩蕭老師買的機器時，都還有點後悔沒有參加 G1G1 Project。不過，價錢是挺偶然的 orz，有興趣捐助的請連絡我，或者提供講師費讓我去介紹 Firefox 也行啦 XD

無論如何現在我有一台在手上了，要先解決的問題就是中文。OLPC 現在的中文相關問題主要由 YuanChao 前輩在處理，他也寫了篇文章幫助初上手者解決中文問題。為了方便，我把一些要點紀錄如下：

閱讀中文

閱讀中文本身要解決的只有字型問題，如果你用的是模擬器、那麼裝什麼字型其實不太有差；但對於實體 XO 來說、我覺得文泉驛正黑體還不錯，至少筆劃較粗、看起來舒服些。如果你有買 Windows Vista、微軟正黑體應該也是不壞的選擇。

以文泉驛來說，可以下載給 Fedora 7 i386 的 RPM 檔案，對我這種初學者比較簡單。

下載字型檔案時，內建的 Web Activity 並不方便，比較好的方式或許還是先拿其他電腦下載、然後再以 USB 隨身碟傳到 XO 裡。在 XO 中，可以直接用 Jounal 檢視USB/SD card 裝置內的檔案，而如果是字型檔則比較建議用命令列前往 /media/ 目錄查閱。

cd /media/{隨身碟USB代號}

又或者你可以用 wget 來抓，都行，我個人偏愛圖形介面 ^^;

無論要裝的是那種字型，勢必要到 Terminal 介面以命令列處理。你可以使用 Terminal Activity，接著安裝字型：

$ su
$ rpm -vi {rpm 檔案路徑及檔名}

那個... 老手此時應該笑了出來，不過我老記不得安裝 rpm 的指令，讓我做點小抄吧 XD

安裝完以後離開 Terminal，此時應該已經具備檢視中文的能力了，你可以開 Web Activity 隨便找個中文網頁來看。

輸入中文

直接下載 Yuan Chao 提供的 GCIN RPM (beta)來裝就可以了(方式同上)，裝完以後按 Ctrl-Space 可以切換。XO 作業系統裡目前沒有 always visiable 的 System tray，所以也無從顯示輸入法狀態，小有麻煩，但依然堪用。

這篇文章整個是在 XO 上面打完的，應該就是最好的實證啦！(我有外接鍵盤啦 XD)

介面中文

由於 Yuan Chao 等人的努力，現在新版的作業系統裡已經內建一小部份的中文翻譯。你可以在 Terminal 裡輸入這樣的字串後重新啟動 Sugar 介面 (Ctrl-Alt-Erase) 來切換語系：

sugar-control-panel -s language Chinese/Taiwan

如你所見，還有不少部份未能翻譯完全，其中有些是因為翻譯的機制還沒做好、另外當然也有人力問題。協助翻譯其實相當簡單，即便毫無技術背景也能幫忙，請參考我翻譯的一份簡報：用Pootle 翻譯 OLPC 專案、能快速教你如何為這個教育專案貢獻心力。

如果想測試目前最新的翻譯狀況，得自己下載翻譯系統上的 PO 檔回來處理，這部份請參考 OLPC Wiki 上的文章。(Yuan 其實有給我一份他工作用的打包版，不過沒先問過、我就先不放出來了。原理跟翻譯網站是一樣的，只是他寫好了 shell script、會快一些。)

所以，目前我的 XO 介面是這個樣子...

雖然台灣不是 OLPC 的目標族群、中國又不買單，不過隨著專案目標的變化、這台小電腦日後也有機會進入已開發國家裡資源較缺乏的地方。即便你沒興趣幫忙，多認識一下這個專案也是不錯的，它的價值並不僅在於其「低價」的部份。

在規劃中我還會寫幾篇紀錄，但一如往常、我規劃的文章常常都因作者冨奸化導致斷頭，所以有興趣的朋友、給點 Feedback、盯我一下吧？

也可參考：Traditional Chinese - OLPC Wiki

Twitter: 下一位頁！

幾次變動之後，從 Twitter 網站介面上你已經無法「翻」到第十頁之後眾友的碎念語句，不過重度使用者都知道 Twitter 可以改網址後面的數字繼續翻。要方便地處理這件事情有很多方法，甚至 Firefox 也有這類可以「幫你改網址數字」的套件 (以前我常拿來抓漫畫...)。不過如果你只需要翻頁，那麼把這個連結 T:下一頁 設成書籤吧。裡面的程式碼長這樣：

javascript:function%20BC_TP(){var%20str%20=%20location.href;if%20(str.indexOf("page=")<0)%20{return%20location.href+%20"?page=2";}var%20%20cpnum,%20pd,%20p%20=%20str.indexOf("&",%20str.indexOf("page="));cpnum%20=%20parseInt(str.substr(str.indexOf("page=")+5,%20((p>0)?%20p:%20str.length)));return%20str.replace("page="+cpnum,%20"page="+(cpnum+1));}%20location.href%20=%20BC_TP();

這樣可以幹嘛？這樣以後按那個書籤，便可以翻下一頁了。(所以最好是放在書籤工具列/連結列上...) 請隨意使用。我只寫我自己的需求，所以也沒什麼好改進的... 程式並不難甚至有點笨，有心力想改善的話就自己拿去修吧。

Firefox 3: Offline Web Application

Firefox 3 實作了離線網際程式的東西，我對這個還蠻有興趣的，測試一下。雖然找到的資料都告訴我這樣就可以把檔案加進離線資源了：

<link rel="offline-resource" href="fx3offline.html" />

不過我怎麼搞也搞不定 orz，沒想太多，就用了另一種 JavaScript 的方式來放檔案：

navigator.offlineResources.add('http://leolo.cc/~bobchao/offline.jar');

把需要的檔案一一放好，這些檔案就會被加進離線資源裡，也就可以離線閱覽了。

另一個問題會是，網際程式如何知道使用者是否連線？這個問題，Firefox 利用「File > Work Offline」加上幾個新的事件、屬性來解決：

navigator.onLine

屬性，使用者在線上就是 true

offline / online

事件，在使用者上線、離線時觸發。

所以偵測離線、上線的程式碼可以是這樣：

function online_status(b_status){
   if (b_status) {
    //上線的動作
   } else {
    //離線的動作
   }
} 

window.onload = function (){
 online_status(navigator.onLine); //看你需不需要一開網頁就跑一次

 document.body.addEventListener("offline", function () {
  online_status(false);
 }, false);

 document.body.addEventListener("online", function () {
  online_status(true);
 }, false);
}

另外，我們可能還必須知道有多少資源可以用，或者以 JavaScript 新增/移除離線資源，方法我就不贅述了，請直接參考範例：

function show_resources(){
 var obj = navigator.offlineResources;
 
 if (obj.length == 0) {
  alert("目前沒有離線資源");
  return true;
 }
 
 var str = "<p>以下是可以離線閱覽的資源：</p><ul>";
 for (var i = 0; i < obj.length; i++){
  str += "<li>"+obj[i]+"</li>";
 }
 document.getElementById('status-output').innerHTML = (str+"</ul>");
 
 return true;
}

最後我還用了之前 Chris Double 實作離線 Zimbra 的技巧來放咱們可愛的小狐 -- Foxmosa，方法就是把該離線閱覽的東西全部包在 jar 裡一次放入離線資源，然後用從 Mozilla 時代就支援的 JAR Protocol 來叫用其中被壓縮的檔案。

jar:http://leolo.cc/~bobchao/offline.jar!/foxmosa.png

不過，由於之前發現的漏洞，Firefox 從 2.0.0.10 開始就對這種檔案比較小心、非得放在回傳時 Content-Type 是 application/java-archive 或 application/x-jar 的主機才能用，所以 Google Pages 又再度跟我們說了再見...

Anyways 提供一點範例跟心得讓有心人士實作參考囉！

Firefox 3: Web application as protocol handler

測試 Firefox 3: Web application as protocol handler，使用 Fx3 查閱測試網頁，照著步驟做即可。

要讓自己寫的 Web Application 處理協定，首先要把自己註冊為處理程式：

window.navigator.registerProtocolHandler('mailto', 'http://page.bobchao.net/webhandler?m=%s', 'Mail Handler Test');

你的程式要記得自己過濾掉協定的前置字串 (在本例中是「mailto: 」)，然後就可以取得使用者點選的協定網址。如果是在私人網路，那麼可能無效，因為目前 Fx 應該不是先在使用者這邊 cache 之後無聲無息地傳過去...

以 Wikidot 實踐中英對映站

心得分享。我已經不止一次提到 Wikidot 這個網站，這回要用一個搞不好會變成安全問題的特色來實踐一下中英文對映網站的功能。

創用 CC (我現在服務的單位) 將在明年一月舉辦「資訊時代之亞洲與公眾創用」國際研討會，這個研討會全程將用英文進行，所以網站一開始也全是英文；後來因為某些原因、我們還需要一個中文站，於是我又另外用 Wikidot 申請了一個。

問題來了，怎麼做出方便的中英文對照功能呢？我很想讓它像 Wikipedia 一樣、能自動連到某頁的其他語言版本，不過 Wikidot 好像沒有 (也應該不會有) 這樣的東西。一開始沒細細研究，就只粗淺地先放個連結、連到另一個語言版的首頁，不過這個想法我還沒有放棄、所以有先刻意地讓兩邊語言的網頁名稱「同步」。 (反正 Wikidot 也不能用中文網頁名稱 XDD) 這意思就是：「英文站的 program 一頁、其中文版亦名為 program。」 有了這樣的前提，其實剩下的對一般網頁來說就很簡單，只要寫個 JavaScript、讓連結連到不同 location.hostname 上的相同 pathname 網頁即可。

不過，這畢竟是用別人的服務，Wikidot 雖然可以插入 JavaScript，但限定使用某些服務的程式碼、其他一律不理，這麼一來我就沒辦法很方便地處理這個問題。好在，Wikidot 可以插入任何 iframe，這樣就容易啦！我上傳了一個檔案，重點內容如下：

<script type="text/javascript">
 window.onload = function (){
  var thelink = document.getElementById("tozh");
  thelink.href="http://meeting.creativecommons.org.tw"+window.top.location.pathname;
  thelink.target ="_top";
 }
</script>
... (中略)
<a href="http://acia2008.creativecommons.org.tw/" id="tozh">中文版</a>

程式的部份簡單到爆，只有兩件事情有另外考量：

1. 為了沒開 JavaScript 的朋友，不用假連結 (javascript:;)
2. 為了讓 Firefox 能以中鍵開新分頁，後來決定 JavaScript 的作用必須是替換連結的 href，而不是自己開啟網頁。

好，所以我只要把這玩意放進 nav:top 裡就可以在上方的導覽列中出現了：

[[embed]]
<iframe style="border: 0pt none ; margin: 0pt; padding: 0pt; overflow: hidden; width: 6em; height: 1.4em;" src="http://meeting.creativecommons.org.tw/local--files/nav:top/en-zh.htm"></iframe>
[[/embed]] 

這些 CSS 值基本上是測試來的... 反而是測這些花了比較多時間 =.= 另外在頁面自訂的 CSS 裡也還有相應的東西要加：

#top-bar p{
 margin: 0pt; padding: 0pt; display: inline; float: left;
}

上面那些主要是配合導覽列的樣式而寫。一切完成後就有個方便的切換連結可以用了，中文版網站也可以如法炮製一番。

---

說可能會有安全問題... mmm 我先來試試看好了，開同一個站上的網頁應該可以拐到瀏覽器記憶的密碼吧？