BuzzShare Inside

Chrome瀏覽器的ySlow ─ Speed Tracker

clay0529@gmail.com (clayliao) — Sat, 19 Dec 2009 06:35:00 +0000

ySlow與Page Speed是網頁前端工程師(Front End Engineer)調校網頁效能的常用工具，只可惜這兩者目前僅支援Firefox瀏覽器。也就是說，目前的網頁開發者很難掌握網頁在Chrome瀏覽器的效能表現。隨著2.0版的Google Web Toolkit(GWT)推出，Google也順勢推出了等同ySlow與Page Speed功能的Chrome extension: Speed Tracker。
Speed Tracker下載位址
1. 安裝Speed Tracker
使用Google Chrome Developer Channel將您的Chrome瀏覽器升級至開發者預覽版(Dev version)後，參考這篇文章安裝Speed Tracker。
2. 開啟Speed Tracker
安裝完成後，瀏覽器的右上角出現一個像計時器的綠色圖示，點選即可啟動Speed Tracker。

圖片來源
Speed Tracker的主畫面如下圖，以視覺化的方式呈現瀏覽器下載網頁時的詳細資訊，方便網頁開發者調校效能。詳細使用方法請參考官方說明Speed Tracer Examples。

圖片來源

延伸閱讀

Chrome的Firebug Lite外掛：安裝
 Chrome快速鍵一覽表
Google Chrome Developer Tools Tutorial

千呼萬喚使出來噗浪官方API釋出!

clay0529@gmail.com (clayliao) — Sun, 06 Dec 2009 10:00:00 +0000

看來得找時間修改pluNews的程式碼了。

Plurk API網址：http://www.plurk.com/API

噗浪官方提供了Python與Java兩種語言的API，註冊API key後即可開始使用。使用HTTP請求後返回編碼過的JSON資料，在Python環境下可使用simplejson decode，這點跟非官方API的做法非常相似。

以下是官方提供的Python sample:

延伸閱讀：

pluNews 噗新聞 ─ 噗浪即時新聞
 終於… Plurk API正式發布 by MMDays

[教學] 使用Google Code Hosting與Mercurial做版本控制

clay0529@gmail.com (clayliao) — Sat, 14 Nov 2009 11:53:00 +0000

http://code.google.com/p/yweatherapichecker/

第一次使用Google Code的Project Hosting平台，赫然發現它竟然支援Mercurial這個版本控制系統。於是在嚐鮮心理下，首次使用Mercurial，順便幫Y! 氣象台做了一個Google Code專案網站，免除了許多版本控制的麻煩。以下是順手做的筆記：

1. 在Google Code建立新的Project

http://code.google.com/hosting/ (Getting Started)

2. 安裝Mercurial

Google Code支援SVN以及Mercurial兩種版本控制系統，雖然SVN是大家比較熟悉的，但這裡將使用分散式的Mercurial。Windows的使用者可以安裝TortoiseHg進行以下的操作，Linux或Mac使用者只要將每個動作轉換成相對應的指令即可。

3. 建立Repository

在資料夾上按右鍵 –> TortoiseHg –> Create Repository Here
# hg init

4. 加入檔案

在檔案上按右鍵 –> TortoiseHg –> Add Files
hg add <file name>

5. 同步化版本

剛建立的新Google Code專案目前沒有任何檔案，所以必須先上傳一些檔案。

右鍵 –> TortoiseHg –> Synchronize，跳出同步化的視窗如下，填入新Google Code專案的網址後，將本機端的檔案上傳至遠端的Repositiry：
hg push https://example.com/yourrepository

如果不確定專案的Repository url，可以在Source頁面下找到：

接著跳出視窗要求輸入使用者名稱及密碼，密碼可以在Profile –> Settings頁面找到：

6. 大功告成

原本空蕩蕩的Repository終於有了檔案，接下來就可以同步檔案，進行版本控制囉!

延伸閱讀：

[Chrome外掛] Y! 氣象台 v1.3 新增使用者自定選項

clay0529@gmail.com (clayliao) — Sun, 01 Nov 2009 06:49:00 +0000

點此下載 Y! 氣象台1.3版 (安裝說明)

Y! 氣象台專案：http://code.google.com/p/yweatherapichecker/

新版特色：新增地區、語言與溫度單位自定選項

Y! 氣象台1.3版讓使用者可以自定各項偏好。使用滑鼠點選上圖紅色方框處，開啟[Y! 氣象台::偏好設定]頁面，您可以在這裡設定地區、語言以及溫度單位：

地區：提供全台各地、中國、亞洲與世界各國主要城市的氣象資訊。

語言：翻譯成您所偏好的語言，例如選擇[東京] –> [English]，則瀏覽器下方的工具列將顯示翻譯成英文的東京地區氣象，如下圖。

溫度單位：提供攝氏(°C)與華氏(°F)兩種單位，例如選擇[Paris] –> [Français] –> [華氏(°F)]，則出現翻譯成法文，以華氏為單位的巴黎氣象資訊，如下圖。

點此下載 Y! 氣象台1.3版 (安裝說明)

相關文章

[Facebook App] 社群音樂播放器 ─ 開心收音機

clay0529@gmail.com (clayliao) — Tue, 27 Oct 2009 14:22:00 +0000

開心收音機是今年參加Yahoo! Open Hack Day 2009的作品，基本的想法是把舊作hiMedia player加上社群功能，把會員與認證功能從Google轉換到Facebook，將它變成當紅的Facebook應用程式。如同舊文所述，開心收音機並沒有獲得現場評審的青睞，只能說Yahoo! Open Hack Day真是臥虎藏龍啊!

作品名稱：[Facebook App] 社群音樂播放器 ─ 開心收音機

http://apps.facebook.com/happy_radio/

DEMO

1. 聽歌不用mp3

使用開心收音機，聽歌再也不需要mp3了。只要搜尋歌名或歌手關鍵字，即可找到您想聽的音樂。喜歡的話，還可以收藏到播放清單，即使在不同電腦，也能聽相同的音樂!

2. 發現Facebook好友的音樂品味

