スクレイピングは、基本的にサーバーサイドで行う事がほとんどです。
でも、学習する時に、サーバーのセットまで行うなんて、めちゃくちゃめんどくさいし、そもそもサーバーがよく分からない人や、苦手な人は、学習が開始できません。
そんなワケで、今回は手軽にJavascriptを使ってスクレイピングを行う方法を実際のプログラミングコードを用いて解説したいと思います。
今回の環境について
Javascriptを使って、自身のWebサイト（同一ドメイン）のクローリングは、さほど問題なくできますが、
別ドメインに対して、クローリングをすることはかなりハードルが高いというのが現状です。
（なので、サーバーサードで手軽に行うのが一般的なんですね）
クローリングの基本中の基本として、任意のURLを指定したら、そのURLでアクセスして、HTMLソースコードを取得するというだけを行いたいと思います。
HTMLが取得できれば、それをその後DOMアクセスすると、手軽にスクレイピングができるので、最初のハードルであるHTML取得処理を行います。
HTML取得環境
基本的にJavascriptでは、他ドメインのアクセスは、CORS (Cross-Origin Resource Sharing) という、Webブラウザの制約のために、
取得先のサイトで許容していないかぎり、アクセスが制限されてしまいます。（アクセスできません）
なので、通常はサーバーサイドを用意するところを、GoogleAppsScriptを利用します。
無料でできますし、すべてJavascriptだけでできてしまうので、学習効率はとてもいいと思います。
でも、アクセススピードは極めて遅いので、あくまで学習のためという領域で使用してください。
GoogleAppsScriptの設定手順
1. サービスにアクセス
GoogleAppsScriptは、GoogleDriveからファイルを新規追加することで、新規のスクリプトを立ち上げる事ができます。
2. GoogleAppsScriptの起動
GoogleAppsScriptが立ち上がると下のような画面になります。
3. プログラムコードをセット
表示されているプログラムを、下記のコードで上書きします。
現在表示されているコード
function myFunction() {
}
上書きするコード
function doGet(e) {
const url = e.parameter && e.parameter.url ? e.parameter.url : null
const res = url ? UrlFetchApp.fetch(url) : ""
const data = {
status : res ? "success" : "error",
url : url,
html : res ? res.toString() : null,
}
const json = JSON.stringify(data)
const response = ContentService.createTextOutput(json)
response.setMimeType(ContentService.MimeType.JSON)
return response
}
4. コードを保存
コードの保存ボタンを押して、スクリプトをちゃんと保存します。
5. デプロイ設定
ネットでアクセスできるようにするために、「デプロイ設定」をする必要があります。
少し手数が多いですが、下記の通り操作してください。
まず、画面右上にある、「デプロイ」ボタンをクリックします。
「新しいデプロイ」をクリック
「種類の選択」の右にある、ギアアイコンをクリックして「ウェブアプリ」を選択
「新しい説明文」に名前を入力して、「アクセスできるユーザー」を「全員」に切り替えて、「デプロイ」ボタンを押します。
「アクセスを承認」ボタンをクリック
表示されている自分のアカウントをクリック
「Advanced」をクリック
「Go to ...」の箇所をクリック
「Allow」をクリック
「デプロイID」をコピー
以上で、GoogleAppsScriptの設定は完了です。
お疲れ様でした。
Javascriptで別サイトのHTMLを取得
以下のソースコードをファイルに保存します。
get_html.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONPスクレイピング</title>
<style>
#output{
border:1px dashed #AAA;
white-space: pre-wrap;
word-break:break-all;
padding:10px;
}
</style>
</head>
<body>
<h1>JSONPデータ表示</h1>
<div id="output">読み込み中...</div>
<script>
const url = "https://google.com"
const deploy_id = `AKfycbz2t8hLsEELqeZzbtQzjRW8IZVAP_MmSoaUFKsAT0sFKPjhFDXF42L2wdX-Z8-i3RZxcQ`
const src = `https://script.google.com/macros/s/${deploy_id}/exec?url=${encodeURI(url)}`
fetch(src)
.then(e => e.text())
.then(e => {
const data = JSON.parse(e)
document.getElementById("output").textContent = data.html
})
</script>
</body>
</html>
ブラウザでindex.htmlを開いてみる
index.htmlファイルを、ダブルクリック（または、webブラウザにドラッグ）すると、以下のようなページが表示されます。
あとがき
無事にHTMLソースコードが取得できたら成功です。
今回は、https://google.comで取得しましたが、
これを任意の値に変えたり、inputタグで、入力したurlから、HTMLソースを取得する事が簡単にできると思います。
次回は、取得したHTMLの中から色々な情報を取得する方法について学習を進めたいと思います。
0 件のコメント:
コメントを投稿