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

作りたい物

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

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

やること

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

欲しいデータのあるHTMLの収集

jQueryの$.ajaxを使いました。非同期のなんちゃらということで、ブラウザで他の作業しながら、裏でデータ収集をしてくれる感じになります。なんかすごい（小並感）。

ajaxTest.js

$.ajax{    //HTMLを取得
    type: 'GET',
    url:'TargetURL'
}.then(function(html){  
    // HTML取得時の処理
},function(){
    // エラー時の処理
});

ただ、非同期の処理は完了の順番が保証されていないらしいので、HTMLの収集→スコアの抽出の流れで処理を行うには一工夫必要です。

非同期処理の順番の保証

今回はDeferredってものを使いました。上の[then]もdeferredに関連するもので、.then(成功時の関数(resolve),失敗時の関数(reject))となるイメージです。詳細は省きますが、〇〇をやって成功なら△△をやる。失敗なら××をやる、みたいな処理に出来ます。これは非同期処理の完了も待ってくれるので、使ってみるととっても使いやすくて良かったです。

Deferredについては
爆速でわかるjQuery.Deferred超入門
https://techblog.yahoo.co.jp/programming/jquery-deferred/
がわかりやすくて助かりました。

deferredTest.js

// スコア取得用の関数
var getScore = function(HTML){
   // スコア取得処理
}

// HTML取得+スコア取得処理
var getHTML = function(){
   // ajaxを使って取得する
　 $.ajax{    //HTMLを取得
     type: 'GET',
     url:'TargetURL'
   }.then( getScore(HTML) // HTML取得時の処理
   ,function(){
      // エラー時の処理
   });
}

まだ二つの処理の連結ならいいですが、複数個になるとこれがないとやってられません。
今回の処理では複数ページを取得するので、並列処理（同時に複数のHTMLの取得）も行いますが、これもdeferredで意外と簡単にできます。

deferredTest2.js

var dfrList = [];
// 複数ページのデータ取得をする
var getAllScore = function(){
    for(var i = 0; i <= LastPage; i++){// LastPageは最終ページ
　　　　// deferredTest.jsの関数を改造したもの
　　　　// 1 deferredをdfrListに入れるよう変更
       // 2 ページ数に対応(引数で何ページ目のデータを取得するか変更可)
        getHTML(i);
    }
    // returnResolveはresolveを返却し、ErrOccerはrejectを返却する関数
    return $.when.apply($,dfrList).then(returnResolve,ErrOccer);
}

.whenで、複数の非同期処理の終了待ちが出来ます。今回は全ページのスコア取得を行ってから次の処理を行うため、こんな感じで作ってます。

スコア抽出

意外と長くなってきたのでまた次回以降に書きます。そんなにここ難しくないです(Deferredのほうが難しかった)

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

作りたい物

やること

欲しいデータのあるHTMLの収集

非同期処理の順番の保証

スコア抽出