前書き

とある事情でJavaScriptを使うことになり、ちょうどweb上で欲しいデータがあったので、勉強がてらJavaScriptでスクレイピングしてみました。
JavaScriptに関してどんなものなのかは知っており、文法等は知らないといった程度でしたが、そこら辺は調べながらスクリプトを書いていきました。
(とある音楽ゲームの要ログインサイトにある情報を取得しています)
色々調べたこととかメモ程度に記載していきます。

今回のコード

ここに置いてあります。
READMEをよくお読みの上、ご使用ください。

実行の仕方

今回はスクレイピングが目的であり、webページ作成はしないので、とりあえずスクリプトの実行ができれば良いです。
調べたところ、chromeのデベロッパーツールが一番使いやすそうだったのでそれを使いました。
ブラウザ上で右クリックして出てくる一覧の中の「検証」というやつです。

ここのConsoleでJavaScriptを実行できるらしいです。
その他ここで主に使う機能は、
Elements:ページ内の要素を表示
Network:主にwebページ内で打ったAPIを表示
の2つになります。

webページの要素を調べて書いてみる

デベロッパーツールのElementsで対象のwebページの要素を調べました。
ページ内のsubmitを押下して同一URL内に情報を表示させるのですが、対象の要素をみて見たところ、
method='POST'
と記載してあったので、API(POST)を打っていますね。
ということで、打っているAPIのURL,header,bodyを調べつつ、スクリプトを書きましょう。

API調査

ここで先ほどのデベロッパーツール内「Network」が役に立ちます。
Networkを開いた状態で、webページ内でAPIを打つ操作をすると以下のように色々表示されます。

対象のAPI(html)を選択してみると、URL,header,body(Form Data)が表示されます。
URLとbodyはこれで良いのですが、headerは色々いらないものが混ざっています。
調べたところ、打ったAPIのheader表示してくれるchromeの拡張機能があるそう。
https://chrome.google.com/webstore/detail/http-headers/nioieekamcpjfleokdcdifpmclkohddp
これで見たところ、最低限のheaderのみ表示されました。これでAPIの情報が揃いました。

APIを打つ方法

主に
XMLHttpRequest
Ajax
の2つがあることがわかりました。今回はXMLHttpRequestを選択。
API実行

var xhr = new XMLHttpRequest();
// 処理が更新&ステータスが200であれば返ってきたデータを分析する
xhr.onreadystatechange = function(){
    var READYSTATE_COMPLETED = 4;
    var HTTP_STATUS_OK = 200;
    if( this.readyState == READYSTATE_COMPLETED&& this.status == HTTP_STATUS_OK )
    {
            // jsonの解析処理
    }
}
// url,headerをセット
xhr.open('POST', url);
xhr.setRequestHeader('Accept', '*/*');
// API実行(POSTなのでbodyを一緒に渡す)
xhr.send(body);

json解析

今回はjsonが返ってきたので、下記でjsonを解析しています。
JavaScriptでのjson解析はドットで繋げれるそう。

jsonの解析処理関数

function getscore(obj){
    let length = obj.list.length;
    var count = 0;
    for (let i=0; i<length; i++) {
        another_djname = obj.list[i].name_3; // jsonから情報取得(DJNAME)
        musicname = obj.list[i].music; // jsonから情報取得(曲名)
        if (another_djname == 'hoge'){　// 県内で自分のスコアが一番高かったらcountして曲名を表示
          count += 1;
          console.log("曲名:" + "%s", musicname);
        }
    }
    all_count += count;
}

jsonの解析処理関数呼び出し
下記で呼び出しています。API実行の//jsonの解析処理の箇所です。

        var result = JSON.parse(this.responseText); // jsが読み込める形に変換
        getscore(result); // json解析
        if( cnt < version ) {
            postapi(cnt+1); // 再帰処理
        }
        else{
            console.log("県一数:" + "%d" + "曲", all_count);
        }

ページが複数あったので再帰処理をしています。
for文だとAPIリクエストが全て終わる前に最後の処理を行ってしまいました。
再帰処理が終われば集計した値を表示させるようにしています(elseのところ)。

Console上でスクリプト実行

ここでデベロッパーツールのConsoleを利用。

javascript:(
function(){ 
  hogefuga
}
)();

のように、スクリプトを実行するためにjavascript:()();を付け加えれば実行できます。
要ログインサイトだった為、ログイン→対象ページに移動し実行しました。

めでたしめでたし

JavaScript初心者がAPI実行してwebスクレイピング(要ログイン)してみた

前書き