/index.html

## index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<title>search.Twitter Widget</title>
	<link rel="stylesheet" href="twitWidget.css" type="text/css">
	<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="twitter.js"></script>
</head>


<!-- ------------------ body ------------------ -->
<body onload="setTab();">
	<div id="tabSpace"></div>
	<div id="tabs">
	<a href="#jsTL">JavaScript</a>
	<a href="#ocTL">Objective</a>
	</div>

	<div id="jsTL" class="TLdiv"></div>
	<div id="ocTL" class="TLdiv"></div>

	<script type="text/javascript" src="http://search.twitter.com/search.json?lang=ja&q=javascript&rpp=10&callback=getJsJson"></script>
	<script type="text/javascript" src="http://search.twitter.com/search.json?lang=ja&q=Objective&rpp=10&callback=getOcJson"></script>
</body>
</html>

## twitter.js

function getJsJson(json){
	parseJson(json,"jsTL");
}
function getOcJson(json){
	parseJson(json,"ocTL");
}


function parseJson(json, DivId){
	var	TLdiv = document.getElementById(DivId);
	var regexp_url = /((https?|ftp)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+))/gi;


	for(var i=0; i<json.results.length; i++){
	var iconHtml   = "<img class='iconImg' src="+ json.results[i].profile_image_url +" />";
	var idHtml     = "<p class='idP'><a href='http://twitter.com/"+json.results[i].from_user+"/'>"+ json.results[i].from_user +"</a></p>";
	var statusHtml = "<p class='statusP'>"+ json.results[i].text +"</p>";
	var dateString =  new Date(json.results[i].created_at);
	dateString = dateString.toLocaleTimeString();
	var timeHtml   = "<p class='timeP'>"+ dateString +"</p>";

	statusHtml = statusHtml.replace(regexp_url , '<a href="$1">$1</a>' );


	TLdiv.innerHTML +=
	"<table class='tweetTable' ><tr class='tweetTr'><td class='iconTd'>"
	+ iconHtml
	+ idHtml
	+ "</td><td class='statusTd'>"
	+ statusHtml
	+ timeHtml
	+ "</td></tr></table>";

	}


}


//---------------------- Tab Menu ---------------------------

var actTab;
var actBox;


function setTab() {
	var tabDiv = document.getElementById('tabs');
	var tabList = tabDiv.getElementsByTagName('a');

	actTab = tabList[0];

	var href = actTab.getAttribute('href');
	var point = href.indexOf('#');
	var boxId = href.slice(point+1);
	actBox = document.getElementById(boxId);


	for( var i=0; i < tabList.length; i++){
		tabList[i].onclick = changeTab;

		href = tabList[i].getAttribute('href');
		point = href.indexOf('#');
		boxId = href.slice(point+1);
		document.getElementById(boxId).style.display = 'none';


	}

	actTab.className = 'acTab';
	actBox.style.display = 'block';

}


function changeTab(){
	actTab.className = '';
	actBox.style.display = 'none';

	actTab = this;

	href = actTab.getAttribute('href');
	point = href.indexOf('#');
	boxId = href.slice(point+1);
	actBox = document.getElementById(boxId);

	actTab.className = 'acTab';
	actBox.style.display = 'block';

	return false;
}


## twitWidget.css
@charset "Shift_JIS";
body{
	color:#601f00;
	/*
	text-shadow: 0px 0px 1px #dddddd;
	*/
	font-family: メイリオ,meirio,hiragino,sans-serif;
	letter-spacing:1px;
}

a{
	color:#17d0ff;;
}

#tabSpace{
	height:60px;
}

#tabs{
	position:fixed;
	top:14px;
	left:9px;
	z-index:2;
	margin:5px;
}


#tabs a{
	background-color:#eaf4f3;
    -webkit-box-shadow: 3px 3px 3px #dddddd;
	color:#b3b3b3;
	font-weight:bolder;
	text-shadow: 1px 1px 5px #ffffff;
	padding:9px 5px;
	text-decoration: none;
	-webkit-border-radius: 10px;
	opacity:0.4;
}

#tabs a.acTab{
	background-color:#3de8f5;
	color:#2f2f2f;
	text-shadow: 1px 1px 5px #dbdbdb;
    -webkit-box-shadow: 2px 2px 3px #dddddd;
}


.TLdiv{
	width:250px;
}


.tweetTable{
	width:230px;
}


.iconTd{
	width:30px;
	word-break: break-all;
}

.iconImg{
    -webkit-box-shadow: 0 0 6px #dddddd;
}

.idP{
	text-align:center;
	font-size:10px;
}
.idP a{
	color:#2f99ac;
	font-weight:bold;
	text-decoration: none;
	}


.statusTd{
	width:300px;
	word-break: break-all;
}

.statusP{
	margin-top:0;
	margin-bottom:0;
	padding:20px;
	font-size:12px;
	background-color:#eefffe;
	-webkit-border-radius: 10px;
    -webkit-box-shadow: 0 0 6px #dddddd;
}

