スクロールによる自動読み込みの実装

スクロールによる自動読み込みの実装

#09 スクロールで自動読み込みしよう
http://dotinstall.com/lessons/more_php_v2/21809
を参考に
スクロールによる自動読み込みを実装する

これは twitter とか facebook で
下につくと自動的に読み込んでくれるのと同じような仕組み
これがあると、いちいちボタンをクリックする手間がかからないので楽になる

まず、index.html でボタン部分をコメントアウト

そして java script の click イベントも使わないので
とりあえずコメントアウト

コメントアウト部分は

 $('#more').click(function(){
                                $('#loading').show();
                        
                        if($('#tweets > li').length){
                        max_id = $('#tweets > li:last').attr('id').replace(/^tweet_/,'');
                        }
                        //console.log(max_id);

                                $.get('more.php',{max_id:max_id},function(rs){
                                        $('#loading').hide();
                                        $(rs).appendTo('#tweets');      
                                });
                        });

になる

そして、新しくスクロールのためのユーザ関数を作成

function more(){
                 $('#loading').show();
                        
                  if($('#tweets > li').length){
                        max_id = $('#tweets > li:last').attr('id').replace(/^tweet_/,'');
                    }

                  $.get('more.php',{max_id:max_id},function(rs){
                        $('#loading').hide();
                        $(rs).appendTo('#tweets');      
                   });
        }

とりあえず、これでページを読み込んだら
more() を実行すれば、今までと同じように
つぶやきを取得して表示する

more();