聽膩自己的收藏的音樂嗎? 何不到處看看Facebook上的好友們都在聽些什麼? 也許他們有著令人出乎意料的音樂品味喔! 同樣的，遇到喜歡的歌曲也可以把它收藏起來。

除此之外，您還可以瀏覽本月、本週甚至當日的熱門音樂排行榜。同時開心收音機也能替您以歌找歌，找出類似曲風或這位歌手的其他音樂作品。準備好您的音樂清單後，可以選擇連續或隨機播放模式，一邊工作一邊收聽開心收音機當作背景音樂，完全不需動手。

3. 分享當下的感動

如果聽到了一首有Fu的歌，可以使用分享至塗鴉牆功能，將這首歌貼到您的Facebook塗鴉牆上與好友們分享此刻的感動。當然，過程中音樂是不會掃興中斷的。

使用技術

Programming Language： Python
Infrastructure： Google App Engine、Facebook
JavaScript Library：jQuery
Third party API：YouTube API、PyFacebook、Facebook JavaScript Client API

小結

開心收音機是一個社群化的音樂播放器。相對於只聽自己的曲目，我還蠻喜歡到處看朋友在聽什麼，經常會發現一些令人回味再三的老歌或平常不可能去搜尋的音樂類型，感覺「聽音樂」這件事因此變得有趣多了呢!

延伸閱讀

解決Flash遮住JavaScript特效的小技巧

clay0529@gmail.com (clayliao) — Mon, 26 Oct 2009 12:19:00 +0000

對許多Front-end工程師來說，同時在網頁處理Flash物件與JavaScript是很麻煩的一件事，例如Flash往往與JavaScript爭先恐後搏版面，遮住JavaScript的彈出視窗效果(如下圖)，此時就算把z-index參數加到破表都沒有辦法掙脫Flash的枷鎖。有些工程師可能使用iframe迂迴各個擊破，不過這裡要提供更簡單的方法讓JavaScript效果重現天日!

使用SWFObject嵌入Flash物件

為了解決這個問題，我們使用SWFObject而非<object>標籤來嵌入Flash物件，以插入一則YouTube影片為例，原本的程式碼如下：

   
<script type="text/javascript" src="swfobject.js"></script>    
<div id="ytapiplayer">    
You need Flash player 8+ and JavaScript enabled to view this video.    
</div>    
   
<script type="text/javascript">    
   
var params = { allowScriptAccess: "always" };    
var atts = { id: "myytplayer" };    
swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer",    
"ytapiplayer", "425", "356", "8", null, null, params, atts);    
   
</script>

但光這樣仍無法逼退頑強的Flash物件，如下圖：

再加上wmode參數加持，就可以輕鬆搞定：

   
<script type="text/javascript" src="swfobject.js"></script>    
<div id="ytapiplayer">    
You need Flash player 8+ and JavaScript enabled to view this video.    
</div>    
   
<script type="text/javascript">    
   
var params = { allowScriptAccess: "always", wmode: "transparent" };    
var atts = { id: "myytplayer" };    
swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer",    
"ytapiplayer", "425", "356", "8", null, null, params, atts);    
   
</script>

如此一來，JavaScript彈出效果終於重見光明：

很容易吧! 或許應該建議開心農場的開發團隊試一試：

延伸閱讀：

Yahoo! Open Hack Day 2009 作品整理

clay0529@gmail.com (clayliao) — Wed, 21 Oct 2009 13:17:00 +0000

週末參加了Yahoo!奇摩舉辦的Open Hack Day活動，雖然我們沒得獎，但整體說來現場的活動氣氛非常好，有無限的食物、遊戲與正妹陪著Hackers快快樂樂寫程式。第二天的作品發表會也很有意思(得獎名單)，這裡整理了我在網路上找到的作品，有興趣的人可以上去玩玩看。

2009/11/12 Update: 《2009 Yahoo!奇摩Open Hack Day得獎篇》 by YDN官方部落格

參賽作品

1. 開心收音機 (服務簡介)

http://apps.facebook.com/happy_radio/

開心收音機是我們隊的作品，基本上就是把hiMedia player加上社群功能，改寫成Facebook應用程式。後端採用YouTube當做音樂資料庫，從此聽歌不用下載mp3。哪天聽膩了自己的歌，可以去聽朋友收藏的歌，喜歡的話還可以把它們帶回家，加到自己的播放清單喔!

2. 我是專家 (XDite服務簡介、ihover)

http://imexpert.tw/

3. 旅伴篩選器2.0 (作者Blog)

http://2go2see.com/test/v02/index.php

4. 瘋狂醫院 (服務簡介)

5. StreetImage 2.0

http://www.streetimage.tw/

6. Wretch 大頭貼

http://wretch.ccn.tw/

7. 雅基百科 Judges Special Award!

http://yikipedia.net/

8. Social 2.0

http://www.ms.tku.edu.tw/imna/print.aspx

9. YusReader.com Judges Special Award!

http://yusreader.com/loginpage.php

10. WeeePhoto (服務簡介) Best Connected TV Award!

http://mbsapp.no-ip.org/weeephoto

11. UrBar beta (服務簡介)

12. My Social Album (尚未開放，服務簡介) Best Wretch Hack!

My Social Album

View more presentations from Geniusking.

13. isGoodJob (尚未開放，作者blog) Best Search Hack!

http://www.isgoodjob.com/

14. YA! Mail Best Mail Hack!

http://blog.hiiir.com/?p=126

15. Hacking the Router Honorable Mention!

http://josephj.com/entry.php?id=300

活動現場

親切且健談的無名美女群

最近在國外引起爭議的Hack girls熱舞表演，連Yahoo美國主管Chris Yeh都道歉了，明年大概不會再有了吧!?

隊員喝醉，不，是寫程式累倒了...

圖片來源

相關連結

官方噗浪帳號：openhacktaiwan
Taiwan Open Hack Day by Yahoo! Developer Network Blog
Open Hack Day：無名小站API最受歡迎 by ZDNet
[Open Hack Day餘波]台灣正妹熱舞遭砲轟 Yahoo美國出面道歉 by ZDNet
開發人員看Open Hack Day正妹熱舞：呈現台灣工程師文化 by ZDNet
網路開發飆創意「無名正妹隨你差遣」 by 中廣新聞網
讓正妹轟炸無名部落格 2009 Open Hack Day得獎名單揭曉 by Yahoo! News
Yahoo! Open Hack Day：社群服務開發受歡迎 by iThome
Open Hack Day 在地、社群應用火熱 by RUN!PC
Yahoo Open Hack Day 開始！ by 癮科技
前幾天辦的 Yahoo! Taiwan Hack Day by Gea-Suan Lin’s BLOG
Yahoo! open hack day by 紅色死神
Y! Open Hack 08 印象最深的作品 by 花水妹

如何解決GAE安裝過程中的error code 2908錯誤

clay0529@gmail.com (clayliao) — Wed, 14 Oct 2009 12:57:00 +0000

剛剛在Windows XP環境下把Google App Engine SDK升級至最新的1.2.6版，在安裝過程中竟跳出error code 2908的錯誤訊息。解決後簡單筆記如下。

解決步驟

1. 開啟登錄編輯程式(Registry Editor)

2. 直接搜尋機碼B3414A45B4B628042B8446B35265C1BC或者手動尋找其目錄：

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\
Installer\UserData\S-1-5-21-1123561945-1935655697-1060284298-1003\
Components\AD95649F068525549B26938D7D18FEA7

3. 刪除後，即可順利安裝Google App Engine SDK。

參考資料

Windows Installer Error 2908 when installing bulky setup projects

[Chrome外掛] Y! 氣象台 v1.2

clay0529@gmail.com (clayliao) — Wed, 07 Oct 2009 14:04:00 +0000

2009/11/01 Update: [Chrome外掛] Y! 氣象台 v1.3 新增使用者自定選項點此下載

點此下載 Y! 氣象台1.2版

自從Google Chrome瀏覽器升級至4.0以上版本後，原本運作正常的外掛Y! 氣象台 1.1版變得無法更新氣象資訊。為了相容最新版的瀏覽器，Y! 氣象台也升級至1.2版囉!

相較於舊版，Y! 氣象台1.2版修正了：

Chrome瀏覽器 4.0以上版本外掛連線問題。
中文亂碼問題。
變更為紫色的Yahoo! 小圖示。

安裝說明

1. 開啟Google Chrome瀏覽器，在網址列輸入chrome://extensions查看所有已安裝的外掛。若您已安裝舊版的Y! 氣象台，應該會看到以下畫面，若無則跳到步驟2：

2. 點此下載 Y! 氣象台1.2版，將y_weather.crx拖曳至Chrome瀏覽器畫面任一處，或使用Chrome開啟該外掛檔案後，出現儲存選項，點選[儲存]或[Save]。

註：若您的Chrome版本為3.x，需要加入--enable-extensions參數(設定教學)；4.x以上版本則已預設允許使用外掛。

3. 跳出視窗，詢問您是否要安裝此外掛。點選[安裝]或[Install]。

4. 安裝完畢，瀏覽器下方出現Yahoo! 所提供的氣象資訊。Yahoo! 氣象台會定時檢查並自動更新氣象資訊；點擊則預設開啟台灣的Yahoo! 氣象網頁。

相關文章：

Facebook應用程式開發教學 ─ GAE入門

clay0529@gmail.com (clayliao) — Tue, 06 Oct 2009 16:10:00 +0000

Google App Engine(簡稱GAE)是Google提供的雲端解決方案，本篇教學文章將示範如何使用GAE開發Facebook應用程式。接下來的範例程式將確認使用者是否登入，並抓出好友清單與小圖示。使用到的技術有Python語言、webapp framework與Django樣板引擎，並假設您已架設好GAE開發環境。

事前準備

基本應用程式設定

請依照以下兩篇文章登記與設定Facebook應用程式。需要注意的是，在GAE中我們將改用非官方的PyFacebook，並替換掉php範例程式。

Python 範例程式：index.py

import cgi    
import sys, os     
import wsgiref.handlers from google.appengine.ext import webapp     
from google.appengine.ext.webapp import template     
import facebook     
from facebook import FacebookError     
     
#使用自己的key and secret     
_FbApiKey = 'YOUR_FACEBOOK_API_KEY'     
_FbSecret = 'YOUR_FACEBOOK_SECRET'     
_DEBUG = True     
     
class BaseRequestHandler(webapp.RequestHandler):     
def render(self, template_name, template_values={}):     
values = {'request': self.request, }     
values.update(template_values)     
directory = os.path.dirname(__file__)     
path = os.path.join(directory, os.path.join('templates', template_name))     
self.response.out.write(template.render(path, values, debug=_DEBUG))     
     
class MainPage(BaseRequestHandler):     
def get(self):     
#確認使用者是否已經登入Facebook且已允許應用程式存取個人資訊，若無則導引至Facebook登入頁面     
fb = facebook.Facebook(_FbApiKey, _FbSecret)      
if fb.check_session(self.request) and fb.added:       
pass       
else:       
url = fb.get_add_url()       
self.response.out.write('<script language="javascript">top.location.href="' + url + '"</script>')       
return     
     
#取得所有朋友的ID     
friend_ids = fb.friends.get()     
#使用users.getInfo() 取得朋友資料。(範例只取出名字、uid與小圖示。)      
info = fb.users.getInfo(friend_ids, ['name', 'pic_square', 'uid'])     
self.render('index.html', {'info': info})     
     
def main():     
application = webapp.WSGIApplication( [('/', MainPage)], debug=_DEBUG)     
wsgiref.handlers.CGIHandler().run(application)     
     
if __name__ == "__main__":     
main()

樣版：templates/index.html

index.py將輸出結果至template資料夾下的index.html，接著使用Django樣板引擎的for迴圈印出所有Facebook朋友的圖像及名稱：

{% for friend in info %}    
<img src="{{friend.pic_square}}" id="{{ friend.uid }}" title="{{friend.name}}" />{{ friend.name }}     
{% endfor %}

大功告成

確定app.yaml等相關設定無誤後，您已經完成了第一個使用Google App Engine製作的Facebook應用程式囉!

延伸閱讀

