image

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

検索

最近のトラックバック

無料ブログはココログ

« ピックアップ:Googleによると「島根にパソコンなんてあるわけない」らしい, 「都会の女子高生すごい…現実的です」, etc... | トップページ | ピックアップ:左右反転しても動作するCのコード, 少年向けコミック誌発行部数, etc... »

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... | トップページ | ピックアップ:左右反転しても動作するCのコード, 少年向けコミック誌発行部数, etc... »

コメント

It's well known that money makes people independent. But how to act if someone doesn't have money? The only one way is to try to get the credit loans and just term loan.

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: iphone アプリを javascript で。:

« ピックアップ:Googleによると「島根にパソコンなんてあるわけない」らしい, 「都会の女子高生すごい…現実的です」, etc... | トップページ | ピックアップ:左右反転しても動作するCのコード, 少年向けコミック誌発行部数, etc... »

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 あわせて読みたい

リンク