人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascript初心者です。
picasaに登録している画像をJSONで取得して、自分のWEBページに表示させたいです。
jQueryを使わずJavascriptのみのやり方を教えてください。

●質問者: ypressjp
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Cherenkov
●100ポイント

http://jsfiddle.net/cherenkov/kcG5c/
一番簡単だと思われる方法でサンプルを書いてみました。
firefox10, chrome16で動作確認。
(IEで動かないのはforEachあたりだと思います。forで書くのがめんどくさい。→IE対応版 http://jsfiddle.net/cherenkov/NAXAE/2/ )。


Picasa APIはJSONPが使えるのでAjax周りがいらないのでスッキリ書けます。

今回は、https://picasaweb.google.com/113370727965830303581/HDRZMuzeumWojskaPolskiego というアルバムのURLから、user id(113370727965830303581)とalbum name(HDRZMuzeumWojskaPolskiego)を取り出してAPI用のURLを組み立てます。
alt=json-in-script&callback=getPhoto でjsonpで返すように&コールバック関数名を与えます。
これをscript要素からGETするとレスポンスがgetPhoto関数に返ってきます。
getPhoto関数でサムネイルとリンク先を組み立ててbodyに追加して終わり。

開発はFirefox, firebugを使ってconsole.logでAPIレスポンスオブジェクトの内容を確認しながら行います。

<html>
<head>
<meta charset="utf-8">
<script>
function getPhoto(res) {
 console.log(res);
 console.log(res.feed.entry);
 res.feed.entry.forEach(function(e) {
 var a = document.createElement('a');
 a.href = e.link[2].href;
 var img = document.createElement('img');
 img.src = e.media$group.media$thumbnail[1].url;
 a.appendChild(img);
 document.body.appendChild(a);
 });
}
</script>
</head>
<body>
<a href="https://picasaweb.google.com/113370727965830303581/HDRZMuzeumWojskaPolskiego">https://picasaweb.google.com/113370727965830303581/HDRZMuzeumWojskaPolskiego</a>
<br>
<script src="https://picasaweb.google.com/data/feed/api/user/113370727965830303581/album/HDRZMuzeumWojskaPolskiego?alt=json-in-script&callback=getPhoto"></script>
</body>
</html>


参考

ypressjpさんのコメント
まさか返信いただけてるとは! ありがとうございます!感謝感激です! とてもわかりやすくて助かります。 ちなみにアルバムの中の一枚だけ表示させたい場合はどうしたら よいかわかるでしょうか? それをランダム表示させたいのでもしわかればご教示頂けると幸いです!

Cherenkovさんのコメント
あ、ぼけっとしてランダム表示のリクエストを忘れていました。 TransFreeBSDさんの素晴らしい回答が付いてよかった。APIパラメータから写真を選べるんですね。

ypressjpさんのコメント
いえいえいえいえ、懇切丁寧にありがとうございました。お二人にベストアンサーを差し上げたかったのですが、機能的にできず申し訳ないです。感謝しております。

2 ● TransFreeBSD
●100ポイント ベストアンサー

ほとんど同じだけど数パターン作ってみました。

2番目が一番シンプル。ソースは

  1. selectRandomPhotoでJSONP用URLを作る
    • 基本はCherenkovさんのと同じ
    • max-results=1で1枚だけ
    • start-index=の後に1?25のランダムな数字をいれてランダム番目の写真をリクエスト
  2. insertScriptはselectRandomPhotoから呼ばれて、指定されたURLのscript要素を挿入する
  3. getPhotoは、insertScriptを使ってselectRandomPhotoが埋め込んだJSONPのコードによりコールバックされて、受け取ったデータから写真画像のURLをimg要素に設定

と言う流れ。
1番目のは画像だけじゃなくて該当のページのURLも探してリンクとして設定。
3番目のはクリックでselectRandomPhotoを呼び出すことでランダムに変更。
4番目のはアルバムじゃなくてqを使ってsnowで検索してランダムに変更。
他にもタイトルやコメントとか、受け取ったデータでいろいろ出来るだろうけどとりあえず。

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title> - jsFiddle demo</title>
</head>
<body>
 <p><img src="" id="picasa"></p>
<script type='text/javascript'>//<![CDATA[ 

function insertScript(query) {
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = query;
 document.body.appendChild(script);
}

function getPhoto(response) {
 document.getElementById("picasa").src = response.feed.entry[0].content.src;
}

function selectRandomPhoto() {
 insertScript("https://picasaweb.google.com/data/feed/api" +
 "/user/113370727965830303581" +
 "/album/HDRZMuzeumWojskaPolskiego" +
 "?alt=json-in-script&callback=getPhoto&max-results=1" +
 "&start-index=" + Math.floor(1 + Math.random() * 25));
}

selectRandomPhoto();
//]]> 
</script>
</body>
</html>

ypressjpさんのコメント
ほんっっとにありがとうございます!とても悩んでいたので、救われました。 感動です。特にパターンをだして頂けたのがとてもありがたかったです。これみて勉強させてもらいます。ありがとうございました!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