だから人間は大嫌いだ!!

ゲームプログラミングとか、気になるWebのサービスのこととか

TopicoJSを使って、ハッシュタグの検索結果をブラウザ上に表示しよう

人間はプレゼンテーションやパネルディスカッションなんていうのを開いて、人々の前で何かを説くのが好きみたいですね。何百人の聴講者を前に、素晴らしいことを語る。一方的に言葉を投げかけ続けるわけです。

ただね、それってどうなんだろうって思うのですよ。授業だって、一方通行に聞いているだけじゃつまんなくて眠たくなるじゃないですか。だから先生も、負けじと突然生徒を当てたりしますよね。ああいうの、凄く大事だって思うのです。

そこで、今回私が発明したのがこれ。「TopicoJS」。聴講者側から、Twitterを通じてトピックを投げかけることができるJSライブラリ。これさえあれば、聴講者から猛烈な勢いで質問攻めに合うことまちがいなし。(あれ、なんか質問する人が逆になってる!?まぁ細かいことはどうでもいいや!)

TopicoJSを使うとどうなるのか?

普通のパネルディスカッションはこんな感じですが。
f:id:sakura_q:20150219175419j:plain

ブラウザ上でTopicoJSがいると、見てください、ほらほらほらほらーーー!聴講者まで参加されて、とても楽しそうですね!
f:id:sakura_q:20150219175744j:plain

え、変わったように見えない?それね、多分、あなたがコミュ症なだけです。

使い方

1. 資材を入手しよう

ここからまず、必要な資材をダウンロード。

ダウンロードボタンがあるので、そこをクリックしたらzipがダウンロードされてきます!

f:id:sakura_q:20150219180242j:plain

zipファイルを解凍すると、「topico.js」「LICENSE」「topico_server.php」の3つのファイルが見つかるはず。LICENSEはただのマニュアル、しかもなんか英語で書いてて多くの人間には解読不能らしいので、「topico.js」と「topico_server.php」の2つだけを発掘すればよいよ。

- js
  - topico.js
- LICENSE
- server_scripts
  - topico_server.php

2. サーバを構築しよう

まずはサーバーの構築。「topico_server.php」をHTTPサーバの公開ディレクトリに置く。PHPを動くようにして、実行権限とかいうのを与えなうちゃいけないのだけど、そういうのはGoogle先生に聞けばいい。

topico_server.phpの10〜13行目付近に、TwitterのConsumer keyなどを入力する箇所があるので、Twitterから取得して入力する。

$CONSUMER_KEY        = "xxxxxxxxxxxxxxxxxxxxx";
$CONSUMER_SECRET     = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
$ACCESS_TOKEN        = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
$ACCESS_TOKEN_SECRET = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

でもって、PHPファイルが置いてあるURLにアクセスするのだけど、クエリストリングに検索したいハッシュタグ名を入力すればOK。例えば、「html5j」というキーワードで探したいのであれば、以下みたいなURLでアクセスすればおk!

f:id:sakura_q:20150220133521j:plain

↑こんな風に、JSONPというフォーマットで、Twitter上のハッシュタグの検索結果が出力されたら、構築がうまくいっていると考えたらいい。

3. HTML内に埋め込もう

最後に、「topico.js」をHTMLドキュメントに埋め込む。パラメーターはHTMLタグ内に書き込む。以下が、シンプルなサンプル。

<!DOCTYPE html>
<html lang="ja"
    tpc-jsonp-url="http://ドメイン名/topico_server.php?html5j"
    tpc-jsonp-methodname="loadTweets"
    tpc-hashtag="html5j"
    >
<head>
  <title>Sample</title>
  <script src="js/topico.js"></script>
</head>
<body>
    <h1>HTML5 Talk</h1>
</body>
</html>

パラメーターには、こんなのがある。必須項目が3つあるので、ご注意を。

tpc-jsonp-url topico_server.phpが置いてあるURL+ハッシュタグ
tpc-jsonp-methodname 「loadTweets」って書いとけばとりあえずOK。
tpc-hashtag ハッシュタグ名。
tpc-polling-span Twitterのタイムラインをチェックしにいく頻度。ミリ秒単位。(入力しなくてもおk)
tpc-animate-duration アニメーション期間。フレーム数単位で、60=1秒。(入力しなくてもおk)
tpc-position タイムラインの配置場所。'left'で左側、'right'で右側に配置される。(入力しなくてもおk)

あとは、このHTMLファイルをHTTP Serverの公開ディレクトリに置いて、アクセスすればおkなのです。ほれ、完成じゃ!

f:id:sakura_q:20150220135847j:plain