読者です 読者をやめる 読者になる 読者になる

六帖のかたすみ

DVを受けていた男性。家を脱出して二周目の人生を生きています。自閉症スペクトラム(受動型)です。http://rokujo.org/ に引っ越しました。

サーバー不要!クロスドメインAjax実験

プログラミング

ランキングアニメーション・仕様書 - diary 六帖

の仕様を変更し、クロスドメインAjaxの威力を試すため、javascript内で完結できるようにした。前回書いたPHPのコードはとりあえず保留。

 

まず骨子を作る。

http://rokujo.esy.es/Responsive/ranking.html

23区ランキング

1(15) 千代田区 94点
2(16) 練馬区 78点
3(20) 渋谷区 76点
4(13) 江戸川区 73点
5(2) 板橋区 70点
6(18) 中央区 66点
7(1) 新宿区 65点
8(12) 品川区 59点
9(22) 港区 56点
10(17) 江東区 51点
2秒後に再読み込みします

10秒ごとに乱数で23区に点数を割り当ててランキング表示するだけ。これをクロスドメインAjaxを使用し、内容をYahooファイナンスの値上がり率ランキングから値をとってきたものに変え、jQueryで値をゲットして1分ごとに自動更新するようにしてみた。

http://rokujo.esy.es/Responsive/ranking_yf1.html

株式値上がり率ランキング

1(-) 9836 リーバイ・ストラウス ジャパン(株) +36.23%
2(-) 9687 (株)KSK +29.85%
3(-) 8073 (株)MAGねっとホールディングス +22.78%
4(-) 5962 浅香工業(株) +18.05%
5(-) 3664 (株)モブキャスト +17.4%
6(-) 3914 ジグソー(株) +16.83%
7(-) 7625 (株)グローバルダイニング +15.53%
8(-) 7217 (株)テイン +15.15%
9(-) 3318 (株)メガネスーパー +15%
10(-) 6267 ゼネラルパッカー(株) +14.56%
11(-) 3161 アゼアス(株) +14.53%
12(-) 3913 (株)sMedio +14.49%
13(-) 3912 (株)モバイルファクトリー +14.42%
14(-) 7638 (株)シーマ +10.71%
15(-) 6619 ダブル・スコープ(株) +10.57%
16(-) 6046 (株)リンクバル +9.96%
17(-) 9421 (株)ネプロジャパン +9.72%
18(-) 3825 (株)リミックスポイント +9.49%
19(-) 3355 クリヤマホールディングス(株) +8.39%
20(-) 4589 アキュセラ +7.84%
55秒後に再読み込みします

今日は日曜日なので値が更新されないが、一応機能を果たしているようだ。すごい。これでサーバー負荷は0だやった!動作は明日確認してみよう。あとは、アニメーション処理を作ることができれば完璧だが今日は時間が足りなかった。。

やっていることは、jquery.xdomainajax.jsを使って、次のように$.getで内容をゲットしているだけ。

function MakeRanking(prevRank, callback){

    var rank = new Ranking();
    rank.prefix = "+"
    rank.suffix = "%";

    $.get("http://info.finance.yahoo.co.jp/ranking/?kd=1&tm=d&mk=1", function(data){
        var ranks = $(data.responseText).find('tr.rankingTabledata');

        for(var i=0; i<ranks.length; i++){
            var elem = new RankingElement();
            var cols = $(ranks[i]).find('td');
            elem.name = $(cols[1]).text() + " " + $(cols[3]).text();
            var tmp = $(cols[6]).find('span');
            elem.value = Number($(tmp).text());
            rank.elements.push(elem);
        }
        rank.make(prevRank);

        callback(rank);
    });
}

リターンされたhtmlはそのままjQueryでパースすれば、内容のスクレイピングも簡単にしかも直感的にできた。

クロスドメインAjax - diary 六帖

ここでも書いたように、jquery.xdomainajax.jsを使えば自サーバーの負荷ははじめにhtml, jsファイルを読み込むときだけで、あとは何回再読み込み仕様が全くのゼロ。ただしアメリカYahoo!に負荷がかかる。