« JS習作:チェックボックスの一括チェック・解除 | Back To Blog Top | JS習作:clearfixジェネレータ »
JS習作:Twitter Search的な何か
概要
12月2週目のJSです。 ごくごく簡単なTwitter APIを練習してみました。 やりたかった事は以下です。
- APIなる物をさわってAjaxなる物をやってみたい
- Twitterネタで何かやりたい
ソースコード
jQueryを使用しています。
$(function () {
function twitterSearch(searchWord) {
$.ajax({
url: 'http://search.twitter.com/search.json',
data: {
'q': searchWord,
'rpp': 10,
'lang': 'ja'
},
type: 'get',
dataType: 'jsonp',
success: function(data){
$.each(data.results, function(i, itm) {
$('#twitterSearch').append('<li><a href="http://twitter.com/'+itm.from_user+'/" class="searchResultUser"><img src="' + itm.profile_image_url + '" alt="" width="48" /><span>'+itm.from_user+'</span></a><p class="searchResultText">'+itm.text+'<a href="http://twitter.com/'+itm.from_user+'/status/'+itm.id+'">Status page</a></p></li>');
});
}
});
}
$('#searchTwitter').click(function(){
$('#twitterSearch').empty();
var searchWord = $('#searchWord').val();
twitterSearch(searchWord);
});
});
学んだ事や雑感
Ajaxって何だか難しそう、と思っていた時代が僕にもありました
jQueryを使うと、なんとか理解できるくらいにはなりました。
忘れないようにと復習も兼ねて今回のコードで解説すると、まず一行目の
$('#searchTwitterForm').after('<ul id="twitterSearch"></ul>');
は、検索結果を出力する場所を作っています。
$.ajax({
url: 'http://search.twitter.com/search.json',
data: {
'q': searchWord,
'rpp': 10,
'lang': 'ja'
},
type: 'get',
dataType: 'jsonp',
ここまでが前半で、Twitter に欲しい内容を伝えるための部分。 なんとなくCSSっぽい書式で親しみ深いです。
success: function(data){
$.each(data.results, function(i, itm) {
$('#twitterSearch').append('<li><a href="http://twitter.com/'+itm.from_user+'/" class="searchResultUser"><img src="' + itm.profile_image_url + '" alt="" width="48" /><span>'+itm.from_user+'</span></a><p class="searchResultText">'+itm.text+'<a href="http://twitter.com/'+itm.from_user+'/status/'+itm.id+'">Status page</a></p></li>');
});
これが、通信が成功した後に取ってきたデータをどう処理するのか、という部分。
ここまでの流れが、jQueryでAjax開発をする時の基本的な部分かなと。
$('#searchTwitter').click(function(){
$('#twitterSearch').empty();
var searchWord = $('#searchWord').val();
twitterSearch(searchWord);
});
ここは、フォームに入力したテキストを上記の処理に渡すための部分です。
APIとクロスドメインの問題
セキュリティの関係上、JavaScriptではドメインの異なるファイルは取得できません。 それをバックエンドに頼らず簡単に解決してくれるのが今回も使ったjsonpなのです。 …が、ちょっとまだ理解しきれてないと言うか。 いや、ソースとして取得するっていうのは解ったんですが、言葉でなく心で理解するまでには至ってないと言うか。 まあ、なじんでないだけかも。
改善した事など
- 検索結果をURLに持たせたい(少し調べたらいけそう)
- ページングを出したい
※IE8では動作が確認できたんですが、IE Testerだと6,7,8でダメでした。 時間と環境が取れたら純正IE6,7環境でも試してみます。