Motudo Gadgets 小工具破500訂閱

註冊到 igoogle 目錄的小工具有圖有真相，內行的都知道，Motudo Gadget Google 小工具 - 減碳駕駛計算機小工具今天有 401，明天可能變成小于100，所以趕快照下來，記錄一下，沒想到這些冷門 gadget 也有人有興趣。

至于破 500 的算法是加上超過 100 的 3 個小工具而來，大約 600。

延伸

1. Motudo Gadget Google 小工具 - 減碳駕駛計算機小工具
2. Motudo Gadget Google 小工具 - 電力碳標籤小工具
3. Motudo Gadget Google 小工具 - 減碳飲料計算機小工具
4. 摩圖獨專案 - Motudo Project

代謝症候群問答小工具 Motudo SyndromeX QA Gadget

代謝癥候群問答小工具 Motudo SyndromeX QA Gadget 利用之前練習的 jQuery 功能延伸而成，這個小工具幫助你記住相關資訊，當然也可以分享給其他人。

另外關於高度問題需要說明一下，之前 Google gadget 都是利用 Require feature dynamic-height 來自動調整高度，但是代謝症候群問答小工具 Motudo SyndromeX QA Gadget里面的下方說明是利用 jQuery 動態加上去的，這種做法會導致 dynamic-height 無效，所以需要加上 height 300 來固定高度。

至于寬度盡量不要在 css 里面設定，留給 gadget 自己調整。

延伸：

1. 代謝症候群問答小工具 Motudo SyndromeX QA Gadget
2. jQueryQuiz Gadget 問答小工具
3. 國民健康局　－　代謝症候群
4. MOTUDO 網誌: 早死的腰圍 Belly Fat
5. MOTUDO 網誌: Metabolic Syndrome 代謝症候群
6. 摩圖獨專案 - Motudo Project
7. 註冊到 igoogle 目錄的小工具
   

jQueryQuiz Gadget 問答小工具

利用做過MOTUDO 網誌: jQuery 做簡易問答網頁的經驗，選幾個 jQuery 的簡單問題來做 jQueryQuiz Gadget 看看。

程式碼請參閱jquery-quiz-2009-0213.xml，可以放到 igoogle 看看，或是利用Add Gadget to Your Webpage來產生 javascript 程式碼，內嵌到網頁看看。

延伸

1. MOTUDO 網誌: jQuery 做簡易問答網頁
2. MOTUDO 網誌: 利用 jQuery 做網頁區塊折疊

jQuery 做簡易問答網頁

經過MOTUDO 網誌: 利用 jQuery 做網頁區塊折疊練習之後，將網頁區塊折起來可以用來幫忙做個簡易問答網頁應用。

程式碼請參閱 hello-survey-2009-0204.xml，checkAns 是個簡單的 jQuery extension，直接掛在 div.children().filter(":checkbox:enabled") 後面確認答案，正確答案需要在 checkbox 的 value 後面加上 YES 當作辨識之用。

如果需要看看操作的樣子，可以將 hello-survey-2009-0204.xml加入 igoogle就可以，要改一般 HTML 只要改用 $(document).ready() 方式就可以。

更新：使用 children 這類位置的 selector 需要注意可能會因為位置改變而失效，例如將 checkbox 放入 p 里面就可能發生這類問題，建議改為 mydiv.find(':checkbox') 比較可靠，因為 find 是按照條件找出 checkbox，與位置無關。

jQuery 的斑馬條紋做法

經過朋友提醒，jQuery 可以有不同的斑馬條紋做法，延續 MOTUDO 網誌: jQuery 整合 Blogger Data API 小工具 的內容來修改為 dev-motudo-zht-json-200901.xml，結果如上。

程式碼如下：

$("ul li:nth-child(even)").addClass("striped");

財務應用介面 Google Finance APIs

Google 提供許多應用介面可以拿來用，這次要測試一下的是 Google Finance 財務方面的應用，結果只是練習一下範例而已，想到轉成台灣的加權指數卻不支援而作罷。

