podhmo/browse.html

## browse.html
<!DOCTYPE html>
<html lang="ja">
  <head>
	<meta charset="UTF-8">
	<title>スカンディナヴィア半島</title>
	<link rel="stylesheet" href="./layout.css" type="text/css"></style>
</head>
<body>
  <div id="header">
	<!--
	   <img src="aa" alt="nanka" id="headimg"></img>
	   <img src="bb" alt="conf" id="conf" >
	   <form id="postform">
		 <input type="text" size="100" maxlength="140"></input>
	   </form>
	   -->
	<div id="date"></div>
  </div>
  <div id="listbox">
	<div id="li1" class="list"></div>
	<div id="li2" class="list"></div>
	<div id="li3" class="list"></div>
	<div id="li4" class="list"></div>
	<div id="li5" class="list"></div>
	<div id="li6" class="list"></div>
	<div id="li7" class="list"></div>
	<div id="li8" class="list"></div>
	<div id="li9" class="list"></div>
	<div id="li10" class="list"></div>
  </div>
  <script src="./lib.js" type="text/javascript"></script>
  <script>
    var dm = lib.DateModel();
    var date = dm.getTimeFormat(dm.getDate());
    // todo?
    document.getElementById("date").textContent = date;

    //fixme: reload
    var apim = lib.TwitterModel(
	  "https://twitter.com/",
	  "https://api.twitter.com/1/"
    );

    var apivm = lib.ApiViewModel("script", apim);
	var mainm = lib.MainModel();
    var mainvm = lib.MainViewModel(mainm, apim);
    var list = function(args){
      return mainvm.callBack(args)
    };
    apivm.bindAPI("altnight", "javascript", "list");
    apivm.bindAPI("altnight", "net", "list");
    apivm.bindAPI("altnight", "jz", "list");
    apivm.bindAPI("altnight", "py", "list");

	// force reload
    var reloatTime = 5*60*1000;
    setInterval(function(){location.reload()}, reloatTime);
  </script>
</html>

## gistfile1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スカンディナヴィア半島</title>
</head>
<body>
<div id="header">
<!--
  <img src="aa" alt="nanka" id="headimg"></img>
  <img src="bb" alt="conf" id="conf" >
  <form id="postform">
  <input type="text" size="100" maxlength="140"></input>
  </form>
-->
  <div id="date"></div>
</div>
<div id="listbox">
  <div id="li1" class="list"></div>
  <div id="li2" class="list"></div>
  <div id="li3" class="list"></div>
  <div id="li4" class="list"></div>
  <div id="li5" class="list"></div>
  <div id="li6" class="list"></div>
  <div id="li7" class="list"></div>
  <div id="li8" class="list"></div>
  <div id="li9" class="list"></div>
  <div id="li10" class="list"></div>
</div>
<script type="text/javascript">
<!--
var d = new Date();
var date = d.getFullYear() + '/' + (d.getMonth()+1) + '/' + d.getDate() +
          ' ' + d.getHours() + ':' +('0'+d.getMinutes()).slice(-2) + ':'+ ('0'+d.getSeconds()).slice(-2);
document.getElementById('date').textContent = date;

var twitterurl = "https://twitter.com/";
var twitterapi = "https://api.twitter.com/1/";

var reload_time = setInterval(function(){location.reload()},5*60*1000);

/*  load json script  */
function loadJSON(url){
  var script = document.createElement("script");
  script.src = url;
  script.type = "text/javascript";
  script.charset = "UTF-8";
  document.body.appendChild(script);
}


function load_list(list_user, list_name){
    loadJSON(twitterapi + 'lists/statuses.json?callback=list&slug='+list_name+'&owner_screen_name='+list_user+'&include_entities=true');
//loadJSON("http://search.twitter.com/search.json?callback=list&locale=ja&q=このゲーム一生忘れない人はRT")
}

//load_list("altnight", "javascript");
//load_list("altnight", "net");
//load_list("altnight", "jz");
//load_list("altnight", "py");
load_list("altnight", "opera");

