【galleriffic（getJSON）でpicasaの画像を呼び出

質問

【galleriffic（getJSON）でpicasaの画像を呼び出す】
以下は「galleriffic」というスクリプトをカスタマイズしたもので、
Flickrの画像を呼び出すことが出来るjQueryのギャラリーです。
http://www.myphpetc.com/2010/01/jquery-gallerific-gallery-with-flickr.html

これを、picasaからの画像を呼び出せるようにしたいのですが
難しいでしょうか？

DLしたexample-2.htmlの53行目の
$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=32142572@N00&lang=en-us&format=json&jsoncallback=?", function(data){
の部分にpicasaのJSONフィードのURLを入れてみましたが、やはりそのままでは
表示されませんでした…。
一体どこを変えたら良いのでしょうか？

丸投げで大変恐れ入りますが、ヒントを頂けましたら幸いです。

回答No.5

yyr446 · ベストアンサー

「ブラウザーのGETで取得」の意味

＝＞長く書くのが面倒だったもので．．．
単に、ブラウザーのアドレス欄に、JSONリクエストのURIを貼り付けて、
エンターして、結果ページをそのまま見るだけです。

JSONはテキストですからそのまま見えます。けど改行とかインデントが
無く見にくいから、表示されているのをそのまま、コピーして、

http://www.gosu.pl/decoder/

に貼り付ければ、整形してくれるので、見やすいという意味でした。

お礼

ご回答ありがとうございます。
URIを貼り付けると「Invalid parameter value: callback=?」と
なっていたのですが、
「※ピカサJSONリクエストURLのcallbackパラメーターは？にしときます。」
とご回答頂いたのを思い出して、URIを削ってみたら表示されました。
デコーダにかけるととても見やすいですね。
どうもありがとうございます。

回答No.4

yyr446

No.2です。

肝心の$.getJSONの行が投稿すると醜くなってしまうので、念のため
無理やり改行して書いときます。

