Skip to content

Instantly share code, notes, and snippets.

@altnight

altnight/gist:454554

Created June 27, 2010 02:06
Show Gist options
  • Save altnight/454554 to your computer and use it in GitHub Desktop.
Save altnight/454554 to your computer and use it in GitHub Desktop.
Download ZIP
スカンディナヴィア半島
Raw
gistfile1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スカンディナヴィア半島</title>
</head>
<body>
<div id="header" class="clearfix">
現在時刻: <span id="current_date"></span>
<span id="api_limit"> </span>
</div>
<div id="column_box">
<div id="column1" class="column"></div>
<div id="column2" class="column"></div>
<div id="column3" class="column"></div>
<div id="column4" class="column"></div>
<div id="column5" class="column"></div>
<div id="column6" class="column"></div>
<div id="column7" class="column"></div>
<div id="column8" class="column"></div>
<div id="column9" class="column"></div>
<div id="column10" class="column"></div>
<div id="column11" class="column"></div>
<div id="column12" class="column"></div>
<div id="column13" class="column"></div>
<div id="column14" class="column"></div>
<div id="column15" class="column"></div>
<div id="column16" class="column"></div>
<div id="column17" class="column"></div>
<div id="column18" class="column"></div>
<div id="column19" class="column"></div>
<div id="column20" class="column"></div>
</div>
<script type="text/javascript">
var skz = (function(){
var TwitterModel = function(url, api_url){
return {
url: url,
api_url: api_url,
};
};
var DateModel = function(){
return {
getDate: function(){
return new Date;
},
createTimeFormat: function(d){
var year = d.getFullYear();
var month = (d.getMonth() + 1);
var date = d.getDate();
var hour = d.getHours();
var minutes = ("0" + d.getMinutes()).slice(-2);
var seconds = ("0" + d.getSeconds()).slice(-2);
return year + "/" + month + "/" + date + " " + hour + ":" + minutes + ":" + seconds;
},
};
};
var DateView = function(){
return {
appendDate: function(ele, date_format){
document.getElementById(ele).textContent= date_format;
}
};
};
var APIModel = function(){
return {
loadJSON: function(url){
var script = document.createElement("script");
script.src = url;
script.type = "text/javascript";
script.charset = "UTF-8";
document.body.appendChild(script);
},
loadList: function(callback_name, user_name, list_name, entities, rt){
var url = twitter_model.api_url + "lists/statuses.json";
var entities;
var rt;
//デフォルト引数
if (typeof entities === "undefined") entities = true;
if (typeof rt === "undefined") rt = true;
var params = [["callback", callback_name],
["slug", list_name],
["owner_screen_name", user_name],
["include_entities", entities],
["include_rts", rt]
];
var query_string = "";
for (var i=0; i < params.length; i++) {
query_string += "&" + params[i][0] + "=" + params[i][1];
}
this.loadJSON(url + "?" + query_string);
},
loadAPILimit: function(callback_name){
var url = twitter_model.api_url + "account/rate_limit_status.json"
var params = ["callback", callback_name]
var query_string = "&" + params[0] + "=" + params[1]
this.loadJSON(url + "?" + query_string);
},
};
};
var StreamModel = function(){
return{
createTweetdiv: function(arg){
var tweetdiv = document.createElement('div');
tweetdiv.id = arg.id;
tweetdiv.className = "tweet";
return tweetdiv;
},
createImage: function(arg){
var img = document.createElement('img');
img.src = arg.user.profile_image_url;
img.alt = arg.user.screen_name;
img.className = "user_icon_image"
return img;
},
createUserName: function(arg, twitter_model){
var user_name= document.createElement('a');
var display_name;
if (arg.user.screen_name == arg.user.name) {
display_name= arg.user.screen_name;
}
else {
display_name = arg.user.screen_name +"(" + arg.user.name + ")";
}
user_name.textContent = display_name;
user_name.href = twitter_model.url+ arg.user.screen_name;
user_name.className = "user_name";
return user_name;
},
createText: function(arg){
var TweetView = function(){
return {
//t.coの展開
expandURL: function(arg, text){
for (var u in arg.entities.urls){
if (u === 0) continue;
for (var i=0; i < arg.entities.urls.length; i++) {
text = text.replace(/(https?:\/\/t\.co\/[\w]+)/i, arg.entities.urls[i].expanded_url);
};
};
return text;
},
setURL: function(arg, text){
//URL
text = text.replace(/(https?:\/\/[\w\.\,\-\+\?\/\%#=\&\!\(\)]+)/ig , '<a href="$1" class="url">$1</a>');
return text;
},
setUser: function(arg, text){
//メンション, リプライ
text = text.replace(/@([\a-zA-Z0-9_]+)/g , '<a href='+ twitter_model.url+'$1>@$1</a>');
return text;
},
setHashtag: function(arg, text){
//ハッシュタグ
//TODO: url#の展開でバグる
text = text.replace(/#([\w一-龠ぁ-んァ-ヴー]+)/g , '<a href=' + twitter_model.url + '#!/search/%23$1>#$1</a>');
return text;
},
nodisplayShindanmaker: function(text){
//診断メーカーを非表示にする
if (/shindanmaker/.test(text)) text = 'また診断メーカーか。';
return text;
},
nodisplayJapaneseHashtag: function(text){
//日本語ハッシュタグを非表示にする
if (/#[一-龠ぁ-んァ-ヴー０-９]{10,}/.test(text) ) text = 'また日本語ハッシュタグか';
return text;
},
nodisplayGohantabeyo: function(text){
//gohantabeyoを非表示にする
if (/gohantabeyo/.test(text)) text = 'またごはんか';
return text;
},
};
};
var textdiv = document.createElement('div');
var text = arg.text;
text = TweetView().expandURL(arg, text);
text = TweetView().setURL(arg, text);
text = TweetView().setUser(arg, text);
text = TweetView().setHashtag(arg, text);
//もし診断メーカーや日本語ハッシュタグやgohantabeyoを表示させたい場合、下記の文頭に // をつけてください
text = TweetView().nodisplayShindanmaker(text);
text = TweetView().nodisplayJapaneseHashtag(text);
text = TweetView().nodisplayGohantabeyo(text);
textdiv.innerHTML = text;
textdiv.className = "tweettext";
return textdiv;
},
createTimeLink: function(arg, twitter_model){
var timelink = document.createElement('a');
timelink.href = twitter_model.url+ arg.user.screen_name + "/status/" + arg.id_str;
var time = skz.DateModel().createTimeFormat(new Date(arg.created_at));
timelink.className = "time";
timelink.textContent= time;
return timelink;
},
createRTimage: function(arg){
var image = document.createElement("img");
image.src = arg.user.profile_image_url;
image.className = "retweeted_user_icon";
image.alt = arg.user.screen_name
return image;
},
createRTspan: function(arg){
var span = document.createElement("span");
span.textContent = "RT::" + arg.user.screen_name;
return span;
},
createRTcount: function(arg){
var span = document.createElement("span");
retweet_count = parseInt(arg.retweet_count) + 1;
span.textContent = "&" + retweet_count;
return span;
},
};
};
var StreamView = function(){
return{
buildStream : function(arg, column_id, tweetdiv){
old_arg = null;
document.getElementById("column" + column_id).appendChild(tweetdiv);
if (arg.retweeted_status){
old_arg = arg;
arg = arg.retweeted_status;
}
tweetdiv.appendChild(skz.StreamModel().createImage(arg));
tweetdiv.appendChild(skz.StreamModel().createUserName(arg, twitter_model));
tweetdiv.appendChild(skz.StreamModel().createText(arg, twitter_model));
tweetdiv.appendChild(skz.StreamModel().createTimeLink(arg, twitter_model));
if (old_arg){
tweetdiv.appendChild(skz.StreamModel().createRTimage(old_arg));
tweetdiv.appendChild(skz.StreamModel().createRTspan(old_arg));
tweetdiv.appendChild(skz.StreamModel().createRTcount(old_arg));
}
},
};
};
var ColumnModel = function(){
var column_id = 0;
return{
incId: function(){
column_id++;
},
getColumnId: function(){
return column_id;
},
};
};
var APILimitModel = function(){
return {
getHourlyLimit: function(arg){
return arg.hourly_limit;
},
getRemainingHits: function(arg){
return arg.remaining_hits;
},
getResetTime: function(arg){
return skz.DateModel().createTimeFormat(new Date(arg.reset_time));
},
createAPILimitFormat: function(arg){
var limit = this.getHourlyLimit(arg);
var remaining = this.getRemainingHits(arg);
var reset_time = this.getResetTime(arg);
return " APILimit:" + remaining + "/" + limit + " resetTime:" + reset_time
},
};
};
var APILimitView = function(){
return {
appendAPILimit: function(ele, format){
return document.getElementById(ele).textContent = format
},
};
};
var CallbackView = function(){
return {
readCallbackList: function(args){
column_model.incId();
for (var i = 0; i < args.length; i++) {
skz.StreamView().buildStream(args[i], column_model.getColumnId(), skz.StreamModel().createTweetdiv(args[i]));
};
},
readCallbackAPILimit: function(args){
return APILimitView().appendAPILimit("api_limit", APILimitModel().createAPILimitFormat(args));
},
};
};
return {
TwitterModel: TwitterModel,
DateModel: DateModel,
DateView: DateView,
APIModel: APIModel,
StreamModel: StreamModel,
StreamView: StreamView,
ColumnModel: ColumnModel,
APILimitModel: APILimitModel,
APILimitView: APILimitView,
CallbackView: CallbackView,
};
})();
var twitter_model = skz.TwitterModel(
"https://twitter.com/",
"https://api.twitter.com/1/"
)
var column_model = skz.ColumnModel();
var callback_list = function(args) {
return skz.CallbackView().readCallbackList(args);
};
var callback_api_limit= function(args) {
return skz.CallbackView().readCallbackAPILimit(args);
};
(function(){
skz.DateView().appendDate("current_date", skz.DateModel().createTimeFormat(skz.DateModel().getDate()));
//この下の部分で具体的なリストの管理ができます
//OAuthを使っていないため、Publicなリストしか取得できません
//"callback_list", "アカウント名", "リスト名", true, 公式RTを表示する場合は true 表示しない場合は false
skz.APIModel().loadList("callback_list", "altnight", "javascript", true, true);
//skz.APIModel().loadList("callback_list", "altnight", "skz", true, true);
//skz.APIModel().loadList("callback_list", "altnight", "jz", true, true);
skz.APIModel().loadList("callback_list", "altnight", "py", true, true);
skz.APIModel().loadAPILimit("callback_api_limit");
//この下の部分でリロードする時間を設定します
//ms単位なので10*60*1000で10分間隔です
//例えば 5*60*1000 にすると5分間隔になります
//更新頻度が多すぎるとAPI Limitにひっかかる可能性があります
var reload_time = setInterval(function(){location.reload()},5*60*1000);
})();
</script>
<style type="text/css">
#header{
padding: 0px;
margin: 0px;
height: 24px;
width: auto;
white-space: nowrap;
}
#current_date{
height: auto;
width: auto;
/* float: left;*/
}
#api_limit{
height: auto;
width: auto;
/* float: left;*/
}
/*.clearfix{
display: inline-block;
}*/
#column_box{
padding: 0px;
margin: 0px;
/* ここのwidthは基本的に変更しないでください */
width: 4096px;
height: auto;
border: 1px solid black;
}
/* この下の部分で幅を調整します
設定例 width : 200px;
*/
.column{
padding: 0px;
margin: 0px;
width: 250px;
height: auto;
float: left;
background-color: #dddddd;
}
.tweet{
border-bottom: solid 1px black;
border-right: solid 1px black;
}
/* この下の部分でユーザー名のフォントサイズを調整します
設定例 font-size: 80%;
*/
.user_name{
font-size: 100%;
}
/* この下の部分でtweetのフォントサイズを調整します
設定例 font-size: 80%;
*/
.tweettext{
font-size: 100%;
}
.tweet:hover{
background-color: #F00;
}
/* この下の部分でurlのフォントサイズを調整します
設定例 font-size: 80%;
*/
.url{
font-size: 80%;
/* border: dotted 1px #CCEECC;*/
/* background-color: #EEEEEE;*/
/* color: black;*/
}
/* この下の部分でアイコンの画像の大きさを調整します
設定例 height: 48px;
設定例 width: 48px;
*/
.user_icon_image{
height: 28px;
width: 28px;
}
.retweeted_user_icon{
height: 14px;
width: 14px;
}
/* この下の部分で時刻表示のフォントサイズを調整します
設定例 font-size: 80%;
*/
.time{
font-size: 80%;
/*margin-left: 4px;*/
color: #00F;
font-size: 80%;
}
.time:visited{
color: #990099;
}
</style>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment