Twitter APIを使ってツイートを表示させる

Javascript PHP
2013.06.09

TwitterのAPIが新しくなったのでツイートの表示方法をメモ

Twitterへのアプリの登録

まずhttps://dev.twitter.com/appsにアクセスし、「Creatre a new application」ボタンをクリックしてアプリを作成

遷移した画面で次の情報を登録

  • Name：アプリケーション名
  • Description：使用用途
  • WebSites：設置URL
  • CallbackURL：今回はの目的では空欄のまま

「DevelopersRulesOf TheRoad」の「Yes,I agree」にチェックを入れたら、下の「CAPTCHA」で認証用の数字等を入力して「Create Your New Twitter Application」ボタンをクリック。

画面が遷移したら、画面の最下にある「Create my access token」ボタンをクリック。
そうすると英数字の羅列された文字列がいくつか表示されるので、以下の情報をテキストエディタなどにコピー＆ペースト。

OAuth settings
  • Consumer key
  • Consumer secret
Your access token
  • Access token
  • Access token secret

OAuth認証を行うライブラリをダウンロード

次に、https://github.com/abraham/twitteroauthへアクセスし、「twitteroauth」ライブラリをダウンロード。解凍したフォルダ内にある「twitteroauth」を任意の場所に移動する。

twitter.phpの作成

以下のコードをtwitter.phpとして、移動した「twitteroauth」の中に保存。

PHP

<?php
require_once("twitteroauth.php");

$consumerKey = "XXX"; //←Consumer keyの文字列を入力
$consumerSecret = "XXX"; //←Consumer secretの文字列を入力
$accessToken = "XXX"; //←Access tokenの文字列を入力
$accessTokenSecret = "XXX"; //←Access token secretの文字列を入力
$count = "6"; //←取得するお気に入りの数を入力
$screenname = "YYY"; //←Twitterアカウントを入力
$id = "ZZZ"; //←TwitterアカウントのIDを入力（上記アカウントのIDで数値の情報）

$twObj = new TwitterOAuth($consumerKey,$consumerSecret,$accessToken,$accessTokenSecret);
$req = $twObj->OAuthRequest('https://api.twitter.com/1.1/statuses/home_timeline.json',
'GET',array('screen_name'=>$screenname, 'user_id'=>$id, 'count'=>$count));
echo $_GET['callback'] . '(' . $req. ')';
?>
  • APIのURLを変えることで、お気に入りの取得やツイートの取得等へ変更可能。
  • APIに付加するパラメータはtwitteroauthを使用する場合はURLに付加するのではなく、「array(パラメータ1=>値,パラメータ2=>値……)」の形で渡す

USERIDの確認方法

User IDの数値は「https://twitter.com/users/show?screen_name=自分のアカウント名（＠の後）」にアクセスすると確認可能。

APIのURLを確認

http://dev.twitter.com/console/からAPIのURLを確認。

  • ログインした状態で、Authenticationで「OAuth1」の認証とアプリ連携を必ず行う。
  • 選んだAPIのQueryタブ内の赤い「*」が付いているのは必須パラメータ

script.jsの作成とHTML、CSSの作成

script.jsとHTMLは以下の通り、CSSはお好みで設定。

Javascript

$(function(){
	
	var $twtr = $('#twitter');
	
	// Ajaxステータスの表示
	$twtr.empty()
		.append('<p class="msg">ツイートの取得中…</p>');
	
	$.getJSON( 'http://設置URLを記載/twitteroauth/twitter.php?callback=?' )
		
		// 読み込み完了時
		.success(function( json ) {
			
			var tweetStr = ''; // ツイートHTML格納用
			var time, icon, name, text;
			
			// divを空に
			$twtr.empty();
			
			// JSONデータの処理
			$.each( json, function(i, tweet) {
				
				// JSONからデータを抽出
				name = tweet.user.screen_name;       // ユーザー名
				time = tweet.created_at;             // 日付
				icon = tweet.user.profile_image_url; // プロフィールアイコンURL
				text = tweet.text;                   // ツイート本文
				
				// 日付のフォーマット
				time = formatDate(time);
				
				// プロフィールアイコン（最少サイズを使用）
				icon = icon.replace(/_normal/, '_mini');
				
				// ツイート内のリンク／ユーザー名／ハッシュタグ
				text = text.replace(/(s?https?:\/\/[-_.!~*'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/gi, '<a href="$1" class="link">$1</a>');
				text = text.replace(/#(\w+)/gi,'<a href="http://twitter.com/#!/search?q=%23$1" class="hashtag">#$1</a>' );
				text = text.replace(/@(\w+)/gi,'<a href="http://twitter.com/#!/$1" class="user">@$1</a>' );
				
				// HTMLの整形
				tweetStr += '<li>';
				tweetStr += '<span class="time">' + time + '</span>';
				tweetStr += '<span class="icon"><a href="http://twitter.com/#!/' + name + '">'
				   + '<img src="' + icon + '" alt="' + name + '" width="24" height="24" /></a></span>';
				tweetStr += '<span class="name">' + name + '</span>';
				tweetStr += '<span class="text">' + text + '</span>';
				tweetStr += '</li>';
				
			});
			
			// HTMLを追加
			$('<ul></ul>').html(tweetStr).appendTo($twtr);
		})
		
		// 読み込みエラー時
		.error(function( json ) {
			$twtr.empty()
				.append('<p class="error">エラー：ツイートを取得できませんでした。</p>');
		});
	
	// 日付フォーマット用関数
	function formatDate( date ) {
		
		var dArr, dStr, d;
		
		// IEでパースできないフォーマットのため、
		// 文字列の順序を入れ替える
		dArr = date.split(" ");
		dStr = [dArr[0], dArr[1], dArr[2], dArr[5], dArr[3], dArr[4]].join(' ');
		d = new Date(dStr);
		
		return d.getFullYear() + '/' + (d.getMonth()+1) + '/' + d.getDate();
		
	}
			
});

HTML

<div id="twitter">JavaScriptを有効に設定してください。</div>
<!--jsがOFFになっていた場合用にテキスト記入-->

CSS

/* 関連ツイート */
#twitter ul li {
	position: relative;
	padding-bottom:1em;
	margin-bottom: 1em;
	font-size: 11px;
	border-bottom:dotted 1px #ccc;
	/zoom: 1;
}
#twitter ul li span {
	display: block;
}
#twitter ul li span.time {
	float: right;
	font-weight: bold;
	font-size: 9px;
	line-height: 28px;
	color: #c0c0c0;
}
#twitter ul li span.name {
	margin-left: 34px;
	font-weight: bold;
	line-height: 28px;
}
#twitter ul li span.icon {
	position: absolute;
	top: 0;
	left: 0;
	padding: 1px;
	border: 1px solid #c0c0c0;
}
#twitter ul li span.text {
	margin-top: 5px;
	overflow: hidden;
	/zoom: 1;
}
/* AJAXステータス表示用パーツ */
#twitter .msg {
	color: #c0c0c0;
}
#twitter .error {
	color: #c00;
}
Demo