var listid = 0;
/* callback tweet div  */
function list (arg){
  listid++;
  for (var i = 0, l = arg.length; i<l; i++){
/*  tweet div  */
    var tweetdiv = document.createElement('div');
    tweetdiv.id = arg[i].id;
    tweetdiv.className = "tweet";
    document.getElementById("li" + listid).appendChild(tweetdiv);
/*  user icon name */
    var a = document.createElement('a');
//    a.href = arg[i].user.url;
    if (a.href == null) {a.href = "";}
    tweetdiv.appendChild(a);

    var img = document.createElement('img');
    img.src = arg[i].user.profile_image_url;
    img.alt = arg[i].user.screen_name;
    img.height = 28;
    img.width =28;
    a.appendChild(img);

    var screenname = arg[i].user.screen_name;
    var name = arg[i].user.name;
    var username;
    if (screenname == name) {
      username = screenname;
      }
      else  {
      username = screenname +"(" + name + ")";
      }

    var userurl = document.createElement('a');
    userurl.href = twitterurl + arg[i].user.screen_name;
    userurl.className = "name";
    tweetdiv.appendChild(userurl);

    username = document.createTextNode(username);
    userurl.appendChild(username);
/*  text  */
    var textdiv = document.createElement('div');
    var text = arg[i].text;
    if (arg[i].entities.urls[0]) text = text.replace(/(https?:\/\/[\w\.\,\-\+\?\/\%=\&#\!]+)/ig, arg[i].entities.urls[0].expanded_url);
    text = text.replace(/(https?:\/\/[\w\.\,\-\+\?\/\%#=\&\!]+)/ig , '<a href="$1">$1</a>');//URL
    text = text.replace(/@([\a-zA-Z0-9_]+)/g , '<a href='+ twitterurl +'$1>@$1</a>');//@user
    text = text.replace(/#([\w一-龠ぁ-んァ-ヴー]+)/g , '<a href="http://twitter.com/search/$1">#$1</a>');//hashtag
    if (/shindanmaker/.test(text)) text = 'また診断メーカーか。';
    if (/#[一-龠ぁ-んァ-ヴー０-９]{10,}/.test(text) ) text = 'また日本語ハッシュタグか';
    if (/gohantabeyo/.test(text))) text = 'またごはんか';
    textdiv.innerHTML = text;
    textdiv.className = "tweettext"
    tweetdiv.appendChild(textdiv);

/*  Date  */
    var timelink = document.createElement('a');
    timelink.href = twitterurl + arg[i].user.screen_name + "/status/" + arg[i].id_str;
    tweetdiv.appendChild(timelink);
    var d = new Date(arg[i].created_at);
    var time = d.getFullYear() + '/' + (d.getMonth()+1) + '/' + d.getDate() +
              ' ' + d.getHours() + ':' +('0'+d.getMinutes()).slice(-2);
    time = document.createTextNode(time);
    time.className = "time";
    timelink.className = 'time';
    timelink.appendChild(time);

  }
}
-->
</script>
<style type="text/css">
#header{
  padding: 0px;
  margin: 0px;
  height: 24px;
  width: auto;
}
#headimg{
  margin: 0px;
  padding: 0px;
  width: 24px;
  height: 24px;
  float: left;
}
#conf{
  margin: 0px;
  padding: 0px;
  width: 24px;
  height: 24px;
  float: left;
}
#posttwitter{
  margin: 0px;
  padding: 0px;
  height: 25px;
  width: auto;
}
#postform{
  margin: 0px;
  padding: 0px;
  float: left;
}
#listbox{
  padding: 0px;
  margin: 0px;
  width: auto;
  height: auto;
  border: 2px solid red;

}
.list{
  padding: 0px;
  margin: 0px;
  width: 250px;
  height: auto;
  float: left;
  background-color: #dddddd;
}
#button{
  float: right;

}
.tweet{
  border-bottom: solid 1px black;
  border-right: solid 1px black;
}
.tweet:hover{
  background-color: #F00;
}
.time{
  margin-left: 4px;
  color: #00F;
}
.time a{
  margin-left: 4px;
  color: #00F;
  font-size 80%;
}
.time:visited{
  color: #F00;
}
.name{
  margin-right: 4px;
  padding: 0px;
}
</style>
</html>

## layout.css
#header{
    padding: 0px;
    margin: 0px;
    height: 24px;
    width: auto;
}
#headimg{
    margin: 0px;
    padding: 0px;
    width: 24px;
    height: 24px;
    float: left;
}
#conf{
    margin: 0px;
    padding: 0px;
    width: 24px;
    height: 24px;
    float: left;
}
#posttwitter{
    margin: 0px;
    padding: 0px;
    height: 25px;
    width: auto;
}
#postform{
    margin: 0px;
    padding: 0px;
    float: left;
}
#listbox{
    padding: 0px;
    margin: 0px;
    width: auto;
    height: auto;
    border: 2px solid red;

}
.list{
    padding: 0px;
    margin: 0px;
    width: 250px;
    height: auto;
    float: left;
    background-color: #dddddd;
}
#button{
    float: right;

}
.tweet{
    border-bottom: solid 1px black;
    border-right: solid 1px black;
}
.tweet:hover{
    background-color: #F00;
}
.time{
    margin-left: 4px;
    color: #00F;
}
.time a{
    margin-left: 4px;
    color: #00F;
    font-size 80%;
}
.time:visited{
    color: #F00;
}
.name{
    margin-right: 4px;
    padding: 0px;
}

