« openid4javaでax(Attribute Exchange)の日本語の値をとるとエラー | トップページ | IE-Apacheで急にSSLクライアント認証ができなくなった »

2010年6月17日 (木)

JavaScriptで安定したTwitterバッジ(BLOGパーツ)を作る

クライアントにツイメディみたいにTwitterまとめをやりたいと言われた
ツイメディ http://www.ddtpro.com/twimedi/

取りあえず、見積もりを取ってみたが予算オーバーとのこと…
視覚効果はともかくTwitterまとめくらい簡単にできるよ!
とやったことのまとめ

【戦略】
・WEBデザイナがCSSでデザインをいじれるようにJavaScriptで汎用的な出力をする
・Twitterが不安定なので google feed api を使ってキャッシュデータを使う
※最悪Twitterが落ちていても表示可能

<head>に記載する内容

    <script type="text/javascript" src="http://www.google.com/jsapi?key=【取得したGOOGLE API KEY】"></script>
    <script type="text/javascript">
    google.load("feeds", "1");
    function twString(timeline,owner){
        timeline = timeline.replace(/(http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?)/g,"<a href=\"$1\">$1</a>");
        timeline = timeline.replace(/@([\w-]+)/g,"@<a href=\"http://twitter.com/$1\">$1</a>");
        timeline = timeline.replace(/#([\w-]+)/g,"<a href=\"http://twitter.com/search?q=%23$1\">#$1</a>");
        timeline = timeline.substr(owner.length + 1);
        return timeline;
    }
    </script>

表示エリアに記述する内容

    <ul id="feed"></ul>
    <script type="text/javascript">
    function initialize() {
      var feed = new google.feeds.Feed("【TwitterのRSSの URL】");
      feed.setNumEntries(10);
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("li");
            //div.appendChild(document.createTextNode(entry.title));
        var edate = new Date(entry.publishedDate);
        div.innerHTML = twString(entry.title,"sakuraemi") +" at "+ edate.getHours() + ":" + edate.getMinutes() + " " + edate.getMonth() + "/"+edate.getDate()+"/"+(edate.getYear()+1900);

            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);
    </script>

どうでしょ?
google feed api は更新頻度が低いのが難点ですが、googleにキャッシュされた
RSSデータを利用するためTwitterがどんな状態でもサクサク表示することができます。
解説は…いるかな??
あんまり書くこともない気がしますが、解説欲しい人はコメントください。

|

« openid4javaでax(Attribute Exchange)の日本語の値をとるとエラー | トップページ | IE-Apacheで急にSSLクライアント認証ができなくなった »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: JavaScriptで安定したTwitterバッジ(BLOGパーツ)を作る:

« openid4javaでax(Attribute Exchange)の日本語の値をとるとエラー | トップページ | IE-Apacheで急にSSLクライアント認証ができなくなった »