iphone アプリを javascript で。: katoy: cocolog

iPhoneアプリケーション開発ガイド　―HTML+CSS+JavaScript による開発手法を読んでいる。
web の別のサンプル例も参考にして、指定 user_name の tweet、指定文字列でのtweet 検索を作ってみた。
http://www.timo-ernst.net/2010/08/tutorial-a-simple-twitter-client-with-jqtouch/ では、php で作成したアプリを呼び出して user_name 指定での tweet を表示している。
俺は php を使わずに作ってみた。
また user_name 指定だけでなく、文字列でのサーチの機能も追加してある。
(現状では user_name に日本語を指定したときのエラーがキャッチできていない)
以下に示したスクリーンショットは safari でのもの。

$ cat Tweetme-query.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<title>Tweet-search</title>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.4"); </script>

<script src="../js/jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>

<link type="text/css" rel="stylesheet" media="screen" href="../js/jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen" href="../js/jqtouch/themes/apple/theme.css">

<script type="text/javascript" charset="utf-8">
      $.jQTouch({
         icon: 'icon.png',
         startupScreen: 'img/startup.png'
      });

      // Fire up JQTouch
      var jQT = $.jQTouch({
         statusBar: 'black'
      });

      // Determine if iPhone, Android or Desktop OS and setup the right click-event ("tap" vs "click").
      var userAgent = navigator.userAgent.toLowerCase();
      var isiPhone = (userAgent.indexOf('iphone') != -1 || userAgent.indexOf('ipod') != -1) ? true : false;
      clickEvent = isiPhone ? 'tap' : 'click';

      /**
      * Initalize the programm
      */
      function init(){
         $("#submitButton_timeline").bind(clickEvent, function(e){
            getTweets(timeline);
         });
         $("#submitButton_search").bind(clickEvent, function(e){
            getTweets(search);
         });
      }

      /**
      * Event-listener. Gets called if the user presses a button on his keyboard
      * in the input field.
      * @param keynum The pressed key (as an ASCii value)
      */
      function keydown(keynum){
         if (keynum == 13){
            $("#submitButton_timeline").trigger(clickEvent);
         }
      }

      /**
      * Does an ajax call and retrieves the tweets of the user specified in the
      * input field "query_input"
      */
      function getTweets(func){
         var query = document.getElementById("query_input").value;
         var results_ul = document.getElementById("results_ul");

         // Get the query from the input field
      if (query.length == 0) {
      results_ul.innerHTML = "<li>Query is empty.Please press 'back' and try again.</li>";
            return false;
         }

         // Show a loading message
         results_ul.innerHTML = "<li>Loading...</li>";
         func(query, results_ul);
      }

      function timeline(query, results_ul) {
         var rpp = 100;
         var serverURL = "http://twitter.com/statuses/user_timeline/%user%.json?callback=?&rpp=%rpp%"
         var baseURL = serverURL.replace("%user%", query).replace("%rpp%", rpp);
         //console.log(baseURL);

         $.ajax({
            url: baseURL,
            dataType:"json",
            cache: false,
            success: function(data) {
               console.log("Success");
               showTweets(data);
            },
            error: function() {
               console.log("Error");
               results_ul.innerHTML = "<li>An error occured. Tweets could not be loaded<br></li>";
            }
         });
      }

      function search(query, results_ul) {
         var count = 20;
         var serverURL = "http://search.twitter.com/search.json?callback=?&q=%query%&count=%count%"
         var baseURL = serverURL.replace("%query%", query).replace("%count%", count);
         //console.log(baseURL);

         $.ajax({
            url: baseURL,
            dataType:"json",
            cache: false,
            success: function(data) {
               console.log("Success");
               showTweets(data.results);
            },
            error: function() {
               console.log("Error");
               results_ul.innerHTML = "<li>An error occured. Tweets could not be loaded<br></li>";
            }
         });
      }

      function get_time_str(s) {
   var time = Date.parse(s);
      var dt = new Date(time)
      return dt.toLocaleString();
}

      /**
      * Outputs the received tweets to the user-interface
      * @param tweets The tweets as an array. Each element represents one tweet and can be accessed via tweets[i].text
      */
      function showTweets(tweets){
      var results_ul = document.getElementById("results_ul");
      results_ul.innerHTML = "";

      if ((tweets == undefined) || (tweets.length <= 0)){
         results_ul.innerHTML += "<li>Not found. Please press 'back' and try again.</li>";
      } else {
         for (var i=0; i<tweets.length; i++){
            results_ul.innerHTML += "<li>" + get_time_str(tweets[i].created_at) + "<br/>" + tweets[i].text + "</li>";
         }
      }
      }
</script>

<style type="text/css">
</style>
</head>

<body onload="init();" class="landscape">

<div id="theform" class="current">
   <div class="toolbar">
      <h1>TweetMe</h1>
   </div>
   <ul class="rounded">
      <li><input type="text" onkeydown="keydown(event.which);" placeholder="Query" name="query" id="query_input" autocapitalize="off" autocorrect="off" autocomplete="off"></li>
      <li class="arrow"><a id="submitButton_timeline" href="#tweets">View tweets by user</a></li>
      <li class="arrow"><a id="submitButton_search" href="#tweets">Search twetts</a></li>
   </ul>
</div>

<div id="tweets">
   <div class="toolbar">
      <h1>Results</h1>
      <a class="button back" href="#">Back</a>
   </div>
   <ul id="results_ul" class="rounded">
   </ul>
</div>

</body></html>
ntsitm263172:tweet youichikato$
ntsitm263172:tweet youichikato$
ntsitm263172:tweet youichikato$
ntsitm263172:tweet youichikato$
ntsitm263172:tweet youichikato$ cat Tweetme-query.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<title>Tweet-search</title>

<script src="../js/jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
      $.jQTouch({
         icon: 'icon.png',
         startupScreen: 'img/startup.png'
      });

      // Fire up JQTouch
      var jQT = $.jQTouch({
         statusBar: 'black'
      });

         // Get the query from the input field
      if (query.length == 0) {
      results_ul.innerHTML = "<li>Query is empty.Please press 'back' and try again.</li>";
            return false;
         }

         // Show a loading message
         results_ul.innerHTML = "<li>Loading...</li>";
         func(query, results_ul);
      }