Javascript初心者です。

Question

ypressjp

21

19もっと見る

200pt

コンピュータウェブ制作

Javascript初心者です。

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

回答の条件

1人5回まで

登録：2012/02/04 13:27:44
終了：2012/02/09 12:13:12

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

Cherenkov15044932012/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件のコメントを見る

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

2012/02/09 12:48:30

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

2012/02/09 13:34:40

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

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

TransFreeBSD · Accepted Answer · 2012-02-08T16:11:16+09:00

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

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

selectRandomPhotoでJSONP用URLを作る
- 基本はCherenkovさんのと同じ
- max-results=1で1枚だけ
- start-index=の後に1～25のランダムな数字をいれてランダム番目の写真をリクエスト
insertScriptはselectRandomPhotoから呼ばれて、指定されたURLのscript要素を挿入する
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>

TransFreeBSD · Accepted Answer · 2012-02-08T16:11:16+09:00

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

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

selectRandomPhotoでJSONP用URLを作る
- 基本はCherenkovさんのと同じ
- max-results=1で1枚だけ
- start-index=の後に1～25のランダムな数字をいれてランダム番目の写真をリクエスト
insertScriptはselectRandomPhotoから呼ばれて、指定されたURLのscript要素を挿入する
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>

Javascript初心者です。

ベストアンサー

TransFreeBSD6682682012/02/08 16:11:16

その他の回答（1件）

Cherenkov15044932012/02/04 14:51:55

参考

TransFreeBSD6682682012/02/08 16:11:16ここでベストアンサー

コメント（0件)

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