測試的 finance-api-2008-1226.xml 其實和 Financial Gadgets - Google Finance APIs and Tools裡面的範例一樣，只是改成台積電的 ADR 看看而已，所以使用 NYSE:TSM，以後有支援台灣加權指數的話，可以用 TPE:2330 查。

一些想法

1. 目前查美國資料最方便。
2. 台灣加權指數只有網頁支援，應用程式介面 API 還沒支援。
   
3. 其他指數要看是否完全支援，有的網頁可以支援，但是 API 卻不一定可以。
4. 用 Google Gadget 的 Require finance 來寫蠻方便的，不過只支援放在 iGoogle，如果轉網頁嵌入就不支援。
   

延伸

1. Financial Gadgets - Google Finance APIs and Tools - Google Code
2. Google Finance Blog
3. Google Finance Blog: Taiwan Stock Exchange pricing data
4. TSM - Taiwan Semiconductor Mfg. Co. Ltd. (ADR) - Google Finance
5. 2330 - Taiwan Semiconductor Mfg. Co. Ltd. - Google Finance
6. Getting Started: Legacy Gadgets API - Gadgets - Google Code
7. Google Finance支援台灣股價查詢、股市走勢圖
8. 「Love to Play」 天生愛玩:Google Finance - 樂多日誌

減碳駕駛朋友小工具 Motudo EcoDriving2 Gadget

減碳駕駛朋友小工具 Motudo EcoDriving2 Friend Gadget 是 Motudo EcoDriving Gadget 減碳駕駛計算機小工具的改版，新加入下面幾個工具：

1. Google Chart API
   
2. jQuery
   

其實這個版本是去掉 OpenSocial 的 Motudo Gadget 減碳駕駛朋友版小工具，只是該工具因為 IE7 問題還沒有擺上去，細節參閱 OpenSocial 客製小工具 Custom Gadget，於是拿掉 Google Friend Connect 的部份，直接用小工具形式呈現。

下面就是剪貼網頁內嵌 script 的呈現結果。

延伸

1. Motudo Gadget Google 小工具 - 減碳駕駛朋友小工具
   
2. 摩圖獨專案 - Motudo Project
   
3. MOTUDO 網誌: 減碳駕駛 Green Driving
   
4. MOTUDO 網誌: 超里 Hypermiling
   

OpenSocial 客製小工具 Custom Gadget

延續之前的MOTUDO 網誌: Google Friend Connect 的客製小工具 Custom Gadget測試，這次結合 Motudo EcoDriving Gadget 減碳駕駛計算機小工具 的概念來做，目前結果放在 Motudo Gadget 減碳駕駛朋友版小工具。

這個小工具目前無法放在 motudo-zht.blogspot.com 這個網誌邊欄，主要是因為 IE7 會掛掉 Google Friend Connect 裡面的 Custom Gadget，這是 IE 的 Bug，可以在The Reference Frame: Fix: IE7 with Sitemeter: Operation aborted 或是 Question: Why do I receive an "Operation aborted" error message when you visit a Web page in Internet Explorer? 找到進一步的資訊。


在 Google 還沒修正如何繞過這個 IE7 問題之前，暫時將不考慮放置這 Motudo Google Gadget - 減碳駕駛朋友版小工具 到網誌邊欄裡面，由於每一個頁面都會載入邊欄，會因為 IE 的因素，將整個網站內容全擋掉了，要求客戶升級 IE8 或是使用 Firefox 等不衝突的瀏覽器也是種解決方案，不過對於網誌部落格這類不特定讀者的應用，這樣搞不太可能。

一開始以為是自己程式的關係，於是試著移除 jQuery / Chart API / OpenSocial 的部份，等到剩下 HelloWorld 還執行不出來的時候，大概問題非開發者這端可以解決，你可以利用最簡單的官方 XML 來自行產出這個 IE7 問題測試看看。

1. OpenSocial HelloWorld Gadget XML
2. Google Friend Connect - Social Gadgets - Custom Gadget
3. Blogger Edit Layout - Add JavaScript/HTML
4. IE7
   

另外使用 Gene: The Man and His Dream: Custom Gadgets for Google Friend Connect 也一樣有這個問題，另外有人提到Bug report: friend connect + Google maps crashes IE7 - Google Friend Connect Discussion 也是類似情形。

除了 IE7 的議題之外，幾個 OpenSocial 相關的想法記錄一下。

1. 還沒有即時的預覽工具，現在必須上網站或是 Blogger 的邊欄來測試，問題是有些 Google Gadget 會有暫存快取的議題，有時候在 Google Gadgets Editor 改完存檔，並不會馬上看到反應，可能要等一下。
2. 使用 Google Gadgets Editor 可以取巧解決快取議題，不斷 Save As 更新 Gadget XML 的檔名來做測試，因為檔名是新的，不會有快取問題，等到除錯完成在做出最後版本。只是這類免洗 XML 作法最後會變成很多，所以非必要還是少用。
   
3. iGoogle Sandbox 裡面有個社群網路，現 Google Friend Connect 也建構一個，同一個 Google Gadget XML 放不同 OpenSocial Container 容器，呈現的結果會不一樣。
4. 請先用假資料先把外觀跑出來，等到調到滿意後，然後再來上線測試。也就是 OpenSocial 的資料先用假的，上線再改過來就好。
5. 關於 Google Chart API 有個比例的地方 chxr 跟 chds 要一起調整，否則會有比例問題，如果是 0-100 就不用改了，用預設值就可以，進一步參考 How to use Google Charts API with 6 examples at psychopyko
   

延伸

1. Google Friend Connect Discussion
2. Gene: The Man and His Dream: Sorry for Custom Google Friend Connect Gadget
3. Gene: The Man and His Dream: Google Friend Connect Custom Gadget work on IE now....
4. OpenSocial Demo XML
5. OpenSocial API Specification - OpenSocial
6. Google Gadgets Editor
7. Google Friend Connect: Add social features to your site
8. dev-opensocial-2008-1208.xml
9. Google Chart API
10. Using Visualizations - Google Visualization API
11. 摩圖獨專案 - Motudo Project

Google Friend Connect 的客製小工具 Custom Gadget

Google Friend Connect: Add social features to your site 這個服務已經有很多地方介紹，對於申請或是使用請參閱下面延伸閱讀。

這裡要測試的是 Social Gadgets 頁面最下面的 Custom Gadget 部分，這個東西實在很像這個 Add Gadget to Your Webpage 服務，所以我用同一個 Motudo Gadget Google 小工具 - 減碳飲料計算機小工具 試看看裝到 Custom Gadget 的差異。

這裡試看看 profile mode，結果如上面的圖所展示。

由於舊的 Motudo Gadget Google 小工具 - 減碳飲料計算機小工具 並沒有動到 OpenSocial 的 API，不會跟原來的版本有所差異，真正要客製的部份是要引入 OpenSocial 才有差別，下次找機會再來測試。

目前看來加到 Blogger 文章裡面會有高度問題如上面的小工具呈現的效果，即使自行新增 CSS 高度屬性也是無效，也許是之前的 Gadget XML 有問題，沒有適當的調整高度，待測試。

另一個問題就是 BR 的標籤再度出現在 Script 裡面，造成 Google Friend Connect 無法使用，這個問題只會出現在文章裡面，如果放到邊欄，應該不會有自動斷行改 BR 的問題。

延伸

1. Motudo Gadget Google 小工具 - 減碳飲料計算機小工具
2. 海芋小站: Google Friend Connect 申請、設定與放置於網頁之實戰手札
3. 電腦玩物: Google Friend Connect 帶你進入巨型網路社交圈，歡迎大家來試玩
4. 只把Google Friend Connect「這樣用」真是暴殄天物！ (Mr. 6)

使用 Blogger Data API 連接遠端 AJAX 應用

常常會有一些小資料，不常異動的資料，如果可以結合 Blogger Data API，將資料放在部落格的某一筆文章裡面，然後如 MOTUDO 網誌: jQuery 整合 Blogger Data API 小工具一般用 alt=json-in-script來取用，就可以編修這些公開的小資料。

