2010年08月21日

Twitter APIをjQueryから利用する

前回はTwitter MentionsというjQueryのプラグインを利用しましたが、今回はjQueryのみで、Twitter APIにアクセスしてみたいと思います。
APIへのリクエストは,$.getJSON()メソッドを利用します。
$.getJSON(url, [data], [callback(data)])
  • urlにはAPIのURLを指定します。
  • dataにはURLのリクエストパラメータを指定します。
  • callbackにはコールバック関数を指定します。匿名関数を使用するときは?を指定します。callback関数内のdataにはレスポンスがJSON形式で格納されます。
 
利用するAPIはsearchです。詳細はdev.twitter.comのこのページで確認できます。
以下が作成したコードと、ブラウザーで表示した画面になります。
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Twitter API from jQuery 1</title>
<link href="StyleSheet.css" rel="Stylesheet" type="text/css" />
<script src="jquery-1.4.1.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function () {
//SearchAPIのURL
var url = '//search.twitter.com/search.json?callback=?';
var params = {
q: '@f1gate', //検索キーワード
rpp: '20', //取得件数
page: '1' //ページ番号
}

$.getJSON(url, params, function (data) {//コールバック関数
var html = "";

//つぶやきごとにHTMLを作成する
$.each(data.results, function (i, item) {
var fromUser = '<img src="' + item.profile_image_url + '"><span class="user">' + item.from_user +":"+ '</span>';
var text = '<span>' + item.text + '</span>';
html += '<li>' + fromUser + text + '</li>';
});

//ul.tw_listクラスにつぶやきのHTMLを追加する
$(".tw_list").html(html);
});
});

</script>
</head>
<body>
<ul class="tw_list">
</ul>
</body>
</html>


image
ラベル:Twitter,jQuery
posted by まーつん at 20:56| Comment(0) | TrackBack(0) | Twitter | このブログの読者になる | 更新情報をチェックする

2010年08月15日

Twitter Mentionsを試してみる

Twitterを使ったサイトを構築してみようと思ったので、まずはjQueryを使ってTwitterと連携できそうな"Twitter Mentions"を利用してみます。ちなみに作者の方のページを見る限り英語では無い(スペイン語)ようなので、使い方は私の勝手な推測で進めます。

まずは"Twitter Mentions"のページからzipファイルをダウンロードします。
ファイルを解凍してその中のjquery.twitter.mentions.jsをサーバーへアップロードします。

HTMLにscriptタグを追加し、jQueryとjquery.twitter.mentions.jsを呼び出します。
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.twitter.mention/jquery.twitter.mentions.js" type="text/javascript"></script>

HTMLのbodyは、以下のように指定しています。
<div id="container">
<div id="content">
</div>
</div>

twitterMentionsメソッドのパラメーターは以下のようになるようです(スペイン語をなんとか翻訳してみました。間違っていたらすいません)。
-username: [ string | array ] : ユーザー名のテキストチェーンか、複数ユーザー名の配列。
-options: [ object ] :任意で指定可能。以下のオプションがある。
-callback : [Function] : コールバック関数名。
-page : [Int] : ページング。デフォルトは1。(たとえば2にするとmaximumの数値+1から表示される)
-maximum : [Int] :1ページに表示される最大数。デフォルトは10。
-avatar : [bool] : ユーザーアイコンの表示。デフォルトはtrue。
-ulClass : [String] : ulタグに追加するクラス名。デフォルトはtwitter-mentions。
-odd : [bool] リストの1行ごとにCSSの別のクラスを割り当てる。デフォルトはtrue。
-oddClass : [String] : リストの1行ごとにCSSの別のクラスを割り当てる場合のクラス名。デフォルトはodd。
私が参考に作ったページでは、以下のような指定をしています。
<script type="text/javascript">
$(document).ready(function(){
$('#content').twitterMentions(['twj','yonda4'],{
avatar : true,
page: 1,
maximum : 20,
ulClass : 'twitter-mentions',
odd : true,
oddClass : 'odd'
});
});
</script>

上記の指定では表示はこんな感じになります(CSSはZipファイルに入っていたものを一部編集して利用しています) 。
 image

もう一つ別の指定をしてみました。

<script type="text/javascript">
$(document).ready(function(){
$('#content').twitterMentions(['twj','yonda4'],{
avatar : false,
page: 10,
maximum : 5,
odd : false
});
});
</script>

今度はシンプルな見た目になりました。
image
ラベル:twitter jquery
posted by まーつん at 20:11| Comment(0) | TrackBack(0) | Twitter | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。