AngularJSで Youtube検索

AngularJSで Youtube検索

これは、検索すると
Youtube の動画の縮小画像とタイトルがでるというもの

必要な知識は
AngularJS

使うツールは
chrome
vim

AgularJS については
http://dotinstall.com/lessons/basic_angularjs
を参照

まずは
#02 必要なファイルを揃えよう
http://dotinstall.com/lessons/youtube_search_angularjs/21702
を見ながら
index.html
myscript.js
を作成していく

最初に、あとで復習しやすくするため
mkdir angulajs-youtube
でディレクトリを作成して
この中で作っていく

まず、index.html の作成

ちょっと違うのは
angularjs を使うときには

<html lang="ja" ng-app>

というように
angularjs を使ったアプリの場合
ng-app をつけるようにするということ

そして、AngularJSを使うため
jQuery のときのようにライブラリを読み込むので

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

を追記する 

そして、後で処理を記述した myscript.js を読み込みたいので

<script src="myscript.js"></script>

としておく

body 部分には

        <div ng-controller="mainCtrl">

        </div>

を追記する

次に、myscript.js の作成

var mainCtrl = function($scope, $http){
}

とする
$http は youtube API アクセスに使う

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

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

#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件取得しているように見える
    という仕組み

    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 タブでみてみると

    <li id="tweet_つぶやきID"></li>

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

    まずは、この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>';
    }

    となる