[Facebook App] 社群音樂播放器 ─ 開心收音機

Facebook應用程式開發教學 ─ 入門篇(下)

clay0529@gmail.com (clayliao) — Mon, 28 Sep 2009 14:29:00 +0000

在上一篇文章Facebook應用程式開發教學 ─ 入門篇(上)我們已經在伺服器上deploy了範例程式，接下來的步驟就是讓Facebook知道這支程式的所在位置。

編輯應用程式設定

1. 在[我的應用程式] –> [編輯設定]頁面左邊欄，點選[畫布(Canvas)]。找到並輸入畫布頁面網址以及Canvas Callback URL兩欄。這裡要注意的是，畫布頁面網址欄位只能輸入小寫英文字母、'_'及'-'字元，不接受數字。Canvas Callback URL則是您程式所在位置的網址，例如：http://[yourdomain]/index.php，完成後[儲存變更]。

2. 若設定正確，則出現成功訊息：

3. 喝口水上個廁所，再次連結應用程式所在的網址，映入眼簾的是如此熟悉的畫面：

大功告成!

用力地按下[同意]後，畫面上出現了我們的第一支範例程式執行結果 ─ 列出使用者的25個朋友id。當然，Facebook應用程式的能耐可不僅止於此，更多的功能都寫在API裡，您可以在這個範例基礎上繼續補強並完成您的第一支Facebook應用程式。

附註：更多使用者資料詳見Users.getInfo。

補充：寫給Google App Engine(GAE)的開發者

雖然Facebook官方主要支援PHP版本的API，但對其他程式語言較拿手的開發者也可以到這裡尋找適合的非官方API。對Google App Engine情有獨鍾的開發者請使用支援Python的PyFacebook或其他Java APIs，經實做證明，GAE是可以拿來host Facebook應用程式的。另外提供一個實用的GAE小技巧：開發過程中，將[編輯設定]的Canvas Callback URL欄位中改為http://127.0.0.1:8080，直接連至自己的本機測試；待程式完成後再改為正確的網址即可，如此可大幅縮短開發時間喔!

延伸閱讀：

Facebook應用程式開發教學 ─ 入門篇(上)

clay0529@gmail.com (clayliao) — Sun, 27 Sep 2009 15:45:00 +0000

Facebook在台灣的熱度持續發燒，根據創市際ARO公佈的資料，Facebook的網路到達率在短短七個月內從不到一成(2009/03)大幅成長至四成五(2009/08)，甚至一舉超越Google，成為台灣排名第三大的網站，僅次於Yahoo!奇摩與無名小站。

Facebook成長如此迅速，很大的原因在於它提供了源源不絕的應用程式與小遊戲，讓人身不由己地黏在上面無法自拔。對開發者來說，Facebook也提供了十分親和的開發環境，能夠快速上手。只要具備基本程式能力，照著以下的步驟就能建立第一個Facebook應用程式喔!

事前準備

PHP開發環境
應用程式的Hosting環境

建立新的Fackbook應用程式

1. 開啟Facebook的開發者網頁http://www.facebook.com/developers/，登入後點選右上角的[Set Up New Application]，建立一個新的Facebook應用程式。

2. 替應用程式取一個名稱，同意使用條款後[儲存變更]。

3. 成功建立新的應用程式後，您會取得一組獨一無二的API金鑰與Application Secret。找到並點選下方的example code超連結，稍後我們將使用這段程式碼為例，建立第一個應用程式。

4. 複製範例程式碼並存檔為index.php。其中，特別注意下列兩行程式碼是否為自己的API金鑰與Application Secret：

$appapikey = 'YOUR APP API KEY';
$appsecret = 'YOUR APP SECRET';

5. 下載並解壓縮官方的PHP client 函式庫後，將index.php放到[your_location]\facebook-platform\php目錄中，如下圖：

註：熟悉PHP語法的開發者也可以修改require_once，自行更改目錄結構。

6. 將整個php資料夾deploy至您的伺服器。此時，若您在瀏覽器中直接開啟網址[your_hosting_location]/index.php，出現的竟然不是程式內容，而是導向Facebook並出現開發中的訊息，就表示您已正確地完成了上面的步驟，剩下幾個簡單設定，就可以完成我們的第一個Facebook應用程式了!

繼續閱讀：Facebook應用程式開發教學 ─ 入門篇(下)

延伸閱讀：

921十週年: 讓愛轉動整個地球

clay0529@gmail.com (clayliao) — Mon, 21 Sep 2009 00:14:00 +0000

圖片來源

轉眼間，十年過去了。

住在中部災區的人，大概永遠也忘不了地震發生時的驚恐。那一瞬間，即便是鋼筋水泥也顯得脆弱不堪，伴隨著瓷磚迸碎的聲音，大伙兒摸黑想辦法逃到空曠的地方避難；能收聽廣播的人告訴正在避難的鄰居，這次的地震好像很嚴重，到處都有災情陸續傳出。

由於大小餘震不斷，媒體教導民眾保持大門暢通，避免門因為餘震的擠壓變形而影響逃生，因此家家夜不閉戶；停電的夜晚，7-11的店員點著蠟燭替排隊的客人結帳，也沒傳出什麼竊案。原來災難現場與大同社會竟是如此接近。

《禮記·禮運》：“是故謀閉而不興，盜竊亂賊而不作，故外戶而不閉，是謂大同。”

地震發生後大約一周，為了安全起見，我們一家人都住在附近的黃昏市場裡。這段期間，每天都會聽到附近的哪棟大樓又倒了、搜救隊又挖出了幾具屍體這類的新聞，附近學校的體育館甚至成了安置屍體的臨時場所…此時，面對無情的災難，最奢侈的莫過於能平安與家人團聚了。

生命如此美好，還有什麼事情值得我們浪費時間抱怨呢?

圖片來源

Made In China 的開心農場

clay0529@gmail.com (clayliao) — Mon, 14 Sep 2009 00:05:00 +0000

幾個月前在電視上看到線上遊戲「戰錘Online」的電視廣告，對著重度遊戲玩家們打著「要嘛回去種田，要不就來戰錘」的宣傳口號。但最近在華人地區最火的Facebook小遊戲「開心農場」卻證明了，對輕度玩家來說，「種田」似乎還蠻吸引人的。

