の仕様を変更し、クロスドメイン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 (株)ＫＳＫ +29.85%3(-) 8073 (株)ＭＡＧねっとホールディングス +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 (株)ｓＭｅｄｉｏ +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でパースすれば、内容のスクレイピングも簡単にしかも直感的にできた。
ここでも書いたように、jquery.xdomainajax.jsを使えば自サーバーの負荷ははじめにhtml, jsファイルを読み込むときだけで、あとは何回再読み込み仕様が全くのゼロ。ただしアメリカYahoo!に負荷がかかる。
