減碳駕駛朋友小工具 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

Json Data 20081205

這是一個資料集的文章，提供給遠端 Google Gadgets 小工具資料存取使用，對於讀者並無意義。連接的網址為 /feeds/posts/default/3807003915654117680

D1S{"title":"PG","name":"MOTUDO"}D1E

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