Twitterランタイムを表示してみよう
最後は、Twitterのランタイムを表示するプラグインを使ってみます。
さまざまなところで目にするTwitterですが、jQueryで扱えるプラグインも多種あります。今回はその中から、jTweetsAnywhereを取り上げます。こちらからプラグインをダウンロードします。jTweetsAnywhere-1.2.0.zipファイルを解凍後、pluginsフォルダにコピーします。そしてリスト16のように、jQueryプラグインとメニュープラグイン関連のファイルを読み込みます。
<!--1．jQueryの読み込み--> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <!--2．プラグインの読み込み--> <script type="text/javascript" src="plugins/jTweetsAnywhere-1.0.1/jquery.jtweetsanywhere-1.2.0.js"> <!--3．プラグインのスタイルシートの読み込み--> <link rel="stylesheet" type="text/css" href="plugins/jTweetsAnywhere-1.0.1/jquery.jtweetsanywhere-1.2.0.css" />
プラグイン利用時はjTweetsAnywhereメソッドを使用し、表示させたいtwitterのIDと件数を指定します（リスト17）。
<!--4．プラグインの利用-->
<script type="text/javascript">
<!--
$(function () {
$('#twts').jTweetsAnywhere({
username: 'codezine',
count: 10
});
});
//-->
</script>
つぶやきを表示させるだけであれば、リスト18のようにdiv要素にidを指定した表示領域を用意します。
<!--5．プラグインの表示--> <form id="testForm" action=""> <div id="twts"></div>
Twitterランタイム表示プラグイン使用結果を、図8に示します。
また、jTweetsAnywhereにはさまざまなオプションが用意されいて、例えば、指定した検索ワードが含まれているツイートの一覧を出力させることもできます。リスト19は「codezine」という検索キーワードを含むツイートを10件ずつ表示させるサンプルです。
<!--6．検索ワードが含まれるツイート一覧を出力-->
$(function () {
$('#twts').jTweetsAnywhere({
searchParams: 'q=codezine',
count: 10,
showTweetFeed: {
autorefresh: {
mode: 'trigger-insert',
interval: 60
},
paging: {
mode: 'more'
},
showTimestamp: {
refreshInterval: 15
}
}
});
});
上記で利用したオプションを表2に示します。
| オプション | 説明 |
| searchParams | 検索ワードを指定する。q=検索ワード |
| count | 表示ツイートの件数を指定する。デフォルトは0。ユーザまたはリストのツイート表示は最大20件。検索結果の表示は最大100件 |
| showTweetFeed | ツイートのフィードを表示するかを指定する（true／false）。デフォルトはtrue |
また、表2のshowTweetFeedのオプションを表3に示します。
| オプション | 説明 | 選択値 | 選択値の説明 | デフォルト値 |
| autorefresh | オートリフレッシュのモードを指定する | "none" | "auto-insert" | "trigger-insert" | "auto-insert"を選択した場合は新しいツイートが自動的に挿入される。"trigger-insert"を選択した場合は、新しいフィードが届くと表示されるアップデートボタンをクリックすることで、フィードが更新される | "none" |
| interval | autorefreshのオプションで、ツイートを読み込む間隔（秒）を指定する | - | 最小値は30 | 60 |
| paging | ページング のモードを指定する | "none" | "more" | "prev-next" | "endless-scroll" | "pre-next"を選択した場合は、「pre」ボタンと「next」ボタンが表示される。"more"を指定した場合は「more」ボタンが表示される。"none""endless-scroll"を選択した場合はツイートのフィードの高さをCSSで指定し、overflowをautoに設定が必要 | "none" |
| showTimestamp | ツイートのタイムスタンプを表示する | true/false | Trueを指定した場合、オプションとしてrefreshIntervalを秒単位で指定する | true |
図9に、検索ワードが含まれるツイート一覧出力の結果を示します。
まとめ
第4回では、jQueryのユーザインタフェースを拡張するjQueryプラグインの中から、メニューバー、タブ、画像のスライダー、ズーム機能、Twitterのタイムライン表示を紹介しました。プラグインのダウンロードと簡単な記述で高機能な処理を記述できるのが、jQueryプラグインの魅力です。ぜひ、ご自身のサイトに役立つようなプラグインを探してみてください。
次回は、画像に効果を付けるプラグインを取り上げます。
