Twitter.com には各種 Widget が用意されていますが、その中に Search Widget があります。自分で任意のクエリー、色などを決めてプリビューすることができます。加えて、ページに埋め込むためのソースも出してくれます。とても楽チンです。

Customize Your Search Widget

今回、検索エンジンへの問い合わせと Search Widget を連動させる必要が出てきたため、Customize Your Search Widget にて使用されているサンプルを真似て text input に入力された文字に置き換えられるようなスクリプトにしてみました。

以下のリンクからサンプルを参照することができます。
Input ボックスに任意の検索語句を入力し、「更新」ボタンをクリックしてみてください。サンプルではボタンの onclick イベントにてファンクションを呼び出していますが、呼び出し部分は任意の箇所で実装してもらえれば問題ない（はず）です。

■ サンプル

■ ソース

<input class="text" type="text" size="28" length="140"
   value="#MA6" id="search-terms">
<input type="button" value="更新" style="WIDTH: 44;" onclick="updateQuery();"/>

<div id="twitter">
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">google.load("jquery", "1.4.3");</script>
  <script src="http://widgets.twimg.com/j/2/widget.js"></script>
  <script>
    var DemoWidget = new TWTR.Widget({
      version: 2,
      type: 'search',
      id: 'twitter',
      search: document.getElementById('search-terms').value,
      interval: 6000,
      title: 'クエリー連動',
      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,
        hashtags: true,
        timestamp: true,
        avatars: true,
        toptweets: true,
        behavior: 'default'
      }
    }).render().start();

    function updateQuery(e) {
      if (e) {
        e.preventDefault();
      }
      var searchTerms = $('#search-terms').val();

      DemoWidget
        .destroy()
        .setFeatures({
          live: true,
          scrollbar: false,
          behavior: 'default',
          loop: true,
          hashtags: true,
          avatars: true,
          timestamp: true,
          toptweets: true
        })
        .setDimensions(250, 300)
        .setSearch(searchTerms)
        .setTweetInterval(6000)
        .render().start();
    }

  </script>
</div>

さて、果たして、同じような要件の人がいるのだろうか。