JavaScriptでTwitterのトレンドを一覧表示する #JavaScript

JavaScriptのみでTwitterのAPIから最新のトレンドを取得する。
以下の記事を参考にさせていただきました。
今話題のHTML5とjavascriptを使って、Tweet検索アプリを作ってみる

Twitter API

今回使用するAPIはこちら。
https://api.twitter.com/1.1/trends/place.json
GET trends/place - トレンドを取得する

アクセストークン

Twitter APIを使用するには認証が必要となります。
認証に必要なKeyはTwitter Developersで取得してください。

認証用ライブラリ

こちらからダウンロードして使っています。
http://oauth.googlecode.com/svn/code/javascript/

サンプルコード

アクセストークン(consumerKey等)は各自取得した値に変更して下さい。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>My Web App</title>
</head>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/oauth.js"></script>
<script type="text/javascript" src="js/sha1.js"></script>

<body>
    <div id="twitter">
        <div class="listView">
        </div>
    </div>

    <script type="text/javascript">
        var consumerKey    = "xxxx";
        var consumerSecret = "xxxx";
        var accessToken    = "xxxx";
        var tokenSecret    = "xxxx";

        function getTwitter(action, woeid)   {

            var accessor = {
                consumerSecret: consumerSecret,
                tokenSecret: tokenSecret
            };

            var message = {
                method: "GET",
                action: action,
                parameters: {
                    oauth_version: "1.0",
                    oauth_signature_method: "HMAC-SHA1",
                    oauth_consumer_key: consumerKey,
                    oauth_token: accessToken,
                    id: woeid,
                    exclude: "hashtags",
                    callback: "update"
                }
            };

            // 認証関係
            OAuth.setTimestampAndNonce(message);
            OAuth.SignatureMethod.sign(message, accessor);
            var url = OAuth.addToURL(message.action, message.parameters);

            // ajaxによる通信
            $.ajax({
                type: message.method,
                url: url, // リクエスト先のURL
                dataType: "jsonp",
                jsonp: false,
                cache: true,
            });
        }

        // UIの更新
        function update(data){
            $(".listView").empty();
            var result = data[0].trends;                // 取得したデータから、メソッドチェーンで必要なものを取得
            for( var i = 0; i < result.length; i++ ) {
                var name = result[i].name;              // トレンドワード
                var url = result[i].url;                // トレンドワードの検索結果リンク

                // トレンドワードを一覧表示
                $(".listView").append('<div>' + name + ' | ' + url + '</div>');
            }
        }

        $(window).load(function(){
            // リクエスト先のURL
            var url = "https://api.twitter.com/1.1/trends/place.json";
            // WOEID
            var woeid = 23424856;
            // Tweet検索関数の呼び出し
            getTwitter(url, woeid);
        });

    </script>

</body>
</html>