＃やっと抜歯の痛みが引いて来たよ。一部歯茎の腫れが引かないけど..

iPhone は safari から画像の Upload が出来ないんで JavaScript から画像ライブラリにアクセスする方法を探していたんだけど Picasa の webapi で出来る事が分かった。

参考サイト：

  • http://tnker.com/?p=1996
  • http://code.google.com/intl/ja/apis/picasaweb/docs/2.0/developers_guide.html

GoogleにはJavaScript用のライブラリは用意されていないようだが WebAPI なので直接叩けばなんとかなる。

しかも公開設定になっているアルバムはユーザ名がわかればログインしなくても 参照できる事が分かった。

アルバム一覧の取得

http://picasaweb.google.com/data/feed/api/user/${email}?kind=album&alt=json

このURLの${email}にGMailのアドレスを入れてGETすればアルバムの一覧がJSONで帰ってくる。

大事なとこだけ抜粋：

{ "encoding": "UTF-8", "feed": { "author": […], "category": […], "entry": [ { … "gphoto$access": {"$t": "public"}, … "gphoto$id": {"$t": "5684368764816860881"}, … "media$group": { "media$thumbnail": [ { "width": 160, "height": 160, "url": "http://lh4.ggpht.com/….jpg", } ], } }, … ], } }

entry
アルバムのリスト
gphoto$access
public/private
ログインしてると自分のprivateは見えちゃうのでpublicのチェックが必要。
gphoto$id
アルバムのID。
media$thumbnail
アルバムのサムネイル情報

アルバム内写真一覧の取得

http://picasaweb.google.com/data/feed/api/user/${email}/albumid/${album_id}?alt=json

このURLの${email}にGMail、${album_id}に上記のアルバムIDを入れてGETすれば写真の一覧がJSONで帰ってくる。

大事なとこだけ抜粋：

{ "encoding": "UTF-8", "feed": { "author": […], "category": […], "entry": [ { … "content": { "src": "http://lh4.ggpht.com/…/xxxxxx.JPG", "type": "image/jpeg" }, … "gphoto$access": { "$t": "public" }, … "media$group": { … "media$thumbnail": [ { "height": 54, "width": 72, "url": "http://lh4.ggpht.com/…/s72/xxxxxx.JPG", }, { "height": 108, "width": 144, "url": "http://lh4.ggpht.com/…/s144/xxxxxx.JPG", }, { "height": 216, "width": 288, "url": "http://lh4.ggpht.com/…/s288/xxxxxx.JPG", } ], } }, … ] } }

entry
写真のリスト
content.src
写真のURL
gphoto$access
public/private
media$thumbnail
写真のサムネイル情報。３サイズ。

JavaScriptからの呼び出し

普通に呼び出そうとするとXSSになるのでJSONPを使う。 具体的には callback をURLパラメータに追加するだけで良い。

jQuery から使う場合は $.getJSON を使わず $.ajax で dataType:"jsonp" とする。

例：

var URL_ALBUM = "http://picasaweb.google.com/data/feed/api/user/${user}?kind=album&alt=json"; var url = URL_ALBUM.replace(/[$][{]user[}]/,self.user); $.ajax({ url:url, cache:true, dataType: "jsonp", error: function(xreq,stat,err) { alert("load error:"+err+" "+url); }, success: function(json, type) { var list = []; for (var i=0; i<json.feed.entry.length; i++) { var e = json.feed.entry[i]; if (e.gphoto$access.$t == "public") { list.push({ thumbnail: e.media$group.media$thumbnail[0].url, albumid: e.gphoto$id.$t }); } } self.albums = list; } });

サンプル

JQMDPで作ったサンプル。

画像をクリックしてアルバムの一覧へ

アルバムのサムネをクリックして写真の一覧へ

写真をクリックすると元の画像が選択したものに差し変わる。