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デザイン

    2011年09月06日

    GAE/Pでmemcacheを利用してデータアクセスを高速化。

    GAE for Python で memcache を利用する方法を紹介する。memcacheとは早い話がキャッシュのことで、datastoreよりも高速に動作する。

    以下はそのサンプルである。

    お馴染みのゲストブックアプリだが、今回は未入力状態で投稿ボタンが押された場合は表示の更新と見なし、キャッシュから書き込み一覧を取得・表示する。もしキャッシュに書き込み一覧が無ければ、その時はデータストアから取得し、キャッシュに再登録するという流れである。言わずもがな、書き込みがあった場合はデータストアへ登録すると同時にキャッシュもクリアしておく。

    <html>
    <body>
    {% for greeting in greetings %}
    <p>{{ greeting.date }}<br/>
    {{ greeting.content|escape }}</p>
    {% endfor %}
    <form action="/sign" method="post">
    <div><textarea name="content" rows="3" cols="60"></textarea></div>
    <div><input type="submit" value="Sign Guestbook"></div>
    </form>
    </body>
    </html>

    # -*- coding: utf-8 -*-
    import cgi
    import os
    import logging
    from google.appengine.api import users
    from google.appengine.api import memcache
    from google.appengine.ext import webapp
    from google.appengine.ext.webapp.util import run_wsgi_app
    from google.appengine.ext.webapp import template
    from google.appengine.ext import db

    class Greeting(db.Model):
    content = db.StringProperty(multiline=True)
    date = db.DateTimeProperty(auto_now_add=True)

    class MainPage(webapp.RequestHandler):
    def get(self):
    # memcacheから取得
    greetings = memcache.get("greetings")
    # memcacheに無ければDatastoreから取得
    if greetings is None:
    greetings_query = Greeting.all().order('-date')
    greetings = greetings_query.fetch(10)
    logging.info(u"datastoreから取得。")
    # memcacheに格納(有効期限は600秒)
    memcache.add("greetings", greetings, 600)
    logging.info(u"memcacheへ保存。")
    else:
    logging.info(u"memcacheを利用しました。")

    template_values = {
    'greetings': greetings
    }

    path = os.path.join(os.path.dirname(__file__), 'index.html')
    self.response.out.write(template.render(path, template_values))

    class Guestbook(webapp.RequestHandler):
    def post(self):
    # 入力があった場合のみdatastoreへ保存し、
    # memcacheをクリアします。
    if self.request.get('content'):
    greeting = Greeting()
    greeting.content = self.request.get('content')
    greeting.put()
    logging.info(u"datastoreへ保存。")
    memcache.delete("greetings")
    logging.info(u"memcacheからクリア。")
    self.redirect('/')

    application = webapp.WSGIApplication([
    ('/', MainPage),
    ('/sign', Guestbook)],
    debug=True)

    def main():
    logging.getLogger().setLevel(logging.DEBUG)
    run_wsgi_app(application)

    if __name__ == "__main__":
    main()


    重要な部分だけを抜粋すると以下のとおりだ。
    from google.appengine.api import memcache

    # memcacheへ登録
    memcache.add("greetings", greetings, 600)
    # memcacheから取得
    greetings = memcache.get("greetings")
    # memcacheから削除
    memcache.delete("greetings")


    ■追記 2011-11-10
    memcache.add は、値が既に存在している場合には上書きをしない。
    上書きさせたい場合は memcache.set を利用する。


    Memcacheの詳細は、本家の「Memcache の使用方法」を参照すべし。


    ここはひとつポチっとよろしく。
    人気ブログランキングへ

    エキスパートPythonプログラミング
    Tarek Ziade
    アスキー・メディアワークス
    売り上げランキング: 4805


    プログラミング Google App Engine
    Dan Sanderson
    オライリージャパン
    売り上げランキング: 40082



    posted by 寄り道退屈男 at 15:20 | Comment(0) | TrackBack(0) | GAE for Python

    2011年09月05日

    GAE/Pで Twitter Search API を使ってみる。

    以下のロジックは、GAE/PでTwitterの Twitter Search API を利用してツイート(タイムライン)をキーワード検索するためのサンプルである。

    まずは画面HTMLを以下のとおり記述する。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="ja">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Twitter Search API - 俺の砂箱</title>
    </head>
    <body>

    <form action="/" method="get">
    <input type="text" name="q" value="{{ q }}"/>
    <input type="submit" value="検索"/>
    </form>

    {% for tweet in results %}
    <div>
    <a href="http://twitter.com/#!/{{ tweet.from_user }}" target="_blank"><img src="{{ tweet.profile_image_url }}" width="50" height="50"/></a>
    <p class="from_user"><a href="http://twitter.com/#!/{{ tweet.from_user }}" target="_blank">{{ tweet.from_user }}</p></a>
    <p class="text">{{ tweet.text }}</p>
    <p class="created_at"><a href="http://twitter.com/#!/{{ tweet.from_user }}/status/{{ tweet.id_str }}" target="_blank">{{ tweet.created_at }}</a></p>
    </div>
    {% endfor %}

    </body>
    </html>


    次にハンドラだ。

    # -*- coding: utf-8 -*-
    import cgi
    import os
    import simplejson
    import urllib2, urllib
    from google.appengine.ext import webapp, db
    from google.appengine.ext.webapp.util import run_wsgi_app
    from google.appengine.ext.webapp import template

    #
    # メインハンドラ
    #
    class MainHandler(webapp.RequestHandler):

    def get(self):
    # 検索文字列をURLエンコード
    q_encoded = urllib.quote_plus(cgi.escape(self.request.get('q')).encode('utf-8'))
    # リクエストURLを作成
    url = 'http://search.twitter.com/search.json?q=%s' % q_encoded
    # リクエストヘッダの作成
    headers = { 'User-Agent' : 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)' }
    # リクエストを作成
    req = urllib2.Request(url, None, headers)
    # レスポンスをディクショナリ形式で取得
    dict = simplejson.load(urllib2.urlopen(req))
    # ツイート一覧は 'results' というキーの中に格納されている。
    template_values = {
    "results" : dict['results'],
    }
    path = os.path.join(os.path.dirname(__file__), 'index.html')
    self.response.out.write(template.render(path, template_values))

    application = webapp.WSGIApplication([('/', MainHandler)],
    debug=False)

    def main():
    logging.getLogger().setLevel(logging.DEBUG)
    run_wsgi_app(application)

    if __name__ == "__main__":
    main()


    上記は簡単な例だが、もう少し条件を細かく指定してリクエストを投げることも当然可能である。Twitter API の詳細はこちらを参照のこと。



    ここはひとつポチっとよろしく。
    人気ブログランキングへ

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




    posted by 寄り道退屈男 at 08:29 | Comment(0) | TrackBack(0) | Webサービス