こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

Twitpicの写真をGoolgeAjaxSlideshowでWEBに

Twitpicの写真をGoolgeAjaxSlideshowでWEBに表示。
twitterクライアントとしてiphoneのtwitpicアプリで写真をアップしています。
twitpicのwidgetは動的ではないので、スライドショーで自分のHPに表示したいです。
まずtwitpicを使い続けるのを前提(もっとよいものがあればそちらに乗り換えますが)で
Flashを使わずに出来るものとしてGoogle API Ajax slideshowが一番よさそうでした。
Flickrのphotostream RSSなどは使えると書いてあるのですが、twitpicはかかれていません。
出来るのかどうか、試してみたのですが今のところ動きません。私の設置の仕方が悪いのか
twitpicからのRSS自体がGoogleのものと相性が悪いのか判断が付きません。
Flashを使いたくないのはiphoneでもちゃんと表示できるようにする為です。

どなたかこの環境で出来る方法もしくは、別のよい方法があれば教えください。

宜しくお願いします。

投稿日時 - 2010-09-25 17:37:53

QNo.6207299

困ってます

このQ&Aは役に立ちましたか?

9人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

「Google API Ajax slideshow」だめですね。
APIのドキュメントも中途半端だから、こいつはあきらめて、
とりあえず、画像リストを生成するところまで作ってみた。
後は、このリストから、携帯用のスライドショーが出来る
ライブラリーを探して、実装すればいいかなと思うけど、
iphon持ってないので、これ以上はやめた。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TwitPic スライドショー</title>
<style type="text/css">
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("feeds","1");</script>
<script type="text/javascript">
function GetImg(frm){
 var feedUrl = "http://twitpic.com/photos/"+frm.account.value+"/feed.rss";
 var feed = new google.feeds.Feed(feedUrl);
 feed.load(function(result){
  if(!result.error){
   var container = document.getElementById("container");
   while(container.hasChildNodes())
   container.removeChild(container.firstChild);
   var ul = document.createElement("ul");
   ul.style.listStyleType = 'none';
   for(var i=0;i<result.feed.entries.length;i++){
   var div = document.createElement("div");
   div.innerHTML=result.feed.entries[i].content;
   var img=div.getElementsByTagName("img")[0];
   var imgtitle=div.textContent;
   img.setAttribute("title",imgtitle);
   img.setAttribute("alt",imgtitle);
   var li = document.createElement("li");
   li.appendChild(img);
   ul.appendChild(li);
   }
   container.appendChild(ul);
  }
 //SlideShow();
 });
}
</script>
</head>
<body>
<h3>TwitPicの画像をスライドショーする</h3>
<p>Google Ajax Feed API で RSSを取得し、Google Slide Show APIで表示</p>
<form>
Twitter ID:<input type="text" id="account" name="account">
<button type="button" onclick="GetImg(this.form);">表示</button>
</form>
<hr>
<div id="container">Loading...</div>
</body>
</html>

投稿日時 - 2010-09-27 18:12:59

ANo.1

iphoneのsafariという事で、javascriptでよろしいんですよね。(持ってないけど)
twitpic.comに↓のGET送信すると(twitter_id:取得するtwitterのID)

http://twitpic.com/photos/twitter_id/feed.rss

RSS 2.0形式のフィードが返ってきます。
(文字コード対応に問題有りとの噂があるので、UTF-8にそろえとくのが無難)

これなら、「Google AJAX Feed API」でパースできるはずです。
同「Slide Show」コントロールの方はまだ使った事がないので、日本語だと
何か問題があるのか知りませんが、Feed APIの結果(JSONでもXML)から
別途DOMを作って、他にごまんとある、javascriptのスライドショーライブラリー
で表示させてやればよいのではないかと....

ご質問内容だけからだと、どこに問題があって動かないのか判断できません。

投稿日時 - 2010-09-27 14:26:02

お礼

回答ありがとうございます。
>iphoneのsafariという事で、javascriptでよろしいんですよね。
そうです。
twitpicのRSSフィードではなくてyfrogという似たサイトのフィードだと
Google ajax のhelloworldをyfrogのRSSのところを書き換えるだけでいけました。
ということはtwitpic側のフィードがよろしくないということだと思います。
ただyfrogのiphoneアプリが無料じゃない(店のみんなが使うのでカード登録したくないんです。)ので出来れば無料のアプリのあるサービスでやりたいのです。

ありがとうございます。

投稿日時 - 2010-09-28 18:47:06

あなたにオススメの質問