2010年5月17日月曜日

試しにjQuery

ラベル: , 時刻:

遅まきながら、今まで手を出していなかったjQueryを試してみました。 ネタは、googleガジェットやjavaでもやった「Youtubeの自分のチャンネルの動画一覧」です。 ぱっと思いつくネタがなかったので、今日はこれで。

htmlのheadにjsファイルを登録して、 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>

bodyは次の要素を書きます。 

<form><input type="button" id="check_btn" value="チェック" /></form><p id="result"></p>

test.jsの中身はこんな感じ。 

$(function(){
    $('#check_btn').click(onClick)
});

function onClick()
{
    sendRequest();
}

function sendRequest()
{
    var channel_name = 'PieceOfNostalgy';
    
    $.ajax({
        url: 'http://gdata.youtube.com/feeds/api/videos',
        dataType: 'json',
        data: {
            'author': channel_name,
            'orderby': 'viewCount',
            'alt': 'json'
        },
        type: 'GET',
        cache: false,
        error: onError,
        success: showResult
    });
}

function onError()
{
    $('#result').replaceWith('YouTubeへの問い合わせ失敗');
}

function showResult(data)
{
    $('#result').empty();
    
    $.each(data.feed.entry, function(i ,item)
        {
            $('<a/>')
                .attr('href', item.media$group.media$player[0].url)
                .append(item.title.$t)
                .appendTo('#result');
            $('<br/>').appendTo('#result');
        }
    );
}

とりあえずのお試しコードなので、Google ChromeとFirefoxでのみ動作チェックしました。

今回は無名関数を避けてみました。 使うべきだって考える人の方が多数派なんでしょうか? 小さなコードだと、括弧が増えて見ずらくなることの方が弊害が大きいと思うのですが、どうでしょう?

一点つまずいたところを。 最初はatom形式でデータを受け取るつもりでした。 サンプルコードで言うと、$.ajaxのdataType:'json'とgdata.youtube.comに送るパラメータの'alt':'json'を消せば、デフォルトのatom形式のxmlデータを受け取れると思っていたのです。 しかし、実際にやってみると処理がonErrorに移ってしまいました。

パラメータをいくつか試してみたところ、dataType:'jsonp'で'alt':'atom'(省略可)にすればxmlファイルのテキストデータは受け取れました。 その他のパラメータではxmlは受け取れず。 良く分からない仕様ですね。 urlをブラウザに渡してみたら普通に表示できたので、jQueryの方の問題だと思われます。 一応、受け取ったテキストデータをパースすれば使えそうですが、やってはいけない事なのでしょう。 今回はxmlは諦めて、jsonで表示してみました。

投稿者