　$.getJSON("http://picasaweb.google.com/data/feed/api/user/
kaneko/albumid/5086333454932929537?kind=photo
&alt=json-in-script&callback=?&start-index=1&max-results=10",
function(data){

やはり、長すぎて、だめかな

回答No.3

yyr446

一応、↓で、出来ましたね。

面倒なので、example-2.htmlをそのまま使ってます。

<script type="text/javascript">
$(function(){
　$.getJSON("http://picasaweb.google.com/data/feed/api/user/kaneko/albumid/5086333454932929537?kind=photo&alt=json-in-script&callback=?&start-index=1&max-results=10",function(data){
　 $.each(data.feed.entry,
function(i,item){
　　　　var newthumb = $("ul.thumbs").children("li:first").clone();
　　　　var baseimg = item.content.src;
　　　　var thumbimg = item.media$group.media$thumbnail[0].url;
　　　　$(newthumb).find("img").attr("src", thumbimg);
　　　　var disimg = item.media$group.media$content[0].url;
　　　　$(newthumb).find(".thumb").attr("href", disimg);
　　　　var lgeimg = item.media$group.media$thumbnail[2].url;
　　　　$(newthumb).find(".download").children("a").attr("href", lgeimg);

　　　　var title = item.title.$t;
　　　　var description = item.summary.$t;

　　　　var desc = $("<div />").append(description);
　　　　if ($(desc).children().size() == 3) {
　　　 description = $(desc).children("p:last").html();
　　　　} else {
　　　 description = "";
　　　　}

　　　　$(newthumb).find(".image-title").empty().html(title);
　　　　$(newthumb).find(".image-desc").empty().html(description);
　　　　$(newthumb).find(".image-auth").empty().html(data.feed.author[0].name.$t);

　　　　$("ul.thumbs").append(newthumb);
　 });

以下は「example-2」と同じなので省略

※投稿用に全角空白文字でインデントしてます。
※ピカサJSONリクエストURLのcallbackパラメーターは？にしときます。
※変更したのは、下記の$.each()分の中身だけです。

＜今後の課題＞
※ピカサフィードの場合 media$group 内に、画像やサブネイルの幅、高さ
の情報もあるので、これを使ってgallerifficの表示を、カストマイズした
方がよいかも...
※その他にも、いっしょに表示したら役立ちそうな情報がJSONフィードの
中にいろいろありそうです。
　ブラウザーのGETで、取得したJSONを、↓に貼り付けてやれば、見やすいです。

http://www.gosu.pl/decoder/

お礼

おおお！！！ありがとうございます！！表示されました！感動です！！
それと色々すみません、JSONフィードの中身というのはどうすれば見られるのでしょうか？（「ブラウザーのGETで取得」というのがわかりませんでした…だいぶ検索してみたのですが…）

picasaは簡単な説明がつけられるようですので、descriptionを表示させたいのですが
どのようにすればいいかわからずで…
　　　　if ($(desc).children().size() == 3) {
　　　 description = $(desc).children("p:last").html();
周辺をいじればよいのでしょうか。
descriptionが見当たらないということはCaptionsという名前なのか…

以下は、自分でアルバムを作って説明を入れてみたものです。（RSSフィードです）
http://picasaweb.google.com/data/feed/base/user/102591748965812817131/albumid/5520407422776039473?alt=rss&kind=photo&hl=ja

色々と申し訳ありません。
よかったら回答をお待ちしております。

補足

description = "";となっていたところを、description = item.summary.$t;としたら説明が表示されるようになりました！
（手探りなのでこれであっているのか解りませんが…）

どうもありがとうございました！

回答No.2

yyr446

おお！、ピカサもGoogle DATA APIでJSONPで出来たのですね。知らなかった。
っていうか、公開されてないし。さすがGoogleさん。
ピカサのフィード内容、視てみました。必要な情報みんなありそうです。
サブネールのＵＲＬもちゃんと入ってます。descriptionが見当らないけど..
これ使えば、ちゃちゃとスクリプト書き換えて出来そうです。

まるなげの答えはしばしおまちを....

回答No.1

yyr446

picasaのJSONフィードのURLってどこで見つけました？
picasaにそんなのありましたっけ、Googleの「Picasa Web Albums Data API」
http://code.google.com/intl/ja/apis/picasaweb/docs/2.0/developers_guide.html
とは違うサービスですね。
JSONが取れてるんなら、それとFlickrのJSONとを比べてみて、
対応する部分を変更すればいいんじゃないかと．．．

FlickrのJSONレスポンス(data)の中の、
　data.items[].media.m　が画像のパス
　data.items[].title　が画像タイトル
　data.items[].description　が画像説明
を

$.each(data.items, function(i,item){ });

内で、取得してセットしてるみたいですから、同様の事をやればよいでしょう。
picasaのJSONフィードを知らないので、これ以上は？です。
（RSS2.0でしょうか．．．？）

お礼

ご回答ありがとうございます！
picasaのJSONは、こちらのページを参考にしました。
http://www.goodpic.com/mt/archives2/2007/07/gdata_api_jsonp.html
上記ページから引用して、getJSONの部分に以下のコードを入れていまし…たが、今表示してみたら「Invalid request URI」でした…。
http://picasaweb.google.com/data/feed/api/kaneko/kaneko/albumid/5086333454932929537?kind=photo&alt=json-in-script&callback=picasaCallback&start-index=1&max-results=30;

Flickrのサムネイルは、元画像ファイル名の後ろに「_m.jpg」が入っているのですが
picasaは
もと画像：　axlObD7AKAI/title.jpg
サムネイル：axlObD7AKAI/s128/title.jpg
というように、ファイル名の前に「/s128/」という文字が挟み込まれるようです。
こうなってくると、「baseimg.replace」の部分を書き換える必要があるのでしょうか？

それと、titleとdescriptionですが
description = $(desc).children("p:last").html();
の「p:last」の部分を変えたらよいのでしょうか？

色々訊いてしまって申し訳ありません…。