[add] First commit

First commit.

.gitignore

@@ -0,0 +1 @@
+assets/twitter_token.js

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Osamu Takiya
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,39 @@
+# Web application to show tweets stream on web browser using [Twitter Streaming API](https://dev.twitter.com/streaming/overview)
+- Official description about Twitter Streaming API
+    - https://dev.twitter.com/streaming/public
+    - https://dev.twitter.com/streaming/overview/request-parameters
+
+# Screenshot
+![screenshot](screenshot.gif "screenshot")
+
+# Required
+- [Node.js](https://nodejs.org/)
+- [socket.io package](https://www.npmjs.com/package/socket.io)
+- [twitter package](https://www.npmjs.com/package/twitter)
+
+# How to use
+
+```
+# node app
+```
+
+- Waiting for connection on port 11084 (default) such as `http://localhost:11084/`
+- Access above by web browser
+- If you wanna clear tweets, push "clear_tweets" button
+
+# Note
+- Set [`track` parameter](https://dev.twitter.com/streaming/overview/request-parameters#track) to `刀剣乱舞` as default
+    - `刀剣乱舞(ToukenRambu)` is a Japanese simulation game title, whose official page is [here](http://www.dmm.com/netgame/feature/tohken_html/=/navi=none/)
+- Routes implement is poor :)
+
+# History
+
+### 2016/11/24 - Version 1.0.2
+- Minor bugs fixed
+- Codes refactored
+
+### 2016/11/22 - Version 1.0.1
+- Minor bugs fixed
+
+### 2016/11/21 - Version 1.0.0
+- First release

app.js

@@ -0,0 +1,95 @@
+var http = require('http');
+var server = http.createServer();
+var io = require('socket.io').listen(server);
+var fs = require('fs');
+var twitterToken = require('./assets/twitter_token');
+var LISTEN_PORT = 11084;
+
+// ストリーミングを開始する
+serverStart();
+socketIoOn();
+streamingStart('刀剣乱舞');
+
+function route(req, res) {
+  var url = req.url;
+  console.log(url);
+
+  if (url == '/') {
+    fs.readFile('./index.html', 'UTF-8', function(err, data) {
+      res.writeHead(200, { 'Content-Type': 'text/html' });
+      res.write(data);
+      res.end();
+    });
+  } else if (url == '/favicon.ico') {
+      var buffer = fs.readFileSync('./assets/favicon.ico');
+      res.writeHead(200, { 'Content-Type': 'image/vnd.microsoft.icon' });
+      res.end(buffer);
+  } else if (url == '/main.css') {
+      var buffer = fs.readFileSync('./assets/main.css');
+      res.writeHead(200, { 'Content-Type': 'text/css' });
+      res.end(buffer);
+  } else if (url == '/action.js') {
+      var buffer = fs.readFileSync('./assets/action.js');
+      res.writeHead(200, { 'Content-Type': 'application/javascript' });
+      res.end(buffer);
+  }
+}
+
+function serverStart() {
+  server.on('request', (req, res) => route(req, res));
+  server.listen(LISTEN_PORT);
+  console.log('Server is running...');
+}
+
+function socketIoOn() {
+  io.sockets.on('connection', function(socket) {
+    socket.on('msg', function(data) {
+      io.sockets.emit('msg', data);
+    });
+    socket.on('disconnect', function() {
+      console.log('Socket disconnected');
+    });
+  });
+  console.log('Socket.IO is running...');
+}
+
+function streamingStart(trackWord) {
+  twitterToken.stream('statuses/filter', { 'track': trackWord }, function(stream) {
+    stream.on('data', function(data) {
+
+      // ツイート（一つ）から表示する内容を選別する（HTMLタグ含）
+      var user_icon_with_img_tag = '<img src="' + data.user.profile_image_url_https+ '">';
+      var user_uri = 'https://twitter.com/' + data.user.screen_name;
+      var user_icon_with_link = '<a href="' + user_uri + '" target="_blank">' + user_icon_with_img_tag + '</a>';
+      var screen_name_with_link = '<a href="' + user_uri + '" target="_blank">' + '@' + data.user.screen_name + '</a>';
+
+      var tweet_uri = 'https://twitter.com/' + data.user.screen_name + '/status/' + String(data.id_str);
+
+      var tweet_created_at_jst = new Date(data.created_at);
+      var tweet_youbi = '日月火水木金土'[new Date(tweet_created_at_jst.toLocaleString()).getDay()];
+      var tweet_created_at_jp_style_day = zeroPadding(tweet_created_at_jst.getFullYear(), 4) + '/' + zeroPadding((tweet_created_at_jst.getMonth()+1), 2) + '/' + zeroPadding(tweet_created_at_jst.getDate(), 2) + '(' + tweet_youbi + ')';
+      var tweet_created_at_jp_style_time = zeroPadding(tweet_created_at_jst.getHours(), 2) + ":" + zeroPadding(tweet_created_at_jst.getMinutes(), 2) + ":" + zeroPadding(tweet_created_at_jst.getSeconds(), 2);
+      var tweet_created_at_jp_style = tweet_created_at_jp_style_day + ' ' + tweet_created_at_jp_style_time;
+      var tweet_day_and_time_with_link = '<a href="' + tweet_uri + '" target="_blank">' + tweet_created_at_jp_style + '</a>';
+
+      var tweet_text = data.text;
+
+      var client_name = data.source
+      var client_name_without_htmltag = client_name.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'')
+
+      // 表示する内容をひとつの変数にまとめる
+      var show_contents = '';
+      show_contents += '<div class="each_tweet">';
+      show_contents += user_icon_with_link + ' ' + screen_name_with_link + ' ' + tweet_day_and_time_with_link + ' (via ' + client_name_without_htmltag + ')<br />';
+      show_contents += tweet_text + '<br />';
+      show_contents += '</div>';
+
+      io.sockets.emit('msg', show_contents);
+    });
+  });
+}
+
+// Thanks to http://qiita.com/_shimizu/items/2cb49daf2eb8ffb30690
+function zeroPadding(number, length){
+  return (Array(length).join('0') + number).slice(-length);
+}

assets/action.js

@@ -0,0 +1,11 @@
+$(function() {
+  var socket = io.connect();
+
+  socket.on("msg", function(data) {
+    $("div#tweets_area").prepend(data);
+  });
+
+  $('#clear_button').mousedown(function() {
+    $("#tweets_area").empty();
+  });
+});

assets/main.css

@@ -0,0 +1,89 @@
+/* コンテンツ全体 */
+#container {
+  width: 850px;
+  margin: 0 auto;
+}
+
+/* ヘッダ */
+#header {
+  position: relative;
+  background-color: #f8f8ff;
+  margin: 20px 0px 0px 0px;
+  padding: 1em;
+  border: solid 0.5px;
+}
+
+#header h5 {
+  position: absolute;
+  top: -0.9em;
+  background-color: rgba(100,100,100,0.4);
+  padding: 0.25em 2em;
+  color: #fff;
+  transform: rotate(-4deg);
+}
+
+#header p {
+  padding: 20px 0px 0px 0px;
+  margin: 10px 0px -5px 0px;
+  color: #000000;
+}
+
+/* ツイートクリアボタン */
+#clear_button {
+  font-size: 1.4em;
+  font-weight: bold;
+  margin: 15px 0px -5px 0px;
+  padding: 10px 30px;
+  background-color: #248;
+  color: #fff;
+  border-style: none;
+}
+
+#clear_button:hover {
+  background-color: #24d;
+  color: #fff;
+}
+
+#clear_button:active{
+  padding-top: 6px;
+  padding-bottom: 4px;
+  border: 1px solid #334c66;
+  background-color: #69c;
+  color: #e0ebf5;
+  -webkit-box-shadow: inset 0px 0px 8px #334c66;
+  -moz-box-shadow: inset 0px 0px 2px #3a6da0;
+  box-shadow: inset 0px 0px 2px #3a6da0;
+}
+
+/* ツイート表示部分 */
+.each_tweet {
+  padding: 15px 5px;
+  margin: 20px 0px 20px 0px;
+  border: solid 3px #3cb3e4;
+  position: relative;
+  border-radius: 3px;
+  background: #fff;
+  line-height: 24px;
+}
+
+.each_tweet:after,
+.each_tweet:before {
+  content: '';
+  position: absolute;
+  bottom: -7px;
+  background: #3cb3e4;
+  border: solid 2px #3cb3e4;
+  width: 25px;
+  height: 20px;
+  z-index: -1;
+}
+
+.each_tweet:after {
+  left: 2px;
+  transform: rotate(120deg);
+}
+
+.each_tweet:before {
+  right: 2px;
+  transform: rotate(60deg);
+}

assets/twitter_token.js.sample

@@ -0,0 +1,10 @@
+var twitter = require("twitter");
+
+var twiterToken = new twitter({
+  consumer_key: 'YOUR_COMSUMER_KEY',
+  consumer_secret: 'YOUR_CONSUMER_SECRET',
+  access_token_key: 'YOUR_ACCESS_TOKEN_KEY',
+  access_token_secret: 'YOUR_ACCESS_TOKEN_SECRET'
+});
+
+module.exports = twitterToken;

index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <link rel="shortcut icon" href="./favicon.ico" type="image/vnd.microsoft.ico" />
+  <link rel="stylesheet" type="text/css" href="./main.css">
+  <script src="/socket.io/socket.io.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+  <script src="./action.js"></script>
+  <title>「刀剣乱舞」を含むツイートをストリーミング表示</title>
+</head>
+<body>
+<div id="container">
+  <div id="header">
+    <h5>Twitter Streaming API</h5>
+    <p>「刀剣乱舞」を含むツイートをストリーミング表示</p>
+  </div>
+  <input type="button" value="clear_tweets" id="clear_button">
+  <div id="tweets_area"></div>
+</div>
+</body>
+</html>