YoungYoung

オリジナル&芸能人(主にラルク)のイラストと、レビュー、日記などのごった煮サイト

diary pc&web

続・twitterのシンプルなサイドバー表示

以前「twitterのシンプルなサイドバー表示」という記事を書いたんですが、URLの後に日本語を書いた場合、そこでリンクが途切れずおかしくなっちゃうのをどうしたらいいかわからず、そのまま放置して掲載していたんですが;、いまだにあの記事にアクセスがあるのでいい加減修正しないとな~と思ってた所、解決方法を載せてくださった方がいたので、お礼と修正を兼ねてもういちど記事にします。
参考にしたのはこちらです。ありがとうございます。
→Arun's note:twitterをサイドバーに表示する(@発言抜き)
→twitter @非表示ブログパーツ
狙いとしては前回と同じく
・グラフィカルなブログパーツをつかわずシンプルにtwitterを表示したい
・URLはリンク付きの状態で短く表示したい
・@から始まる返信は表示しない

なんですが、それに加え、
・twitpicのサムネイル表示/非表示
・カスタマイズ・CSSの簡単な解説つき

になってます。


■Javascriptコード
サイトバーに貼る部分です。
太字の部分<ユーザー名>を書き換えれば最低限動きますが、発言時刻とかサムネイルの有無とかのカスタマイズは//から始まる行のコメントを読んでください。

<div class="twit"><div id="twitter"></div></div>
<script type="text/javascript">
//twitter表示ここから
function twitterCallback(result) {
//この下の行の数字で表示件数を変更(この設定では5件)
var item_max = 5;
var timeline_list = new Array();
var out = '<ul>\n';
var cnt = 1;
for (var i = 0; i < result.length; i++) {
var text  = result[i]['text'];
//※@で始まる発言だけでなく、@を含む発言すべて表示しない場合は、
//次の行を削除し、その下の行の先頭「//」を消す
if (text.match(/^@/)) {
//if (text.match(/T @/) || text.match(/^@/)) {
continue;
}
if (cnt > item_max){
break;
}
cnt++;
var created_at = result[i]['created_at'].split(" ");
var post_date = created_at[1] + " " + created_at[2] + ", "+ created_at[5] + " " + created_at[3];
var date = new Date(post_date);
date.setHours(date.getHours() + 9);
var mon  = '0' + (date.getMonth() + 1);
mon = mon.substr(mon.length - 2);
var day  = '0' + date.getDate();
day = day.substr(day.length - 2);
var hour  = '0' + date.getHours();
hour = hour.substr(hour.length - 2);
var minute  = '0' + date.getMinutes();
minute = minute.substr(minute.length - 2);
var out_date1 = mon + "/" + day + "  " + hour + ":" + minute;
var out_date2 = mon + "/" + day;
var out_date3 = hour + ":" + minute;
var out_date4 = "";
text = text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
//twitpicのサムネイル表示がいらない場合は
//この下の10行を削除し、その下2行の先頭「//」を消す
if(url.match(/\/twitpic.com\/([0-9a-zA-Z])/)) {
var img_url = url.replace(/http\:\/\/twitpic\.com\//, function(img_url) {
return 'http://twitpic.com/show/mini/';
})
return '<br /><a href="'+url+'" target=_blank alt="twitpic"><img class="twitpic" src="'+img_url+'"></a><br />';
}
else {
return '<a href="'+url+'" target=_blank">[URL]</a>';
}
})
//return '<a href="'+url+'" target=_blank">[URL]</a>';
//})
hash_tags = text.match(/\s*\#[a-zA-Z0-9]*[\s\r]/g);
if (!!hash_tags) {
for (var j = 0; j < hash_tags.length; j++) {
hash_tag = hash_tags[j];
hash_tag = hash_tag.replace(/^ /, "");
hash_tag = hash_tag.replace(/[\s\n]$/, "");
hash_tag_name = hash_tag.replace(/^#/, "");
hash_url = '<a target="_blank" href="http://search.twitter.com/search?q=%23' + hash_tag_name + '&amp;lang=ja">' + hash_tag + '</a>';
text = text.replace(hash_tag, hash_url);
}
}
//日付表示形式を「out_date1」の部分で変更
//out_date1:月/日 時:分 
//out_date2:月/日
//out_date3:時:分
//out_date4:日時表示無し
out += '<li>' + text + ' <span class="twitdate">' + out_date1 + '</span></li>\n';
}
out += '</ul>\n';
document.getElementById('twitter').innerHTML = out;
}
//twitter表示ここまで
</script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline/ユーザー名.json?callback=twitterCallback"></script>

■CSS
CSSに貼る部分です。こちらで背景色や文字色などのデザインカスタマイズをしてください。
いらない要素は行を削除してください。

/* twitter用サイドバー表示用CSS  ---------------------*/
.twit {
/* 背景色設定 */
background-color: #ffffff;
/* 横幅設定 */
width:150px;
/* 枠線設定 太さ・色・スタイル */
border: 2px #999999 solid;
/* 枠外隙間設定 上・右・下・左 */
margin: 10px 0px 10px 0px;
/* 枠内隙間設定 上・右・下・左 */
padding: 5px 10px 5px 10px;
}
.twit li {
/* フォント */
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS Pゴシック", "Osaka‐等幅";
/* 文字大きさ */
font-size: 12px;
/* 文字色 */
color: #000000;
/* 行間 */
line-height: 150%;
/* ツイートのリストスタイル */
list-style:disc;
/* 文字揃え */
text-align: left;
/* ツイートとツイートの隙間*/
margin: 7px 0px 7px 10px;
}
.twitdate{
/* ツイート時刻の文字大きさ */
font-size: 10px;
/* ツイート時刻の文字色 */
color: #666666;
}
img.twitpic{
/* 画像の隙間 */
margin-bottom:5px;
padding:3px;
/* 画像の枠色 */
border: 1px #666666 solid;
/* 画像の背景色 */
background: #ffffff;
}

上記はレンタルブログへの設置を想定して書いてますが、別ファイルをサーバーにおける場合は
Javascriptコードの//ここから //ここまで の間の部分を別ファイル(twitter.jsとか)にしてサーバーに置いて

<div class="twit"><div id="twitter"></div></div>
<script type="text/javascript" src="外部JavaScriptファイルのURL"></script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline/ユーザー名.json?callback=twitterCallback"></script>

として呼び出した方がソース的に美しいと思います。

-diary, pc&web