這樣作法的好處是直接使用現成 Google 服務組合即可，雖然是只有幾筆的簡單資料，偏偏有時候又需要改動，這樣的應用實在不需要使用到資料庫來使事情複雜化。

也許會有疑問既然資料異動不多，直接寫入 Google Gadgets Editor (GGE) 寫的程式碼裡面，不是一樣可以存起來。不過必須考慮到有些使用者不是開發者，改部落格文章可能比較容易一些，而且資料與程式分開也比較好維護，不過缺點就是其中一個掛了，這種服務模式就不行了。

要使用 Blogger Data API 來取得 JSON 需要知道所謂的 postID，這個數字大約十幾個字，目前的找法是先登入 Blogger 編輯之後，換成觀看頁面模式，這時候會出現一支筆在每篇文章的下面，取得該連結就可以得到所謂的 postID。

例如要取得 MOTUDO 網誌: jQuery 整合 Blogger Data API 小工具 這篇的內容，就需要 feeds/posts/default/postID 的 URI，然後加上 alt=json-in-script 就可取出內容來使用。不過這裡已經建立 MOTUDO 網誌: Json Data 20081205這個資料服務連結，所以測試是用新建立的資料集連結。

測試的 Google Gadgets XML 參閱 dev-motudo-zht-json-content-200812.xml，測試結果如圖展示，只是簡單的取出需要的 JSON 物件，然後取出屬性而已，下面為內嵌網頁可以參考。



延伸

1. jQuery 整合 Blogger Data API 小工具
2. jQuery 與 Google Gadgets 整合測試
3. Json Data 20081205

jQuery 整合 Blogger Data API 小工具

之前做了 MOTUDO 網誌: jQuery 與 Google Gadgets 整合測試，雖然 Google Gadgets 也有提供類似的功能，為何要用 jQuery 來寫？主要是移到別的地方，jQuery 還是可以用，脫離 Google Gadgets 的容器，例如 iGoogle 這類環境，很多東西都沒有用。

這次測試的連接這個網誌的功能，同樣的 Google Gadgets 也有提供相關的範例，可以直接改一下就可以用，參閱 dev-motudo-zht-blog-2008-12.xml，不過為了練習，所以使用 jQuery 連接 Google Blogger Data API 輸出的 JSON 格式。

該格式請參閱 Using JSON with Google Data APIs - Google Data APIs - Google Code 說明，注意的是一定要設 max-results 這參數，不然可能拉出幾百筆的資料，會讓客戶端等很久而且也沒有必要。

借用 Google Gadgets 的 UserPref 來做出設定功能，所以可改設為其他 xxx.blogspot.com 的網誌，使用於 getJSON 的連結如下。

http://"+prefs.getString("blogSite")+
"/feeds/posts/default?max-results=5&
alt=json-in-script&callback=?

另外輸出的 JSON 中要找出這個貼文的連結比較麻煩，連結放在 link 陣列之中，需要找那個有 alternate 屬性的才是，需要加個迴圈並判斷如下。

if(entry.link[k].rel=='alternate')
{alturl=entry.link[k].href;break;}

測試的 Google Gadgets XML 在 dev-motudo-zht-json-200812.xml ，另外嵌入到網頁的結果結果如下。



延伸

1. Google Gadgets Editor (GGE)
2. Google Data APIs Samples - Google Data APIs - Google Code
3. 使用 JSON 來讀取你的 Google Data
   
4. Using JSON with Google Data APIs - Google Data APIs - Google Code
5. Simple example of retrieving JSON feeds from Blogger Data API
6. dev-motudo-zht-blog-2008-12.xml

jQuery 與 Google Gadgets 整合測試

日前寫 MOTUDO 網誌: 八日小工具 Motudo Gadget Day8 的時候，利用的是 Google Gadgets Editor (GGE) 這個編輯器，這工具可以線上編輯觀察，實在很方便，不需要自己做好 Gadget XML 上傳到網頁空間。

