全くのJavaScript初心者から学習してきた流れとか、方法とか色々書きます。

作りたい物

ログインが必要なサイトからデータを集めるサービス。

要は、某アーケード音ゲーのスコアツールを作ってみたいということです。
（他スコアツールを参考にしながら作っています。）

やること

ログイン状態で、任意のJavaScriptを実行→part1でやりました
JavaScriptで欲しいデータのあるHTMLの収集・スコアの抽出→part2で途中まで
抽出したスコアを何かしらの形式で出力しDL→part4以降で

データ収集のフロー

今回のHTML収集サイトでは以下の特徴が有りました。

①抽出したい情報のあるHTMLのURLは、取得したいHTMLのリンク元にのみある(ほんとにほしいHTMLのリンクをリンク元より取得する必要がある)
②リンク元のページの最終が明示されていない(何ページ目まで確認すればいいかわからない)

その為、以下の形で取得フローで作りました。

①最終ページの算出
②（①の終了を待ち合わせてから）各ページのHTMLを並列取得し、本当に欲しいデータのURL取得
③(②の処理すべての終了を待ち合わせて)本当に欲しいデータのHTMLを並列取得、スコア抽出
④(③の処理すべての終了を待ち合わせて)抽出データをフォーマットし、DLさせる

上記の処理をするためにpart2のdeferredが有用だったわけです。

続いて欲しいデータのURL・スコアの抽出処理です

URL・スコア抽出

ずっと言っているとおり、これは簡単です。
HTMLを取得しているので、そのHTMLからclass名、id名を指定して、その要素をデータを抽出することで可能です。（jQueryなら .find('.class')で取得できます）
たとえば、スコアがある箇所が class='score' にあるのであれば、class名：scoreを見つけ、そのテキストを取得するという流れです。（jsやってる人ならよくやることっぽいので、ググると資料がわんさか出てきます）

find_target_data.js

$.ajax({
    type: 'GET',
    url: KONAMI_BASE_URL + target_URL
}).done(function(page){
    // HTMLの中から走査する
    var music = ($(page).find('#playdata_music_name').text());
    // 難易度
    var diffli = [];
    // コネクト数
    var connectli = [];
    // スコア
    var scoreli = [];
    // CA回数
    var cali = [];
    // play回数
    var playli = [];

    // 難易度取得
    $(page).find('.difficult').each(function(){
        diffli.push($(this).text());
    });

    // スコア取得
    $(page).find('.score.clearfix').each(function(){
        scoreli.push($(this).find('.value').text());
    });

    // play回数
    $(page).find('.play_count').each(function(){
        playli.push($(this).find('.value').text());
    });

    // コネクト数・CA数
    $(page).find('.clearfix:not(.score)').each(function(){
        if($(this).find('.value_name').text() == 'CONNECT'){
            connectli.push($(this).find('.value').text());
        }else{
            cali.push($(this).find('.value').text());
        }
    });
});

ただし、クラス内にスペースを含むクラス（上記ではclass='score clearfix'というクラスがあった）は.score.clearfixという二つのクラスを持つことになることに注意してください。

あとはDL処理を追加すれば、目的のツールになりそうですね。次回に書きます。

JavaScriptで要ログインサイトのデータ収集サービスを作ってみる(part3)

作りたい物

やること

データ収集のフロー

URL・スコア抽出