× 無料のユーザー登録をすると学習状況を管理することができるようになります

ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト

【旧版】PHPで実装する「もっと読む」 (全8回)

最新版のレッスンはこちらから » 【最新版】PHPとjQueryで実装する「もっと読む」 (全9回)

PHPとjQueryのAjaxを使って、サーバーから追加のコンテンツを読み込む機能を実装してみます。

このレッスンでは PHP 5.3 / jQuery 1.6.4 を使用しています。

#01 Twitterからデータを取得する
2012年1月14日

補足情報 あわせて見ておきたいレッスンについて

このレッスンを理解するにはPHP、JavaScript、jQueryを先に学習しておくことをおすすめします。
・PHPの基礎
http://dotinstall.com/lessons/basic_php
・JavaScriptの基礎
http://dotinstall.com/lessons/basic_javascript
・jQueryの基礎
http://dotinstall.com/lessons/basic_jquery
2012年1月12日

補足情報 user_timeline APIの詳細について

Twitterのuser_timelineに関するドキュメントはこちらです。
https://dev.twitter.com/docs/api/1/get/statuses/user_timeline
#02 直近のつぶやきを表示する
2012年1月12日

補足情報 json_decodeの詳細について

json_decodeに関する公式ドキュメントは以下からどうぞ。なお、映像中でも説明しましたが、PHP5.2以上が必要です。
http://php.net/manual/ja/function.json-decode.php
2012年1月12日

補足情報 jsonとは？

jsonとはJavaScriptのオブジェクト記法をもとにした軽量かつ読みやすいデータ記述方法です。JavaScriptと相性がいいため、APIなどで良く使われます。
より詳しくはWikipediaをどうぞ。
http://ja.wikipedia.org/wiki/JavaScript_Object_Notation
#05 データ読み込み機能の実装
2012年4月27日

補足情報 max_idを利用してページングを実現するには？

2012年5月14日以降、Twitter APIで「page」パラメータは使えなくなります。

http://groups.google.com/group/twitter-development-talk-ja/browse_thread/thread/2b000ebba6a3b4f4?pli=1

そこで、pageパラメータの代わりに「max_id」パラメータを使用します。

■ 実装の方針

・max_id を使うと、その id 以下の id のツイートをAPIで取得できます。ただし max_id で指定した id のツイートも「含まれる」ことに注意してください。

・次ページを読み込むには、すでに読み込んだツイートの最後のツイートの id を max_id に指定して more.php に POST します。

・ここで、最後のツイートの id から 1 引いた値を max_id に指定してもいいですが、ツイートの id は 32 bit を超えた値であるため、64 bit OS でないと正しい引き算ができません。そのため、ここでは引き算せずにそのまま max_id に指定することにします。

・more.php に max_id が指定された場合、 foreach ループで先頭のツイートを出力しないようにします。先頭のツイートはすでに前ページで表示済みであるためです。

・more.php で返す <li> 要素にツイートの id を同時にセットできれば、JavaScript で簡単にツイートの id を取得できるはずです。

・ここでは data-status-id という data 属性をセットし、その値にツイートの id を入れるようにします。こうすることで、jQuery の .data() メソッドが利用できるようになります。


■ 手順

1. more.php の $url = ... の部分を次のように修正します。

$url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=taguchi";
if ($_POST['max_id'] != '') {
    $url .= "&max_id=".$_POST['max_id'];
}

2. more.php の foreach 部分を次のように修正します。

foreach ($tweets as $i => $tweet) {
    if ($_POST['max_id'] != '' and $i == 0) {
        continue;
    }
    echo "<li data-status-id='".$tweet->id_str."'>".$tweet->text."</li>";
}

3. index.html の JavaScript 部分を次のように修正します。

<script>
    function more() {
        var max_id = $('#tweets>li:last').data('status-id');

        $.post('more.php', {
            max_id: max_id
        }, function(rs) {
            $("#tweets").append(rs);
        });
    }

    $(function() {
        more();
    });
</script>
#06 ローディング中メッセージの表示
2012年4月27日

補足情報 リツイートについて

2012年5月14日以降、 include_rts のパラメータを追加しなくても公式リツイートは含まれるようになります。

http://groups.google.com/group/twitter-development-talk-ja/browse_thread/thread/2b000ebba6a3b4f4?pli=1
2012年1月14日

補足情報 ローディング中の画像を紹介しているサイト

ローディング中のメッセージはテキストではなくて、アニメーションGIFを使うことも多いです。そうした画像は以下のサイトで作ることができます。
http://www.ajaxload.info/
2012年1月12日

補足情報 include_rtsのパラメーター

include_rtsのパラメーターに関してですが、「include_rts=true」以外に「include_rts=1」、または「include_rts=t」でも機能します。
#07 表示効果の設定
2012年1月14日

補足情報 あわせて見ておきたいサイトについて

fadeInに関する公式ドキュメントはこちらです。
http://api.jquery.com/fadeIn/

jQueryで使える表示効果は他にも次のようなものがあります。
http://api.jquery.com/category/effects/

さらにjQuery UIというプラグインを使えば、もっと複雑な効果を得ることができます。デモは以下のサイトから見ることができますよ。
http://jqueryui.com/demos/effect/