手軽に扱えるjQueryプラグインを使ってみよう

jQuery UI／プラグインの活用（4）

Twitterランタイムを表示してみよう

　最後は、Twitterのランタイムを表示するプラグインを使ってみます。

　さまざまなところで目にするTwitterですが、jQueryで扱えるプラグインも多種あります。今回はその中から、jTweetsAnywhereを取り上げます。こちらからプラグインをダウンロードします。jTweetsAnywhere-1.2.0.zipファイルを解凍後、pluginsフォルダにコピーします。そしてリスト16のように、jQueryプラグインとメニュープラグイン関連のファイルを読み込みます。

リスト16　プラグインの読み込み（jQueryPlugin_menu_twit1.html）

<!--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）。

リスト17　プラグインの利用（jQueryPlugin_menu_twit1.html）

<!--4．プラグインの利用-->
<script type="text/javascript">
<!--
    $(function () {
        $('#twts').jTweetsAnywhere({
            username: 'codezine',
            count: 10
        });
    });
//-->
</script>

　つぶやきを表示させるだけであれば、リスト18のようにdiv要素にidを指定した表示領域を用意します。

リスト18　プラグインの読み込み（jQueryPlugin_menu_twit.html）

<!--5．プラグインの表示-->
<form id="testForm" action="">
<div id="twts"></div>

　Twitterランタイム表示プラグイン使用結果を、図8に示します。

図8　Twitterのランタイム表示

　また、jTweetsAnywhereにはさまざまなオプションが用意されいて、例えば、指定した検索ワードが含まれているツイートの一覧を出力させることもできます。リスト19は「codezine」という検索キーワードを含むツイートを10件ずつ表示させるサンプルです。

リスト19　検索ワードが含まれるツイート一覧を出力（jQueryPlugin_menu_twit2.html）

<!--6．検索ワードが含まれるツイート一覧を出力-->
$(function () {
    $('#twts').jTweetsAnywhere({
        searchParams: 'q=codezine',
        count: 10,
        showTweetFeed: {
            autorefresh: {
                mode: 'trigger-insert',
                interval: 60
            },
            paging: {
                mode: 'more'
            },
            showTimestamp: {
                refreshInterval: 15
            }
        }
    });
});

　上記で利用したオプションを表2に示します。

表2　jTweetsAnywhereのオプション

オプション	説明
searchParams	検索ワードを指定する。q=検索ワード
count	表示ツイートの件数を指定する。デフォルトは0。ユーザまたはリストのツイート表示は最大20件。検索結果の表示は最大100件
showTweetFeed	ツイートのフィードを表示するかを指定する（true／false）。デフォルトはtrue

　また、表2のshowTweetFeedのオプションを表3に示します。

表3　showTweetFeedのオプション

オプション	説明	選択値	選択値の説明	デフォルト値
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に、検索ワードが含まれるツイート一覧出力の結果を示します。

図9　Twitterランタイム表示

まとめ

　第4回では、jQueryのユーザインタフェースを拡張するjQueryプラグインの中から、メニューバー、タブ、画像のスライダー、ズーム機能、Twitterのタイムライン表示を紹介しました。プラグインのダウンロードと簡単な記述で高機能な処理を記述できるのが、jQueryプラグインの魅力です。ぜひ、ご自身のサイトに役立つようなプラグインを探してみてください。

　次回は、画像に効果を付けるプラグインを取り上げます。

参考資料

• jQuery Plugin公式サイト
• apycom公式サイト
• Sudo Slider
• Cloud Zoom Intergration Instructions公式サイト
• jTweetsAnywhere