2008年8月18日月曜日

"Google App Engine"にjQuery

スズキです。

"Google Google AJAX Feed API"に続いて、
jQueryも導入して見ました。

ただし、jQueryは"AJAX Libraries API"を使った読み込みです。
http://code.google.com/apis/ajaxlibs/
下記のようにgoogle.load(...)を利用します。

-------- index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>suz-lab - app</title>
    <script type="text/javascript"
src="http://www.google.com/jsapi?key=XXX"></script>
    <script type="text/javascript">
      google.load("jquery", "1");
      google.load("feeds" , "1");
    </script>
    <script type="text/javascript" src="js/app/index.js"></script>
  </head>
  <body>
    <h1>suz-lab - app</h1>
    <h2>ニュース</h2>
    <div id="feed">test</div>
  </body>
</html>
--------

で、"Google Google AJAX Feed API"で取得したデータを、
for文ではなく、jQuery.each(...)で処理してみました。
あと、DOM系の処理も下記のように、$(...)に置き換えてます。

-------- js/app/index.js
google.setOnLoadCallback(function() {
  var feed = new google.feeds.Feed("http://feeds.feedburner.com/suz-lab");
  feed.load(function(result) {
    if(!result.error) {
      var html = "<dl>";
      jQuery.each(result.feed.entries, function(key, val){
        var date = new Date(val.publishedDate);
        html += "<dt>" + (date.getMonth() + 1) + "/" + date.getDate() + "</dt>"
        html += "<dd><a href='" + val.link + "'>" + val.title + "</a></dd>"
        html += "<dd>" + val.content + "</dd>"
      });
      html += "</dl>";
      $("#feed").html(html);
    }
  });
});
--------

あと、やりたいことは、
-CSSできれいにする。
-日付を適当なフォーマッターつかって整形する。
-jTemplate使う。
-記事の本文をLightBox系のプラグインで表示する。
といった感じでしょうか?

Javascriptでできることは、できるだけJavascriptでやろう。

--
http://suz-lab.blogspot.com/

0 コメント: