- 締切済み
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でもちゃんと表示できるようにする為です。 どなたかこの環境で出来る方法もしくは、別のよい方法があれば教えください。 宜しくお願いします。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
「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>
- yyr446
- ベストアンサー率65% (870/1330)
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のスライドショーライブラリー で表示させてやればよいのではないかと．．．． ご質問内容だけからだと、どこに問題があって動かないのか判断できません。
お礼
回答ありがとうございます。 ＞iphoneのsafariという事で、javascriptでよろしいんですよね。 そうです。 twitpicのＲＳＳフィードではなくてyfrogという似たサイトのフィードだと Google ajax のhelloworldをyfrogのＲＳＳのところを書き換えるだけでいけました。 ということはtwitpic側のフィードがよろしくないということだと思います。 ただyfrogのiphoneアプリが無料じゃない（店のみんなが使うのでカード登録したくないんです。）ので出来れば無料のアプリのあるサービスでやりたいのです。 ありがとうございます。