雖然 Google Gadgets 有提供自己的 ajax 功能，不過這裡想要測試一下 jQuery 放在 Google Gadgets XML 裡面的效果。jQuery 一樣使用線上 AJAX Libraries API 提供的，所以不需要自己準備網頁空間。

首先要引入 jQuery ，需要先加入下面連結到 script 的 src 屬性裡面

http://www.google.com/jsapi

然後用 AJAX Libraries API 將 jQuery 載入使用。

google.load("jquery", "1");

使用的範例就是 AJAX Libraries API 裡面的範例，只是查詢改為 motudo 而已，另外載入後執行的 google.setOnLoadCallback 也需要換成 Google Gadgets 的 _IG_RegisterOnloadHandler 才會執行載入後的動作。

測試的結果可以參考 dev-jquery-ajax-200812.xml 或是下面網頁所展示。



延伸

1. jQuery: The Write Less, Do More, JavaScript Library
2. Google Gadgets
3. Getting Started: Legacy Gadgets API - Gadgets - Google Code
4. AJAX Libraries API
5. MOTUDO 網誌: 八日小工具 Motudo Gadget Day8
6. 摩圖獨專案 - Motudo Project

Motudo Gadgets 小工具嵌入 Gmail

因為 Gmail 英文版本提供加入小工具的測試功能，試用一番有幾點記錄。

1. 目前使用 Gadget XML 設定，所以無法提供設定功能，也就是說花樣不能換。不像 Blogger 提供 JavaScript 模式，可以直接嵌入設定後小工具。
2. 邊框有大小問題，如上圖可見，需要為這類窄框調整才不會出現捲動棒。
3. 大小的限制，只適合用來輔助 Gmail 的資訊提供，例如日曆小工具。對於比較複雜的互動應該不適合。
   

延伸

1. 摩圖獨專案 - Motudo Project
2. Motudo Gadget Google 小工具 - 八日小工具
3. Official Gmail Blog: New in Labs: Calendar and Docs gadgets

八日小工具新的一杯水樣式 Motudo Gadget Day8

Motudo Gadget Google 小工具 - 八日小工具 新增一杯水的樣式，改成使用 Google Gadgets Editor GGE 之後，比較小的簡單互動寫起來比較快也比較簡單，因為 GGE 提供保存 gadget xml 的功能，省去寄放這個 xml 的麻煩。

要貼到網頁可以到 Add Gadget to Your Webpage 這裡調整輸出的樣式。

網頁的樣子



延伸

1. Motudo Gadget Google 小工具 - 八日小工具
2. MOTUDO 網誌: 八日小工具 Motudo Gadget Day8
3. MOTUDO 網誌: 不甲意輸的感覺 Water

八日小工具 Motudo Gadget Day8

來自 Motudo Gadget Google 小工具 - 莊子渾沌七竅小工具 的改良，這類展現一星期七日的小工具，應該可以讓使用者調整需要的樣式，也方便後續新增圖樣，不需要每種圖樣都做一種小工具。

一開始 Google Gadget 小工具的設定功能是考慮使用 Google API Libraries for Google Web Toolkit 來完成，不過遭遇 gwt Gadget Creation error - Google Web Toolkit | Google Groups 一樣的問題，於是不採用 GWT 的方式來做，改換個方式來做看看。

這裡試著用 Google Gadgets Editor 直接寫看看，不過目前上線的 igoogle 還沒支援新的 API，所以還是以Getting Started: Legacy Gadgets API 裡面的 Google Gadgets Editor 來寫。寫出來的小工具放置在 Motudo Gadget Google 小工具 - 八日小工具 這裡。

延伸

1. Getting Started with Gadgets and GWT
2. EnumPreference
3. Motudo Gadget Google 小工具 - 莊子渾沌七竅小工具

Google 試算表內嵌 Motudo Gadget 小工具

