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 でのもの。
$ 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... »
コメント
この記事へのコメントは終了しました。
« ピックアップ: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.
投稿: JOHNSTONNoreen | 2011-08-27 13:39