【2022年最新】GASを用いた動的サイトのスクレイピングで金相場表作ってみた

こんにちはたくまろです。
最近、私欲に塗れた書籍紹介が多いので、たまには役に立ちそうなことを書いてみました。

今回はGAS(Google App Scripte)を用いた動的サイトのスクレイピングについて紹介したいと思います。

GASによる静的サイトのスクレイピングはParserライブラリを使えば簡単にできます。

しかし、動的サイトのスクレイピングはひと手間必要になります。

今回は、金とプラチナ、シルバーの買取相場表をネットジャパンを参考にして作ってみたいと思います。
少し簡素ですが、完成形はこんな感じです。

プロフィール

専門分野：数理統計学、機械学習
統計学やデータサイエンスを中心にブログで発信中！
スクレイピングを使ったシステム開発が得意！
相談・質問も待ってます！Twitter >>>@takumaroblog

動的サイトと静的サイトの違い

静的サイトとは、「誰が」「いつ」「どこで」見ても同じ情報が表示されるホームページのことです。

一方、動的サイトとは、アクセスした「ユーザー」「時間」「場所」など特定の条件に応じて、異なる情報を自動で表示するホームページのことです。

今回のネットジャパンの買取相場表は、相場に応じて毎日（土日・休日を除く）変動しています。

そのため、「時間」によって情報が変化する動的サイトに相当します。

そして、この動的サイトはJavaScriptは用いることが多く、単純なHTMLのソースだけでは全ての情報をスクレイピングすることは難しいです。

今回は、PhantomJsCloudを使って動的サイトのスクレイピングをしてみたいと思います。

PhantomJsCloudのサインアップ

PhantomJsCloudは、ヘッドレスブラウザのクラウドサービスです。

これだけでは、よくわからないと思いますが、簡単にいうと、JavaScriptで書かれている情報をHTMLのソース上に反映させてることができるサービスです。

下の方にあるSign up now!のボタンを押してください。
メールアドレスとかを入力。その後、登録したアドレスにメールがきます。
届いたメールのリンクを開いて、パスワードなどを決めれば終わりです。
すると、ログイン後のダッシュボード画面にPhantomJsCloudのAPIキーが表示されます。
このAPIキーを後で使うので、メモしてください。

ちなみに無料プランでも1日に500回、PhantomJsCloudのAPIをリクエストできます。
さらに10ドルの有料プランにすると、1日に15,000回リクエストすることができますが、無料プランでも十分でしょう。

スクリプトの作成

それでは実際にGASを使ってネットジャパンの買取相場表をスクレイピングするコードを書いてみたいと思います。
今回は赤枠で囲ったスクラップの金額をスクレイピングしてみたいと思います。

まずは、新しいスプシを開いて「拡張機能」から「Apps Script」を選択してエディタを開きます。
次にParserライブラリを追加します。
ライブラリの追加で、スクリプトID入力欄に「1Mc8BthYthXx6CoIz90-JiSzSafVnT6U3t0z_W3hLTAX5ek4w0G_EIrNw」を入力し、検索します。Parserライブラリがヒットするので、バージョンを最新のものを選択し、追加します。

そしたら、右側のエディタ部分に次を貼り付けてください。細かい説明は以下のサイトに載っています。

2022-03-20 【2022年】PhantomJsCloudを用いた動的サイトのスクレイピングのやり方

36行目にAPIを入力する部分があるので、そこにPhantomJsCloudのAPIキーを入力してください。

function myFunction() {
  let spreadSheet = SpreadsheetApp.getActive()
  let sheet = spreadSheet.getSheets()[0]
  let html = phantomJSCloudScraping("https://www.net-japan.co.jp/");
  let gold =
    Parser.data(html)
    .from('<td>K24</td><td class="tR">')
    .to('</div>')
    .iterate();
  gold = gold[0].split('</td></tr>')
  gold.pop()
  let rate
  for(i in gold){
    if(i>0){
      rate = gold[i].split('"tR">') [1]
    }else{
      rate = gold[i]
    }
  sheet.getRange(1 + Number(i),2).setValue(rate)
  }
  let pla_sv =
    Parser.data(html)
    .from('<td>Pt1000</td>')
    .to('</div>')
    .iterate();
  pla_sv = pla_sv[0].split('</td></tr>')
  pla_sv.pop()
  for(i in pla_sv){
    rate = pla_sv[i].split('tR">') [1]
    sheet.getRange(10+Number(i)+1,2).setValue(rate)
  }
}

function phantomJSCloudScraping(URL) {
  let key = "APIキーを入力";
  let option =
  {url:URL,
  renderType:"HTML",
  outputAsJson:true,
  };

  let payload = JSON.stringify(option); 
  payload = encodeURIComponent(payload);
  let apiUrl = "https://phantomjscloud.com/api/browser/v2/"+ key +"/?request=" + payload;
  let response = UrlFetchApp.fetch(apiUrl);
  let json = JSON.parse(response.getContentText());
  let source = json["content"]["data"];
  return source;
}

上記のスクリプトをエディタに貼り付けたら、保存(Ctrl+S or command+S)したら、実行ボタンを押してください。
ちなみにCtrl+R (Command+R) が実行のショートカットです。
すると、こんなのが出るかもしれません。そしたら、権限を確認を押して、自分のアカウントを選択します。すると、次の画面になると思います。
詳細を押して、無題のプロジェクトに移動を押して、許可をすればOKです。
このように、実行完了が表示されれば成功です。
スプシにも読み取ったデータが、記載されていると思います。

ボタンの設置

もう少し体裁を良くしてそれっぽい感じにしましょう。

そしたら、今回使用したスクリプトのショートカットボタンを作ってみます。

まず「拡張機能」から「マクロ」＞「マクロをインポート」を選択します。
そして、「myFunction」関数を追加をクリック。
次にボタンを作ります。「挿入」から「図形描画」を選択。そしていい感じの図形を作ってください。
全く一緒のものを作る必要はないので、皆さんのセンスにおまかせします。
ボタンが完成したら、右上の保存して終了を押してください。
最後に、作ったボタンにスクリプトを割り当てたいと思います。
ボタンの右上に出てくる3つの点から「スクリプトを割り当て」を選択します。
そして、「myFunction」と入力すれば、終了です。