Google documents 文件服務裡面有試算表的格式，而這個試算表是可以內嵌 Google Gadget，於是就挑 Motudo EcoDriving Gadget 減碳駕駛計算機小工具 來測看看，結果可以參閱下面連結，利用小工具內嵌，可以把一些簡單運算計算機模組直接放上去，使用者可以不離開試算表就可以點選該小工具，進行其他計算。

Google Spreadsheets 試算表連結

裡面可以看到內嵌的 Motudo Gadget Google 小工具 - 減碳駕駛計算機小工具。

延伸

1. 摩圖獨專案 - Motudo Project
2. Gadgets API Blog: Spreadsheet gadgets: free dynamic data for your gadget

減碳飲料小工具 EcoDrink Google Gadget

Motudo Gadget Google 小工具 - 減碳飲料計算機小工具 已經可以使用了，這個想工具的想法來自 MOTUDO 網誌: 塑膠瓶裝飲料的溫室氣體排放量 Plastic Bottle CO2e 的內容，將計算過程簡化成一個小工具方便使用。

精打細算之下，在經濟比較緩和的現在，即使節省一杯也好，換成開水既健康又減碳，還可以省錢，這種好康的事常常做對身體、荷包與環境都有助益。

下面為小工具安裝在網頁後的樣子。



延伸

1. 2008年 台灣為暖化作了什麼

電力碳標籤小工具更新 Carbon Gadget Update

今天對Motudo Carbon Gadget 電力碳標籤 做點小改版，主要是針對按鈕的取消以及版面置中的調整。

取消計算按鈕可以節省空間，將計算按鈕觸發的功能由 GWT 提供的 ChangeListener / KeyboardListener 代替，前者可以輸入數字更新的時候，重新計算二氧化碳的排放量，後者則是依靠 enter 的按鍵觸發重新計算排放量。

版面置中的問題則是新增一個 HorizontalPanel 來解決。

另外也可以考慮延遲載入的設計，這是來自 Google Web Toolkit Blog: Improving performance with on-demand widget creation 的方法，可以將第二個頁面延遲載入，不過目前 Motudo Carbon Gadget 電力碳標籤 還沒有這麼多的資料要載入，只是單純計算行為，效率問題可以延後考慮。

延伸

1. Motudo Carbon Gadget 電力碳標籤
2. MOTUDO 網誌: Motudo Carbon Gadget 碳標籤小工具
3. Motudo Project 摩圖獨專案

GWT 與 Google App Engine 的整合

這裡並非要說明 GWT 的 RPC 機制如何整合到 Google App Engine 的作法，而是針對目前進行的 Motudo Project 摩圖獨專案 裡面，有不少 iGoogle Gadget 網頁小工具，目前這些小工具都是採用 GWT(Google Web Toolkit)來完成使用者介面 UI 的部份，另外搭配 Google App Engine 來當動態網頁支援平台。

一開始還好，每個小工具都分配一個網頁網址，但漸漸地發現網頁中有很多重複的地方，於是考慮將這些小工具網頁整合一起的方式，Google App Engine 使用 python 來當後端語言，至於設定檔 app.yaml 是使用YAML語法，跟 python 無關。

這裡希望調整成 http://www.motudo.com/g2MyGadgetId 的格式，先看看 app.yaml 裡面設定的主要 python 檔案，然後在 webapp.WSGIApplication 部分加入下面設定。

(r'/g2(.*)', GadgetPage)

這樣一來，就會將 /g2MyGadgetId 的網頁轉到 GadgetPage 負責提供一致的小工具網頁。

延伸

1. MOTUDO 網誌: Google App Engine 1.1.3 zipserve
2. MOTUDO 網誌: GWT 1.5 正式版釋出
3. MOTUDO 網誌: GWT JavaScript overlay type and Motudo

減碳駕駛計算機小工具 EcoDriving iGoogle Gadget

Motudo iGoogle EcoDriving Gadget 減碳駕駛計算機小工具 已經上線歡迎使用。同時內嵌到這個網頁的結果如下：

延伸

1. MOTUDO 網誌: 減碳駕駛 Green Driving
2. MOTUDO 網誌: 超里 Hypermiling