jQueryを使ってみた
March 19, 2012 – 12:11 pm本格的にJavaScriptを学んでみようと「JavaScriptコーディングベストプラクティス」を読んでみた。JavaScriptの活用には、ライブラリを使うことが一般的で、ライブラリのうち最も普及しているのがjQueryだという。
jQueryを活用してこのブログのサイドバー上に、私のTwitter文を出力させてみた。比較的、簡単に動作させることができた。ソースなど関連部分をメモ。
jQueryの使用：「JavaScriptコーディングベストプラクティス」でライブラリjQueryの記述のさわりを以下引用しておいた：
JavaScriptライブラリのコードを覚えるという手間は必要だが、覚えてしまえばブラウザ間の差異をほとんど意識せずに開発を行うことが可能だ。さらに、JavaScriptライブラリではＩＥ６などのブラウザに対しても非常に高度な最適化が行われており、何も意識しなくても高いパフォーマンスを発揮することができる。
利用するJavaScriptライブラリだが、会社やチームのメンバーが最も使い慣れたものを利用するとよいだろう。とくにこだわりがなければ、jQueryの利用をお勧めする。jQueryは最も普及しているJavaScriptライブラリで開発者数が非常に多いので、プロジェクトの引継ぎや、プロジェクトへのメンバーの追加などを効率よく行うことが可能だ。(pp.31-32)
Header部： このブログのheader部にライブラリjQueryを登録。合わせてtwitter apiから返される日付表示変更用スクリプト dateformat.jsを与えておいた。
<header> ・・・・ <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript" src="/jquery/dateformat.js"></script> ・・・・ </header>
ライブラリjquery.js は、jQueryのダウンロードサイトよりjquery-1.7.1.min.jsをダウンロードした後、ファイル名を変更。
date_format.js：
function date_format(date_string) {
var date_time = Date.parse(date_string);
var d = new Date();
d.setTime( date_time );
var yy = d.getYear();
if ( yy < 2000 ) { yy +=1900; }
var mm = d.getMonth() + 1;
if ( mm < 10 ) {mm = "0" + mm; }
var dd = d.getDate();
if ( dd < 10 ) {dd = "0" + dd; }
var hour = d.getHours();
if ( hour <10 ) {hour = "0" + hour;}
var min = d.getMinutes();
if ( min < 10 ) {min = "0" + min;}
return yy+"/"+mm+"/"+dd+" "+hour+":"+ min;
}
sidebar 部のhtml文ならびにjｓ文：
<div id="rsidebar">
<ul>
（ 省 略 ）
<li><h2>What Impressed Me</h2>
<div id=twitter></div>
<script type="text/javascript">
<!--
$(document).ready(function(){
$.getJSON('http://twitter.com/statuses/user_timeline/yamasnet.json?callback=?',
function(json){
for(var i in json){
json[i].text = json[i].text.replace(/(http:\/\/[\x21-\x7e]+)/g, "<a href='$1' target='_blank'>$1</a>");
json[i].text = json[i].text.replace(/#(\w+)/g, "<a href='http://twitter.com/search?q=%23$1' target='_blank'>$1</a>");
json[i].text = json[i].text.replace(/@(\w+)/g, "<a href='http://twitter.com/$1' target='_blank'>$1</a>");
var date_created = json[i].created_at;
var id_str = json[i].id_str;
date_created = date_format(date_created.replace(/ \+/, " UTC+"));
date_created = "<a href='http://twitter.com/yamasnet/statuses/" + id_str + "' target='_blank'>" + date_created + "</a>"; $("#twitter").append("<p class=tw_bottom>"+json[i].text+" <span class=tw_date> on "+date_created+"</span></p>");
if ( i == 5 ) break;
}
});
});
//-->
</script>
</li>
（ 省 略 ）
</ul>
</div>
上記のjs文に対応するcss 関連部:
/**** Sidebar *****/
#sidebar {
float:right;
width:200px;
margin:10px 0 0;
padding:0;
}#rsidebar {
float:right;
width:200px;
margin:0;
padding:0;
overflow:hidden;
}#rsidebar h2 {
font-size:12px;
border-bottom:#eee 1px solid;
margin:0 0 5px;
padding:0;
}#rsidebar ul {
list-style-type:none;
margin:0;
padding:0;
}#rsidebar ul li {
list-style-type:none;
margin:0 0 10px;
padding:0;
}
.tw_bottom {
font-size: 93%;
border-bottom: #eee solid 1px;
}
.tw_date {
font-size: 85%;
color: #999999;
}