【-】 スポンサーサイト

一定期間更新がないため広告を表示しています

2010.12.28 / | CM : 0 | TB : 0

△PAGE UP

HTML・CSS Twitterな話。

さて、連休も明けました。お仕事してます、お久しぶりデス。
休みの日は出掛けることが実は多くて、PCの前に居ることがあまりないです。
黄金連休も裁縫やら飲み会やらヲタクなイベントやらで出掛けてました。わは。
GW中にTwitterのバッジをつけて、モバトゥイッターで更新しようと思ってたんですが、GWの最初の日くらいから使えなくなってしまい(仕様が色々と変わってしまったのか、エラー出まくりでアクセスできなくなってしまいました)、Twitter×GWという目論みが華々しく散りました。しょぼん。

そんなわけで。
ロリポにサーバーも借りているので(ほぼ倉庫&遊び用鯖)そこにtwitter Mobileを入れて使うことに。
コレがなかなか快適。設置も簡単だし。
感想というか、突っ込みを入れるなら、
・画像ON/OFFがあるのはありがたいが、どうせなら絵文字使った方が…
・うちの携帯(V501SH)ではCSSファイルは呼び出せないのですよ
そんなところかな?それ以外は特に問題ないです。快適です。
(↑は自分で対応させられたらしてみたいです。PHPはあんま分からないですけど)
今色んなTwitterの携帯サービス出てるけど、たいていが固体識別情報のログとってたりで、セキュリティがどーのこーの言われてるので、自分専用のを設置した方がまだ安全な気がする。

ほんで。
ならばbadgeも付けたいなーと思い、試行錯誤。
Informationに付けてみました。
Twitterで配布されてるヤツそのままだと、色々不具合あるようで、調べたら良さげな改変スクリプトがあったので拝借し、自分好みにカスタマイズしてみました。
ちなみにJavascript部分がそこそこ長いので、外部ファイルにして呼び出す形式にしてます。
使うヒトいるか分からないけど、ソース晒しますね。

□Javascript
function relative_time(time_value) {
time_values = time_value.split(" ");
time_value = time_values[1]+" "+time_values[2]+", "+time_values[5]+" "+time_values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset()*60);
if(delta < 60) {
return 'less than a minute ago';
} else if(delta < 120) {
return 'about a minute ago';
} else if(delta < (45*60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (90*60)) {
return 'about an hour ago';
} else if(delta < (24*60*60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
return '1 day ago';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}

function twitterCallback(obj) {
var t = document.getElementById('twitter');
for ( i=0; i<obj.length; i++) {
t.innerHTML += '<li>'+obj[i].text+'<span class="time"> : '+relative_time(obj[i].created_at)+'</span></li>';
}
}

document.write(
'<scr'+'ipt '
+'type="text/javascript" '
+'src="http://www.twitter.com/statuses/user_timeline/{User_Num}.json?callback=twitterCallback&count=5">'
+'</scr'+'ipt>'
);
{User_Num}には、Twitter Home→Badge→Javascriptのところにある「http://www.twitter.com/statuses/user_timeline/数字.json」←の数字部分を入れてください。
↑でやってることは、時間の表示を整形して、Twitterの文字を表示する部分をどう表示するか、ってのを決めてます。
でコレを外部ファイルにして、自分で借りているサーバー等にアップ。

次にHTML部分。
表示させたい場所のHTML部分(私はフリースペース部分に書いてます)に
□HTML
<ul id="twitter"></ul>
を記述。
そして、外部ファイルの呼び出しは、</body>のすぐ上で
□HTML
<script type="text/javascript" src="外部ファイルのURL"></script>
</body>
こんな感じに呼び出し。
</body>のすぐ上で呼び出す理由としては、twitterが重たいと呼び出しに時間がかかり、ブログの表示自体も重くなることがあるので、全てを表示してから、twitterのデータを呼び出すためだそうです。

今回のバッジ付けで参考にしたのは以下のページです。
いやぁお勉強になりました。
Twitter BadgeのカスタマイズURLまとめ(bizmemo)
第5回:twitter の JavaScript Badge を改造する(creazy photograph)

2007.05.09 / 13:32 | CM : 0 | TB : 1

△PAGE UP

【-】 スポンサーサイト

2010.12.28 / | CM : 0 | TB : 0

△PAGE UP

<< CSS Niteについて思う事MAINin the cage >>

Comment

Trackback

トラックバックURL :

とぅうぃったーしばらく前にインターネット上で話題になっていたTwitterを始めてみました。以前から利用登録だけは... COLORFULLIFE | 2007/05/16 2:54 PM