2013年01月16日
[Javascript]利用者に優しいブログパーツの書き方
今回紹介するのは、ブログパーツ利用者(HTMLコーダー)に配慮した、心優しきブログパーツの書き方である。
続きを読む
2012年12月29日
[CSS3]画像を使わずにCSSだけでグラデーションを実現する方法
2012年12月28日
[CSS3]画像を使わずに「角丸」を実現する方法
見出しやボタンなどの角を丸くする方法。
以前は「角」に使う画像なんかを使ってうまくレイアウトするテニクカルなやりかたが主流だったが、CSS3になってから驚くほど簡単に綺麗なコードが書けるようになった。スタイルシートだけで表現でき、画像の準備も必要ない。
これは覚えておいて損はない。
早速見てみよう。
続きを読む
以前は「角」に使う画像なんかを使ってうまくレイアウトするテニクカルなやりかたが主流だったが、CSS3になってから驚くほど簡単に綺麗なコードが書けるようになった。スタイルシートだけで表現でき、画像の準備も必要ない。
これは覚えておいて損はない。
早速見てみよう。
続きを読む
2011年09月11日
jQueryテンプレートエンジン、jTemplates の使い方。
jQueryのテンプレートエンジン jTemplates を使う方法を紹介する。
当たり前だが、jTemplatesを使えばブラウザ側だけでテンプレートを適用できる。わざわざサーバサイドでやる必要がないようなテンプレート処理なら、このプラグインを利用しない手はない。
以下のサンプルコードは、前に作ったツイート検索アプリを改造したものだ。クライアントサイドだけで動作するアプリである。
これを実査に動かしてみると以下のようになる。
まぁ使い方はソースを見ればわかるとして、注意したほうがいいポイントが1つだけある。それは、以下の部分だ。
setTemplateの第三引数で {filter_data:false} を渡しているが、これはHTMLのエスケープを回避するための記述だ。これが true だと、$T の中身は自動的にエスケープされる。第二第三引数は省略可能だが、そうするとデフォルトでHTMLがエスケープされているので注意が必要だ。
ここはひとつポチっとよろしく。

当たり前だが、jTemplatesを使えばブラウザ側だけでテンプレートを適用できる。わざわざサーバサイドでやる必要がないようなテンプレート処理なら、このプラグインを利用しない手はない。
以下のサンプルコードは、前に作ったツイート検索アプリを改造したものだ。クライアントサイドだけで動作するアプリである。
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="./jquery-jtemplates.js"></script>
<script type="text/javascript">
$(function(){
var f = function(){
$.getJSON('http://search.twitter.com/search.json?callback=?',
{
q: 'ついったー',
rpp: 5
},
callback
);
}
function callback(data, status){
if(status == "success"){
$("#tw").setTemplate($("#tpl").html(), null, {filter_data : false});
$("#tw").processTemplate(data.results);
}else{
alert("ツイートの取得に失敗しました");
}
}
$("#btn").click(f);
});
</script>
<script type="text/html" id="tpl">
{#foreach $T as obj}
<div style="border-bottom:1px solid blue;">
<p>■オブジェクト:</p>
<p>$T.obj.created_a: { $T.obj.created_at }</p>
<p>$T.obj.from_user: { $T.obj.from_user }</p>
<p>$T.obj.text: { $T.obj.text }</p>
<p>■ステータス:</p>
<p>$T.obj$index: { $T.obj$index }</p>
<p>$T.obj$iteration: { $T.obj$iteration }</p>
<p>$T.obj$first: { $T.obj$first }</p>
<p>$T.obj$last: { $T.obj$last }</p>
</div>
{#/for}
</script>
<input type="button" id="btn" value="ツイート取得"/>
<div id="tw"/>
</html>
これを実査に動かしてみると以下のようになる。
まぁ使い方はソースを見ればわかるとして、注意したほうがいいポイントが1つだけある。それは、以下の部分だ。
$("#tw").setTemplate($("#tpl").html(), null, {filter_data : false});
setTemplateの第三引数で {filter_data:false} を渡しているが、これはHTMLのエスケープを回避するための記述だ。これが true だと、$T の中身は自動的にエスケープされる。第二第三引数は省略可能だが、そうするとデフォルトでHTMLがエスケープされているので注意が必要だ。
ここはひとつポチっとよろしく。

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
posted with amazlet at 11.09.11
西畑 一馬
アスキー・メディアワークス
売り上げランキング: 1336
アスキー・メディアワークス
売り上げランキング: 1336
Twitter API ポケットリファレンス (POCKET REFERENCE)
posted with amazlet at 11.09.05
山本 裕介
技術評論社
売り上げランキング: 19589
技術評論社
売り上げランキング: 19589
2011年09月10日
jQueryを利用してTwitter Search APIを叩く。
Javascript から Twitter Search API を利用して、ツイート一覧を取得する方法である。
何のことはない。至ってシンプルな簡単なソースだ。
実際に動かしてみよう。
注意すべきポイントは、TwitterAPIのURIでパラメータに "callback=?" を付加しているところだ。これをやらないと、Access to restricted URI denied "code: "1012 が発生してクロスドメイン問題のエラーになる。
ここはひとつポチっとよろしく。

何のことはない。至ってシンプルな簡単なソースだ。
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// コールバック関数
var cb = function(data, status) {
if(status == "success"){
$.each(data.results, function(i, val){
$("#tw").append(
"<li>" +
" created_at: " + val.created_at +
" from_user: " + val.from_user +
" text: " + val.text +
"</li>");
});
}else{
alert("取得失敗");
}
};
// TwitterAPIを叩く関数
var f = function() {
$.getJSON(
'http://search.twitter.com/search.json?callback=?',
{
q: "腹減った",
rpp: "5"
},
cb
);
};
$("#btn").click(f);
});
</script>
<input type="button" id="btn" value="ツイート取得"/>
<ul id="tw"></ul>
</html>
実際に動かしてみよう。
注意すべきポイントは、TwitterAPIのURIでパラメータに "callback=?" を付加しているところだ。これをやらないと、Access to restricted URI denied "code: "1012 が発生してクロスドメイン問題のエラーになる。
ここはひとつポチっとよろしく。

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
posted with amazlet at 11.09.10
西畑 一馬
アスキー・メディアワークス
売り上げランキング: 834
アスキー・メディアワークス
売り上げランキング: 834
Twitter API ポケットリファレンス (POCKET REFERENCE)
posted with amazlet at 11.09.05
山本 裕介
技術評論社
売り上げランキング: 19589
技術評論社
売り上げランキング: 19589