最近有個專案是開發相片型態網站的前後台，前台(使用者端，以IE、Firefox之類的瀏覽器觀看)是完全的Flash介面，所有元素都以XML來定義，使用者可以自行決定Logo圖片、放置位置，Gallery單元類別可以自訂、選單位置、顏色，縮圖大小、排列方式，全圖大小…等。
(以上為Gallery單元縮圖呈現開發中原型，由於開發者為了自己眼睛私慾，圖片皆不登大雅之堂，特馬賽克之。)
Flash的部份是還好，反正前陣子也是在摸索Actionscript 3.0，乾脆就把這專案拿來練習，後端的部份是打算以PHP+MySQL的方式，使用者可以自行上傳圖片，圖片會依設定的大小自動生成縮圖，這部分自己寫也是還好，只是以目前Web的技術來說，使用者還是只能一次選擇一張圖片，就算上傳頁面有十個圖片欄位，每個欄位還是需要使用者點選一次，十張圖片就得開十次檔案選擇視窗，非常煩人也非常不user-friendly。
想解決這種煩人的作法，大部分較有資源的人會選擇開發自己的上傳軟體，一次可以選擇複數檔案，一鍵上傳！
不過，我不會寫應用程式(desktop application)…=.=
但是，天無絕人之路，老天真的疼憨人，前幾天讓我發現Google老大是多麼的體貼憨愚老百姓如我，他開放Picasa可以自訂相片上傳功能的API啦！(泣~)
你看看你看看，我做的按鈕(最左邊那個)，就這麼活生生的與Picasa工作人員做的按鈕排在一塊兒了，真是銷魂，真是黯然啊~~
上傳照片變得很簡單，只要用滑鼠圈選你所要上傳的所有照片(Step 1)，然後按下按鈕(Step 2)。還可以指定上傳頁面，只要把上傳的頁面指向自己寫的相片上傳URL去，按下你自訂的按鈕之後，就會出現在Picasa的mini-browser了。
在上傳前先讓你即時檢視有那些相片，如果不是你要的，還有反悔的機會。按下Publish之後，就把上傳的事情交給Picasa處理，你的程式只要接收Picasa上傳的資料就行了。 步驟簡化到不行，只要選好圖，按按鈕，上傳！你說好不好用！？好不好用！？(搖晃)
—————————————————————————
製作過程其實沒有想像中複雜，下面稍微簡單紀錄一下。
1. 開啟Photoshop製作按鈕圖示，大小不能超過40×25(pixels,寬x高)，底需為透明。當然不透明也可，很醜而已。要注意的是，按鈕的圖層名稱不要隨便亂取，取個有意義的名字，例如icon之類的，後面會用到。
2. 產生一個專屬的GUID(Global Unique Identifiers)，你可以到這裡生一個出來，每個按鈕都要使用獨一無二的GUID。英文好的人可以到這裡看更多有關GUID的介紹。
3. 將剛剛的PSD檔存成{your-GUID}.psd，如果你的GUID是c07c8aab-828e-4513-a08b-2cb5eb41d1ce，那就存成{c07c8aab-828e-4513-a08b-2cb5eb41d1ce}.psd
4. 依照Picasa Button API規定的格式建立一個XML，檔名規則是{your-GUID}.pbf。範例如下：
1 2 3 4 5 6 7 8 9 10 11 | <?xml version="1.0" encoding="utf-8" ?> <buttons format="1" version="version_number"> <button id="buttonid" type="dynamic"> <icon name="PSDfile/layername" src="pbz"/> <label>Button Label</label> <tooltip>Tooltip text goes here.</tooltip> <action verb="open"|"trayexec"|"hybrid"> <param name="name" value="value"/> </action> </button> </buttons> |
5. 將這兩個檔案以ZIP壓縮，檔名隨意，但副檔名需為.pbz。
6. 在你的網頁放上一個連結(注意：該連結需實際存在網路，本機測試會無法加入Picasa)，格式如下：
Add the <a href=”picasa://importbutton/?url=http://www.acme-inc.com/acme-inc-photo-uploader.pbz”> Acme Inc. Uploader</a>to Picasa
說明：
6.1 version_number是你的版本號碼，你自己決定。
6.2 buttonid格式是{your-GUID}。
6.3 PSDfile/layername格式是{your-GUID}/按鈕圖層名稱(第一點有說到)。
6.4 Button Label是按鈕的文字，會顯示在Picasa的按鈕上。
6.5 Tooltip text goes here.是說明文字，當滑鼠停在你的按鈕時會顯示的說明文字。
6.6 action的verb屬性值，如果你和我一樣是要做圖片上傳網路的服務，那就是hybrid。
6.7 param的部份，如果是與我一樣的圖片上傳服務，格式如下：
<param name=”url” value=”http://your-domin/your-uploader-program”/>
7. 點下連結之後，Picasa就會問你是否要加入該按鈕了！按鈕到此就算完成。
順利在Picasa上加入了你的按鈕，可是按了按鈕Picasa不知道要把檔案傳給誰啊，要存到哪呀，這些都是你要自己寫的。Google的Picasa真的是貼心得銷魂，他幫你寫好Sample(API說明看下面的參考資料連結)，你只要依據你的需求改一改就能動了。
參考資料：
1. Picasa Button API
2. Picasa Web Uploader API
3. Create Global Unique Identifiers (GUIDs) online
1 Response