image

  • フォト Amazonギフト券
    ※この時計の時刻は、閲覧しているパソコンのものであり、必ずしも正確な時間とは限りません

検索

最近のトラックバック

無料ブログはココログ

« 2010年8月9日 | トップページ | 2010年8月11日 »

2010年8月10日

2010-08-10

iphone アプリを javascript で。

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 でのもの。

2010081002     2010081001

$ cat Tweetme-query.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--
  See
    http://www.timo-ernst.net/2010/08/tutorial-a-simple-twitter-client-with-jqtouch/
    http://d.hatena.ne.jp/kanonji/20100427/1272372721
-->

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <title>Tweet-search</title>

    <!-- include JQuery through Google API => Always have the latest version -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript"> google.load("jquery", "1.4"); </script>

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

    <!-- Import JQTouch default style (iPhone look).
       Replace the string "themes/apple" with "themes/jq" for a non-iPhone theme -->
    <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">

    <!-- JavaScript goes here -->
     <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>

    <!-- CSS styles -->
    <style type="text/css">
    </style>
  </head>

  <!-- A simple JQTouch layout consisting of two views -->
  <body onload="init();" class="landscape">
    <!-- "Page 1" -->
    <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>

    <!-- "Page 2" - Will contain the tweets found -->
    <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">
<!--
  See
    http://www.timo-ernst.net/2010/08/tutorial-a-simple-twitter-client-with-jqtouch/
    http://d.hatena.ne.jp/kanonji/20100427/1272372721
-->

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <title>Tweet-search</title>

    <!-- include JQuery through Google API => Always have the latest version -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript"> google.load("jquery", "1.4"); </script>

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

    <!-- Import JQTouch default style (iPhone look).
       Replace the string "themes/apple" with "themes/jq" for a non-iPhone theme -->
    <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">

    <!-- JavaScript goes here -->
     <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>

    <!-- CSS styles -->
    <style type="text/css">
    </style>
  </head>

  <!-- A simple JQTouch layout consisting of two views -->
  <body onload="init();" class="landscape">
    <!-- "Page 1" -->
    <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>

    <!-- "Page 2" - Will contain the tweets found -->
    <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>

ピックアップ:Googleによると「島根にパソコンなんてあるわけない」らしい, 「都会の女子高生すごい…現実的です」, etc...

- http://www.oshiete-kun.net/archives/2010/08/google_46.html
> Googleによると「島根にパソコンなんてあるわけない」らしい・・・ :教えて君.net

- http://kokumaijp.blog70.fc2.com/blog-entry-134.html
> ツイッターを地域・行政にどう活かす?佐賀・武雄市長「日本ツイッター学会」設立へ | kokumai.jpツイッター総研

- http://art2006salt.blog60.fc2.com/blog-entry-1171.html
> ヨーロッパの電子書籍化が遅れる理由 @ ArtSaltのサイドストーリー

- http://211.19.44.167/message/index.php?m=1%26l=%26d=2010080920001j.xml
> U3MUSIC INC: 久しぶりの大事なお知らせ

- http://blog.livedoor.jp/booq/archives/1288726.html
> まとめたニュース:【国際】世界初の3Dポルノ映画、撮影開始 日本人女優 周防ゆきこ 原紗央莉が出演

- http://togetter.com/li/40856
> Togetter - 「都会の女子高生すごい…現実的です」

« 2010年8月9日 | トップページ | 2010年8月11日 »

mokuji

2013年12月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

google

  • twitter
  • __
  • _
    Googleボットチェッカー

合わせて読む

  • 合わせて読む
    フィードメーター - katoy: cocolog あわせて読みたい

リンク