開心農場的熱門程度已不須贅述，但台灣的農友們卻少有人知道開心農場竟然是100% Made In China的遊戲。開心農場是由中國知名的第三方社群遊戲開發商「五分鐘 (Five Minutes)」所製作，2008年9月開始在人人網(原校內網)、51.com、騰訊QQ等中國知名的社交網站上線。對許多台灣遊戲玩家來說，開心農場很可能是多數人接觸到的第一款「中國製」線上遊戲。據報導，號稱開發成本不到十萬元的開心農場目前的營收已到達每月數百萬人民幣，主要來源收入是與QQ空間合作販賣虛擬道具，其次則是網路廣告。

既然是由中國開發商製作的遊戲，開心農場也免不了一番「山寨」爭議。在中國的一些論壇流傳著，開心農場很可能是以「The Farmer」為藍本開發製作的(山寨!?)。在The Farmer的遊戲設定中，農友初期擁有四塊田地，可以在上面種植作物並執行灌溉、施肥、除草、除蟲等動作。農忙之餘，也能養養雞增加收入或在商店從事交易。

即使兩款遊戲的元素極度雷同，但開心農場的創新之處在於，它在不錯的時間點搭上了Facebook順風車，並且在傳統的種田遊戲中加入社群元素。光是這點就足以讓遊戲性倍增，以低成本快速擴散並席捲廣大市場。

隨著開心農場以小搏大的成功模式，未來勢必會吸引更多眼紅的開發商循著類似的路徑，將既有的遊戲簡化後加入社群元素，在各大社交網路平台推出重新包裝的新版本。而我還蠻期待Facebook版本的戰略遊戲 Travian!

延伸閱讀：

開心農場的背後技術分享 by Levin’s Blog
Social Game的技術挑戰-支援千萬級DAU的Social Game技術構架
View more presentations from superlevin.
戰錘電視廣告：
免費HTML版戰略遊戲 – Travian by BuzzShare Inside
[Facebook] 開心農場新手入門圖解
專題－產業榮景背後的艱苦，還在打電視廣告？
Facebook應用台灣網友最愛開心農場 by ZDNet
月收入2.3億元！「開心農場」換新主人 by 聯合新聞網 2009/10

排列成北斗七星形狀的高第建築

clay0529@gmail.com (clayliao) — Sat, 05 Sep 2009 16:16:00 +0000

所以你們要這樣禱告：我們在天上的父，願人都尊祢的名為聖，願祢的國來臨，願你的旨意行在地上，如同行在天上。 ~ 《新約聖經馬太福音6:9 ~ 10》

小說《高第密碼》以巴塞隆納的知名建築師高第神秘離奇的死亡為故事背景，高第除了是位建築師外，同時也是古老宗教組織「摩利亞七騎士」的大宗師。摩利亞騎士世世代代保護著聖物，直到高第被謀殺後的八十年，聖物即將現世，古老的預言也將應驗。

為了避免聖物落到反派組織「梁拖會」的手中，似乎已經預知死亡的高第將聖物藏了起來，而找到聖物的線索就是高第所留下來的建築作品。

在故事的最後，書中提到高第的七項建築作品在地圖上依序排列成大熊星座的一部分(即北斗七星)，間接解開了「行在地上，如同行在天上」這個線索時，我對於事實感到十分好奇，於是在Google Map上標示出這些建築的位置。果真，雖然形狀不夠漂亮，但仍可隱約辨識出北斗七星的斗勺形狀：

以下為小說中出現的七項高第作品，在讀小說消遣之餘，不妨也順便認識這位舉世聞名的建築大師喔!

a 文生之家 Casa Vicens (1884-1885)，被列入世界遺產中

b 奎爾公園 Palau Güell (1900-1914)，被列入世界遺產中

c 聖家堂 Temple Expiatori de la Sagrada Família (1884 - )，被列入世界遺產中

d 採石場大宅 Casa Milà (La Pedrera) (1906-1912)，被列入世界遺產中

e 巴特由之家 Casa Batlló (1905 -1907)，被列入世界遺產中

f 卡佛之家 Casa Calvet (1899 -1904)

g 奎爾宮 Palau Güell (1885 - 1889)，被列入世界遺產中

資料與圖片來源：維基百科

道盡上班族心聲的KUSO歪歌《屁香》

clay0529@gmail.com (clayliao) — Sun, 30 Aug 2009 06:16:00 +0000

《屁香》是i’m mark有感於2008年金融海嘯的KUSO創作，改編自周杰倫的《稻香》，以幽默的改編歌詞道盡了不景氣下無奈上班族的心聲。此外，《屁香》的MV也有點Web2.0的味道。這些創意的MV是開放網友自由創作的，共有五種版本，有興趣的人可以到馬克的部落格看全部。

台灣的Google街景服務上路了!

clay0529@gmail.com (clayliao) — Tue, 18 Aug 2009 13:28:00 +0000

千呼萬喚，Google的街景(Street View)服務終於推出台灣本土版本，瀏覽效果令人驚艷(教學, 教學)，感覺很有成為導航軟體的潛力! 難能可貴的是，全球目前擁有這項服務的地區還不多，Google目前只在美國、日本、澳洲、歐洲與台灣等地推出(詳細資料)，且Google的街景拍攝車正在彰化、新竹、花蓮、高雄、屏東、台中、台南、北北基、台東、桃園與宜蘭等城市拍攝中，相信不久的將來，台灣的多數城市都能享受到這項服務。

Google拍攝街景的車子長相如下圖，請認明車頂上高聳的攝影機與前門的Google商標。

圖片來源：癮科技

延伸閱讀：

Google Maps開放台灣版街景地圖（Street View） by 重灌狂人
Google Maps Street View 台北街景地圖上線！上網遊覽台北101 by 電腦玩物
台北也有 Street View 了！ by 癮科技
2009/09/11 Update: Google街景車現身台中 by 高登工作室

pluNews 噗新聞 ─ 噗浪即時新聞

