至如ericsk者，國四無雙

WebStorage API 簡介

2010-02-04T08:03:05-08:00

詳細的規格可以參考 W3C 上的規格文件。而且不用懷疑，這個 IE8 有支援！

HTML5 中有一個 WebStorage API 的規格，它定義 user agent（client，也就是瀏覽器）提供一個可以儲存資料的機制，並且分為 sessionStorage 以及 localStorage 兩種儲存體。在支援 WebStorage API 規格的瀏覽器下，開發者便能使用 JavaScript 來操作這個 API，將資料（以字串儲存，正確地說是 DOMString）暫存在 user agent 端，以供之後存取使用。

WebStorage API 的使用

WebStorage API 的使用方式非常簡單，它是以 key-value 的型式來儲存資料的。以 localStorage 為例，它的存取方式可以是：
[code lang="javascript"]....
// 操作 counter 範例
var key = 'counter';
var counter = localStorage.getItem(key);
if (counter == null) {
counter = 0;
} else {
counter = parseInt(counter) + 1;
}
localStroage.setItem(key, counter);
[/code]
或是：
[code lang="javascript"]....
// 操作 counter 範例
var counter = localStorage.counter;
if (counter === undefined) {
counter = 0;
} else {
counter = parseInt(counter) + 1;
}
localStroage.counter = counter;
[/code]

在使用上有幾點注意事項：

若要檢查瀏覽器是否支援這個 API，可以檢查 window.localStorage 或 window.sessionStorage 是否為 undefined。
如果使用 getItem/setItem 的方式，當 getItem 而資料不存在時是傳回 null；如果用物件存取的方式，則是傳回 undefined。
storage 裡的資料會以字串的方式儲存，所以像此例中需要數字運算時就要注意（字串 + 1 是字串後面再接一個 1）。
雖然可以用物件存取的方式來取得資料，但是不能像一般 JavaScript object 那樣可以用 [key] 的方式存取，如果 key 是字串的話就用 getItem/setItem 的方式存取。
移除資料可以使用 localStorage.removeItem(key) 或是 localStorage.clear() 來操作

localStorage 與 sessionStorage 的差異

在 WebStorage API 的規格書裡定義了 user agent 可實作 localStorage 及 sessionStorage 兩種不同的 storage。其實差別很簡單，儲存在localStorage 的資料會永久（permanently）存在（除非使用者清除瀏覽器資料或是程式去 removeItem 或 clear；而 sessionStorage 的資料只能存活僅在視窗（或 tab）被關閉之前（refresh 並不會清掉），而且即便是同個 domain 但不同視窗是不會互相影響的（cookie 或 localStorage 就會有影響）。

不過 Firefox 有自己做一個 globalStorage，它的效果比較像 localStorage，不過就可以用 object 或 index 存取 member。詳情可參考 https://developer.mozilla.org/en/DOM/Storage。

目前號稱支援 WebStorage API 的瀏覽器有：

Safari 4/Firefox3 預設就支援了 localStorage 以及 sessionStorage，但 Firefox 在無法設定 cookie 或 cookie 被關閉的狀態下（如：用 file:/// 存取檔案）則無法使用 sessionStorage。
Chrome/Chromium 4.x 目前預設只開啟 localStroage 的支援，而啟動時加上 --enable-session-storage 參數才會打開 sessionStorage 的支援。
IE8 支援，而且有別於其它瀏覽器預設只能存 5MB 資料（Firefox 可以去 about:config 裡修改 dom.storage.default_quota 的值），IE8 可以儲存 10MB 的資料。

使用的限制及風險

WebStorage API 儲存的資料除了有上述的容量限制之外，每一個 storage 是綁定 domain name 的，所以雖然不同網站的 storage 不會互相影響，但如果在相同 domain 下就無可避免了。另外，也因為是綁定 domain name，如果 DNS 被汙染了也是很危險的說….

另外要比較小心的地方就是，不同瀏覽器在處理 WebStorage 的方式不同，也要小心內容被其它 application 存取的風險。

（其實風險都跟 cookie 很類似）

觀察或 debug

除了在開發者工具的 console 下可以直接看 localStorage 或是 sessionStorage 之外，Safari/Chrome 的開發者工具就有一個 tab 能夠直接看 Storage 的內容：

結論

WebStorage API 應該是 HTML5 中很廣受支援的規格（連 IE8 都支援了！），有機會的話可以好好利用一下 :D

從開發者角度看 Chrome 4 的推出

