taiju/index.html

## index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>そう簡単には読ませてあげませんったー</title>
    <link href="style.css" rel="stylesheet">
    <script src="http://www.google.com/jsapi"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      google.load('jquery', '1.4.3');
      google.load('jqueryui', '1.8.5');
    </script>
    <script src="index.js"></script>
    <script>
    </script>
  </head>
  <body>
    <div id="status">
      <h1 id="title">そう簡単には読ませてあげませんったー</h1>
      <div id="collect">読めたtweet数: <span>0</span></div>
      <div id="failed">逃したtweet数: <span>0</span></div>
      <div id="tweet">最新の読めたtweet: <div id="new_tweet"></div></div>
    </div>
    <div id="tweets">
    </div>
  </body>
</html>

## index.js
$(function() {
  var socket = new io.Socket('localhost');
  socket.connect();

  var easing = {
    list: [],
    getName: function() {
      return easing.list[Math.floor(Math.random()*easing.list.length)]
    }
  };
  $.each($.easing, function(name) {
    if (name !== 'def') easing.list.push(name);
  });

  var elem = {
    collect: $('#collect span'),
    failed: $('#failed span'),
    tweet: $('#new_tweet')
  };

  var count = {
    collect: 0,
    failed: 0
  };

  var createTweet = function(twiJSON) {
    var _replaceLink = function() {
          if (!/http:\/\/[\x21-\x7e]+/.test(twiJSON.text)) return
          $.each(twiJSON.text.match(/http:\/\/[\x21-\x7e]+/gi), function(i, str) {
            twiJSON.text = twiJSON.text.replace(str, '<a href="' + str + '">' + str + '</a>');
          });
        },
        _replaceMention = function() {
          if (!/@\w+/.test(twiJSON.text)) return
          $.each(twiJSON.text.match(/@\w+/gi), function(i, str) {
            twiJSON.text = twiJSON.text.replace(str, '<a href="' + 'http://twitter.com/' + str.replace('@', '') + '">' + str + '</a>');
          });
        },
        _replaceHashTag = function() {
          if (!/#\w+/.test(twiJSON.text)) return
          $.each(twiJSON.text.match(/#\w+/gi), function(i, str) {
            twiJSON.text = twiJSON.text.replace(str, '<a href="' + 'http://twitter.com/search?q=%23' + str.replace('#', '') + '">' + str + '</a>');
          });
        };
      _replaceLink()
      _replaceMention()
      _replaceHashTag()
      return '<div class="posted">' +
               '<div class="profile_image">' +
                 '<a href="http://twitter.com/' + twiJSON.user.screen_name + '">' +
                   '<img src="' + twiJSON.user.profile_image_url + '" width="48" height="48">' +
                 '</a>' +
               '</div>' +
               '<div class="screen_name_and_text">' +
                 '<div>' +
                   '<a href="http://twitter.com/' + twiJSON.user.screen_name + '">' +
                     twiJSON.user.screen_name +
                   '</a>' +
                   '<span style="margin-left:5px">' + twiJSON.created_at + '</span>' +
                 '</div>' +
                 '<div>' + twiJSON.text + '</div>' +
               '</div>' +
             '</div>';
  };

  var notEasyToReadTweet = function(twiJSON, tweet, easingName) {
    $('#tweets').prepend('<div class="target"><img src="' + twiJSON.user.profile_image_url + '" width="48" height="48"></div>')
                .children().eq(0).fadeIn().mousedown(function() {
                   $(this).stop().remove();
                   elem.tweet.html(tweet);
                   elem.collect.text(++count.collect);
                   this.flg = 1;
                })
                .animate({
                  marginLeft: $(document).width() - 50 + 'px'
                }, 4000, easingName, function() {
                  $(this).remove();
                  if (!this.flg) {
                    elem.failed.text(++count.failed);
                  }
                })
  };

  socket.on('message', function(data) {
    var easingName = easing.getName();
    var twiJSON = JSON.parse(data);
    if (twiJSON.friends) return;
    if (twiJSON.delete) return;
    var tweet = createTweet(twiJSON);
    notEasyToReadTweet(twiJSON, tweet, easingName);
  });

});

## server.js
var oauth = require('oauth-client'),
    io = require('../'),
    http = require('http'),
    sys = require('sys'),
    url = require('url'),
    fs = require('fs');

// 各変数の中に
// consumer_key
// consumer_secret
// oauth_token(access_token)
// oauth_token_secret(access_token_secret)
// を代入
var consumerKey = '**********',
    consumerSecret = '**********',
    oauthToken = '**********',
    oauthTokenSecret = '**********';

var consumer = oauth.createConsumer(consumerKey, consumerSecret);
    token = oauth.createToken(oauthToken, oauthTokenSecret);
    signer = oauth.createHmac(consumer, token);

var responseFile = function(response, path) {
  var extension = /\.\w+/.test(path) ? path.match(/\.(\w+)/)[1] : 'html';
  path = /\/?\w/.test(path) ? path : path + 'index.html';
  var content_type = (extension === 'html' ? 'text/html':
                      extension === 'css' ? 'text/css':
                      extension === 'js' ? 'text/javascript':
                      'text/plain');
  fs.readFile(__dirname + path, function(err, data) {
    response.writeHead(200, { 'Content-Type': content_type });
    response.write(data, 'utf8');
    response.end();
  });
}

var response404 = function(response) {
  response.writeHead(404);
  response.write('404 Not Found');
  response.end();
}

var dispatcher = function(response, path, exists) {
  var have = 0;
  exists.forEach(function(filename) {
    if (path === filename) {
      have = 1;
      responseFile(response, path);
    }
  });
  if (!have) response404(response);
}

var server = http.createServer(function(request, response) {
  var path = url.parse(request.url).pathname;
  dispatcher(response, path, ['/', '/index.html', '/style.css', '/index.js']);
});
server.listen(8080);

var request = oauth.createClient(443, 'userstream.twitter.com', true)
              .request('GET', '/2/user.json', null, null, signer);

var socket = io.listen(server);
var buf = '';
socket.on('connection', function(client) {
  console.log(client.sessionId + ' is connected.');
  request.addListener('response', function(response) {
    response.addListener('data', function(chunk) {
      buf += chunk;
      if (!/\n$/.test(chunk.toString())) return;
      var chunks = buf.split(/\r?\n/);
      while (buf = chunks.shift()) {
        client.send(buf);
        client.broadcast(buf);
      }
    });
  });
  request.end();
});
socket.on('disconnect', function(client) {
  console.log(client.sessionId + ' is disconnected.');
});

## style.css
body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #ddd;
}
img {
  border: 1px solid #666;
}
#title {
  font-size: 50px;
  color: #000;
  text-shadow: 2px 2px 2px #fff;
  text-align: right;
  margin: 0;
}
#status {
  font-size: 20px;
  background-color: #bbb;
  padding: 10px;
  margin-bottom: 3px;
  -moz-box-shadow: 0px 2px 3px #666;
  -webkit-box-shadow: 0px 2px 3px #666;
}
#collect, #failed, #tweet {
  color: #000;
  text-shadow: 0px 2px #fff;
}
#new_tweet {
  color: #000;
  text-shadow: 0px 1px #fff;
  height: 100px;
}
.target {
  width: 48px;
  height: 48px;
  cursor: crosshair;
  display: none;
}
.posted {
  height: 100px;
  padding: 10px;
  overflow: hidden;
}
.profile_image {
  width: 48px;
  padding-right: 12px;
  float: left;
}
.screen_name_and_text {
  font-size: 12px;
  line-height: 1.7;
  float: left;
  width: 480px;
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>そう簡単には読ませてあげませんったー</title>
	<link href="style.css" rel="stylesheet">
	<script src="http://www.google.com/jsapi"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script>
	google.load('jquery', '1.4.3');
	google.load('jqueryui', '1.8.5');
	</script>
	<script src="index.js"></script>
	<script>
	</script>
	</head>
	<body>
	<div id="status">
	<h1 id="title">そう簡単には読ませてあげませんったー</h1>
	<div id="collect">読めたtweet数: <span>0</span></div>
	<div id="failed">逃したtweet数: <span>0</span></div>
	<div id="tweet">最新の読めたtweet: <div id="new_tweet"></div></div>
	</div>
	<div id="tweets">
	</div>
	</body>
	</html>
	$(function() {
	var socket = new io.Socket('localhost');
	socket.connect();

	var easing = {
	list: [],
	getName: function() {
	return easing.list[Math.floor(Math.random()*easing.list.length)]
	}
	};
	$.each($.easing, function(name) {
	if (name !== 'def') easing.list.push(name);
	});

	var elem = {
	collect: $('#collect span'),
	failed: $('#failed span'),
	tweet: $('#new_tweet')
	};

	var count = {
	collect: 0,
	failed: 0
	};

	var createTweet = function(twiJSON) {
	var _replaceLink = function() {
	if (!/http:\/\/[\x21-\x7e]+/.test(twiJSON.text)) return
	$.each(twiJSON.text.match(/http:\/\/[\x21-\x7e]+/gi), function(i, str) {
	twiJSON.text = twiJSON.text.replace(str, '<a href="' + str + '">' + str + '</a>');
	});
	},
	_replaceMention = function() {
	if (!/@\w+/.test(twiJSON.text)) return
	$.each(twiJSON.text.match(/@\w+/gi), function(i, str) {
	twiJSON.text = twiJSON.text.replace(str, '<a href="' + 'http://twitter.com/' + str.replace('@', '') + '">' + str + '</a>');
	});
	},
	_replaceHashTag = function() {
	if (!/#\w+/.test(twiJSON.text)) return
	$.each(twiJSON.text.match(/#\w+/gi), function(i, str) {
	twiJSON.text = twiJSON.text.replace(str, '<a href="' + 'http://twitter.com/search?q=%23' + str.replace('#', '') + '">' + str + '</a>');
	});
	};
	_replaceLink()
	_replaceMention()
	_replaceHashTag()
	return '<div class="posted">' +
	'<div class="profile_image">' +
	'<a href="http://twitter.com/' + twiJSON.user.screen_name + '">' +
	'<img src="' + twiJSON.user.profile_image_url + '" width="48" height="48">' +
	'</a>' +
	'</div>' +
	'<div class="screen_name_and_text">' +
	'<div>' +
	'<a href="http://twitter.com/' + twiJSON.user.screen_name + '">' +
	twiJSON.user.screen_name +
	'</a>' +
	'<span style="margin-left:5px">' + twiJSON.created_at + '</span>' +
	'</div>' +
	'<div>' + twiJSON.text + '</div>' +
	'</div>' +
	'</div>';
	};

	var notEasyToReadTweet = function(twiJSON, tweet, easingName) {
	$('#tweets').prepend('<div class="target"><img src="' + twiJSON.user.profile_image_url + '" width="48" height="48"></div>')
	.children().eq(0).fadeIn().mousedown(function() {
	$(this).stop().remove();
	elem.tweet.html(tweet);
	elem.collect.text(++count.collect);
	this.flg = 1;
	})
	.animate({
	marginLeft: $(document).width() - 50 + 'px'
	}, 4000, easingName, function() {
	$(this).remove();
	if (!this.flg) {
	elem.failed.text(++count.failed);
	}
	})
	};

	socket.on('message', function(data) {
	var easingName = easing.getName();
	var twiJSON = JSON.parse(data);
	if (twiJSON.friends) return;
	if (twiJSON.delete) return;
	var tweet = createTweet(twiJSON);
	notEasyToReadTweet(twiJSON, tweet, easingName);
	});

	});
	var oauth = require('oauth-client'),
	io = require('../'),
	http = require('http'),
	sys = require('sys'),
	url = require('url'),
	fs = require('fs');

	// 各変数の中に
	// consumer_key
	// consumer_secret
	// oauth_token(access_token)
	// oauth_token_secret(access_token_secret)
	// を代入
	var consumerKey = '**********',
	consumerSecret = '**********',
	oauthToken = '**********',
	oauthTokenSecret = '**********';

	var consumer = oauth.createConsumer(consumerKey, consumerSecret);
	token = oauth.createToken(oauthToken, oauthTokenSecret);
	signer = oauth.createHmac(consumer, token);

	var responseFile = function(response, path) {
	var extension = /\.\w+/.test(path) ? path.match(/\.(\w+)/)[1] : 'html';
	path = /\/?\w/.test(path) ? path : path + 'index.html';
	var content_type = (extension === 'html' ? 'text/html':
	extension === 'css' ? 'text/css':
	extension === 'js' ? 'text/javascript':
	'text/plain');
	fs.readFile(__dirname + path, function(err, data) {
	response.writeHead(200, { 'Content-Type': content_type });
	response.write(data, 'utf8');
	response.end();
	});
	}

	var response404 = function(response) {
	response.writeHead(404);
	response.write('404 Not Found');
	response.end();
	}

	var dispatcher = function(response, path, exists) {
	var have = 0;
	exists.forEach(function(filename) {
	if (path === filename) {
	have = 1;
	responseFile(response, path);
	}
	});
	if (!have) response404(response);
	}

	var server = http.createServer(function(request, response) {
	var path = url.parse(request.url).pathname;
	dispatcher(response, path, ['/', '/index.html', '/style.css', '/index.js']);
	});
	server.listen(8080);

	var request = oauth.createClient(443, 'userstream.twitter.com', true)
	.request('GET', '/2/user.json', null, null, signer);

	var socket = io.listen(server);
	var buf = '';
	socket.on('connection', function(client) {
	console.log(client.sessionId + ' is connected.');
	request.addListener('response', function(response) {
	response.addListener('data', function(chunk) {
	buf += chunk;
	if (!/\n$/.test(chunk.toString())) return;
	var chunks = buf.split(/\r?\n/);
	while (buf = chunks.shift()) {
	client.send(buf);
	client.broadcast(buf);
	}
	});
	});
	request.end();
	});
	socket.on('disconnect', function(client) {
	console.log(client.sessionId + ' is disconnected.');
	});
	body {
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #ddd;
	}
	img {
	border: 1px solid #666;
	}
	#title {
	font-size: 50px;
	color: #000;
	text-shadow: 2px 2px 2px #fff;
	text-align: right;
	margin: 0;
	}
	#status {
	font-size: 20px;
	background-color: #bbb;
	padding: 10px;
	margin-bottom: 3px;
	-moz-box-shadow: 0px 2px 3px #666;
	-webkit-box-shadow: 0px 2px 3px #666;
	}
	#collect, #failed, #tweet {
	color: #000;
	text-shadow: 0px 2px #fff;
	}
	#new_tweet {
	color: #000;
	text-shadow: 0px 1px #fff;
	height: 100px;
	}
	.target {
	width: 48px;
	height: 48px;
	cursor: crosshair;
	display: none;
	}
	.posted {
	height: 100px;
	padding: 10px;
	overflow: hidden;
	}
	.profile_image {
	width: 48px;
	padding-right: 12px;
	float: left;
	}
	.screen_name_and_text {
	font-size: 12px;
	line-height: 1.7;
	float: left;
	width: 480px;
	}