(Ruby)(WEBrick)(Servlet)(jQuery)(先日のをjQueryを利用してアプリケーションぽくしてみた)

　先日はServletを使って Twitterの 自分へのフォロワーの一覧表示をさせるだけのを作りましたが
やっぱり無機質だよなぁ
ということで ちょっと 動的なページにしてみることにしました

今回必要なファイルは
base.css スタイルシート
httpSrv.rb Webサーバ用のRubyスクリプト
index.html このページに 一覧を表示させます
jquery.js jQueryのHPから（jquery-1.4.2.min.js）をDLしてリネーム
nowloding.gif 一覧読み込み中に表示するアイコン
twitter.js 一覧をページに流し込む処理をする
です、 断りが無い限り 文字コードは 基本的に UTF-8です
これらをどっかの適当なフォルダに詰め込んで httpSrv.rb を実行させます

base.css


@charset "UTF-8";
a {
	color:orange; 
}
body {
	color:#6090d0;
	background-color:#000030;
}
span.nowloding {
	color:yellow;
	font-size:large;
	font-weight:bold;
}


単純に個人的な好みの色にしてるだけです 笑）

httpSrv.rb


#!ruby -Ku
require 'rubygems'
require 'webrick'
require 'twitter'
##########################################################################################
server = WEBrick::HTTPServer.new(
	:DocumentRoot => Dir.pwd,
	:DirectoryIndex => ['index.html','index.htm'],
	:Port => 10000 # ListenPort
)
##########################################################################################
class TwitterFollowersList < WEBrick::HTTPServlet::AbstractServlet
	def do_GET(req, res)
		httpauth = Twitter::HTTPAuth.new('TwitterID' , 'Password')
		client = Twitter::Base.new(httpauth)
		usrnames = ''
		client.followers.each { |usr|
			usrnames = usrnames + usr.name + "\n"
		}
		res.body = usrnames
		res.content_type = 'text/plain; charset=UTF-8'
	end
end
server.mount('/TwitterFollowersList', TwitterFollowersList)
##########################################################################################
trap(:INT){ server.shutdown }
server.start


今回は index.html内から ./TwitterFollowersList を 呼び出します
TwitterFollowersList は 単純なプレーンテキストで一覧を返すだけです

index.html


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>TwitterFollowers</title>
		<link href="./base.css" rel="stylesheet" type="text/css" charset='UTF-8' />
		<script type='text/javascript' src='./jquery.js' charset='UTF-8'></script>
		<script type='text/javascript' src='./twitter.js' charset='UTF-8'></script>
	</head>
	<body>
		<br />
		<a href="#" onClick="javascript:$('#FollowersList').load('./TwitterFollowersList');">取得する</a>
		<hr />
		<pre id="FollowersList"></pre>
		<hr />
	</body>
</html>


一覧表示用のアプリケーションとして動作するページになります

jquery.js


jQueryの公式ページから最新版をダウンロードしてきました

http://jquery.com/

nowloding.gif






ローディング中用のアイコンです


twitter.js


function GetTwitterFollowersList(){
	$('#FollowersList').html('<img src="./NowLoding.gif" />&nbsp;&nbsp;<span class="nowloding">リスト取得中です</span>');
	$('#FollowersList').load('./TwitterFollowersList');
	return
}


jQueryを利用して ページ内に一覧を流し込む作業をします

　今回は サーバを起動させ
「http://127.0.0.1:10000」か「http://127.0.0.1:10000/index.html」で index.htmlを表示させます
「取得する」というリンクをクリックすると フォロワー一覧を取得し 動的にページ内に その内容を流し込みます
これで 多少アプリケーションぽくはなったかな？ 笑）