(Ruby)(WEBrick)(jQuery)(Twitter)(前回のリベンジ)

　前回のリベンジです、 何のリベンジかというと・・・
前回のだと InternetExplorerのエンジンだけが
表示が思ったとおりにならないんですよね
ずーっと右に繋がって表示されてしまうんですよね
もちろん 理屈上は Chrome や Firefox などの表示の方がスジが通っているはずです

　まず <pre id="FollowersList"></pre> だった所を
<pre><span id="FollowersList"></span></pre> というようにしたのですが
やっぱり これでもおかしくなっちゃうんですよね
これは困った！ と言うことで 対策をしてみることに・・・
でもですね
リストを表示した後に もう一度やると 思ったようには動かないんですよね・・・
(DSiブラウザの Operaも 意図どおりに表示できるというのに！ 笑)
またいずれ リベンジをば・・・。

　やってる事は これまでと同じく 「Twitterの 自分に対するフォロワーの一覧を取得する」ものです
またかよと思われるかもしれませんが
別の事を勉強するには 確実に動くと分かっているコードを流用した方が
エラーを減らせるので あえて勉強しようとしてるのとは違う要素は 極力入れないようにしてます
まあ とりあえず 一度目の表示までは IEのエンジンでも思ったように表示はされるようになりました
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' , 'LoginPassword')
		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


<!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="javascript:;" onClick="GetTwitterFollowersList()">取得する</a>
		<br />
		<hr />
		<div id="FollowersList"></div>
		<hr />
	</body>
</html>

jquery.js


公式ページからDLしたもの（jquery-1.4.2.min.js）

nowloding.gif




twitter.js


function GetTwitterFollowersList(){
	$('#FollowersList').html(
		'<img src="./NowLoding.gif" />&nbsp;&nbsp;<span class="nowloding">リスト取得中ですしばらくお待ちください</span>'
	);
	$.get("./TwitterFollowersList", function(data){ ListRespond(data); });
	return;
}
function ListRespond(list)
{
	$('#FollowersList').html('<pre>' + list + '</pre>');
	return;
}


$.get の 第二引数内で 関数を定義すると
レスポンスを受けるのが終わった後に その関数が呼び出されるみたいですね
いわゆるコールバック関数みたいなものですかね
最初 ここの挙動が全然分からずに 30分位ハマってしまいました 笑）
可読性を上げるの狙って 今回は その関数内からListRespond関数を呼び出してます