2010-01-25T18:50:43-08:00

一直用 dev channel 就會忘記原來 stable 還沒有上 4.x….

今天 Google 終於將 Chrome 瀏覽器的 stable branch 推到了 4.x 的版本。對一般使用者來說，最直接感受到的新特色就是支援了擴充套件（或是你要說外掛也行），還有書籤同步的功能。不過對於開發擴充套件、或是以 Chrome/Chromium 作為 RIA 平台的開發者，更重要的就是更多 HTML5 特色的支援。

HTML5 的新規格很多，光是 Chromium 列出來的工作項目就那麼長一串了。當然，這個「Web Platform」有更多的支援對開發者來說是好事（？）一件，就像 4.x 版的 Chromium/Chrome 所宣稱支援了：

WebStorage API: 你可以使用 JavaScript 來儲存一些資料（key-value型式）在瀏覽器端。像在 Chrome extension 中大家常拿來作 preferences 的儲存。
Web SQL Database: 簡單地說就是在瀏覽器端有個 sqlite 資料庫提供你透過 JavaScript 作一些 CRUD 的動作，例如把網站的資料備份、快取在瀏覽器端。
Web Sockets: 顧名思義，就是可以在 JavaScript 中建立一個 socket 到同 domain 的伺服器，過去大家要做一些 server-push 機制可能都是利用 Comet 或是各種奇技淫巧，現在可以直接開 socket 來用啦～（當然 web server 要支援，不過已經有寫好給 Apache 用的 pywebsocket 模組可以試用）
Application Cache: Web App 最常被人挑戰的問題就是－－離線時怎麼用 app？Application cache 就可以讓你把 web app 所需要的 html/css/js/imgs 等檔案放一份在瀏覽器端，當瀏覽器無法存取網路時，就可以利用這些檔案「把 app 執行起來」，搭配 Web SQL Database 效果好。
Notification API: 讓你可以利用使用者系統的 notification 方式進行 notify 的動作（Windows 下可能是在工作列右下角 pop-up 一個 notification window 之類的）

由這樣大步向 HTML5 的動作來看，Chrome/Chromium 很快就會成為另一個發展 RIA 的平台，這對今年底要推出的 Chrome OS Netbook 來說是很自然的發展，就看它什麼時候會蓋過 Flash-related 的超高市佔率，讓更多軟體開發商願意投入了！

[Android] 從相機拿照片的方式

2010-02-04T07:59:25-08:00

身為一個十分業餘的 android 開發者，這種秘技實在太多啦 :~~

這篇只是記錄一下自己實驗的結果，不太確定是不是最正規的作法。

如果你要設計一個功能，是讓使用者可以立刻去拍個照片再拿到相片內容，這時候就要利用 Intent 來作：

[code lang="java"]...
// 將畫面換到 Camera 拍照模式
Intent takeIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
startActivityForResult(takeIntent, REQ_TAKE_PICTURE);

...
// 當拍完照後，按下 OK 返回原來的 activity
@Override
protected void onActivityForResult(int requestCode, int resultCode, Intent data) {
super.onActivityForResult(requestCode, resultCode, data);

if (resultCode == RESULT_OK) {
switch (requestCode) {
case REQ_TAKE_PICTURE:
Bitmap bitmap = (Bitmap) data.getExtras().getParcelable("data");
....
}
}
}
[/code]

這樣作就可以拿到剛拍好，且縮圖過的照片。如果你想要拿到大張的圖片，將上面的程式碼稍作修改一下：
[code lang="java"]
Uri outputFileUri;
// 將畫面換到 Camera 拍照模式
Intent takeIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
// 產生 tmp file，記得程式要有 android.permission.WRITE_EXTERNAL_STORAGE 的權限
File tmpFile = new File(
Environment.getExternalStorageDirectory(),
System.currentTimeMillis() + ".jpg");
outputFileUri = Uri.fromFile(tmpFile);
takeIntent.putExtra(MediaStore.EXTRA_OUTPUT, outputFileUri);
startActivityForResult(takeIntent, REQ_TAKE_PICTURE);

.....
// onActivityForResult
case REQ_TAKE_PICTURE:
if (data == null) {
String filePath = outputFileUri.getPath();
....
}
[/code]

這個方法要注意的是要找時機將 tmp file 給刪掉 XD

升國四

2010-01-22T01:41:07-08:00

「諸將易得耳。至如信者，國士無雙。王必欲長王漢中，無所事信；必欲爭天下，非信無所與計事者。顧王策安所決耳。」摘自《史記淮陰候列傳》。