clay0529@gmail.com (clayliao) — Sun, 02 Aug 2009 16:46:00 +0000

近一兩年來，Twitter (推特) 與 Plurk (噗浪) 這類只能輸入140字的微網誌快速地風行全球。其中，在台灣吸引最多使用者的非噗浪莫屬，許多部落客、藝人、實體品牌甚至馬總統都即將加入噗浪的行列。由於噗浪上的訊息更新快速又有人情味，玩了一陣子後，它已經取代書籤網站，成了我每日資訊的重要來源之一。

在噗浪的朋友數目逐漸增加後，很多人都必須面對一個兩難的抉擇：噗浪上最適當的朋友數目應該是多少? 如果加入太多朋友，河道上將會塞滿無法消化的大量資訊；相對地，拒絕別人的盛情也可能漏掉許多有趣的訊息。

對此我則是打算依照噗浪創辦人Alvin Woon的建議，在私人的噗浪帳號維持約50-60個朋友。且為了有效率地掌握噗浪上的熱門訊息，另外再做一個噗浪的分類排行榜 ─ pluNews 噗新聞。如此一來，就能在保持個人河道暢通下，迅速了解噗浪上發生的大小事。

作品名稱：pluNews 噗新聞

http://www.plunews.com

主要功能描述

替每則噗浪討論串分類排序，從海量的噗友碎碎唸中過濾出有價值(或熱門)的即時資訊。

產生方式

註冊一個噗浪機器人帳號：plunews，追蹤上百名知名噗友(註)，並定時抓取這些帳號公開的「噗」(噗浪討論串)。
主觀地為每個噗友帳號分類。
使用自創的排序公式替每則「噗」算出分數，做為排序的基準。

使用技術

Programming Language： Python
Infrastructure： Google App Engine
Third party API：rlplurkapi(非官方API)

小結

pluNews 噗新聞希望從噗浪的大量資訊中，挖掘出大眾較感興趣的即時訊息。對於沒時間玩噗浪或正在觀望的人來說，噗新聞也能幫助他們迅速掌握噗浪上的熱門話題。

目前噗新聞這個新服務追蹤的噗友還不夠全面、分類也無法排除個人主觀意識。若您不希望自己的討論串出現在噗新聞上，請封鎖plunews這個帳號；若您不同意您在噗新聞上的分類，請在本文留言或來信告知，我將為您移除。

延伸閱讀：

在微網誌〈Microblogging〉興起的時代裡，你如何閱讀？ by MMDays
今日我最噗 - Plurktop 歡迎大家測試！ by MMDays
Twitter引爆即時搜尋風潮，但是目前的即時搜尋到底解決了什麼問題？ by MMDays
微網誌上訊息是如何發送的？以Twitter為例，一窺即時搜尋的可能性 by MMDays
推文網站退位，Social Filtering興起! by Mr PM
[噗浪觀察] 這半個月來最熱門推噗 by 黑貘來說
你可以不用 Twitter，但不可不知如何挖掘 Twitter by 電腦玩物

註：pluNews 噗新聞追蹤的噗浪帳號參考自：

[Chrome] 如何挖出外掛程式的原始碼

clay0529@gmail.com (clayliao) — Tue, 28 Jul 2009 16:35:00 +0000

這是我學習Chrome外掛程式的小撇步：向高手學習。

開發者寫好Chrome外掛後，會將原始碼打包成附檔名為.crx的Package。但說穿了，這個檔案其實是用大家很熟悉的zip格式壓縮的。也就是說，只要照著下面的步驟做，所有的Chrome外掛都是「Open Source」的喔!

Step 1: 下載任何一個Chrome外掛，這裡使用官方提供的Gmail Checker當做範例。點選Install後，瀏覽器會下載一個附檔名為gmail.crx的檔案。

Step2: 變更副檔名.crx為.zip。

Step 3: 解壓縮gmail.zip後，就可以看到Gmail Checker的原始檔了。

這個方法適用於任何一個Chrome外掛程式，以後看到有趣的外掛，不妨試著把它拆開來，研究這些神奇的功能究竟是如何實做的。得到高手的真傳與加持，開發技巧也會愈來愈純熟喔!

延伸閱讀：

[教學] 來幫Chrome瀏覽器寫支外掛程式吧!

花蓮小旅行

clay0529@gmail.com (clayliao) — Mon, 20 Jul 2009 14:40:00 +0000

信用卡帳單喚醒了上個月的花蓮小旅行記憶。這是個漫無目的，毫無規劃的放鬆之旅，繞過人多的熱門景點，輕鬆寫意的走馬看花，紓解平日累積的工作壓力。

松園別館

從市區前往七星潭的路上，意外發現了這個地方。松園別館建於二次大戰接近尾聲的1943年，原為日本軍官宿舍。戰後日軍撤出台灣，這裡也就逐漸成了一片荒煙漫草，傳說深夜時分有人曾經在此聽到阿兵哥行軍的聲音，或是女生的呻吟聲，這裡因此成了當地小有名氣的鬼屋。2003年8月，花蓮文化局大刀闊斧地整修了松園別館，使得荒廢數十年的松園別館重現真實樣貌。

下圖是日本軍官的交誼聽。說明牌上寫著，最後一位日本軍官在此上吊自殺。(謎之音：二次大戰電影裡的日本人不是都切腹或是拿手榴彈敲鋼盔自殺嗎? )

七星潭度假飯店

在花蓮酒廠吃點東西，趁著雨變大之前趕到了下榻的飯店。七星潭度假飯店價格很便宜，兩人房一晚不過NT$1,800，地中海風格的房間非常乾淨漂亮，早餐也很不錯吃。前門鄰近七星柴魚博物館，後門緊接七星潭濱海自行車道，飯店也提供免費的自行車租借服務。

免費咖啡廳旁的彩繪牆，一整個愜意的感覺。

七星潭濱海自行車道

對久未運動的都市上班族來說，七星潭濱海自行車道頗具挑戰性。才開始沒十分鐘，一座小山丘立馬對車友們來個下馬威。

四八高地

通過層層爬坡考驗後，終於爬上一個名為四八高地的小山丘。四八高地以其地勢標高48公尺為名，在這裡可以揮汗遠眺整個七星潭。

奇萊鼻燈塔

對很多人來說，在眾多台灣燈塔中能叫得出名字的，除了鵝鸞鼻燈塔外，大概只剩奇萊鼻燈塔了。每個人至少畢業旅行去過鵝鸞鼻看燈塔，但看過奇萊鼻燈塔的人可能不多，可是為什麼它的知名度這麼高呢? 回想對奇萊鼻的記憶，原來這一切的一切都來自國小時期高尚的集郵雅興。

印象中有段時間，親友們寄來的信封上貼的郵票都是奇萊鼻燈塔! 拿去學校也沒人要換，真的多到不想要了啊!

圖片來源

敵鹿柴

結束兒時的奇萊鼻回憶後，眼前赫然出現「敵鹿柴」! x的! 根據單兵戰鬥教練報告詞指導，敵鹿柴非常危險，此時應大聲覆頌報告詞並依要領確實通過。這段沿著軍營興建的自行車道，非常建議剛退伍的人過來試一試；你可以大口呼吸自由的空氣，看著旁邊一臉無奈，等著上陣打靶的國軍弟兄，此時爽度絕對破表! 路經此地請務必面帶優越感的微笑緩慢地通過。

觀星亭

東華大學

隔天騎車到東華大學，遇到青春的畢業生代表們正在預演隔天的畢業典禮。東華的校園非常大，頂著大太陽用雙腳硬逛很快就累了。此時發現了很棒的休息點，在書店旁的湖畔，附近還有同學彈鋼琴。悠揚的音符伴隨著開闊的湖光山色，很適合做為這次小旅行的終點。

Google作業系統將帶動網路應用軟體起飛

clay0529@gmail.com (clayliao) — Fri, 10 Jul 2009 14:29:00 +0000

圖片來源：engadget

最近網路上的熱門焦點大概都集中Google Chrome OS (或是戴爾牛排!?)。 Google美國時間7月7日在官方部落格上宣佈這個令人振奮的消息，預計今年(2009年)底釋出原始碼，明年(2010年)下半年推出搭載Google Chrome OS(作業系統)的小筆電。

Google Chrome OS瞄準的目標客戶是整天掛在網路上的重度使用者。這群人靠網路讀新聞、找資料、寫報告；用網路聽音樂、打電動、看網拍…對他們來說，網路斷線意義上跟停電沒兩樣，電腦開著也不曉得能做什麼。我猜這種人在寬頻網路普及的國家應該佔電腦用戶很大比例，像我就是其中一員(舉手)。

相較於Windows PC，Google Chrome OS的「概念」比較接近90年代甲骨文的Larry Ellison所提出的Network Computer(NC)，只不過當時的網路基礎建設不如今日成熟，導致NC甫一出手就被PC秒殺打掛，徒留壯志未籌身先死的遺憾。事隔十多年後的今天，Google再次端出具NC概念的Chrome OS挑戰微軟Windows作業系統霸主地位。我們無法預測Google是否能順利扭轉使用者習慣，但萬一Google的雲端作業系統成功了，可以肯定的是，能接收既有桌面軟體用戶的「網路應用軟體」絕對會成為投資者與軟體開發商注目的焦點。

試想，當使用者轉向Google Chrome OS後，很多原本熟悉的軟體都不能用了，他們急需新的替代軟體來完成原先的工作。以「聽音樂」這個大眾需求為例，轉換作業系統後，使用者可能無法順利聽音樂，因為熟悉的Windows Media Player、KMPlayer、Winamp等音樂播放軟體~~與P2P抓歌軟體~~都不能用了，此時像hiMedia player這麼好用(請容我老王賣瓜) 的網路音樂播放器就可能獲得網友們的青睞。

總之，Google Chrome OS可能促使「網路應用軟體」大鳴大放，大瀏覽器時代的來臨亦不遠矣。軟體工程師們，你準備好迎接新的挑戰了嗎?

延伸閱讀：

Introducing the Google Chrome OS Google 官方網站
Google Drops A Nuclear Bomb On Microsoft. And It’s Made of Chrome. by TechCrunch
【評論】Google Chrome OS －走向一個”夠用就好”的輕省作業系統新時代 by GURURU
Google Chrome OS ：瀏覽器多了個名字叫作業系統，網路是未來工作平台 by 電腦玩物
Google Chrome 作業系統蓄勢待發 by joaoko
Google宣布Chrome OS計畫明年與微軟正面交鋒 by iThome
Linux業者看Chrome OS：既合作又競爭 by ZDNet
Google推Chrome作業系統明年會有小筆電採用 by ZDNet
微軟「Gazelle」版瀏覽器要走不一樣的路 by ZDNet
Chrome：建立Google OS的基石
hiMedia player ─ 雲端上的媒體播放器
New Google Chrome OS Screenshots
Google Chrome OS 長這樣的話，你會愛用嗎？ by 重灌狂人

[Chrome外掛] Y! 氣象台 v1.1

clay0529@gmail.com (clayliao) — Wed, 01 Jul 2009 04:03:00 +0000

2009/11/01 Update: [Chrome外掛] Y! 氣象台 v1.3 新增使用者自定選項點此下載

2009/10/07 Update: [Chrome外掛] Y! 氣象台 v1.2 點此下載

Y! 氣象台繁體中文版 v1.1 點此下載 (安裝教學詳見舊文)

已安裝1.0版Y! 氣象台外掛的用戶不需要移除舊版，可直接安裝升級至1.1版。新版更新的部分有：

新增氣象小圖示(詳見上圖)。
刪除國家別(例如：TW)，僅顯示城市名稱，縮短外掛寬度。
加快更新頻率，從原先的每60分鐘自動更新縮短為30分鐘。

IE6，我也不想跟你玩了!

clay0529@gmail.com (clayliao) — Fri, 26 Jun 2009 12:09:00 +0000

被IE瀏覽器荼毒過的網頁工程師們對這幅諷刺插畫很有感覺吧!

「IE6，我也不想跟你玩了!」

相關連結：