.timeP{
	margin:0 15px;
	text-align:right;
	font-size:8px;
}
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<title>search.Twitter Widget</title>
	<link rel="stylesheet" href="twitWidget.css" type="text/css">
	<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="twitter.js"></script>
	</head>




	<!-- ------------------ body ------------------ -->
	<body onload="setTab();">
	<div id="tabSpace"></div>
	<div id="tabs">
	<a href="#jsTL">JavaScript</a>
	<a href="#ocTL">Objective</a>
	</div>

	<div id="jsTL" class="TLdiv"></div>
	<div id="ocTL" class="TLdiv"></div>

	<script type="text/javascript" src="http://search.twitter.com/search.json?lang=ja&q=javascript&rpp=10&callback=getJsJson"></script>
	<script type="text/javascript" src="http://search.twitter.com/search.json?lang=ja&q=Objective&rpp=10&callback=getOcJson"></script>
	</body>
	</html>

	function getJsJson(json){
	parseJson(json,"jsTL");
	}
	function getOcJson(json){
	parseJson(json,"ocTL");
	}





	function parseJson(json, DivId){
	var TLdiv = document.getElementById(DivId);
	var regexp_url = /((https?\|ftp)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+))/gi;


	for(var i=0; i<json.results.length; i++){
	var iconHtml = "<img class='iconImg' src="+ json.results[i].profile_image_url +" />";
	var idHtml = "<p class='idP'><a href='http://twitter.com/"+json.results[i].from_user+"/'>"+ json.results[i].from_user +"</a></p>";
	var statusHtml = "<p class='statusP'>"+ json.results[i].text +"</p>";
	var dateString = new Date(json.results[i].created_at);
	dateString = dateString.toLocaleTimeString();
	var timeHtml = "<p class='timeP'>"+ dateString +"</p>";

	statusHtml = statusHtml.replace(regexp_url , '<a href="$1">$1</a>' );


	TLdiv.innerHTML +=
	"<table class='tweetTable' ><tr class='tweetTr'><td class='iconTd'>"
	+ iconHtml
	+ idHtml
	+ "</td><td class='statusTd'>"
	+ statusHtml
	+ timeHtml
	+ "</td></tr></table>";

	}


	}





	//---------------------- Tab Menu ---------------------------

	var actTab;
	var actBox;


	function setTab() {
	var tabDiv = document.getElementById('tabs');
	var tabList = tabDiv.getElementsByTagName('a');

	actTab = tabList[0];

	var href = actTab.getAttribute('href');
	var point = href.indexOf('#');
	var boxId = href.slice(point+1);
	actBox = document.getElementById(boxId);



	for( var i=0; i < tabList.length; i++){
	tabList[i].onclick = changeTab;

	href = tabList[i].getAttribute('href');
	point = href.indexOf('#');
	boxId = href.slice(point+1);
	document.getElementById(boxId).style.display = 'none';


	}

	actTab.className = 'acTab';
	actBox.style.display = 'block';

	}



	function changeTab(){
	actTab.className = '';
	actBox.style.display = 'none';

	actTab = this;

	href = actTab.getAttribute('href');
	point = href.indexOf('#');
	boxId = href.slice(point+1);
	actBox = document.getElementById(boxId);

	actTab.className = 'acTab';
	actBox.style.display = 'block';

	return false;
	}
	@charset "Shift_JIS";
	body{
	color:#601f00;
	/*
	text-shadow: 0px 0px 1px #dddddd;
	*/
	font-family: メイリオ,meirio,hiragino,sans-serif;
	letter-spacing:1px;
	}

	a{
	color:#17d0ff;;
	}

	#tabSpace{
	height:60px;
	}

	#tabs{
	position:fixed;
	top:14px;
	left:9px;
	z-index:2;
	margin:5px;
	}


	#tabs a{
	background-color:#eaf4f3;
	-webkit-box-shadow: 3px 3px 3px #dddddd;
	color:#b3b3b3;
	font-weight:bolder;
	text-shadow: 1px 1px 5px #ffffff;
	padding:9px 5px;
	text-decoration: none;
	-webkit-border-radius: 10px;
	opacity:0.4;
	}

	#tabs a.acTab{
	background-color:#3de8f5;
	color:#2f2f2f;
	text-shadow: 1px 1px 5px #dbdbdb;
	-webkit-box-shadow: 2px 2px 3px #dddddd;
	}


	.TLdiv{
	width:250px;
	}



	.tweetTable{
	width:230px;
	}




	.iconTd{
	width:30px;
	word-break: break-all;
	}

	.iconImg{
	-webkit-box-shadow: 0 0 6px #dddddd;
	}

	.idP{
	text-align:center;
	font-size:10px;
	}
	.idP a{
	color:#2f99ac;
	font-weight:bold;
	text-decoration: none;
	}




	.statusTd{
	width:300px;
	word-break: break-all;
	}

	.statusP{
	margin-top:0;
	margin-bottom:0;
	padding:20px;
	font-size:12px;
	background-color:#eefffe;
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 0 0 6px #dddddd;
	}

	.timeP{
	margin:0 15px;
	text-align:right;
	font-size:8px;
	}