工作到現在也滿三年了，其實很訝異的是，工作之前我沒想過會做現在在做的事（web、mobile 開發），什麼 Web programming 的東西是從國防役上班第一天開始接觸（還記得報到第一天主管就叫我自己看 Java EE…），雖然我不是什麼專家、強者還是神人的，但我自認（自我感覺良好？）應該還算是個稱職的工程師吧….

人們常說要莫忘初衷，當初唸資訊系的抱負就是期望能用資訊科技改變世界，也希望能達到大一系主任對新生的我們訓話：「讓計算機變得更好用、更有用，幫助更多的人接觸計算機」的目標。我想工作三年只是個開始，希望自己能持續堅持這個信念，做出有貢獻的事。

我在碩士班畢業時有幸代表致詞，當時我說，我們唸的這間學校，社會對我們有期待，應該要能多做一些對社會有益、有貢獻的事

還有一年就結束國防役了，不知道這種感覺是不是跟職業選手取得 FA 的心情很像厚？

使用 Page Speed 工具作 Web 優化

2010-01-19T20:20:43-08:00

現在有工具可以幫忙分析了，要做 Web 優化的門檻已經沒有這麼高了！

Web 一直以來都是人們使用 Internet 的重心，隨著各式各樣的服務產生，一般人花在 web 上的時間又更多了，「web 讀取速度」漸漸成為無形的使用體驗一部份。試想，如果訪客在開你 web 的每一頁都要花過多時間等東西（圖片、CSS、JavaScript）下載，那這樣的使用體驗肯定不會太好。

所以網頁開發者便開始研究不少 High Performance Web Sites 的議題，或許也用過 Y!Slow 這個工具來作優化。但不知道是不是因為大家過去太不瞭解 web、瀏覽器，web 優化的技巧層出不窮，HPWS 的原作者甚至又寫了一本 Even Faster Web Sites，也就順勢地推出另一個分析工具－－Page Speed。

Page Speed 也是一個 firebug 的外掛，也就是說，要使用這個工具，你必須先裝好 Firefox 瀏覽器以及 firebug 這個附加元件。接著，當你在瀏覽網頁時，就可以開啟 firebug 面板，上頭就有了 Page Speed 的功能頁籤。

Page Speed 在 firebug 中的功能頁籤

Page Speed 的功能很多，要做 web 優化至少要會按下「Analyze Performance」的按鈕，讓這個工具去分析一下目前瀏覽的頁面效能表現如何，測量的標準便是 HPWS 及 EFWS 兩本書所使用的規則：

按下Analyze Performance

分析完的結果（慘不忍睹）

當工具完成分析後，它就會根據不同的規則來說明你的網站有哪些造成瀏覽器讀取效能下降，打開每個規則內的說明，也會有一些建議改進的方法，比方說當這工具覺得你的 CSS 檔案可以做一下壓縮減少傳輸量，它就會列出每個 CSS 有多少的進步空間：

Page Speed 的建議事項

如果你要接受它提供的建議，可以點下 minimized version 取得壓縮後的結果，再把它部署到你的網站中。

照這個工具所提供的功能，就算你不是很懂怎麼做 web 優化，但照著 Page Speed 的建議按表操課就可以做非常多的優化了！身為網站開發者，這是千萬不能不裝的工具啊～

jQuery 1.4 問世

2010-01-14T18:03:03-08:00

效能更佳、體積更小、功能更強的 jQuery！

廣受許多網頁前端工程師喜愛的 jQuery，今天釋出了 1.4 版，詳細的 release notes 可以看這裡。這次 jQuery 函式庫已經使用了 Google Closure compiler 壓縮過，號稱 minimize 過的函式庫體積更小，減少網路傳輸的時間。

如果你用 Google AJAX Library 來使用 jQuery 的話，以下的網址都已經是 1.4 版本了：
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js

認識 Google Friend Connect：使用篇

2010-01-10T23:04:36-08:00

過去有 OpenID，現在再加上 Facebook Connect 以及 Google Friend Connect，使用者以後還需要「註冊」帳號嗎？

使用 GFC 社交小工具

Google Friend Connect（以下用 GFC 稱之）其實不是新的東西，很多網站、部落格都有嵌入 GFC 所提供的 gadget（網頁小工具），像是我的部落格也弄了一個「社交工具列」（Social Bar），如果您到我部落格的網頁上（也就是非透過 RSS reader）瀏覽，便可發現下方有這樣的東西。