## lib.js
var lib = (function(){
    var TwitterModel = function(url, apiUrl){
        return {
            url: url,
            apiUrl: apiUrl
        };
    };

    var DateModel = function(){
        return {
            getDate: function(){
                return new Date()
            },
            getTimeFormat: function(d){
                var year = d.getFullYear()
                var month = d.getMonth()+1;
                var day = d.getDate();
                var hour = d.getHours();
                var min = ("0"+d.getMinutes()).slice(-2)
                var sec = ('0'+d.getSeconds()).slice(-2);
                return year + "/" + month + "/" + day + " " + hour + ":" + min + sec;
            }
        };
    }

    var DateViewModel = function(expr){ //expr = "date"
        return {
            setDateData: function(date){
                document.getElementById(epr).textContent = date;
            }
        };
    }

    var ApiViewModel = function(expr, apim){
        return {
            loadJSON: function(url){
                var script = document.createElement(expr);
                script.src = url;
                script.type = "text/javascript";
                script.charset = "UTF-8";
                document.body.appendChild(script);
            },
            bindAPI: function(user, name, cbname){
                var url = apim.apiUrl + "lists/statuses.json";
                var params = [["callback", cbname],
                              ["slug", name],
                              ["owner_screen_name", user],
                              ["include_entities", true]];
                var string = "";
                for(var i=0, j=params.length; i<j; i++){
                    string += "&"+params[i][0]+"="+params[i][1];
                }
                this.loadJSON(url + "?" + string);
            }
        };
    };

    var MainViewModel = function(mainm, apim){
        return {
            createTweetDiv: function(arg, listId){
                var tweetdiv = document.createElement('div');
                tweetdiv.id = arg.id;
                tweetdiv.className = "tweet";
                document.getElementById("li" + listId).appendChild(tweetdiv);
                tweetdiv.appendChild(this.createA(arg));
                tweetdiv.appendChild(this.createUserURL(arg));
                tweetdiv.appendChild(this.createText(arg, apim.url));
                tweetdiv.appendChild(this.createTimeLink(arg, apim.url));
            },
            createA: function(arg){ //
                var a = document.createElement("a");
                if (a.href == null){
                    a.href = "";
                }
                a.appendChild(this.createImage(arg));
                return a;
            },
            createImage: function(arg){
                var img = document.createElement('img');
                img.src = arg.user.profile_image_url;
                img.alt = arg.user.screen_name;
                img.height = 28;
                img.width = 28;
                return img
            },
            createUserURL: function(arg){
                var userurl = document.createElement('a');
                //
                var twitterurl = mainm.url
                userurl.href = twitterurl + arg.user.screen_name;
                userurl.className = "name";
                return userurl;
            },
            getUserName: function(arg){
                var screenname = arg.user.screen_name;
                var name = arg.user.name;
                var username;
                if (screenname == name) {
                    return screenname;
                }
                else  {
                    return screenname +"(" + name + ")";
                }
            },
            createText: function(arg, twitterurl){
                var textdiv = document.createElement('div');
                var text = arg.text;
                text = text.replace(/(https?:\/\/[\w\.\,\-\+\?\/\%=\&#\!]+)/ig , '<a href="$1">$1</a>');//URL
		        if (arg.entities.urls[0]){
                    text = text.replace(/(https?:\/\/[\w\.\,\-\+\?\/\%=\&#\!]+)/ig, arg.entities.urls[0].expanded_url);
                }
                text = text.replace(/@([\a-zA-Z0-9_]+)/g , '<a href='+ twitterurl +'$1>@$1</a>');//@user
                text = text.replace(/#([\w一-龠ぁ-んァ-ヴー]+)/g , '<a href="http://twitter.com/search/$1">#$1</a>');//hashtag
                if (text.match(/shindanmaker/)){
                    text = 'ちくわ。';
                }
                if (text.match(/#[一-龠ぁ-んァ-ヴー０-９]{10,}/)){
                    text = 'ちくわぶ。';
                }
                textdiv.innerHTML = text;
                textdiv.className = "tweettext"
                return textdiv;
            },
            createTimeLink: function(arg, twitterurl){
                var timelink = document.createElement('a');
                timelink.href = twitterurl + arg.user.screen_name + "/status/" + arg.id_str;

                var d = new Date(arg.created_at);
                var time = d.getFullYear() + '/' + (d.getMonth()+1) + '/' + d.getDate() +
                    ' ' + d.getHours() + ':' +('0'+d.getMinutes()).slice(-2);
                time = document.createTextNode(time);
                time.className = "time";
                return timelink;
            },
            callBack: function(args){
                mainm.incId();
                for (var i=0, j=args.length; i<j; i++){
                    this.createTweetDiv(args[i], mainm.getListId());
                }
            }
        };
    };
    var MainModel = function(){
        var listId = 0;
        return {
            incId: function(){
                listId++;
            },
            getListId: function(){
                return listId;
            }
        }
    };
    return{
        DateModel: DateModel,
        TwitterModel: TwitterModel,
        ApiViewModel: ApiViewModel,
        MainModel: MainModel,
        MainViewModel: MainViewModel,
    };
})()
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>スカンディナヴィア半島</title>
	<link rel="stylesheet" href="./layout.css" type="text/css"></style>
	</head>
	<body>
	<div id="header">
	<!--
	<img src="aa" alt="nanka" id="headimg"></img>
	<img src="bb" alt="conf" id="conf" >
	<form id="postform">
	<input type="text" size="100" maxlength="140"></input>
	</form>
	-->
	<div id="date"></div>
	</div>
	<div id="listbox">
	<div id="li1" class="list"></div>
	<div id="li2" class="list"></div>
	<div id="li3" class="list"></div>
	<div id="li4" class="list"></div>
	<div id="li5" class="list"></div>
	<div id="li6" class="list"></div>
	<div id="li7" class="list"></div>
	<div id="li8" class="list"></div>
	<div id="li9" class="list"></div>
	<div id="li10" class="list"></div>
	</div>
	<script src="./lib.js" type="text/javascript"></script>
	<script>
	var dm = lib.DateModel();
	var date = dm.getTimeFormat(dm.getDate());
	// todo?
	document.getElementById("date").textContent = date;

	//fixme: reload
	var apim = lib.TwitterModel(
	"https://twitter.com/",
	"https://api.twitter.com/1/"
	);

	var apivm = lib.ApiViewModel("script", apim);
	var mainm = lib.MainModel();
	var mainvm = lib.MainViewModel(mainm, apim);
	var list = function(args){
	return mainvm.callBack(args)
	};
	apivm.bindAPI("altnight", "javascript", "list");
	apivm.bindAPI("altnight", "net", "list");
	apivm.bindAPI("altnight", "jz", "list");
	apivm.bindAPI("altnight", "py", "list");

	// force reload
	var reloatTime = 5601000;
	setInterval(function(){location.reload()}, reloatTime);
	</script>
	</html>
	#header{
	padding: 0px;
	margin: 0px;
	height: 24px;
	width: auto;
	}
	#headimg{
	margin: 0px;
	padding: 0px;
	width: 24px;
	height: 24px;
	float: left;
	}
	#conf{
	margin: 0px;
	padding: 0px;
	width: 24px;
	height: 24px;
	float: left;
	}
	#posttwitter{
	margin: 0px;
	padding: 0px;
	height: 25px;
	width: auto;
	}
	#postform{
	margin: 0px;
	padding: 0px;
	float: left;
	}
	#listbox{
	padding: 0px;
	margin: 0px;
	width: auto;
	height: auto;
	border: 2px solid red;

	}
	.list{
	padding: 0px;
	margin: 0px;
	width: 250px;
	height: auto;
	float: left;
	background-color: #dddddd;
	}
	#button{
	float: right;

	}
	.tweet{
	border-bottom: solid 1px black;
	border-right: solid 1px black;
	}
	.tweet:hover{
	background-color: #F00;
	}
	.time{
	margin-left: 4px;
	color: #00F;
	}
	.time a{
	margin-left: 4px;
	color: #00F;
	font-size 80%;
	}
	.time:visited{
	color: #F00;
	}
	.name{
	margin-right: 4px;
	padding: 0px;
	}
	var lib = (function(){
	var TwitterModel = function(url, apiUrl){
	return {
	url: url,
	apiUrl: apiUrl
	};
	};

	var DateModel = function(){
	return {
	getDate: function(){
	return new Date()
	},
	getTimeFormat: function(d){
	var year = d.getFullYear()
	var month = d.getMonth()+1;
	var day = d.getDate();
	var hour = d.getHours();
	var min = ("0"+d.getMinutes()).slice(-2)
	var sec = ('0'+d.getSeconds()).slice(-2);
	return year + "/" + month + "/" + day + " " + hour + ":" + min + sec;
	}
	};
	}

	var DateViewModel = function(expr){ //expr = "date"
	return {
	setDateData: function(date){
	document.getElementById(epr).textContent = date;
	}
	};
	}

	var ApiViewModel = function(expr, apim){
	return {
	loadJSON: function(url){
	var script = document.createElement(expr);
	script.src = url;
	script.type = "text/javascript";
	script.charset = "UTF-8";
	document.body.appendChild(script);
	},
	bindAPI: function(user, name, cbname){
	var url = apim.apiUrl + "lists/statuses.json";
	var params = [["callback", cbname],
	["slug", name],
	["owner_screen_name", user],
	["include_entities", true]];
	var string = "";
	for(var i=0, j=params.length; i<j; i++){
	string += "&"+params[i][0]+"="+params[i][1];
	}
	this.loadJSON(url + "?" + string);
	}
	};
	};

	var MainViewModel = function(mainm, apim){
	return {
	createTweetDiv: function(arg, listId){
	var tweetdiv = document.createElement('div');
	tweetdiv.id = arg.id;
	tweetdiv.className = "tweet";
	document.getElementById("li" + listId).appendChild(tweetdiv);
	tweetdiv.appendChild(this.createA(arg));
	tweetdiv.appendChild(this.createUserURL(arg));
	tweetdiv.appendChild(this.createText(arg, apim.url));
	tweetdiv.appendChild(this.createTimeLink(arg, apim.url));
	},
	createA: function(arg){ //
	var a = document.createElement("a");
	if (a.href == null){
	a.href = "";
	}
	a.appendChild(this.createImage(arg));
	return a;
	},
	createImage: function(arg){
	var img = document.createElement('img');
	img.src = arg.user.profile_image_url;
	img.alt = arg.user.screen_name;
	img.height = 28;
	img.width = 28;
	return img
	},
	createUserURL: function(arg){
	var userurl = document.createElement('a');
	//
	var twitterurl = mainm.url
	userurl.href = twitterurl + arg.user.screen_name;
	userurl.className = "name";
	return userurl;
	},
	getUserName: function(arg){
	var screenname = arg.user.screen_name;
	var name = arg.user.name;
	var username;
	if (screenname == name) {
	return screenname;
	}
	else {
	return screenname +"(" + name + ")";
	}
	},
	createText: function(arg, twitterurl){
	var textdiv = document.createElement('div');
	var text = arg.text;
	text = text.replace(/(https?:\/\/[\w\.\,\-\+\?\/\%=\&#\!]+)/ig , '<a href="$1">$1</a>');//URL
	if (arg.entities.urls[0]){
	text = text.replace(/(https?:\/\/[\w\.\,\-\+\?\/\%=\&#\!]+)/ig, arg.entities.urls[0].expanded_url);
	}
	text = text.replace(/@([\a-zA-Z0-9_]+)/g , '<a href='+ twitterurl +'$1>@$1</a>');//@user
	text = text.replace(/#([\w一-龠ぁ-んァ-ヴー]+)/g , '<a href="http://twitter.com/search/$1">#$1</a>');//hashtag
	if (text.match(/shindanmaker/)){
	text = 'ちくわ。';
	}
	if (text.match(/#[一-龠ぁ-んァ-ヴー０-９]{10,}/)){
	text = 'ちくわぶ。';
	}
	textdiv.innerHTML = text;
	textdiv.className = "tweettext"
	return textdiv;
	},
	createTimeLink: function(arg, twitterurl){
	var timelink = document.createElement('a');
	timelink.href = twitterurl + arg.user.screen_name + "/status/" + arg.id_str;

	var d = new Date(arg.created_at);
	var time = d.getFullYear() + '/' + (d.getMonth()+1) + '/' + d.getDate() +
	' ' + d.getHours() + ':' +('0'+d.getMinutes()).slice(-2);
	time = document.createTextNode(time);
	time.className = "time";
	return timelink;
	},
	callBack: function(args){
	mainm.incId();
	for (var i=0, j=args.length; i<j; i++){
	this.createTweetDiv(args[i], mainm.getListId());
	}
	}
	};
	};
	var MainModel = function(){
	var listId = 0;
	return {
	incId: function(){
	listId++;
	},
	getListId: function(){
	return listId;
	}
	}
	};
	return{
	DateModel: DateModel,
	TwitterModel: TwitterModel,
	ApiViewModel: ApiViewModel,
	MainModel: MainModel,
	MainViewModel: MainViewModel,
	};
	})()