圖片來源及創作過程：IE6 denial message for Momentile.com by John Martz
滾回去！IE6，我們不想跟你玩！ by jas9
Youtube / (Facebook / Twitter) 即將停止支援 IE6 by XDite

[Chrome外掛] Y! 氣象台 v1.0 (繁體中文版)

clay0529@gmail.com (clayliao) — Sat, 20 Jun 2009 11:31:00 +0000

2009/11/01 Update: [Chrome外掛] Y! 氣象台 v1.3 新增使用者自定選項點此下載

2009/10/07 Update: [Chrome外掛] Y! 氣象台 v1.2 點此下載

2009/07/01 update: [Chrome] Y! 氣象台 v1.1 點此下載

最近寫的小作品 ─ Google Chrome外掛： Y! 氣象台繁體中文版 v1.0 點此下載

功能描述

每隔一小時自動更新氣象資訊(預設地區為台北)，並顯示最新氣象資訊於瀏覽器的下方工具列。
使用Google AJAX Language API翻譯氣象資訊，預設語系為繁體中文。
點擊外掛後，連結至Yahoo! 氣象首頁，查詢更詳細的氣象資訊。

準備環境

1. 取得最新版本的Chrome瀏覽器

方法1: 下載安裝新版Chrome(Dev)。
方法2: 下載Google Chrome Channel Changer，將既有的Chrome升級至最新(Dev)版本(詳見舊文)。

2. 允許Chrome使用外掛程式

在Chrome捷徑圖示上 -> 右鍵 -> 內容，跳出對話視窗。將下列參數複製並貼到「目標」欄位的最後面：

--enable-extensions

安裝成功

點此安裝Yahoo! 氣象台外掛，重新啟動瀏覽器後即可在下方的工具列中看到Yahoo! 氣象台外掛囉!

解除安裝

如果需要解除安裝外掛，在Chrome瀏覽器網址列中輸入：

chrome://extensions/

Chrome會列出所有已安裝的外掛程式，按下[Uninstall]按鈕即可解除安裝Yahoo! 氣象台外掛。

Third Party APIs

小結

目前Y! 氣象台外掛只能查詢台北地區的氣象資訊，對居住在其他地區的人來說就不太方便。只是仍在發展中的Chrome瀏覽器還有許多功能尚未開放給外掛程式使用，多少讓創意受到限制。希望Chrome能加緊腳步，開放更多功能滿足開發者的需求。

撰寫Chrome外掛程式不需要學習新的技術，只要熟悉HTML、JavaScript等網頁前端技術就能快速上手。歡迎有興趣的人一起來開發更具創意的外掛，把大家的Chrome瀏覽器變得更加豐富吧!

Update: 亂碼問題

在某些環境下Y! 氣象台出現了中文亂碼。但我無法重建這個Bug，只能猜測是Chrome的預設編碼問題。請依照以下方法轉換語系為UTF-8：

1. 找到瀏覽器右上方的[工具]按鈕，再下拉選單中點選[選項]：

2. 捲軸下拉至最底，點選[變更字型及語言設定]：

3. 在[編碼方式]下拉選單中選擇[萬國碼 (Unicode) (UTF-8)]後，按下[OK]完成設定。重新啟動瀏覽器，確認解決亂碼問題。

Reference

[Chrome] Y! 氣象台 v1.1
[教學] 來幫Chrome瀏覽器寫支外掛程式吧!
官方網站的Sample Extensions
AniWeather Extension
Store information with the HTML5 storage and database APIs (soon)
samurize 碎碎念之七（天氣預報）

[Chrome] 讓hiMedia player更像軟體的方法

clay0529@gmail.com (clayliao) — Wed, 03 Jun 2009 16:00:00 +0000

感謝Nelson大以及撲浪友的推薦，hiMedia player上線的第二天的流量出乎意料地達到單日528人! 這裡再提供一個小技巧，只要跟著下列步驟操作，以後使用hiMedia player聽音樂不僅不需要輸入網址，用起來也更像桌面應用程式喔!

Step 1. 打開Google Chrome瀏覽器，在右上方的功能下拉選單中點選「建立應用程式捷徑」：

Step 2. 在彈出視窗中勾選您希望建立捷徑的位置後，按下[確定]：

Step 3. 回到桌面(或開始功能表/快速啟動列)，此時已成功建立hiMedia player捷徑：

Step 4. 雙擊捷徑圖示後，開啟畫面如下：

建立應用程式捷徑後，hiMedia player用起來就更方便了! 只要網路連線品質愈快愈穩定，有朝一日網路應用程式跟桌面軟體的界線可能會愈來愈模糊。

延伸閱讀：

Google Chrome 目前我這樣用：桌面端離線／在線網路應用程式 by 電腦玩物

BuzzShare Inside

Chrome瀏覽器的ySlow ─ Speed Tracker

千呼萬喚使出來 噗浪官方API釋出!

[教學] 使用Google Code Hosting與Mercurial做版本控制

[Chrome外掛] Y! 氣象台 v1.3 新增使用者自定選項

[Facebook App] 社群音樂播放器 ─ 開心收音機

解決Flash遮住JavaScript特效的小技巧

Yahoo! Open Hack Day 2009 作品整理

如何解決GAE安裝過程中的error code 2908錯誤

[Chrome外掛] Y! 氣象台 v1.2

Facebook應用程式開發教學 ─ GAE入門

Facebook應用程式開發教學 ─ 入門篇(下)

Facebook應用程式開發教學 ─ 入門篇(上)

921十週年: 讓愛轉動整個地球

Made In China 的開心農場

排列成北斗七星形狀的高第建築

道盡上班族心聲的KUSO歪歌《屁香》

台灣的Google街景服務上路了!

pluNews 噗新聞 ─ 噗浪即時新聞

[Chrome] 如何挖出外掛程式的原始碼

花蓮小旅行

Google作業系統將帶動網路應用軟體起飛

[Chrome外掛] Y! 氣象台 v1.1

IE6，我也不想跟你玩了!

[Chrome外掛] Y! 氣象台 v1.0 (繁體中文版)

[Chrome] 讓hiMedia player更像軟體的方法

千呼萬喚使出來噗浪官方API釋出!