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 のサイトからつぶやきを引っ張ってくるようにする