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の値');

twitter タイムラインをリスト形式で表示

twitter タイムラインをリスト形式で表示

#14 タイムラインを表示しよう
http://dotinstall.com/lessons/tw_connect_php_v2/21914
を参考に
twitter タイムラインをリスト形式で表示する

編集するのは index.php

やり方はPHPで foreach() で回してリストで表示する
HTML のul 要素の下へ

<?php foreach ($tweets as $tweet ): ?>

として
foreach() で
$tweets の中身を $tweet へ1つずつ代入する

プロテクトしているユーザの表示を
しないようにするため

<?php if(!$tweet->protected): ?>

としておく

つぶやきをリストで表示するには

<li><?php echo h($tweet->text); ?></li>

とする

twitter で認証したユーザのタイムライン情報の取得

twitter で認証したユーザのタイムライン情報の取得

#13 タイムラインを取得しよう
http://dotinstall.com/lessons/tw_connect_php_v2/21913
を参考に
認証した twitter ユーザのタイムラインを取得する

ユーザのタイムライン情報を取得するAPIは
https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline
となる

編集するファイルは index.php になる

codebird でいろいろなユーザAPIへアクセスできる

ただし動画のと codebird のバージョンが違うので
すこし修正する

function h(){
}

の下あたりにcodebird の初期化を追記する

\Codebird\Codebird::setConsumerKey(COMSUMER_KEY,COMSUMER_SECRET);

$cb = \Codebird\Codebird::getInstance();

アクセストークンなどがセッションに入っているので
これをセットする

twitter のAPIを使うには
access_token
access_token_secret
が必要になるので

$db->setToken($_SESSION['me']['tw_access_token'], $_SESSION['me']['tw_access_token_secret']);

で取得

つぶやきを取得するときに配列として欲しいので
https://dev.twitter.com/docs/api/1.1/get/statuses/home_timeline

statuses/home_timeline
を使う
命名規則として
statuses/home_timeline
の場合
/ を _
_の次の文字を大文字にするので

statuses_homeTimeline()

というようになる

これで、今ログインしているユーザのライムラインが取得できる

注意点としては、HTTPステータスが
入ってくるので、これを取り除く必要がある

これには array_pop() を使う

array_pop() は配列の末尾の要素を取り除くことができるので
最後についてくるHTTPステータスを除去できる

array_pop() の解説は
http://phpspot.net/php/man/php/function.array-pop.html
を参考にするとわかりやすい

これを使って

array_pop($tweets);

とすることで、ライムラインの取得ができる
値を確認するには
いつもどおりに
var_dump() を使う

var_dump($tweets);exit;

これで、リロードすると中身が配列で表示される

見にくい場合
右クリックしてページのソースを表示
とすれば、整列されてわかりやすくなる

twitter ユーザのログアウト処理作成

twitter ユーザのログアウト処理作成

#12 ログアウト処理を作ろう
http://dotinstall.com/lessons/tw_connect_php_v2/21912
を参考に
ログアウト処理を実装

index.php を最初に編集していく

まず、twitter ユーザ名をホーム画面で表示したいので
PHP部分にソースを追記していく

function h($s){
        return htmlspecialchars($s,ENT_QUOTES,"UTF-8");
}

を追加して h() で簡単に使えるようにする

この htmlspecialchars() はHTMLの無害化のために使われる

詳しくは
http://php.net/manual/ja/function.htmlspecialchars.php
のリファレンスを参照

twitter ユーザ名で表示するには

<?php echo h($_SESSION['me']['tw_screen_name']); ?>

とすると
twitterユーザ名で表示される

これは callback.php で

$_SESSION['me'] = $user;

というように
me の中に twitter ユーザ情報を格納しているため

次にログアウト機能を実装する

vim logout.php
でファイルを作成し

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

session_start();


設定ファイル関連、セッションスタートを行う

$_SESSION = array();

でセッションを初期化

if(isset($_COOKIE[session_name())){

でクッキーの値があるか確認し
あるのなら、以下の処理を行う

setcookie(session_name(),'',time()-86400,'/tw_connect_php/');


setcookie() で cookieの値をセットする
time()-86400
は1日前の時間を指定

setcookie() については
http://php.net/manual/ja/function.setcookie.php
のリファレンスを参照

引数をメモすると
session_name(), クッキーの名前
time()-86400 クッキーの有効期限
‘/tw_connect_php/’ クッキーを有効にするパス

となる

そして

session_destroy();

セッションの破棄

header('Location: '.SITE_URL);

でトップ画面であるログイン画面に飛ばす