$(function(){}のスコープ内の最後あたりに
追記すればOK

スコープの外に書くと動作しないので注意

ページをリロードして、ボタンがなくなっていること
そして、自動でつぶやきを取得できていれば成功

ここまでできたら、いよいよスクロールしたら読み込む機能を実装する

これは

        $(window).scroll(function(){

        });

というように
jQueryの scroll() を使う

scroll() は
http://semooh.jp/jquery/api/events/scroll/fn/
にあるように
スクロールしたときの動作を指定する

行う処理は
もし、window のスクロールトップとウインドウの高さがドキュメントの高さと同じになったら
ユーザ関数 more() を呼ぶ

windowのスクロールトップは

$(window).scrollTop()

ウインドウの高さ

$(window).height()

ドキュメントの高さは

$(document).height()

でそれぞれ取得できるので

この判定は

if($(window).scrollTop() + $(window).height() == $(document).height()){
more();
}

と書くことができる

スクロールしたときの処理まで書くと

        $(window).scroll(function(){
                if($(window).scrollTop()+$(window).height() == $(document).height()){
                        more();
                }
        });

となる

PCブラウザだとフルスクリーンだとスクロールできないときがあるので
そのときにはフルスクリーンではなく
画面を小さめにしてスクロールするようにすれば
自動読み込みを実感できる

これにさらに視覚効果でふわっとなる
ようにするには

$(rs).appendTo('#tweets');  

のところへ

.hide().fadeIn(800)

を追加することで
一度表示を消して
0.8秒かけて表示されるように演出できる

ちなみに、fadeIn() は
http://semooh.jp/jquery/api/effects/fadeIn/%5Bspeed%5D%2C+%5Bcallback%5D/
の解説にあるように
非表示になっている要素をフェードイン表示する関数
設定する時間はミリ秒単位になる

max_id でさらにつぶやき取得

max_id でさらにつぶやき取得

#08 もっとつぶやきを取得しよう
http://dotinstall.com/lessons/more_php_v2/21808
を元に
max_id をつかってもっとつぶやきを取得する

ちなみに、max_id には
最後のつぶやきのIDが格納されている

これを元に、これより前のものをひっぱってくる

twitter API にも max_id というフィールドがあり
これを指定すれば、これより前のものを
デフォルトなら20件引っ張ってくることができる

このフィールドの説明は
https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline
の英文を参照

編集するのは index.html

とりあえず
コンソールでIDのみの格納が確認できたので

console.log(max_id);

はコメントアウト

編集するところは
$.get() の
{} のところ
more.php を呼び出すときに max_id をパラメータで渡したいので

{max_id:max_id}

とする

次に、more.php も編集する

$tweets = (array)$cb->statuses_userTimeline($params);

を if で条件分岐するようにする

max_id がセットされているか判別するには

if(isset($_GET['max_id'])){

で判別できる

isset() は、指定した変数がセットされているか判定する
これについては
http://php.net/manual/ja/function.isset.php
のリファレンスを参照

ここで行う処理は max_id を $params へセットする

$params['max_id'] = $_GET['max_id'];

そして、パラメータにカウントを入れる
これは、何回とってくるか、という設定

デフォルトでは20件
今回は、次の20件を取得したい
max_id は最後の
つぶやきになるので、それを含めて取得するので
21件になる

$params['count']=21;

そして、先頭の1件を削除するので

$tweets = (array)$cb->statuses_userTimeline($params);
array_shift($tweets);

とする

array_shift() は
http://php.net/manual/ja/function.array-shift.php
のリファレンスにあるように
先頭の要素を1つ取り出す
つまり、21だったのが20になる

つまり、これで前回の最後のつぶやきを含めて21件取得し
新たに取得した1番めが
前回の最後のつぶやきと重なるので
array_shift() で削除することで
新しく20件取得しているように見える
という仕組み

codebird でつぶやきID取得

codebird でつぶやきID取得

#07 つぶやきのIDを取得してみよう
http://dotinstall.com/lessons/more_php_v2/21807
を参考につぶやきのIDを取得

とりあえず、プログラムができてきたので
index.html からアクセスしてみる

もし、うまくいかないのなら
chrome なら
Ctrl + shift + i
で java script console でエラーが表示されるので
これを元に修正していく

修正できたら、もっと読むボタンをクリックすることで
自分がつぶやいた過去のつぶやきをみることができる

さらに表示したいのなら
もっと読むボタンを押せばいい

このつぶやきを
右クリックして要素の検証を選び
chrome developer tools で
Element タブでみてみると

  • となっているのが確認できる

    まずは、このIDを引っ張ってくるという処理を
    index.html の java script で行う

    li 要素が追加されていたら、という判定にするので

    if($('#tweets > li').length){
    }


    id=”tweets” の中に li要素が存在しているなら
    という判定をして

    li要素の一番最後なので
    :last を使い

    $('#tweets > li:last')

    と記述して

    .attr('id').replace();

    とする

    .attr() については
    http://semooh.jp/jquery/api/attributes/attr/properties/
    を参考
    この関数は、ハッシュオブジェクトを引数に渡すことで
    すべての要素に複数の属性を設定できるというもの

    ちょっと長めだけど

    $('#tweets > li:last').attr('id')

    なので
    id=”tweets” の中の 最後の li 要素の id という意味になる

    これを .replace() で置き換える

    replace() の置き換えについては
    http://jquery.nanjaku.com/2012/05/11/jquery%E3%81%A7%E6%96%87%E5%AD%97%E5%88%97%E3%82%92%E7%BD%AE%E6%8F%9B%E3%81%97%E3%81%9F%E3%81%84%EF%BC%81/
    を参照

    replace() を使っているのは
    IDがほしいけど、実際には
    tweet_つぶやきID
    となっているので、この最初の tweet_ を消したいから
    今回は 正規表現を使って replace() で置き換える

    .replace('/tweet_','');

    これで
    tweet_ の部分が削除される

    これで、無事にIDのみになったので

    max_id = $('$tweets > li:last').attr('id').replace(/^tweet_/,'');

    として、
    max_id に最後のIDを格納する

    このIDが格納できたか確認したいので

    console.log(max_id);

    で確認

    もしミスがあるなら、
    developer tools の console タブで
    エラーがでる

    成功なら、この console タブへ
    IDが表示される

    ちなみに2回ほど
    もっと読むボタンを押さないと表示されない

    codebird でつぶやき取得

    codebird でつぶやき取得

    #06 つぶやきを取得しよう
    http://dotinstall.com/lessons/more_php_v2/21806
    を参考に
    codebird を使って
    パラメータを与えることでつぶやきを取得する

    ユーザのタイムラインを取得するにはいくつかのオプションがある

    今回、使用するのは
    screen_name
    include_trs

    パラメータは配列でセットするので

    $params = array(
            'screen_name'=>'ユーザ名',
            'include_trs'=>true
            );
    

    として

    $tweets = (array)$cb->statuses_userTimeline($params);

    というように、$params を指定する

    (array) はキャストで、型を配列に変換している

    そして、中身を確認するため

    var_dump($tweets);exit;

    で確認する

    なお、screen_name に入力する名前は
    アプリ登録画面で
    自分のアイコンにマウスを載せれば表示されるので
    もしわかならいのなら、これで確認

    さすがに文字がたくさんでわかりにくいので
    ページを右クリックして
    ソースを表示すると
    整列されてみやすくなる

    このときに
    array(21) {
    と1行めにでているように
    21の配列で構成されている
    必要なのは
    [“text”]=>
    あたりのところ

    この返ってくる値には
    最後にHTTPステータスコードがついてくるので
    このステータスコードは取り除く

    これには、配列の末尾から取り除く要素を関数
    array_pop() を使う
    解説については
    http://phpspot.net/php/man/php/function.array-pop.html
    を参照

    今回なら

    array_pop($tweets);

    とする

    これで余分なものは削除できたので
    HTMLへかえす要素をリスト形式で作成

    つぶやきのIDは

    $tweet->id_str 

    つぶやき本文は

    $tweet->text

    で取得できる

    つぶやきを繰り返し取得して代入するので
    foreach() を使う

    foreach($tweets as $tweet){
    echo '<li id="tweet_'. $tweet->id_str.'">'.$tweet->text.'</li>';
    }

    となる

    codebird.php の利用

    codebird.php の利用

    #05 Codebirdを使ってみよう
    http://dotinstall.com/lessons/more_php_v2/21805
    を参考に
    twitter API へ codebird.php を使うことでアクセスする

    今回編集するのは more.php

    まず、必要なファイルの読み込み

    require_once('codebird.php');
    require_once('config.php');

    codebird.php については
    https://github.com/jublonet/codebird-php
    を参照

    require_once() でライブラリを読み込んで

    \Codebird\Codebird::setConsumerKey('YOURKEY', 'YOURSECRET');
    $cb = \Codebird\Codebird::getInstance();

    で初期化

    今回は、アクセストークンもあるので

    $cb->setToken('YOURTOKEN', 'YOURTOKENSECRET');

    も追加する
    ただし、設定ファイルである config.php に定数で設定しているため
    ‘YOURKEY’

    COMSUMER_KEY

    ‘YOURSECRET’

    COMSUMER_SECRET
    へ変更する

    また
    アクセストークンのところも
    ‘YOURTOKEN’

    ACCESS_TOKEN

    ‘YOURTOKENSECRET’

    ACCESS_TOKEN_SECRET
    とする

    これで、codebird が使えるようになる

    使い方については
    https://github.com/jublonet/codebird-php

    3. Mapping API methods to Codebird function calls
    のところを参照

    一部引用すると

    For each slash in a Twitter API method, use AngularJS underscore in the Codebird function.

    Example: statuses/update maps to Codebird::statuses_update().

    For each underscore in a Twitter API method, use camelCase in the Codebird function.

    Example: statuses/home_timeline maps to Codebird::statuses_homeTimeline().

    というように関数名のときには
    / を _ に置き換えて
    _ は 次の文字を大文字にする

    この英文の例なら
    tatuses/home_timeline
    の場合

    statuses_homeTimeline()

    となっている

    今回、使う twitter API は
    ユーザのつぶやきを取得するので
    https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline
    に載っている
    user_timeline api を使う

    $cb は codebird の意味

    $tweets = $cb->statuses_userTimeline();

    とすれば
    $tweets へつぶやきを格納できる

    スクロールによる自動読み込みの実装

    スクロールによる自動読み込みの実装

    #09 スクロールで自動読み込みしよう
    http://dotinstall.com/lessons/more_php_v2/21809
    を参考に
    スクロールによる自動読み込みを実装する

    これは twitter とか facebook で
    下につくと自動的に読み込んでくれるのと同じような仕組み
    これがあると、いちいちボタンをクリックする手間がかからないので楽になる

    まず、index.html でボタン部分をコメントアウト

    そして java script の click イベントも使わないので
    とりあえずコメントアウト

    コメントアウト部分は

     $('#more').click(function(){
                                    $('#loading').show();
                            
                            if($('#tweets > li').length){
                            max_id = $('#tweets > li:last').attr('id').replace(/^tweet_/,'');
                            }
                            //console.log(max_id);
    
                                    $.get('more.php',{max_id:max_id},function(rs){
                                            $('#loading').hide();
                                            $(rs).appendTo('#tweets');      
                                    });
                            });

    になる

    そして、新しくスクロールのためのユーザ関数を作成

    function more(){
                     $('#loading').show();
                            
                      if($('#tweets > li').length){
                            max_id = $('#tweets > li:last').attr('id').replace(/^tweet_/,'');
                        }
    
                      $.get('more.php',{max_id:max_id},function(rs){
                            $('#loading').hide();
                            $(rs).appendTo('#tweets');      
                       });
            }

    とりあえず、これでページを読み込んだら
    more() を実行すれば、今までと同じように
    つぶやきを取得して表示する

    more();


    $(function(){}のスコープ内の最後あたりに
    追記すればOK

    スコープの外に書くと動作しないので注意

    ページをリロードして、ボタンがなくなっていること
    そして、自動でつぶやきを取得できていれば成功

    ここまでできたら、いよいよスクロールしたら読み込む機能を実装する

    これは

            $(window).scroll(function(){
    
            });

    というように
    jQueryの scroll() を使う

    scroll() は
    http://semooh.jp/jquery/api/events/scroll/fn/
    にあるように
    スクロールしたときの動作を指定する

    行う処理は
    もし、window のスクロールトップとウインドウの高さがドキュメントの高さと同じになったら
    ユーザ関数 more() を呼ぶ

    windowのスクロールトップは

    $(window).scrollTop()

    ウインドウの高さ

    $(window).height()

    ドキュメントの高さは

    $(document).height()

    でそれぞれ取得できるので

    この判定は

    if($(window).scrollTop() + $(window).height() == $(document).height()){
    more();
    }

    と書くことができる

    スクロールしたときの処理まで書くと

            $(window).scroll(function(){
                    if($(window).scrollTop()+$(window).height() == $(document).height()){
                            more();
                    }
            });

    となる

    PCブラウザだとフルスクリーンだとスクロールできないときがあるので
    そのときにはフルスクリーンではなく
    画面を小さめにしてスクロールするようにすれば
    自動読み込みを実感できる

    これにさらに視覚効果でふわっとなる
    ようにするには

    $(rs).appendTo('#tweets');  

    のところへ

    .hide().fadeIn(800)

    を追加することで
    一度表示を消して
    0.8秒かけて表示されるように演出できる

    ちなみに、fadeIn() は
    http://semooh.jp/jquery/api/effects/fadeIn/%5Bspeed%5D%2C+%5Bcallback%5D/
    の解説にあるように
    非表示になっている要素をフェードイン表示する関数
    設定する時間はミリ秒単位になる

    codebird でさらにつぶやき取得

    codebird でさらにつぶやき取得

    #08 もっとつぶやきを取得しよう
    http://dotinstall.com/lessons/more_php_v2/21808
    を参考に
    max_id をつかって
    もっとつぶやきを取得する

    注意点つぃては
    32bit か 64bit なのかでmax_id の使い方が変わるということ

    Linux 環境なら
    uname -r で
    64bit か 32bit か見れる
    ちなみに、私の場合だと
    2.6.32-358.18.1.el6.x86_64
    なので 64 bit

    今回は
    max_id をつかってもっとつぶやきを取得する

    ちなみに、max_id には
    最後のつぶやきのIDが格納されている

    これを元に、これより前のものをひっぱってくる

    twitter API にも max_id というフィールドがあり
    これを指定すれば、これより前のものを
    デフォルトなら20件引っ張ってくることができる

    このフィールドの説明は
    https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline
    の英文を参照

    編集するのは index.html

    とりあえず
    コンソールでIDのみの格納が確認できたので

    console.log(max_id);

    はコメントアウト

    編集するところは
    $.get() の
    {} のところ
    more.php を呼び出すときに max_id をパラメータで渡したいので

    {max_id:max_id}

    とする

    次に、more.php も編集する

    $tweets = (array)$cb->statuses_userTimeline($params);

    を if で条件分岐するようにする

    max_id がセットされているか判別するには

    if(isset($_GET['max_id'])){

    で判別できる

    isset() は、指定した変数がセットされているか判定する
    これについては
    http://php.net/manual/ja/function.isset.php
    のリファレンスを参照

    ここで行う処理は max_id を $params へセットする

    $params['max_id'] = $_GET['max_id'];

    そして、パラメータにカウントを入れる
    これは、何回とってくるか、という設定

    デフォルトでは20件
    今回は、次の20件を取得したい
    max_id は最後の
    つぶやきになるので、それを含めて取得するので
    21件になる

    $params['count']=21;

    そして、先頭の1件を削除するので

    $tweets = (array)$cb->statuses_userTimeline($params);
    array_shift($tweets);

    とする

    array_shift() は
    http://php.net/manual/ja/function.array-shift.php
    のリファレンスにあるように
    先頭の要素を1つ取り出す
    つまり、21だったのが20になる

    つまり、これで前回の最後のつぶやきを含めて21件取得し
    新たに取得した1番めが
    前回の最後のつぶやきと重なるので
    array_shift() で削除することで
    新しく20件取得しているように見える
    という仕組み

    PHP+jQuery+twitter の画面作成

    PHP+jQuery+twitter の画面作成

    #03 画面を作りこんでいこう
    http://dotinstall.com/lessons/more_php_v2/21803
    を参考に index.html の作成

    head要素の中に

    <script scr="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    を書いて、jQuery を使えるようにする

    また、body 部分に

            <h1>もっと読む</h1>
            <ul id="tweets">
            </ul>

    として
    ul のところへ
    twitter のつぶやきを表示する

    次に、ローディング中のメッセージを表示したいので

    <p id="loading">loading ... </p>

    としておく

    まず、ボタンで次を呼び出すようにする

     <input type="button" id="more" value="もっと読む">

    ここまでできたら一度画面を確認する

    次に、この設置したボタンにクリックイベントをつける

    これは
    #04 クリックイベントを設定しよう
    http://dotinstall.com/lessons/more_php_v2/21804
    を見ながら行う

    まず、loading … の表示は、読み込んでいるときに表示されればいいので
    ソースを書き換える

    
    <p id="loading">loading ... </p>

    <p id="loading" style="display:none">loading ... </p>

    とすることで非表示になる

    display:none については
    http://www.htmq.com/style/display.shtml
    に解説があるので、こちらも参考にする
    設定は、ほかにもあるのでこちらも参考にすると今後わかりやすい

    次にscript の中で
    ボタンがクリックされたときの処理を
    jQuery で書いていく

    ボタンをクリックしたときの動作は

    $('#more').click(function(){
    });

    となる
    # は id を示すので
    #more は id=”more” という意味

    クリックしたときの動作として
    消しておいた loading … の文字を表示したいので

    $('#loading').show();

    で表示する

    .show() は
    非表示状態のものを表示する関数で
    http://semooh.jp/jquery/api/effects/show/_/
    の解説がわかりやすい

    次に、Ajax を使って、つぶやきをget したいので

    $.get('more.php',{}, function(rs){}

    .get() は
    HTTP通信のGETでページを読み込む関数
    .get() の引数は
    URL
    キーと値の組み合わせ
    行う処理を書いた関数
    となる

    今回なら
    URL = more.php
    キーと値の組み合わせはまだない {}
    行う処理 = function(rs){}
    となる

    この .get() の解説も
    http://semooh.jp/jquery/api/ajax/jQuery.get/+url,+data,+callback+/
    を参考にするとわかりやすい

    function(rs){}
    には、返ってきた後に処理がうまくいったなら
    loading … をかくしたいので

    $('#loading').hide();

    hide() は
    要素が表示状態にあるのを非表示にする関数
    http://semooh.jp/jquery/api/effects/hide/_/
    を参考にする

    loading の文字を消したら
    つぶやきを表示したいので

    $(rs).append('#tweets')

    とする

    .append() は
    指定したコンテンツを追加する jQuery の関数
    つまり、今回はつぶやきを格納した rs の内容を
    id=”tweets” のところへ追加する

    ここまでできたら
    more.php へtwitter のサイトからつぶやきを引っ張ってくるようにする

    php + jquery + twitter api でもっと読む機能

    php ; jquery + twitter api でもっと読む機能

    今回は、一番下までスクロールしたら
    自動的に読み込む機能を実装する

    前回、twitter API でタイムライン取得できたので
    今回はこのスキルを得る予定

    必要な知識は
    HTML
    jQuery
    PHP
    正規表現

    そして今回の開発は
    http://dev.dotinstall.com/more_php/
    で行う

    codebird.php も使う
    php は 5.2 以上を使うこと

    まずは
    #02 ツイッターアプリを登録しよう
    http://dotinstall.com/lessons/more_php_v2/21802
    を参考に
    https://dev.twitter.com/
    から
    twiter アプリの登録を行う

    動画だと
    name を move_php にしているけど
    同じものを登録はできないので
    move_php_dev

    Description という説明のところには
    more interface test

    website には
    自分のドメイン、もしくは、動画と同じように
    http://dev.dotinstall.com
    でもOK

    今回 Callback URL はつかわないので
    空白のままでOK

    アプリ登録後の詳細画面で使うのが
    Consumer key
    Consumer secret
    の値

    また、今回はアクセストークンがほしいので
    Create my access token
    をクリック

    すると、
    Access token
    Access token secret
    がでるので
    この値も使う

    ここまでできたら、次にvagrant を使って
    以前作成した開発環境を立ち上げる

    vagrant 開発環境の作り方は
    http://dotinstall.com/lessons/basic_local_development_v2
    を参考に

    仮想マシンのディレクトリに移動して
    vagrant up
    で起動して
    vagrant ssh で接続

    接続できたら

    cd /var/www/html/
    mkdir more_php/
    で作業ディレクトリ作成

    また、codebird.php
    も必要なので
    https://github.com/mynetx/codebird-php
    からダウンロードして解凍
    この中にある
    cacert.pem
    codebird.php
    も同じディレクトリに置く

    そして、
    vim config.php
    で中に
    define() で定数を指定していく

    define('CONSUMER_KEY','Consumer keyの値');
    define('CONSUMER_SECRET','Consumer secretの値');
    define('ACCESS_TOKEN','Access tokenの値');
    define('ACCESS_TOKEN_SECRET','access token secretの値');

    画像掲示板に画像一覧を表示

    画像掲示板に画像一覧を表示
    #17 画像一覧を表示する (1)
    http://dotinstall.com/lessons/upload_image_php/4517
    を元に
    配列に格納されたファイル名を元に画像を表示していく
    編集するのは index.php
    表示する画像は images[] の中に
    サムネイル
    元の大きさ
    の画像が条件に基づき入っているので、あとは表示するだけ
    表示は foreach() で表示する
    <?php foreach($images as $image) ; ?>
    そして、サムネイル画像だったときには
    リンクをつけて、元画像が表示できるようにする
    そして、サムネイル画像がないのなら、元画像を
    そのまま表示する
    サムネイル画像か、元画像かの判定には
    strpos() を使う
    http://php.net/manual/ja/function.strpos.php
    $image の中から thumbnail という文字列を探し
    位置が0文字目から始まる
    つまり ===0 であるか判定する
    注意点としては
    strpos() は
    対象文字列が見つからなかった場合に
    false を返すため ==0 だと true になるので
    0文字目という判定にしたいのなら
    ===0
    とすること
    なので、判定の条件式は
    if(strpos($image, ‘thumbnails/’) === 0):
    となる
    そして、サムネイル画像だったときの処理で
    元画像のリンクを作成するとき、その名前の表示には
    basename() を使う
    basename() はファイル名そのものの情報だけ引っ張ってくする
    http://php.net/manual/ja/function.basename.php
    を参照
    <a href=”/images/<?php echo basename($image); ?>”>
    <img src=”<?php echo $image; ?>”>
    </a>
    これでリンクを作成
    元画像の表示については
    <?php else : ?>
    <img src=”<?php echo $image; ?>”>
    <?php endif; ?>
    となる