Twitterアプリの作り方

紅葉写真を掲載するサービスのモミジガリッターを開発しました。

仕組みは簡単で、twitpicに上げられた画像をtwitter検索で「紅葉」で引っ掛ているだけです。
今回はtwitterアプリの作り方例をご紹介します。

基本的な作り方

いわゆるジェネレート方式です。
twitterアプリを作る際に一番のポイントとなるのは、「APIのコール回数」になります。
ページを生成する際にWebサーバがリクエストを発行する形にすると、最大表示回数がAPIのコール回数となっていまいます。。
そこで、crontabによるバッチ処理で、APIへリクエストを投げてWebページを構成するHTMLを作成します。
現在のところ、TwitterのOAuthによるAPIのコール回数は1時間に150回となっています。
この数字を良く、考えた上でWebアプリを作成する必要があります。

ジェネレート

twitterへのリクエスト

twitterのOAuthの登録を済ませれば、こんな簡単な使い方でAPIへのリクエストを発行することができます。

<?php
// リクエストパラメータ
$para = array(
  "q"=>"紅葉 twitpic",
  "rpp"=>"100",
  "page"=>1
);
// それぞれのキーを与えて、インスタンス
$t = new TwitterOAuth(CONSUMER_KEY,CONSUMER_SECRET,ACCESS_TOKEN,ACCESS_TOKEN_SECRET);
// Twitter APIへリクエスト
$res = $t->OAuthRequest("http://search.twitter.com/search.atom","GET",$para);
?>

このリクエストは、twitterへログインしている場合の

http://search.twitter.com/search.atom?q=紅葉 twitpic&rpp=100&page=1

と同様のリクエストとなります。
これにより$resにリクエスト結果が返却されます。

twitpicの文字列を引っ掛ける正規表現

一応ご紹介します。リクエスト処理に使えたりします。

<?php
$regex = '#http://twitpic.com/[a-zA-Z0-9]+#';
preg_match($regex,$title,$match);
?>

RTの数を数える

それぞれのツイートからtwitpicのIDを正規表現で抽出し集計してあげることで、写真に対してのRTの数を擬似的に抽出できます。
文字列的な比較をしたRTの数ではなく、twitpicの記事IDレベルで比較をしたRTの数となります。
そうすることで、人気の紅葉写真を抽出することができます。

画像を表示する

twitpicのIDをユニークにするように処理することで、オリジナル投稿者をなんとなく割り出します。
直近のツイートから処理を開始することになるので、一応、一番最後のツイートがオリジナルツイートに近いはずです。

ですので、PHPにより、OAuthで抽出したツイートたちを先頭から舐めまわし、twitpicのIDをユニークキーとして、処理を行ないます。
最後に入ってくるツイートがほぼ、オリジナル投稿ということになります。

画像の見栄え

jQueryのライブラリのlazyloadを使用してみました。
実際に画像をスクロールすることで、画像の読み込みを開始し、フェードインしている効果を演出することが出来ます。
参考
スクロール時に画像の読み込みを開始するAjax Lazyload

<!-- Google JS API --> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
	google.load("jquery", "1.4.2");
</script> 

<script type="text/javascript" src="http://hebita.jp/js/jquery/jquery.lazyload.js"></script>

<script type="text/javascript"> 
$(function() {
        // ページ読み込み後に作動
	$("#contentsPic img").lazyload({
		placeholder: "http://hebita.jp/img/images/ajax-loader.gif",
		effect : "fadeIn"
	});
});
</script>

<h1>TwitPic 紅葉写真</h1> 
<div id="contentsPic">
　・
　・
  <img src="kouyou.jpg">
　・
　・
</div>

これで、id=contentsPic内のimgタグにフェードインの読み込みが有効になります。

下までスクロールしたらAjaxリクエスト

Facebookのように、画面の下までスクロールしたら、自動で次のコンテンツを読み込んでくれる仕組みです。
以下のエントリーで公開されているjQueryのプラグインのbottom_detection.jsを利用させてもらいました。
Webページの最下部へのスクロールを判定するjQuery
ページの一番下にくると、イベントを起こしてくれます。
doInTheBottom()の名前で処理を行ないます。
この関数の中で、Ajaxの処理を書く事で、Facebookのような続きへを作り出すことができます。

<script type="text/javascript"> 
function doInTheBottom()
{
	id = '#showPic' + showPicId;
	showPicNo = $(id)[0].className;
 
	if (showPicNo == 'last') {
		// 最後
		return 0;
	}
	nextHtml = '../template/parts/season/twitpic' + showPicNo + '.html';
	// ajax
	$.ajax({
		url: nextHtml,
		cache: false,
		success: function(html){
			$(id).append(html);
		}
	});
	showPicId++;
}
</script>