Twitter Widgetを動的に切り替える - @thorikiriのてょりっき

Twitter Widgetを使ってるのだけれども便利ですね。あんまり考えずに出来ます。
でも、画面遷移とかをしないで、タイトルとか検索文字とかを変えられないのかぁ〜ってのが疑問でした。
昨日のブログで、URLハッシュが切り替わるタイミングでどうにか変えたかったんですよ。

デフォルトの検索Widgetを表示するのはこんな感じです。公式を参照→ https://twitter.com/about/resources/widgets/widget_search

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '虹',
  interval: 30000,
  title: 'It\'s a double rainbow',
  subject: '空一面に',
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#8ec1da',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#1985b5'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'default'
  }
}).render().start();
</script>

これを切り替えたかったけど、どうするのかわかりません！
でも、公式サイトでは、値を変更して「Test settings」ボタンで画面遷移せずに切り替えられてるんだから、出来るだろうと。そして、widget.jsを読んだら出来そうでした。
でも、コードは圧縮されてるので、好きに整形してから読みました。これ使って。 → JavaScriptのコード整形＆色付け(貼り付け用)

デフォルトでは、new TWTR.Widget({/*略*/}).render().start()てなってるので、手出し出来ませんが、戻り値を確保すればOKです。

<script>
var timeline = new TWTR.Widget({/*略*/}).render().start();
</script>

そして、イベントが発生したら、timelineに対して、幾つかメソッドチェーンで呼んであげればOKです。
今回は、タイトルとサブジェクト、検索文字だけを変えたいので、それようのメソッドを使い、renderとstartで描画を開始しました。これだけだと以前の検索結果が残るので、destroyを先にやっておけば以前の検索結果が消えてます。
次の関数をイベントが発生したら呼んであげればOKですね。

    function changeTimeline(search, caption) {
        timeline
                .destroy()
                .setSearch(search)
                .setCaption(caption)
                .setTitle(search + "の検索結果")
                .render()
                .start();
    };

最後にサンプルコードを。昨日のjquery.hashchange.jsを使ってます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>twitter widget sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.hashchange.js"></script>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
(function() {
    $(function() {
        $(window).hashchange({
            callback: function(event) {
                if (!window.location.hash || window.location.hash.length <= 1) { //>
                    return;
                }
                var search = window.location.hash;
                var caption = $("a[href=" + search + "]").data("team");
                timeline
                    .destroy()
                    .setSearch(search)
                    .setCaption(caption)
                    .setTitle(search + "の検索結果")
                    .render()
                    .start();
            }
        });
        $(window).hashchange();
    });
})();
</script>
</head>
<body>
<div>
    <ul>
        <li><a href="#jefunited" data-team="ジェフユナイテッド千葉">jefunited</a></li>
        <li><a href="#fctokyo" data-team="FC東京">fctokyo</a></li>
    </ul>
    <div>
    <script>
        var timeline = new TWTR.Widget({
          version: 2,
          type: 'search',
          search: '#jleague',
          interval: 6000,
          title: '#jleagueの検索結果',
          subject: 'Jリーグ',
          width: 250,
          height: 300,
          theme: {
            shell: {
              background: '#8ec1da',
              color: '#ffffff'
            },
            tweets: {
              background: '#ffffff',
              color: '#444444',
              links: '#1985b5'
            }
          },
          features: {
            scrollbar: false,
            loop: true,
            live: true,
            behavior: 'default'
          }
        }).render().start();
    </script>
    </div>
</div>
</body>
</html>