PROFILE
Template
【HTML・CSS】 Twitterな話。
さて、連休も明けました。お仕事してます、お久しぶりデス。
休みの日は出掛けることが実は多くて、PCの前に居ることがあまりないです。
黄金連休も裁縫やら飲み会やらヲタクなイベントやらで出掛けてました。わは。
GW中にTwitterのバッジをつけて、モバトゥイッターで更新しようと思ってたんですが、GWの最初の日くらいから使えなくなってしまい(仕様が色々と変わってしまったのか、エラー出まくりでアクセスできなくなってしまいました)、Twitter×GWという目論みが華々しく散りました。しょぼん。
そんなわけで。
ロリポにサーバーも借りているので(ほぼ倉庫&遊び用鯖)そこにtwitter Mobileを入れて使うことに。
コレがなかなか快適。設置も簡単だし。
感想というか、突っ込みを入れるなら、
・画像ON/OFFがあるのはありがたいが、どうせなら絵文字使った方が…
・うちの携帯(V501SH)ではCSSファイルは呼び出せないのですよ
そんなところかな?それ以外は特に問題ないです。快適です。
(↑は自分で対応させられたらしてみたいです。PHPはあんま分からないですけど)
今色んなTwitterの携帯サービス出てるけど、たいていが固体識別情報のログとってたりで、セキュリティがどーのこーの言われてるので、自分専用のを設置した方がまだ安全な気がする。
ほんで。
ならばbadgeも付けたいなーと思い、試行錯誤。
Informationに付けてみました。
Twitterで配布されてるヤツそのままだと、色々不具合あるようで、調べたら良さげな改変スクリプトがあったので拝借し、自分好みにカスタマイズしてみました。
ちなみにJavascript部分がそこそこ長いので、外部ファイルにして呼び出す形式にしてます。
使うヒトいるか分からないけど、ソース晒しますね。
↓
休みの日は出掛けることが実は多くて、PCの前に居ることがあまりないです。
黄金連休も裁縫やら飲み会やらヲタクなイベントやらで出掛けてました。わは。
GW中にTwitterのバッジをつけて、モバトゥイッターで更新しようと思ってたんですが、GWの最初の日くらいから使えなくなってしまい(仕様が色々と変わってしまったのか、エラー出まくりでアクセスできなくなってしまいました)、Twitter×GWという目論みが華々しく散りました。しょぼん。
そんなわけで。
ロリポにサーバーも借りているので(ほぼ倉庫&遊び用鯖)そこにtwitter Mobileを入れて使うことに。
コレがなかなか快適。設置も簡単だし。
感想というか、突っ込みを入れるなら、
・画像ON/OFFがあるのはありがたいが、どうせなら絵文字使った方が…
・うちの携帯(V501SH)ではCSSファイルは呼び出せないのですよ
そんなところかな?それ以外は特に問題ないです。快適です。
(↑は自分で対応させられたらしてみたいです。PHPはあんま分からないですけど)
今色んなTwitterの携帯サービス出てるけど、たいていが固体識別情報のログとってたりで、セキュリティがどーのこーの言われてるので、自分専用のを設置した方がまだ安全な気がする。
ほんで。
ならばbadgeも付けたいなーと思い、試行錯誤。
Informationに付けてみました。
Twitterで配布されてるヤツそのままだと、色々不具合あるようで、調べたら良さげな改変スクリプトがあったので拝借し、自分好みにカスタマイズしてみました。
ちなみにJavascript部分がそこそこ長いので、外部ファイルにして呼び出す形式にしてます。
使うヒトいるか分からないけど、ソース晒しますね。
↓
□Javascript
↑でやってることは、時間の表示を整形して、Twitterの文字を表示する部分をどう表示するか、ってのを決めてます。
でコレを外部ファイルにして、自分で借りているサーバー等にアップ。
次にHTML部分。
表示させたい場所のHTML部分(私はフリースペース部分に書いてます)に
□HTML
そして、外部ファイルの呼び出しは、</body>のすぐ上で
□HTML
</body>のすぐ上で呼び出す理由としては、twitterが重たいと呼び出しに時間がかかり、ブログの表示自体も重くなることがあるので、全てを表示してから、twitterのデータを呼び出すためだそうです。
今回のバッジ付けで参考にしたのは以下のページです。
いやぁお勉強になりました。
・Twitter BadgeのカスタマイズURLまとめ(bizmemo)
・第5回:twitter の JavaScript Badge を改造する(creazy photograph)
function relative_time(time_value) {{User_Num}には、Twitter Home→Badge→Javascriptのところにある「http://www.twitter.com/statuses/user_timeline/数字.json」←の数字部分を入れてください。
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>'
);
↑でやってることは、時間の表示を整形して、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)
NEW ENTRYS
- 生存報告とか色々なお知らせ (12/28)
- 生存報告とお知らせと宣伝と (08/21)
- CSS Naked Day だそうです。 (04/09)
- gift (03/28)
- エントリが1ヶ月おきな件について (03/24)
COMMENTS
TRACKBACK
- JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ buggy_trekkerの学習帳 (10/24) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ Memoのメモ (08/23) - (追記:2007.8.29)IE7でbodyの背景が拡大/縮小されない!【IE7対策】
⇒ SOHOカアチャン通信 (06/09) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ WEB制作会社のメモ帳in徳島(ホームページ作成Tips) (11/18) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ btmup Blog [tech] (11/04) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ Bowz::Notebook (03/12) - Twitterな話。
⇒ COLORFULLIFE (05/16)
ARCHIVES
- December 2010 (1)
- August 2009 (1)
- April 2008 (1)
- March 2008 (2)
- February 2008 (1)
- December 2007 (1)
- November 2007 (1)
- October 2007 (1)
- August 2007 (1)
- July 2007 (2)
- June 2007 (10)
- May 2007 (4)
- April 2007 (9)
- March 2007 (16)
- February 2007 (17)