Javascript初心者です。

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/02/04 13:27:44
  • 終了:2012/02/09 12:13:12

ベストアンサー

id:TransFreeBSD No.2

TransFreeBSD回答回数664ベストアンサー獲得回数2662012/02/08 16:11:16

ポイント100pt

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

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>
id:ypressjp

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

2012/02/09 12:09:39

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/02/04 14:51:55

ポイント100pt

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>


参考
他1件のコメントを見る
id:Cherenkov

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

2012/02/09 12:48:30
id:ypressjp

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

2012/02/09 13:34:40
id:TransFreeBSD No.2

TransFreeBSD回答回数664ベストアンサー獲得回数2662012/02/08 16:11:16ここでベストアンサー

ポイント100pt

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

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>
id:ypressjp

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

2012/02/09 12:09:39

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません