外部Webサイトに対するスクレイピング（javascript）

Question

前提・実現したいこと

現在実現したいこととしては、外部Webサイト上の数値情報を取得して、
自身のアプリケーション（HTML,javascriptベース）に利用したいと考えており、
実現方法をご教授いただきたいです。

詳細に言えば、以下サイトの画面右「Total FT in circulation:」
の下に表示されている数値を取得したいと考えています。
https://www.fcoin.com/

試したこと

取得したい情報は<span id=ft_circulation>の値なので、
jquery.js,jquery.xdomainajax.jsを導入し、以下のようなコーディングを行っています。

  $(function() {
    $.ajax({
      type: 'GET',
      url: 'https://www.fcoin.com',
      dataType: 'html',
      success: function(data) {
　　　　　//外部Webサイト情報取得
        var ftcirc = $(data.responseText).find("#ft_circulation").text();
        //自HTMLに値を書き込み
        document.getElementById("ftcirc").innerHTML=ftcirc;
      },
    });
  });

発生している問題

上記ソースコードを実行すると、ftcirc変数には値が入っていませんでした。

よくよく原因を調べてみると、
”data”はhtml形式で取得できていますが、
肝心の#ft_circulationの値が、取得したhtmlには記載されていませんでした。

ブラウザ（Google Chrome）で直接サイトへアクセスすると、
ページソース上には値も表示されています。

そのため、おそらくjavascriptなどで、後から値を入力しているのだとは思うのですが、
上記のようなコーディングでは取得できないのでしょうか。

###おわりに

参考情報などご教授いただけますと幸いです。
またご不明点等あればご質問いただければと存じます。

Answer 1

ajaxはたいてい外部urlを取りにいけません
かるくテストしてみたところクロスオリジンのエラーが発生しているようなので
クライアントサイドのjsでは取得は難しいきがします

先方のサービスでapiを提供しているならそれをご利用ください

Comments

[ryo4337]

早速のご回答ありがとうございます。やはり難しいでしょうか。。。
先方もいくつかAPIを用意しているのですが、
当該の値を取得するAPIがなく、悔しい思いをしております。

ちなみにですが、下記サイトで似たようなことを実現されており、
作成者さんにご質問したところ「xdomainajax.jsを利用して取得している」とのことで、
今回実装についてのご質問させていただきました。（作成者さんからは、ソースコード等はいただいていません。）
https://sizuku-blog.com/ftcalc/

クライアントサイドで難しいようであれば、
別途サーバなどを用意してあげるべきですかね。。。

[yambejp]

なんとも言えませんが、サービス側が提供していないものは
クライアントの勝手な処理でデータを入手するのは難しいです。
とはいえ単純なテキストベースのデータ取得であれば別途ご自身で
クローラーを実働させる環境をつくれば、それをクッションしてデータを
取ることはできるでしょう。
jsで動的に作成したページに対するクロールができるものもあるようです

[ryo4337]

＞jsで動的に作成したページに対するクロールができるものもあるようです

ご確認いただきありがとうございます。
上記クロールの実装について検討し、出直そうかと思います。

お時間いただきましてありがとうございました。

Answer 2

JavaScriptは悪意の第三者が作ったWebサービス越しに機密情報を抜き出す対策として、
ドメインの違う別サービスへAjax通信を行う事は禁止されています。

郵便番号を住所に変換するAPI等、
全世界の誰でもAjaxを受け付けても別に構わないというサービスはあると思います。
そのためにCORSという別ドメインからのアクセスを特別に許可するルールがあります。
食わしはCORSで調べて見ると良いでしょう。

というわけで、別ドメインへのAjax通信を禁止するか否かの決定権はそのサービスの提供者側にあり、
スクレイピングで利用しようとしている利用者側には無いということになります。

---

まぁ、ブラウザがセキュリティ対策目的に堅牢にしているだけの話なので、
Node.jsやPHP等のサーバーサイドのプログラムにURLやセレクター文字列を渡してやって、
サーバーがURLを元にスクレイピングを行うという設計ならば出来ます。

もしWebサーバを立ち上げて行う場合はこういった解決方法になるでしょう。

Comments

[ryo4337]

ご回答ありがとうございます。

CORSについては、前提知識等も踏まえて、
まずは調べようと思います。

その上でお手上げであることが理解できたら、
回答いただいた内容を踏まえて、サーバサイドでの実装に移ろうと思います。