twitter APIとjQueryでtwitter widgetを作成する

2012/2/16
topic
/

twitterのwidgetのデザインをカスタマイズしたいのと、リプライを表示させたくないと言う理由からtwitter APIとjQueryを使ってオリジナルのwidegetを作成しました。
当ブログでは殆どデザインしてませんが、公式のwidgetに近いデザインで作成する場合の記事にしました。

twitterのwidgetのデザインをカスタマイズしたいのと、
リプライを表示させたくないと言う理由から
twitter APIとjQueryを使ってオリジナルのwidegetを
作成しました。

当ブログでは殆どデザインしてませんが、
公式のwidgetに近いデザインにする場合の制作方法を書きました。

サンプル

twitterウィジェット

demodemo

ベースはA jQuery Twitter Ticker | Tutorialzineを参考にしてます。
また複数ユーザーのツイートを表示したい場合は上記サイトが参考になります。

ソース

jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />

jQueryはgoogleのCDNを利用してます。
jScrollPaneはスクロールバーの機能を提供するスクリプトです。
jScrollPane – cross browser styleable scrollbars with jQuery and CSS
のダウンロード→download a zipから一式取得できます。
mousewheel.jsはスクロールバーをマウスホイールに対応させます。
mousewheel.jsもjScrollPaneの一式に入ってます。
jScrollPaneのスタイルを適用させるためjquery.jsrollpane.cssも読み込みます。

<script type="text/javascript">
$(function(){
	var screenName = 'barchin';	//初期設定1：スクリーンネーム
	//twitter API
	var twitAPI = "http://api.twitter.com/1/statuses/user_timeline.json?callback=?";
	
		//JSON取得
		$.getJSON(twitAPI,
		{
			screen_name: screenName,
			count: '20',			//初期設定2：書き出すツイート数
			exclude_replies :true	//リプライ表示・非表示
		},
		function(data){
				//プロフ取得
				var userName = data[0].user.name;
				var userId = data[0].user.name;
				var userPic = '<img src="'+data[0].user.profile_image_url+'" />';
				$("#userName").html(userName);	//ユーザー名出力
				$("#userPic").html(userPic);	//アイコン出力
				$("#screenName").html('<a href="http://twitter.com/'+screenName+'">'+screenName+'</a>');	//スクリーンネーム出力
				
				var container=$('#tweet-container');
				container.html('');
				//#tweet-containerの初期化
				
				//ツイートごとに処理
				$.each(data, function(i, item){
					var str = '	<div class="tweet">\
					<div class="txt">'+formatTwitString(item.text)+'</div>\
					<div class="time">'+relativeTime(item.created_at)+'</div>\
					<div class="action"><a href="http://twitter.com/intent/retweet?tweet_id='+item.id_str+'">retweet</a>│<a href="http://twitter.com/intent/favorite?tweet_id='+item.id_str+'">favorite</a></div>\
					</div>';				

					//ツイートをソースに追加 
					container.append(str);
				});
				//jScroll
				container.jScrollPane();
		});
		$('#tweet').show('slow');
});


// ツイート本文フォーマットfunction
function formatTwitString(str)
{
	str=' '+str;
	str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
	// URLにリンクを付ける
	str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
	// メンションにリンク
	str = str.replace(/([^\w])\#([\w\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
	// ハッシュにリンク
	return str;
}
// ツイートの時間を割り出す
function relativeTime(pastTime)
{
	var origStamp = Date.parse(pastTime);
	var curDate = new Date();
	var currentStamp = curDate.getTime();
	var difference = parseInt((currentStamp - origStamp)/1000);

	if(difference < 0) return false;
	if(difference <= 5)			return "Just now";
	if(difference <= 20)			return "Seconds ago";
	if(difference <= 60)			return "1 minute ago";
	if(difference < 3600)		return parseInt(difference/60)+" minutes ago";
	if(difference <= 1.5*3600) 	return "1 hour ago";
	if(difference < 23.5*3600)	return Math.round(difference/3600)+" hours ago";
	if(difference < 1.5*24*3600)	return "1 day ago";
	// 1日前の場合はその日付を

	var dateArr = pastTime.split(' ');
	return dateArr[1]+' '+dateArr[2]+
	(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:'');
}
</script>

まずTwitterAPIを使ってツイートのストリームをJSON形式で取得します。

初期設定として、スクリーンネームを入力します。
表示するツイート数、リプライの表示設定などもします。

プロフィール情報もJSONから取得します。
各ツイートにはそのツイート発言者の情報が含まれており、
今回は全てのツイートが同一ユーザーなので一番目のツイートから情報取得してます。

各ツイートごとに処理を行います。
ツイート文はそのままの状態ではURLなどにリンクが貼られてないので、
formatTwitStringを使ってリンクを付けます。
投稿時間はそのままでは投稿した時間となるのでrelativeTimeを使って、
現在時間との差を割り出しどのくらい前の投稿か表示します。

jScrollを実行してスクロールバーの機能を実装します。

HTML

<body>
<div id="top-bar">
	<a href="http://twitter.com/barchin"><img src="img/img_topBar.jpg" alt="follow me!" width="300" height="110" /></a>	
</div>
<div id="twitter-widget">
	<div id="prof">
		<div id="userPic">Loading...</div>
		<div id="screenName">Loading...</div>
		<div id="userName">Loading...</div>
	</div>
	<!--stream-->
	<div id="tweet-container">
	Loading...
	</div>
	<!--/#streem-->
</div>
</body>

#profでは、twitterのアイコンやユーザー名を表示します。
#twee-container内にストリームを表示します。

CSS

<style type="text/css">
a, a:visited {
	color:#00BBFF;
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
#top-bar{
	width:300px;
}
/* widget*/
#twitter-widget{
	padding:0 5px;
	width:290px;/*300px*/
	height:350px;
	background:url(img/bg_ticker.jpg) no-repeat #50340d;
	color:#666666;
	/* 角丸 */
	-moz-border-radius:0 0 6px 6px;
	-khtml-border-radius: 0 0 6px 6px;
	-webkit-border-radius:0 0 6px 6px;
	border-radius:0 0 6px 6px;
}
/* ツイートのストリーム */
#tweet-container{
	height:270px;
	width:100%;
	overflow:auto;
	background:rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 1px 1px 3px 0px #000; /* Safari, Chrome用 */
	-moz-box-shadow: inset 1px 1px 3px 0px #000; /* Firefox用 */
	box-shadow: inset 1px 1px 3px 0px #000; /* CSS3 */
}
/*プロフィール*/
#prof{
	padding:0 8px;
	height:60px;
	overflow:hidden;
}
#userPic{
	float:left;
}
#userPic img{
	-moz-border-radius:3px;
	-khtml-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}
#screenName{
	margin:0 0 0 55px;
	font-weight:bold;
	font-size:14px;
}
#screenName a{
	color:#fff;
	text-decoration:underline;
}
#userName{
	margin:0 0 0 55px;
	color:#fff;
}
/*tweet*/
.tweet{
	margin:5px 8px;
	padding:5px 0;
	color:#fff;
	width:auto;
	overflow:hidden;
}
/*post時間*/
.tweet .time{
	display:inline;
	text-transform:uppercase;
	font-size:10px;
	color:#aaa;
	white-space:nowrap;
}
/*retweet&favorite*/
.tweet .action{
	display:inline;
	padding-left:1em;
}
/*text*/
.tweet .txt{
}
/*scroll bar*/
.jspTrack{
	background-color:#fff;
	-webkit-box-shadow: inset 1px 1px 1px 0px #000; /* Safari, Chrome用 */
	-moz-box-shadow: inset 1px 1px 1px 0px #000; /* Firefox用 */
	box-shadow: inset 1px 1px 1px 0px #000; /* CSS3 */
}
.jspDrag{
	background-color:#805400;
	-webkit-box-shadow: inset -1px -1px 1px 0px #000; /* Safari, Chrome用 */
	-moz-box-shadow: inset -1px -1px 1px 0px #000; /* Firefox用 */
	box-shadow: inset -1px -1px 1px 0px #000; /* CSS3 */
	background-image: linear-gradient(bottom, rgb(97,62,1) 0%, rgb(128,83,0) 100%);
	background-image: -o-linear-gradient(bottom, rgb(97,62,1) 0%, rgb(128,83,0) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(97,62,1) 0%, rgb(128,83,0) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(97,62,1) 0%, rgb(128,83,0) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(97,62,1) 0%, rgb(128,83,0) 100%);
}

demodemo

B!

Comment

コメント(0)

コメントはまだありません。

コメントする

Trackback(0)

関連記事

WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ
ソーシャル共有ボタン

Facebook・Twitterなどソーシャルボタン設置方法まとめ

レスポンシブWebデザインでテーブルを使う時の小技

人気記事

ソーシャル共有ボタン

Facebook・Twitterなどソーシャルボタン設置方法まとめ

レスポンシブWebデザインでテーブルを使う時の小技
webレイアウト7選

Web制作者は知っておきたいwebサイトのレイアウト7選

レスポンシブWebデザインでハマりがちな%指定