Twitter検索結果をリアルタイム表示するjQueryプラグイン「monitter」徹底解説

Twitter検索結果をリアルタイム表示するjQueryプラグイン「monitter」徹底解説

Posted at December 26,2011 12:55 AM
Tag:[jQuery, monitter, Plugin]

Twitterの検索結果をリアルタイム表示するjQueryプラグイン「monitter」を紹介します。スクリーンショットは「Android」の検索結果をリアルタイム表示したものです。

「Android」の検索結果をリアルタイム表示

このプラグインはやや古いもので、現在では公式の検索ウィジェットもありますが、公式のものは日本語の設定が面倒なのとデザインが限られるので、意外にこちらの方が使いやすいかもしれません。

1.機能

Twitterの検索APIとjQueryプラグインを組み合わせてウィジェットをウェブサイトに表示し、ウィジェットに検索結果をリアルタイムで表示します。

ウィジェットは1つのページに複数設置できます。設定方法については4項以降で解説します。

2.公式サイトのデモ

公式サイトでデモを確認できるので、操作方法を紹介します。

公式サイトの「monitter」にアクセスします。

monitter

ページ左上にある「tweets containing」に検索文字列を入力して「Add Column」をクリック。

検索文字列を入力

これで検索結果が表示されていきます。

検索結果

右側に設定・停止・削除用のアイコンが表示されます。

設定・停止・削除用のアイコン

設定画面で言語の設定(ja)もできますがうまく動かないようです。

言語の設定

「Add Column」をクリックすればカラムを複数追加できます。カラム上部をドラッグすれば順番を並べ替えることもできます。

カラムを複数追加

3.サンプル

言語設定を日本にしたサンプルを作ってみました。テキストフィールドに文字を入力すれば検索結果を変更することができます。

Monitter widgetサンプル
Monitter widgetサンプル

スタイルも白背景用に見直して、スクロールバーを表示して過去の履歴を見れるようにしたので、よければCSSファイルももっていってください。

4.ダウンロード

ここからはウェブサイトへのウィジェット設置方法を解説します。

monitter」にアクセスして、右上の「Widgets」をクリック。

monitter

「download」をクリック。

download

ダウンロードしたアーカイブを展開します。実際に利用するのは次の2ファイルです。

  • monitter.min.js
  • monitter.css

この2つのファイルをウェブサイトの任意の位置にアップロードします。

アーカイブにはsamples.htmlがあり、ここにアクセスすればサンプルの表示を確認できます。samples.htmlは同梱されているdemo.cssも呼び出しています。

5.ウィジェットの追加

ウィジェットをウェブサイトに追加するには、以下のコードをページに追加します。

<link rel="stylesheet" href="http://user-domain/monitter.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://user-domain/monitter.min.js"></script>
…中略…
<div class="monitter" title="iPhone" lang="ja"></div>

div要素のclass属性「monitter」は必須で、ここにウィジェットが表示されます。

title属性には検索文字列、lang属性に検索対象の言語を設定します。div要素を複数設定すれば複数のウィジェットを表示できます。

title属性の検索文字列はTwitterの検索API(のSearch Operators)に準じているはずなので、AND検索/OR検索/NOT検索/フレーズ検索/特殊検索が可能と思われます。

検索方法は以下のページが参考になります。

超自己満足プログラミング - Twitter検索APIメモ

6.スタイルの設定

monitter.cssをアップロードしただけの状態(他にCSSの設定がまったくない場合)では実用に耐えられる表示になりません(下)。

download

ということで、文字色は最低限設定してください。

他にスタイルを変更したい場合は、monitor.cssの内容を適宜変更するか、monitor.cssの後方に同じセレクタ・プロパティを追加して上書きしてください。参考までにmonitter.cssのポイントとなる部分にコメントをいれておきます。

.tweet /* ツイート単位の設定 */
{
display: block;
background: #333; /* ツイートコンテンツの背景 */
clear: both;
padding: .6em;
margin: .3em;
overflow: hidden;
}
.tweet imgt /* ツイートアイコンの設定 */
{
float: left;
margin-right: 1em;
border: 2px solid #222;
background: #444;
}
.tweet p.text /* ツイートコンテンツの設定 */
{
margin: 0;
padding: 0;
padding-left: 70px; /* 画像とコンテンツの間隔 */
}
.monitter  /* ウィジェットの設定 */
{
float: left;
width: 280px; /* ウィジェットの幅 */
height: 180px; /* ウィジェットの高さ */
margin: 5px;
border: 4px solid #666;
background: #666; /* ウィジェットの背景 */
overflow:hidden; /* スクロールできるようにするにはここを変更 */
}

7.時間表示の修正

デフォルトのmonitter.min.jsでは、ツイート時間が00分~09分のときに10の位が表示されないので、以下の修正を行うことを推奨します。ファイルが圧縮されているので分かりにくいですが、変更前の文字列で検索して、該当部分をまるっと置き換えてください。

変更前

var thedatestr=thedate.getHours()+':'+thedate.getMinutes();

変更後

var min='00'+thedate.getMinutes();min=min.substr(min.length-2,2);var thedatestr=thedate.getHours()+':'+min;
関連記事
zenback
人気エントリー
トラックバックURL


コメント

>設定画面で言語の設定(ja)もできますがうまく動かないようです。

LOCATION:はGEOCODING:内にあって、RADIUS:とセットになっているので、おそらく位置情報でTweetを絞り込む機能じゃないでしょうかね。

[1] Posted by oscar logo : December 26, 2011 10:11 AM

>oscarさん
こんばんは。
なるほど、ご指摘ありがとうございます。

[2] Posted by yujiro logo : December 28, 2011 12:26 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)