API/マッシュアップニュース

2010.03.11twitterAPIを使ったマッシュアップのサンプル紹介

CATEGORY：API紹介, サンプルプログラム, マッシュアップ紹介


今巷で大流行しているtwitterとjQueryを使ってマッシュアップを作成するサンプルプログラムです。

今回はtwitterのリプライを取得するサンプルです。
まず、準備するのはjQuery本体とjquery.twitter.mentions.jsというプラグインを使用します。
それぞれダウンロードして任意のディレクトリに保存してください。
・jQuery-1.3.2
・jquery.twitter.memtion.js

twitter.mention.jsをダウンロードするとサンプルプログラム「index.html」が入っています。
ほぼ変更するところなく動作すると思いますが、ユーザーの指定箇所だけテキストボックスから指定できるようにしてみようと思います。
せっかくjQueryを使っているので、ajaxでテキストボックスの値を送信して表示するように変更しました。

【head部分】

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.twitter.mentions.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#send').click(function() { // 送信ボタンがクリックされた
			var users = new Object();
			if ($('#user').val()) {
				users = $('#user').val().split(',');
				$('#content').twitterMentions(users, {  // 引数にオブジェクトでユーザーを渡す
					avatar : true, // 画像を表示するかどうか
					maximum : 10, // 取得件数
					ulClass : 'twitter-mentions', // 表示の際のulタグのクラス指定
					odd : true, // リストを一行ごとにシマシマにするか
					oddClass : 'odd' // シマシマにするクラス指定
				});
			}
		});
	});
</script>

※jquery、twitter.mentionsのjsファイル名、パスは各自の環境に合わせてください。

【body部分】

<body>
<div id="container">
  表示したい＠リプライのユーザーを入力してね<br />
  <input type="text" name="user" id="user" value="" size="30" style="height:20px; font-size:16px;" />
  <input type="button" name="send" id="send" value="送信" />
  <br />
  <br />

  <h1>Twitter reactions</h1>
  <div id="content"></div> // データが取得できたらここに表示される
</div>
</body>

するとこんな感じに！！　デモ画面はこちら>>
サンプル画像

サイトのサイドのスペース等に表示しようとすると、ダウンロードしたファイルに含まれている画像等を
使用するとちょっと大きいかもしれませんので、デザインやレイアウトは独自のものを使用してもオモシロいですね。

以上、こんな感じであっさりとマッシュアップサイトができてしまいます。
これを機会にマッシュアップサイトをたくさん作って、WAFLを盛り上げていきたいですね！！
（最近はマッシュアップというより、クラウドっていうほうが流行ってる感じですが。。。）

若林

  •  
  •