Juitterを使って勉強会とTwitterを繋ぐ

2009/9/12-1

昨日の、えxぺ勉強会(この素晴らしくてバカ野郎な世界：Twitter勉強会)ではTwitterのハッシュタグ検索を20秒毎に自動更新した結果をプロジェクタのスクリーンに出し続けながらの発表を行いました。

今回は会場内での無音コミュニケーションツールとしてTwitterが活用されたり、登壇者/運営者側がTwitter上で何が呟かれているかを把握するために使われていた感じでした。たまに、面白い書き込みがあるとスクリーンに映し出された発言を指差しながら「こんなコメントが。。。」のような感じでネタにしたりしていました。

今回は顔出しNGの発表者の方々がいらしたのでUstreamによる中継がなかったのですが、Ustream中継があるときには会場外部と内部を繋ぐツールとして使えると思います。

今まで同様のツールを探していたのですが、うまいものが発見できていなかったので、今回JavaScriptで自作しました。単にJuitterを使っただけなので、30分ぐらいで終わりました。勉強会やプレゼンで同様の事をしたい方々もいらっしゃると思うので、簡単に方法を解説したいと思います。

今回自作したページは以下のような形で表示されます。

http://expe.jp/twitter/

HTMLファイル

今回のWebページのHTML中身です。



<html>
<head>
<title>スバツイ #subatwi</title>
<link rel="stylesheet" href="./juitter.css" type="text/css"><title>
<script type="text/javascript" src="./jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="./jquery.juitter.js"></script>
<script type="text/javascript" src="./system.js"></script>
</head>
<body>

<div id="juitterContainer"></div>

</body>

</html>

jqueryのバージョン番号がファイル名に入っている時は注意が必要です。上記サンプルをそのままコピペしても「jquery-1.3.1.min.js」のファイル名が異なるために動作しない可能性があります。 juitter本体に含まれるjQueryファイル名を確認して下さい。

Juitterのダウンロード

Juitter本体を本家サイトからダウンロードします。

2009年9月12日現在は、右上の方に「Download Juitter Beta」という大きなボタンがありました。そのボタンを押すと圧縮されたJuitter本体がダウンロードされます。

ダウンロードしたファイルを手元で解凍して各ファイルを必要箇所に移動して下さい。

system.jsの設定

まず、最初に検索キーワードを設定を説明します。

特定ユーザのTweetを監視するようにも設定可能ですが、勉強会でプロジェクタに映すためには特定ハッシュタグの監視という用途での利用が多いと思うので、ここでは検索のみ解説します。キーワード設定には「system.js」の「searchObject」部分を設定します。


searchObject:"%23expe"

ハッシュタグ検索を行う場合は「#」ではなく「%23」を使いましょう。「#」だと動作しません。例えば、「#expe」としたい場合は「%23expe」とします。

日本語を使いたい場合にはUTF-8に変換してからURLエスケープした文字列を使って下さい。

複数の単語を利用した検索を行う場合は「,」(カンマ)で区切って指定します。

言語設定

初期設定では英語専用（lang:"en"）になっているので、日本語のTweetも拾うようにするには「lang:"ja"」もしくは「lang:"all"」に変更する必要があります。個人的には「ja」よりも「all」がお勧めです。「ja」だと何故か英語と判定された日本語Tweetが入らない事があるようです。

更新感覚

「live:"live-15"」となっている部分の数値を変更すると更新間隔を変更出来ます。 15だと15秒毎にrefreshされるようです。

CSSの編集

CSSをゼロから書く事も可能ですが、かなり面倒なのでベースとなるCSSを本家サイトからダウンロードするのがお勧めです。

CSSファイルはJuitter本体ではなく、「Juitter website source code」として配布されています。配布されているパッケージを解凍してjuitter.cssを取り出すのが簡単です。

CSSにはJuitter部分と、Juitter Webサイトの定義が含まれています。今回利用するのはJUITTER部分なので、以下のコメントに囲まれた部分を適宜変更して下さい。


/*JUITTER PLUGIN CSS*/

... この中にあるCSSを必要に応じて編集 ...
... 例えばbackground-color,font-size,heightあたり ...

/*end of Juitter CSS*/

最後に

今後も、えxぺ勉強会関連で何か他の人が使いそうなノウハウがあれば公開しようと思います。

過去記事

過去記事一覧

超凄いIPv6解説書(488ページ)を無料配布します！