このチュートリアルの学習内容

このチュートリアルでは、クラウドソーシングサイトに実際に存在するデータ収集案件にかなり類似した案件を、営業~要件定義、制作、納品までのプロセスを学習します。

実際に、クラウドソーシングサイト(クラウドワークス、ココナラなど)には、スクレイピングを発注する企業様が多数あり、比較的未経験でもスクレイピング案件はやりやすいです。単価も、5000円~10万円の案件があり、趣味でプログラミングをまなんでから、じっさいに簡単な仕事をやってみたい方には、非常におすすめです。

今回の案件イメージは、こちらです。

【急募・経験者歓迎】大手ポータルサイトのデータクローリング業務
固定報酬制:25,000円

仕事の詳細
単発のデータリストとして、大手ポータルサイト(メディア系)のデータクローリングを実行して頂ける方を募集しております。
以下、詳細を記載いたしますので、ご確認ください。

【依頼詳細】
大手ポータルサイト(メディア系)のデータクローリング業務

【欲しいデータ】
こちらのアフィリエイト検索ナビから、データを収集します。
ここから
・案件名
・成果報酬
・取り扱いASP
を取得してください。
毎日更新されますので、日時でCSVをダウンロードできる形がよいです。

このチュートリアルでは、ログインが必要なサイトのデータ収集をやっていきたいと思います。

また、有料エリアには、動画による解説がございます。

事前に学習しておくこと

このチュートリアルでは、

  • HTML / CSSの基礎知識
  • スクレイピングの基礎が理解できていること
  • AWS Cloud9を利用して、Seleniumの環境構築が完了していること

が条件となります。まだ学習をしていない方は、以下のチュートリアルを進めてください。

HTML & CSS | プログラミングの入門なら基礎から学べるProgate
各コースのレッスン一覧ページです。各コース別の最適な学習順序やレッスンに関する概要を確認することができます。
PythonでSeleniumの環境構築をしてみよう | DAINOTE オリジナルアプリを作ろう
Webスクレイピングライブラリ「Selenium」の環境構築を行います

前回までの学習の確認

まず、Seleniumの環境構築編で、AWS Cloud9上でSeleniumを起動できるようになりました。

PythonでSeleniumの環境構築をしてみよう
Webスクレイピングライブラリ「Selenium」の環境構築を行います

 

今回は、Seleniumを利用して、自動ログインからスクレイピングを行っていきます。

すでにAWS Cloud9上には、tutorials.pyというファイルがあり、以下のコードが書かれています。

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
options = Options()
options.add_argument('--headless')
driver = webdriver.Chrome('./chromedriver', chrome_options=options)
driver.get("https://code.dividable.net")
driver.save_screenshot('screenshot.png')
driver.quit()

手順

以下の手順で学習を進めます。

  1. ログインの自動化
  2. 案件の全件取得

ログインの自動化

まずは、ログインの自動化を行いましょう。 ログインページはこちらになります。

アフィリエイト検索ナビ ログインページ

 ページを確認すると、

  • メールアドレス入力欄
  • パスワード入力欄
  • ログインボタン

がありますね。 これを、Seleniumで自動化していく必要があります。

要素の選択

では、それぞれの要素をどう選択したらいいでしょうか。 実は、Seleniumでは、

  • CSS Selector
  • XPath
  • Class
  • ID

などから、要素を指定することができます。

個人的には、CSS Selectorをメインで使っていて、CSS Selectorだと対応できない場合にXPathを利用することが多いです。、

それでは、まずこれら3つの要素を、CSS Selectorで取得してみましょう。 開発者ツールを開いて、それぞれの要素を確認します。

<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 registration__container text-center">
<h2>ログイン</h2>
<form class="new_user" id="new_user" action="/users/sign_in" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="izOIDHxzJiaKZc6bFGyXEpuTAx9hsPfaCN69g8KgVgH9b2+GEfCbMM+qJTr+Z7AKPwH7rTuRtYsZzcNArlgs8g==" />
<div class="field">
<label for="user_email">Email</label><br />
<input autofocus="autofocus" autocomplete="email" type="email" value="" name="user[email]" id="user_email" />
</div>
<div class="field">
<label for="user_password">Password</label><br />
<input autocomplete="current-password" type="password" name="user[password]" id="user_password" />
</div>
<div class="field">
<input name="user[remember_me]" type="hidden" value="0" /><input type="checkbox" value="1" name="user[remember_me]" id="user_remember_me" />
<label for="user_remember_me">Remember me</label>
</div>
<div class="actions">
<input type="submit" name="commit" value="Log in" data-disable-with="Log in" />
</div>
</form>
<a href="/users/sign_up">Sign up</a><br />
<a href="/users/password/new">Forgot your password?</a><br />
</div>
</div>
</div><!--container registration__container text-center -->

この中で取得したい要素のHTMLを確認します。

 

EMAIL

<input autofocus="autofocus" autocomplete="email" type="email" value="" name="user[email]" id="user_email" />

PASSWORD

<input autocomplete="current-password" type="password" name="user[password]" id="user_password" />

新規登録ボタン

<div class="actions">
<input type="submit" name="commit" value="Log in" data-disable-with="Log in" />
</div>

となります。 これらを、CSS Selectorで要素を取得していきます。

Seleniumで利用する関数を用意してみたので、見てみてください。

Selenium クイックリファレンス
https://www.seleniumqref.com/api/python/element_get/Python_find_element_by_css_selector.html

 

find_element_by_css_selector

◆メソッド
  ・find_element_by_css_selector(css_selector)
◆使用形態
  ・driver.find_element_by_css_selector(".foo")
◆備考
  ・引数に取得したい要素のCSSセレクタを指定することで、要素を取得できる
◆関連項目
  ・name属性から要素を取得する
  ・linkTextから要素を取得する

send_keys

◆メソッド
  ・send_keys(string)
◆使用形態
  ・element.send_keys("foo")
◆備考
  ・テキストボックスやテキストエリアなどのHTML要素で文字入力する為のメソッド
◆関連項目
  ・セレクトタグのオプションをテキストを指定して選択する
  ・セレクトタグのオプションを全て未選択にする

click

◆メソッド
  ・click()
◆使用形態
  ・element.click()
◆備考
  ・特になし
◆関連項目
  ・セレクトタグのオプションをインデックス番号から選択する
  ・セレクトタグのオプションをテキストを指定して選択する

get_screenshot_as_file

◆メソッド
  ・get_screenshot_as_file(filename)
◆使用形態
  ・driver.get_screenshot_as_file(filename)
◆備考
  ・カレントウィンドウに対して全体のキャプチャーを取得
◆関連項目
  ・タイトルを取得する
  ・ソースコードを取得する

 

TODO

  1. EMAIL, PASSWORDを定義して、変数に入れてください(email・passはsample@sample.com / sample1234)
  2. それぞれの要素を、find_element_by_css_selectorメソッドで取得して、send_keysメソッドで値を入力してみましょう
  3. ログインボタンをクリックしてみましょう
  4. ログイン後の画面を、キャプチャしてみましょう

こちらのチュートリアルは、¥1980で購入できます。スクレイピング案件受託コースを購入すると、その後の学習コースも一緒に購入することができます。セット割まとめて購入すると4980円で購入することが可能です。
また、このチュートリアルには動画解説がついています。