2013年01月16日

[Javascript]利用者に優しいブログパーツの書き方

今回紹介するのは、ブログパーツ利用者(HTMLコーダー)に配慮した、心優しきブログパーツの書き方である。 続きを読む
posted by 寄り道退屈男 at 22:54 | Comment(0) | TrackBack(0) | Webデザイン

2012年12月29日

[CSS3]画像を使わずにCSSだけでグラデーションを実現する方法

画像を使わないで見出しの背景などのグラデーションをかける方法を紹介する。
FirefoxやChromeだけでなく、邪悪なIEにもちゃんと対応させるよ。

続きを読む
posted by 寄り道退屈男 at 11:40 | Comment(0) | TrackBack(0) | Webデザイン

2012年12月28日

[CSS3]画像を使わずに「角丸」を実現する方法

見出しやボタンなどの角を丸くする方法。

以前は「角」に使う画像なんかを使ってうまくレイアウトするテニクカルなやりかたが主流だったが、CSS3になってから驚くほど簡単に綺麗なコードが書けるようになった。スタイルシートだけで表現でき、画像の準備も必要ない。
これは覚えておいて損はない。

早速見てみよう。


続きを読む
posted by 寄り道退屈男 at 10:39 | Comment(0) | TrackBack(0) | Webデザイン

2011年09月11日

jQueryテンプレートエンジン、jTemplates の使い方。

jQueryのテンプレートエンジン jTemplates を使う方法を紹介する。

当たり前だが、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)
西畑 一馬
アスキー・メディアワークス
売り上げランキング: 1336


Twitter API ポケットリファレンス (POCKET REFERENCE)
山本 裕介
技術評論社
売り上げランキング: 19589




posted by 寄り道退屈男 at 15:56 | Comment(0) | TrackBack(0) | Webデザイン

2011年09月10日

jQueryを利用してTwitter Search APIを叩く。

Javascript から Twitter Search API を利用して、ツイート一覧を取得する方法である。
何のことはない。至ってシンプルな簡単なソースだ。

<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)
    西畑 一馬
    アスキー・メディアワークス
    売り上げランキング: 834


    Twitter API ポケットリファレンス (POCKET REFERENCE)
    山本 裕介
    技術評論社
    売り上げランキング: 19589




    posted by 寄り道退屈男 at 14:48 | Comment(0) | TrackBack(0) | Webデザイン