ツイート検索のJavascript
Javascriptでは、まず検索のための関数を作成
この中で、Twitter Search APIを使う
この関数の処理は
引数として受けとった文字列を
Twitter Search APIへ渡して
json形式のレスポンスをHTMLへ整形
そして、これをdivで指定した領域へ
リスト形式にして追加する
という流れになる
まず、前回の検索結果を削除する必要があるため
$("#tweet ul").remove();
で削除
これは、アプリを使うのは1回だけではないため
次に、
$("#tweet").append('<ul data-role="listview" data-inset="true"></ul>');
で、動的にul要素を作成
これがツイート検索結果を表示するリスト領域になる
data-inset=”true”
は、余白を付ける設定
http://billboardtop100.net/2011/02/jquery-mobile-lists.html
を参考にするとわかりやすい
ここまでできたら
$.ajax()
を使いTwitter Search APIを呼び出す
URLには # をつけるけど
これは、エンコードされるので
%23
になる
これでハッシュタグをつけてパラメーターを指定する
レスポンスはresで受け取って
res.results の各要素へ対してkeyでアクセスする
res.results[key]から
ツイートしたユーザーである from_user
そして、そのユーザーのプロフィール画像になるprofile_image_uri
そして、ツイート内容の text を取得し
それぞれHTML要素へ整形する
整形しないとjson形式なので使えない
そして、整形したHTML要素を
リストのli要素で囲って
これを動的に追加しておいたul要素へ追加する
ul要素へいろいろ追加した後に、
listviewを呼び出して、jQueryMobileのスタイルを適用すれば出来上がり
この$.ajax() の中身のソースは
url : "http://search.twitter.com/search.json?=%23"+ hashTag,
dataType:"json",
success:function(res){
$.each(res.results, function(key){
var html = '<img style="width:80px;" height="80px;" src="'+
res.results[key].profile_image_url +
'"/>';
html += "<h4>"+res.results[key].from_user+"</h4>";
html += '<p style="white-space : normal;"></p>';
$("#tweet ul").append('<li id="tweets' + key + '">'+ html +"</li>");
$("#tweets" + key + " p").text(res.results[key].text);
});
$("#tweet ul").listview();
}
この中で、まず
$(“#tweet ul”).append(‘
“);
として
要素とスタイルの設定だけしていて
その後、
$(“#tweets” + key + ” p”).text(res.results[key].text);
で内容を追加している
これは、ツイート内容には
htmlの特殊文字の< とか > がふくまれるから
これをエスケープなしで表示するとHTMLレイアウトが崩れる
似たようなものとして
mysql でのデータベース入力フォームでのエスケープ処理がある
エスケープ処理には
$.text()を使う
本来は、要素内の文字列取得、変更に使うけど
同時にHTMLの特殊文字のエスケープ機能もあるので
ほかでも使える
つまり、最初に$.append()で要素とスタイルを指定
$.text()でエスケープして内容を追加している