ツイート検索の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(‘

‘+html+”

“);
として
要素とスタイルの設定だけしていて

その後、
$(“#tweets” + key + ” p”).text(res.results[key].text);
で内容を追加している

これは、ツイート内容には
htmlの特殊文字の< とか > がふくまれるから
これをエスケープなしで表示するとHTMLレイアウトが崩れる

似たようなものとして
mysql でのデータベース入力フォームでのエスケープ処理がある

エスケープ処理には
$.text()を使う

本来は、要素内の文字列取得、変更に使うけど
同時にHTMLの特殊文字のエスケープ機能もあるので
ほかでも使える

つまり、最初に$.append()で要素とスタイルを指定

$.text()でエスケープして内容を追加している

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル