最近 Chrome (dev channel) 及 WebKit 更新到最新版本之後，可以在開發者工具中看到一個「Audits」的功能：

這個部份可以進行類似之前提過在 Firefox 上的 PageSpeed 工具做的網頁速度分析，只要打開開發工具切換到這個 tab：

按下 Run 按鈕，它便會開始重新讀取網頁來分析結果，告訴你有什麼可以改進效能的地方：

看來對於網頁開發者而言，Chrome/WebKit 所提供的工具愈來愈完整了 :)

P.S. 如果有在使用 Chrome 瀏覽器的人，也可以試試 Pendule 這個擴充套件，相信對於開發網頁會很有幫助的！

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 的瀏覽器有：

1. Safari 4/Firefox3 預設就支援了 localStorage 以及 sessionStorage，但 Firefox 在無法設定 cookie 或 cookie 被關閉的狀態下（如：用 file:/// 存取檔案）則無法使用 sessionStorage。
2. Chrome/Chromium 4.x 目前預設只開啟 localStroage 的支援，而啟動時加上 --enable-session-storage 參數才會打開 sessionStorage 的支援。
3. 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

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

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

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

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

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

如果你要設計一個功能，是讓使用者可以立刻去拍個照片再拿到相片內容，這時候就要利用 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

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 版，詳細的 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

使用 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篇」的文章中作介紹。

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 Maps 雖然出來一段時間了，但我發現其實還有很多人不太瞭解怎麼運用 Google Maps，或者是使用它的 open API 來寫程式。於是就想弄一個網站－－Google Maps 101，來分享一些使用 Google Maps 的心得、應用、以及使用 Maps API 來寫程式的方法。

希望大家多多支持囉。

去年九月時 Google 發表了 Google Chrome 瀏覽器（當時的文章），不過當時只有釋出 Windows 版本，經過這一年多來的努力，今天總算由官方正式釋出了 Linux 版本以及 Mac 版本。除此之外，也推出了官方的 Chrome 擴充套件（extensions）的官方 gallery，讓你可以下載由各個開發者發佈到此的佈景主題以及擴充套件。

不過有點可惜的是，目前的 Mac 版本尚未把擴充套件的功能開啟（不過根據 Chromium 這個 open source 專案來看，功能是已經做了，只是支援還不是很完整），只能期待開發團隊早日開放囉。