GFC 簡單地來說，它是幫助你的網站導入社交元素的工具，比方說，你在經營一個部落格，但是想要有「會員」（或者是粉絲）的架構融入其中，可能想做一些粉絲回饋活動、意見調查等等，直接與粉絲們進行互動。但是大多數人是使用 BSP 提供的 blog 服務，不可能自己改寫 blog 的程式碼（就算是自己架設 blog，也不見得會/有時間去改程式），在這樣的情況下，你大可以利用 GFC 將這些「社交」的元素導入至你的網站或 blog。

琳瑯滿目的社交小工具

單一身份、友誼關係趴趴走

至於使用 GFC 有什麼好處呢？除了你可以不必撰寫程式碼就能立即加入這些小工具之外，訪客、粉絲更可以直接使用 Google, twitter, Yahoo! 或是其它 OpenID 的身份「登入」到你的網站，完全沒有註冊帳號的壓力：（可參考 MMDays 的「你正在用什麼帳號？」一文）

訪客可以自由選擇用哪種帳號登入

而且只要是有使用 GFC 的網站，用了同樣的身份登入，就算在別的網站上，訪客之間的友誼關係也是可以帶著走，甚至是直接進行互動。如果用了 GFC 的網站加入了「Members」小工具，那麼訪客在登入的狀況下就可以看到會員列表以及好友名單：

可以直接對朋友傳遞訊息，就算他在別處使用 GFC 的網站登入也會收到訊息通知，這也說明了：只要同樣是使用 GFC 的網站A 與網站B，使用者X 與使用者Y 在網站A成為好友的同時，他們在網站B上的 GFC 也會是好友關係。

利用會員小工具的傳遞訊息功能

當然，如果訪客覺得你的網站很棒，想要邀請他的朋友來加入，GFC 也直接提供了邀請其它社交網路好友的功能：

邀請其它社交網路的好友

與會員互動

當你的網站、blog 導入了社交元素之後，你這個主人也是有機會直接與你的粉絲們進行互動，除了簡單地使用「Comments」、「Rating and reviews」元件讓彼此以留言互動之外，站長也可以利用 GFC 提供的「興趣」（Intrests）功能來進行問卷調查及投票，製作問卷的方式就與 Google Docs 的問卷功能相同，站長就可以蒐集到訪客、粉絲們的興趣，作為維護網站、blog 的參考項目。

設計問卷

這些資料最後就會匯集在你 GFC 的後台，可以直接進行分析，或是再將資料匯出來使用。這個部份可以觀看官方的介紹影片：

如果你想參考一個網站可以怎麼結合 GFC，可以看看官方的「Guitar Universe」範例。

接下來…

這篇文章主要是在說明，如何在不寫 code 的狀況下來運用 GFC。其實不只是非開發者可以運用 GFC，如果你開發的網站也導入了 GFC，你更可以不必自己開發會員系統，完全建構在 GFC 之上，再透過 Friend Connect API 來處理這些社交、會員資料，與原本的網站進行結合。關於這個部份，將會在「API篇」的文章中作介紹。

Pluroid: The Source is Opened NOW

2009-12-27T23:46:23-08:00

Pluroium is the open-sourced plurk client on Android.

Since I don’t have much time to enhance this application, I decide to open the source and contribute it as an open source project. If you want to become a committer, feel free send me an E-mail (ericsk A gmail). Let’s make the application more powerful (and useful).

[中文版]
簡單地說，就是我沒有太多時間能一直專注地寫 Android 應用程式，所以打算將它 open source，看能不能藉著大家的力量把它做得更好。即便沒有人 patch 它，如果能成為一個不錯的 reference 應該也是功德一件吧 XD

取得 Google Qualified JavaScript Maps Developer

2009-12-17T19:35:02-08:00

感謝認證路上幫忙我的人 :-)

由於擔任 Taipei GTUG organizer 的緣故，幾個月前得知有 Google Code – Developer Qualification 這個網站，當時看到僅有 Gadget Ads 及 JavaScript Maps API 可以「Get Qualified」（考資格考？），所以當然先選了 JS Maps API 來作測驗，一步步按照「資格考」的要求完成（有 assignment、reference 等），最後就是一個線上測驗（單選及複選題），基本上除了考 JS Maps API 的 API 涵義之外，也有考一些地理知識（如麥卡托投影法之類的），還有寫 Maps API 會遇到的一些實務問題（如：多少個 marker 會造成 performance 下降，或是在 IE6 出現 OOOO 訊息時該怎麼 debug…）。

