PHPとAjaxを使って「もっと読む」ボタンをjQuery-Mobileページに簡単に実装。
Create a Twitter-Like "Load More" button using Ajax and PHP
TwitterのつぶやきをPHPで取得してAjaxでDOMに追加していくってのをやってみたので、メモしておきます。
まずは、jQueryMobileで作ったHTMLソースを…。
---- tweet.html ----
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Tweet</title>
<!-- jQuery-Mobile -->
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<link href="/css/site.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div data-role="page" id="toppage" data-theme="c">
<div data-role="header" data-backbtn="false">
<h1><p class="svgfont">t</p>My tweet.</a></h1>
</div>
<div data-role="content" data-theme="c">
<ul data-role="listview" data-theme="d" data-inset="false" id="tweet" style="margin-bottom:10px;"></ul>
<a href="#" id="more" onclick="loadMore();" data-role="button" id="loading">もっと見る</a>
</div>
<div data-role="footer">
<nav data-role="navbar">
<ul>
<li><a href="#"><p class="svgfont">c</p>News</a></li>
<li><a href="#"><p class="svgfont">f</p>FaceBook</a></li>
<li><a href="twitter.html"><p class="svgfont">t</p>Twitter</a></li>
<li><a href="#"><p class="svgfont">@</p>Contact</a></li>
</ul>
</nav>
</div>
</div>
<!-- jQuery-Mobile -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!--/ jQuery-Mobile -->
<!--Ajax-->
<script>
var page = 1;
function loadMore() {
$(".ui-btn-text").html("読み込み中...");
$.post('tweet.php', {
page : page
},
function(res){
$(".ui-btn-text").html("もっと読む");
$("#tweet").append(res).listview('refresh');
});
page++;
}//loadMore
$(function(){
loadMore();
});
</script>
<!-- / Ajax -->
</body>
</html>
次は、Tweetを読み込んで<li>を生成するtweet.phpのソースです。
---- tweet.php ----
<?php
$url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=ikuzo1930&page=" . $_POST['page'];
$tweet = json_decode(file_get_contents($url));
foreach ($tweet as $val){
echo "<li>" . $val->text . "</li>\n";
}
?>
svgフォントはおいといて、基本的にはこの2つのファイルだけで動きます。
必要なjQuery,jQuery-mobile.js,jQuery-mobile.cssは全部CDNで読み込んでますので。
まずはPHPの方の説明からいきましょう。
基本的には、何もやっていないです。
http://api.twitter.com/1/statuses/user_timeline.json?screen_name=ikuzo1930&page=" . $_POST['page'];
上記のTwitterのJSON-APIからfile_get_contents()で情報を取得してきてjson_decode()でデコード。
foreachで<li>～</li>を生成してます。
本当に、それだけです。
URLの「&page=」のパラメータに入る数字は、tweet.htmlからpostで渡されますが、これは後で。
まあ、こんな感じで生成した要素をAjaxでDOMに追加しているわけです。
PHPの方はあまり説明することがないので、本題にいきましょう。
<!--Ajax-->
<script>
pageパラメータの初期値を設定。
var pageNo = 1;
ボタンをクリックしたときに呼ばれる(onclick="loadMore();"でコール)
function loadMore() {
ボタンの中の文字を変更
jQueryMobileは<a data-role="button">でボタンを作ると自動的に
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">
</span>
が生成されるので、今回はCSSセレクタを.ui-btn-textにしておく
$(".ui-btn-text").html("読み込み中...");
$.post{"key1": "value1", "key2": "value2"…}とう形でデータをpost
今回は{page : pageNo}でデータをtweet.phpにPOST
$.post('tweet.php', {
page : pageNo
},
function(res){
ボタンの表示を戻す
$(".ui-btn-text").html("もっと読む");
<ul id="tweet">～</ul>の中に取得してきたデータ「res」を追加
jQueryMobileで<li>装飾する場合は.listview('refresh')を使う。
.page()でもいいみたいなんですが、うまいこと動かなかったのでとりあえず。
ul要素を含むHTMLを装飾したい場合はlistview()を使うけど
今回のようにli要素しかない場合はlistview('refresh')を使用DEATH。
まあ、ほとんどの場合、li要素の追加ですよね。
$("#tweet").append(res).listview('refresh');
});
変数pageNoの値を１プラスします。
pageNo++;
}//loadMore
ページが読み込まれたときに、とりあえず１ページ目をロードするので
loadMore()を呼びます。
$(function(){
loadMore();
});
</script>
<!-- / Ajax -->
よくよく考えてみたら、ボタンの表示を変えるCSSセレクタは"#loading .ui-btn-text"かな？
ま、今回は別のリストは無いので動くんでいいかなっと。
…とか思ったら、nav要素の中身も全部表示が変わっちゃってるから、やっぱり直してください。
こんな感じに読み込み中…って出て、読み込みが完了したらリストがDOMに追加されて、文字も元に戻るはずです。
