ブラウザの自動操作

Windows環境を想定している。Macだともうちょっと簡単。

ブラウザの自動操作でこんなことができる！

  • Webから自動で最新の情報を取得できる
  • LMSに自動でアクセスして、課題の情報を取得できる
  • 他にあれば教えて下さい

Anacondaのインストール

WindowsでPythonを使うために、Anacondaというツールで環境を構築する。
https://www.javadrive.jp/python/install/index5.html

Seleniumのインストール

Anaconda Promptを開き、以下のように入力する。

pip install selenium

これでPythonでSeleniumが使えるようになった。

Chrome用のwebdriverをダウンロード

以下を参照。
https://rdk.me/anaconda/#toc7

自動操作のプログラム作成

以下のPythonプログラムに学籍番号とパスワードを記入すると、自動的にLMSにログインする。

from selenium import webdriver
import time

my_username = "" # 自分の学籍番号
my_password = "" # 自分のパスワード

driver = webdriver.Chrome("c:/chromedriver.exe") # 自分がwebdriverを置いたパスを指定
driver.get("https://lms.gifu-nct.ac.jp/login/index.php")
time.sleep(2)

idss = driver.find_element_by_id("username")
idss.send_keys(my_username)  
pw = driver.find_element_by_id("password")
pw.send_keys(my_password)  
time.sleep(0.5)
login = driver.find_element_by_id("loginbtn")
login.click()

プログラムについて解説する。

URLへのアクセス

driver.get("https://lms.gifu-nct.ac.jp/login/index.php")

フォームへの記入

特定のフォームやボタンを操作したい場合、まずその要素をプログラムで特定する必要がある。

記入したいフォームの上で右クリックし、「検証」をクリック
Image

何やらプログラムのようなものが出てくる
Image

これはHTMLといって、Webページを記述する言語。
このHTMLから、フォームの要素にどのような名前がついているかを確認する。
このボタンは以下のようなHTMLで作られている。

<input type="text" name="username" id="username" class="form-control" value="" placeholder="ユーザ名" autocomplete="username">

いろいろな名前がついている。
<input type="">: 要素の種類を示している。入力フォームなのでinput。typeは入力する値の種類
name="": 要素の名前
id="": 要素をただ1つに特定するID。これが重要
class=""要素の属するカテゴリ（クラス）。複数指定できる
他は入力フォーム独自の事項
この3つはどれも名前（のようなもの）を示しているが、特に使うのはid。
idはそのHTMLの中で同じものがないため、どの要素かを特定することができる。
nameやclassは同じものが複数使われている可能性がある。そうなれば使えない。

今回はid="username"という記述があるため、これを使う。

idss = driver.find_element_by_id("username")

これで要素を特定できたため、この要素に値を入れる。

idss.send_keys(my_username)

この下も同様の操作をしている。

サイトによっては、idで要素が特定できなかったり、idがランダムに変わる場合がある。
そういった場合、「この要素の中の何番目のinput」のような指定もできる。
こういった場合、HTMLの要素の親子関係をたどるXPathが便利である。
https://kurozumi.github.io/selenium-python/locating-elements.html#locating-by-xpath

さきほどの「検証」からフォームの要素を示すプログラムを右クリックして、
「Copy」→「Copy full XPath」を選択する。
Image

以下のような文字列がコピーされる。

/html/body/div[2]/div[2]/div/div/section/div/div[2]/div/div/div/div/div/div[1]/form/div[1]/input

これを使って要素を特定することができる。

idss_xpath = "/html/body/div[2]/div[2]/div/div/section/div/div[2]/div/div/div/div/div/div[1]/form/div[1]/input"
idss = driver.find_element_by_xpath(idss_xpath)