很幸運地在測驗中通過門檻取得資格了 :) 真相在此：

如果有想要參加「資格考」的朋友，可以到 code.google.com/qualify 去看看喔 :)

Google Chrome Hackathon 2009 記事

2009-12-13T19:42:27-08:00

很有趣的 hackathon 經驗，希望以後能多辦幾場 :D

上個星期六，Taipei GTUG 試辦成立以來第一場「黑客鬆」（hackathon），主題是寫 Google Chrome 的 extensions，不得不說，找場地真的是辦活動最麻煩的事情，感謝 Richard Li 很辛苦地幫忙找合適的場地，以及負責聯絡的苦差事（所以送他一件 GTUG T-shirt 以茲鼓勵！），最後總算以還算合理的價格、設備充裕的政大公企中心作為活動場地。

當然，也要謝謝果子咖啡贊助了兩桶咖啡，讓大家一整天都可以提神振作！

開發者高手們齊聚一堂

基本上，活動開始之後狀況非常好，而且進行得十分順利（可見得宅宅開發者們都是很優質的公民），為了激勵大家的士氣，並且秉持著「取之於社群，用之於社群」的精神，我決定自掏腰包請大家吃 Pizza（黑客鬆怎麼可以少了吃吃喝喝？），雖然份量不多，但還是很感謝大家支持這個活動，希望以後會有贊助商 XDDD

一定要有吃吃喝喝才叫 Hackathon 啊！

活動真的是進行得十分順利，後來的作品發表時間也很精彩，這裡我作個簡單的介紹，完整的訊息要請大家注意活動網頁。

首先登場的是「強到靠北」的傑洛大大，他與Dannvix大大總共寫了兩個作品，一個是類似 instapaper 的 extension，並且還支援了華麗的 CSS 動畫效果：

另外則是 ChromEmoji這個由 Dannvix 大大所作的顏文字產生器，挺有趣的。

然而，雖然是 Chrome hackathon，身為 MozTW 社群的老大 — BobChao 也來參加了！他的作品延續了之前在 Firefox 上作的 JetQRCode，將它搬上 Chrome:

而 Ubuntu 社群的 Ijs，也為 Chrome 作了一個 Ubuntu 的佈景主題，不過她好像踩到不知道是誰的 bug，就是圖片不管放什麼顏色都會變成紫色（丁丁？），所以最後的成果是黑白主題：

還有，我的同事們，也是科技替代役的三位學弟新人，也做了一個很酷的 extension，它會去偵測、分析頁面中是否有「中文地址格式」的資料，並且在地址旁加上一個 Google Maps 按鈕，按下後會在視窗的右上角顯示 Google 地圖，相當地方便！

一直以來很支持 Taipei GTUG 活動的 cage，他們作了一個暫存網址到 Google Doc 並同步回 Chrome 的 extension，有點像是 instapapper 的功能：

我的另一位同事，也是小我一屆國防役的學弟 Vexed，他們這組則是做出同步不同電腦間 Chrome 所開啟的 tabs：

分析網頁格式的還有一組，就是 Jiing 這一組所做的 extension，這個 extension 會去分析網頁中是否有時間格式的資料，則可以立即將這個時間加入到 Google 日曆中，是個很方便的小工具：

再來是 Mac 電腦最一致，且密度最高的隊伍，更有趣的是他們是用 Dropbox 在作 code 的同步，阿修他們做出了一個 Plurk checker ，並且可以立即分享網頁、發送訊息的小工具:

因為 Chrome 支援了 HTML5，lifong 他將 HTML5 的特性發揮出來，利用 canvas 作出了一個可以任意 crop 網頁上圖片的小工具，這也讓他拿到了最佳人氣獎！

troie 這組做了一個可以即時看盤的小工具，並且結合了 Google 的搜尋，對於需要注意股市行情的人來說，應該很方便喔！

抱病參賽的 randylien 也是做了「read it later」的 extension：

看了這麼多有趣的 extensions，真希望他們趕快將細節修正後，發佈到官方的 gallery 中讓大家都玩玩看。最後獲獎的隊伍就是 crop image 及 show google maps 的兩隊。

以上的 extensions 若是發佈了，我會公佈於 hackathon 的活動頁面，大家有興趣的話可以去注意一下，玩玩看，希望下次 Taipei GTUG 打算辦 hackathon 活動時，有更多人願意支持喔 :)