TechAcademy（テックアカデミー） プログラミング Python Pythonでセレニウムをサイト上で活用する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
Python

Pythonでセレニウムをサイト上で活用する方法を現役エンジニアが解説【初心者向け】

初心者向けにPythonでSeleniumを利用してWebサイトのボタンをクリックする方法について現役エンジニアが解説しています。Seleniumとはブラウザを自動で操作できるツールであり、今回はyahoo検索を自動化してみましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

Pythonでセレニウム(Selenium)を使用してWebサイトのボタンをクリックする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。

 

Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Python講座の内容をもとに紹介しています。

 

田島悠介

今回は、Pythonに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

PythonでSeleniumを利用してWebサイトのボタンをクリックする方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

Seleniumとは

Selenium(セレニウム)とは、webアプリケーションなどを含め、ブラウザを自動で操作することができるオートメーションツールです。

Seleniumを使用することでブラウザ上での様々な操作を自動化することができるでしょう。

 

Webサイトのボタンをクリックする方法

今回はGoogle chrome上でのボタンクリック処理の実装方法についてみていきましょう。

まずはChromeのインストールが完了し、Seleniumのインストールを行います。

Seleniumはpipを使用してインストール可能です。

 

ターミナル上に下記コマンドを入力してインストールを行いましょう。

pip install selenium
次にchromeのウェブドライバをダウンロードしてください。

 

ダウンロード後、Webサイトのボタンをクリックする方法をみていきましょう。

SeleniumでWebサイトのボタンをクリックするためには、大きく2つの処理が必要になります。

  • クリックしたいボタンの要素を取得する。
  • 取得した要素(ボタン)をクリックする。

では、詳しくみていきましょう。

 

1.クリックしたいボタンの取得方法

要素を取得するには、以下のように記述してください。

driver.find_element_by_xpath('取得したい要素のxpath')

Seleniumではxpath以外にも様々な方法で要素の取得が可能です。

 

2.取得した要素をクリックする

取得した要素をクリックするには、以下ように記述してみましょう。

.click()

そして、以上の2つの文法を組み合わせて以下のように1行で記述することも可能です。

driver.find_element_by_xpath('取得したい要素のxpath').click()

まだseleniumの操作に慣れていない場合は、エラーが発生した場合に原因の特定がすぐできるように以下のような複数行に分けての記述してみましょう。

element = driver.find_element_by_xpath('取得したい要素のxpath')
element.click()

 

[PR] 未経験からWebエンジニアを目指す方法とは

実際に書いてみよう

サンプルコード

# coding:utf-8
import time
from selenium import webdriver
# ブラウザを開く。
driver = webdriver.Chrome(executable_path='ウェブドライバを設置したフルパス')
# Yahoo!JAPANのTOP画面を開く
driver.get('https://www.yahoo.co.jp/')
# 5秒待ちます
time.sleep(5)
# TOP画面の検索ボタンの要素を取得する
element = driver.find_element_by_xpath('//*[@id="ContentWrapper"]/header/section[1]/div/form/fieldset/span/button')

# 取得した要素(検索ボタン)をクリックする
element.click()

 

実行結果

コードを実行するとブラウザが起動し、Yahoo!JAPANのトップページが表示されるでしょう。

PythonでSeleniumを利用して、ブラウザを起動し、Yahoo!JAPANのトップページに移動した画面。

トップページが表示された５秒後に自動的に検索ボタンがクリックされ、検索画面が表示されるでしょう。

PythonでSeleniumを利用して、Yahoo!JAPANの検索ボタンを押して、検索ページに移動した画面。

解説

コード6行目では、seleniumを使用するためのWebドライバーを設定しています。

事前にダウンロードしたchromeのWebドライバーを保存しているパスを入力しましょう。

コード9行目では、設定したWebドライバーを使用してYahoo!JAPANのトップページを開いています。

コード15行目では、検索ボタンの要素をelementに指定している状態です。

コード19行目では、検索ボタンの要素を指定したelementをクリックしています。

実行結果では、Yahoo!JAPANのトップページが5秒間表示された後に検索画面のページに自動で移行する動作が確認できるでしょう。

 

まとめ

今回は、 PythonでSeleniumを利用してWebサイトのボタンをクリックする方法について解説しました。

Seleniumに関しては、他にも様々な操作をサポートしているため、この際に学習してみましょう。

 

執筆してくれたメンター

菅繕久（すがよしひこ）

現在はフリーランスのエンジニアをしていてプログラミング歴は8年目になります。

普段は Python、FileMaker等を使って様々な業務で活用できるIoTプロダクトRPAツールを作成しています。

開発実績としては、業務自動化ツール(在庫管理・発注・ファイル操作 etc)、電子カルテシステム、ロボット用プログラムなどがあります。

TechAcademyではPythonコースを担当しております。

 

大石ゆかり

Pythonでセレニウム(Selenium)を使用してWebサイトのボタンをクリックする方法がよく分かったので良かったです！

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でも、Pythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。

記事を検索

関連するキーワード

関連する記事

ApacheをPythonで利用する方法を現役エンジニアが解説【初心者向け】

ApacheをPythonで利用する方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を...
Python

書きながら覚えよう！Pythonで正規表現を使う方法【初心者向け】

今回は、Pythonで正規表現を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 普段見慣...
Python

Pythonの組み込み関数の使い方【初心者向け】

Pythonの組み込み関数の使い方について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むと...
Python

Pythonで処理を定期実行する方法を現役エンジニアが解説【初心者向け】

Pythonで処理を定期実行する方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読む...
Python

Pythonでlistのindexを取得する方法を現役エンジニアが解説【初心者向け】

Pythonでlistのindexを取得する方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説し...
Python

Pythonで親ディレクトリからファイルをインポートする方法を現役エンジニアが解説【初心者向け】

Pythonで親ディレクトリからファイルをインポートする方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何...
Python

あわせてよく読まれている記事

SeleniumとBeautifulsoupを利用してPythonでスクレイピングする方法を現役エンジニアが解説【初心者向け】

SeleniumとBeautifulsoupを利用してPythonでスクレイピングする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 SeleniumとBeautifulsoupを利用することで、Webページの内容のいち部分を指定して保存できます。 実務でも、自社サービスの表示データの一部をスクレイピングするので、ぜひ学習してみてください。 目次SeleniumとはWebサイトのボタンをクリックする方法実際に書いてみようまとめ執筆してくれたメンター そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 SeleniumとBeautifulsoupを利用してPythonでスクレイピングする方法について詳しく説明していくね！ 大石ゆかり お願いします！   Seleniumとは Seleniumとは、Webブラウザの操作を自動化させるためのライブラリです。 2004年にThoughtWorks社のJason Hugginsによって、ThoughtWorksの内部ツールとして開発されました。 ブラウザ操作の自動化を行うためのスクリプトであるSeleneseでテストを実行することから始まりました。 その後、Seleneseを使う代わりに汎用的なプログラム言語でもテストを行えるクライアントAPIも提供されています。 現在提供されているのは、次の言語用クライアントAPIです。 Java C＃ Ruby JavaScript R Python Kotlin   Beautifulsoup4とは 近年は機械学習などのデータを作成する時に、Webサイトからのデータを収集するための作業をプログラムを使って、半自動化することで大量のデータの取得を効率化させることが多くなりました。 そこで使われる手法がスクレイピングです。 Pythonではいくつかのスクレイピングライブラリがありますが、その1つがBeautifulsoup4です。 Beautifulsoup4とは、HTMLやXMLの中から必要なデータを抽出するためのPythonライブラリです。 HTMLの中身を解析してツリー構造にして目的のコンテンツを取得できることです。 つまり、Seleniumからブラウザを操作して出力された目的のページのHTMLをBeautifulsoup4で取得して、中身の構造を解析してプログラムから目的のデータを抽出するという流れがPythonでスクレイピングをやる時によく使われる手法です。 ちなみあらかじめ目的のページのURLがわかっている場合は、Seleniumの代わりにurllibを使ってHTMLを取得する方法もあります。   [PR] 未経験からWebエンジニアを目指す方法とはSelenium IDEインストール方法 1.SeleniumIDEのダウンロード ChromeウェブストアのSelenium ページにアクセスしてChromeに追加をクリックします。 もし、Chromeウェブストアページが見つからなかったら、「chromeウェブストア　Selenium 」で検索してみてください。 2.SeleniumIDEのインストール Selenium 拡張機能を追加すると、Selenium IDEのインストールが完了します。 今回はMicrosoft Edgeを利用していますが、Microsoft EdgeはChromeと互換性のある、Chromiumエンジンを利用しているため、Chrome拡張機能の利用が可能です。   Selenium WebDriverのインストール方法 Selenium WebDriverをPythonで利用するためには、Python環境を用意する必要があります。 効率的に開発！AnacondaでPythonの環境構築する方法 の記事を参考に、AnacondaでPythonの環境構築をしてみてください。   1.Anaconda Promptの実行 スタートメニューからAnaconda Promptを選択して、管理者として実行してください。 2.コマンドプロンプトからSeleniumをインストール コマンドプロンプトが起動するので、conda install -c conda-forge seleniumというコマンドをコピーアンドペーストで実行してみてください。 conda install -c conda-forge selenium 3.seleniumインストール処理 インストール処理が開始されるので、yを入力してください。 4.Seleniumインストールが完了 また、まずはここから！Pythonのインストール方法【初心者向け】も参考にしてみてください。   Beautifulsoup4のインストール Beautifulsoup4はAnacondaのcondaコマンドでインストールしてみましょう。 conda install -c anaconda beautifulsoup4   colab.research.google.comのドライバーインストール もし、https://colab.research.google.com/で利用する場合は、次のドライバーを準備する必要があります。 AnacondaやPythonファイルを実行する場合はこの操作は不要です。 !pip3 install selenium !apt-get update !apt install chromium-chromedriver !cp /usr/lib/chromium-browser/chromedriver /usr/bin   実際にスクレイピングしてみよう それでは実際にスクレイピングをやってみます。 今回はcolabを利用して、技術情報サイトのテックアカデミーマガジンから、Pythonに関連した記事を取得する流れを自動化してみます。 サンプルプログラム import time from selenium import webdriver from bs4 import BeautifulSoup # 処理開始 url = "該当URL" options = webdriver.ChromeOptions() options.add_argument('--headless') options.add_argument('--no-sandbox') options.add_argument('--disable-dev-shm-usage') driver = webdriver.Chrome('chromedriver',options=options) # ページにアクセス driver.get(url) search[0].send_keys('Python') search[0].submit() time.sleep(5) # 検索先のページのHTMLを取得 html = driver.page_source.encode('utf-8') soup = BeautifulSoup(html, 'lxml') results
Python

PythonでSeleniumを利用してWebサイトのログインを自動化する方法を現役エンジニアが解説【初心者向け】

PythonでSeleniumを利用してWebサイトのログインを自動化する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。   Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプ、Python講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PythonでSeleniumを利用してWebサイトのログインを自動化する方法について詳しく説明していくね！ 大石ゆかり お願いします！   Seleniumとは Selenium(セレニウム)とは、ブラウザを自動で操作することが可能なオートメーションツールです。 Seleniumを使用することでブラウザ上での様々な操作をプログラムで自動化することが可能です。 Seleniumのログイン処理の実装方法 Google chrome上での自動ログイン処理の実装方法について、みていきましょう。 まず、Chromeのインストールからスタートし、完了後にSeleniumのインストールを行います。 Seleniumはpipを使用してインストールできます。 ターミナル上では、下記コマンドを入力してインストールを行いましょう。 pip install selenium   次に、ログイン処理に使用するseleniumコマンドを紹介します。 ログインまでの一連の流れとして下記のような手順を行いましょう。 対象ページにアクセスする ログインページを開く ID・PASSを入力する ログインボタンをクリックする URLを開くコマンド .get(URL) テキストボックスに入力するコマンド .send_keys(“キーワード”) クリックするコマンド .click()   [PR] 未経験からWebエンジニアを目指す方法とは実際に書いてみよう 下記サンプルコードを参考にPythonでseleniumを利用して、Webサイトのログインを自動化する方法について解説します。 サンプルコード # coding:utf-8 from selenium import webdriver from selenium.webdriver.common.keys import Keys import time # ブラウザを開く。 driver = webdriver.Chrome(executable_path='ウェブドライバを設置したフルパス') # Googleの検索TOP画面を開く。 driver.get("https://www.yahoo.co.jp/") # 3秒待機 time.sleep(3) # ログインボタンをクリックする login_btn = driver.find_element_by_xpath('//*[@id="Login"]/div/p[1]/a') login_btn.click() # 1秒待機 time.sleep(1) # ログインIDを入力 login_id = driver.find_element_by_name("login") login_id.send_keys("ログインIDを入力") # 次へボタンをクリック next_btn = driver.find_element_by_name("btnNext") next_btn.click() # 1秒待機 time.sleep(1) # パスワードを入力 password = driver.find_element_by_name("passwd") password.send_keys("パスワードを入力") #ログインボタンをクリック login_btn = driver.find_element_by_name("btnSubmit") login_btn.click() #10秒待機 time.sleep(10) # ブラウザを終了する。 driver.close()   実行結果 コードを実行すると、ブラウザが自動で起動してYahooのトップページを開くことが可能です。 まず、ログイン画面へアクセスしID入力後、次へボタンをクリックしましょう。 次にパスワードを入力し、ログインボタンをクリックします。 ログイン処理後のYahooトップページが表示されました。   解説 コード8行目でseleniumを使用し、Yahooトップページへアクセスしています。 コード12-13行目は、トップページ上のログインボタンをクリックする設定です。 この時、ログインボタンの要素はXpath形式で’//*[@id=”Login”]/div/p[1]/a’を指定している状態です。   要素の取得方法は、 コード17-18は、send_keysを使用しログインIDを入力します。 コード20-21は、click()コマンドを使用し次へボタンをクリックする設定です。 コード25-26は、send_keysを使用しパスワードを入力しています。 コード28-29は、click()コマンドを使用してログインボタンをクリックしています。 実行すると、実行結果の一連の動作が自動で処理されることが確認できるでしょう。 要素の取得方法 1.要素を取得したいページを開いた状態で右クリック→検証を選択 2.ブラウザ右側に検証ツールのコンソールが出現するため、コンソール左上のセレクトボタンをクリックしてオン(青色)状態にする 3.取得したい要素をクリックして対象ソース部分をハイライトする 4,ハイライトしたソース上で右クリック→Copy→Copy Xpathを選択 これで要素がクリップボードに取得できるため、あとはプログラム上に貼り付けましょう。 まとめ 今回は、Pythonでseleniumを利用して、Webサイトのログインを自動化する方法について紹介しました。 この技術は、現在様々な分野で主力となってきているライブラリです。 ブラウザ上での様々な自動処理が可能になるため、応用範囲が広くなるでしょう。   執筆してくれたメンター 菅繕久（すがよしひこ） 現在はフリーランスのエンジニアをしていてプログラミング歴は8年目になります。 普段は Python、FileMaker等を使って様々な業務で活用できるIoTプロダクトRPAツールを作成しています。 開発実績としては、業務自動化ツール(在庫管理・発注・ファイル操作 etc)、電子カルテシステム、ロボット用プログラムなどがあります。 TechAcademyではPythonコースを担当しております。   大石ゆかり PythonでSeleniumを利用してWebサイトのログインを自動化する方法がよく分かったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、Pythonを使った人工知能（AI）や機械学習の基礎を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
Python

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次SeleniumとはWebサイトのボタンをクリックする方法実際に書いてみようまとめ執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのDOM操作で要素を削除する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ※DOMとはHTMLを操作する仕組みのことで、木の枝のような階層構造になっています。DOMの操作について、詳しくは解説記事「JavaScriptでDOMを操作する方法【初心者向け】」をご覧ください。   要素自身を削除する 呼び出した要素自身を削除するときは、removeメソッドを使います。 書式 削除する要素.remove(); 削除する要素自身から、removeメソッドを呼び出します。 removeメソッドで要素を削除すると、削除した要素内の他の子要素も含めてすべて削除されます。 クリックされた時の処理など、イベントを発生させた要素そのものを削除する場合は、受け取ったEventオブジェクトのtargetからremoveメソッドを呼び出せます。 他の要素を削除したいのであれば、「document.getElementById」などで取得します。 ※イベントとは、マウスのクリックやページの読み込みが完了したときなどの動作を指します。JavaScriptではイベントが発生したときに実行する関数を指定するために、各要素のonclick属性などに処理する関数を指定できます。onclick属性については解説記事「クリック時の処理！JavaScriptでonclickを使う方法【初心者向け】」をご覧ください。 ※Eventオブジェクトとは、イベントが発生したときの情報が収められているものです。イベントの発生源である要素などが取得できます。JavaScriptの関数にEventオブジェクトを渡すには、HTMLのonclick属性に「event」を引数として渡します。   サンプルコード クリックしたボタンそのものと、「パープル」の要素自身を削除するサンプルコードです。 ソースコード // 「このボタンを削除」 がクリックされた時の処理 function del_this(event) { //イベントの発生源の要素を削除 event.target.remove(); } // 「パープルを削除」 がクリックされた時の処理 function del_purple(){ //「パープル」の要素をIDから取得 const elem_purple = document.getElementById('purple'); //elem_purple（idがpurple）の要素自身を削除 elem_purple.remove(); } <p>レッド</p> <p id="purple">パープル</p> <p>グリーン</p> <p>ブルー</p> <button onclick="del_this(event)">このボタンを削除</button> <button onclick="del_purple()">パープルを削除</button> 実行結果 See the Pen js_remove_this by mentor-inoue-y (@mentor-inoue-y) on CodePen. 解説 クリックされた要素自身を削除 function del_this(event) { ～ } 「このボタンを削除」ボタンがクリックされたときに呼び出される関数を定義しています。 HTMLの「このボタンを削除」ボタン（button要素）にあるonclick属性に、「del_this(event)」と指定して関数が呼び出されるようにしています。 HTMLのonclick属性でeventを引数で渡すことにより、イベントを発生させた要素の情報を関数に送れます。 イベントを処理する関数 del_this(event)でeventを受け取って、クリックされた要素をevent.targetで取得できます。 event.target.remove(); event.targetはイベント（今回はクリック動作）の発生源の要素である「このボタンを削除」ボタンを指していて、removeメソッドにより要素自身を削除できます。   取得した要素自身を削除 function del_purple(){ ～ } 「パープルを削除」ボタンがクリックされたら呼び出される関数を定義しています。 HTMLの「パープルを削除」ボタン（button要素）にあるonclick属性に、「del_purple()」と指定して関数が呼び出されるようにしています。 const elem_purple =
JavaScript

Pythonにおけるseleniumモジュールでのwait()の利用方法を現役エンジニアが解説【初心者向け】

Pythonにおけるseleniumモジュールでのwait()の利用方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Pythonのseleniumモジュールでwait()を利用することで、自動化処理を一定時間停止した後、処理を再開できます。 実務でも、Pythonのseleniumモジュールでwait()を利用することで、対象Webページの表示状態に即した処理を行うので、ぜひ学習してみてください。 目次SeleniumとはWebサイトのボタンをクリックする方法実際に書いてみようまとめ執筆してくれたメンター そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonにおけるseleniumモジュールでのwait()の利用方法について詳しく説明していくね！ 大石ゆかり お願いします！   seleniumモジュールとは？ 今回は、seleniumモジュールの待機処理について学習していきます。 Selenium(セレニウム)とは、Webアプリケーションのテスト自動化を実現するブラウザ駆動型テストツール群です。 ブラウザ操作からテストスクリプトを作成でき、Webベース管理タスクの自動化も行えます。 Webブラウザの自動操作ライブラリとしてさまざまな機能を備えています。 ブラウザ上でのキーボード入力やクリックなどの操作のほとんどが自動化できるため、筆者も業務自動化ツールの開発で重宝しています。 PythonでSeleniumを利用してWebサイトのログインを自動化する記事も合わせてご覧ください。   wait()の使い方 seleniumの待機処理には大きく分けて2つの方法があります。 時間指定の待機 Webページ上のコンテンツを基準にした待機例 それではそれぞれの使い方について学習していきます。   時間指定待機の使い方 サンプルコード driver.implicitly_wait(20) 解説 driver.implicitly_wait(20)では、20秒という時間待機設定をしています。 一度設定することで、find_element などの処理時に要素が見つかるまで指定時間繰り返し探索するようになります。 数字を書き換えることで、待機する時間の設定が可能です。   Webページ上のコンテンツを基準にした待機の使い方 サンプルコード WebDriverWait(driver, 30).until(EC.presence_of_element_located((By.ID, "ID名")) 解説 Explicit Waitsは複雑な条件を指定して、条件が満たされるまで待機するという設定ができます。 サンプルコードは、IDが”ID名”の要素が読み込まれるまで最大30秒待機という処理です。 また、By.はID以外も次のような要素を指定できます。 [By.で指定できる要素一覧] ID XPATH LINK_TEXT PARTIAL_LINK_TEXT NAME TAG_NAME CLASS_NAME CSS_SELECTOR   [PR] 未経験からWebエンジニアを目指す方法とはwait()を利用して待機処理を記述してみよう ここではサンプルコードを例に、待機処理を実行します。 selenium環境が用意できていない方は、Selenium WebDriverでPythonのテストを行う方法【初心者向け】の記事もあわせてご覧ください。 今回のコードはそのまま動作させると、違法スクレイピングにつながる可能性があるため、そのままでは動作しないように一部のコードを意図的に削除しています。 サンプルコード # 必要なライブラリのインポート import time from selenium import webdriver # Chromeブラウザを起動する driver = webdriver.Chrome() # テックアカデミーマガジンのサイトを開く driver.get("該当URL") # 検索ワードを入力する場所が表示されるまで最大30秒待機する # # 検索ワードを入力する場所を探して「python」と入力する # # 検索を実行する（検索ボタンを押すのと同じ動作） search_box.submit() # 検索結果からタイトルが「Python」のリンクをクリックする。 driver.implicitly_wait(10) driver.find_element_by_link_text("Python").click() # 5秒待つ time.sleep(5) # Chromeブラウザを閉じる driver.quit() 解説 import timeでは、timeモジュールをインポートしています。 from selenium import webdriverでは、seleniumモジュールのwebdriverライブラリをインポートしています。 driver = webdriver.Chrome()では、Chromeブラウザを起動しています。 driver.get(“https://techacademy.jp/magazine/”)では、テックアカデミーマガジンのサイトを開いています。 search_box.submit()では、検索を実行しています。 driver.implicitly_wait(10)では、検索結果が表示されるのを10秒待ちます。 driver.find_element_by_link_text(“Python”).click()では、検索結果からタイトルが「Python」のリンクをクリックしています。 time.sleep(5)では、5秒待ちます。 driver.quit()では、ブラウザを閉じています。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   Pythonを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのPythonコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、人工知能（AI）や機械学習の基礎を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
Python

Pythonのseleniumにおけるブラウザ（chrome）自動操作について現役エンジニアが解説【初心者向け】

Pythonのseleniumにおけるブラウザ（chrome）自動操作について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 seleniumにおけるブラウザ（chrome）自動操作について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 seleniumとは seleniumの使い方 seleniumを利用してchromeの自動操作をプログラムしてみよう まとめ   seleniumとは Selenium（セレニウム）とは、WEBブラウザの操作を自動化するフレームワークです。当初は、WEBアプリケーションでのUIテストを自動化する目的で作られました。現在は、当初の目的のWEBアプリケーションのテストのみならずスクレイピングというWEB上から情報を取得するなどの様々な用途で使用されています。 用意するのは、「ブラウザ」と「Selenium」と「WebDriver」の3つを用意します。「ブラウザ」は、今回は「Chrome」を使用します。「WebDriver」とは、SeleniumがChromeを操作するために必要なソフトです。 今回は、Chromeを対象として扱うので、「Chrome WebDriver」というソフトを使います。   [PR] 未経験からWebエンジニアを目指す方法とはseleniumの使い方 今回は、PythonでSeleniumの使い方を解説します。まずは、使っていく上で、以下の注意点を押さえておきましょう。 サーバに負荷を掛ける処理は行わない 対象のサイトでの利用規約で禁止されていないか確認   Pythonで手軽に使う方法としては、Pythonをインストールしたときに付いている、パッケージ管理ツール「pip」からインストールする方法です。「コマンドプロンプト（Windows）」または「ターミナル(Mac/Linux)」を開き、下記のコマンドを入力します。 $ pip install selenium $ pip install chromedriver-binary-auto これで、準備は完了です。次は実際にプログラムで自動操作を行います。   seleniumを利用してchromeの自動操作をプログラムしてみよう それでは、プログラミングしていきましょう。以下のようなコードを書いてみましょう。 import time from selenium import webdriver driver = webdriver.Chrome() driver.get('https://www.google.com/') time.sleep(5) search_box = driver.find_element_by_name("q") search_box.send_keys('りんご') search_box.submit() time.sleep(5) driver.quit() 実行すると Googleの検索画面が開いた後、「りんご」が検索欄に挿入され、検索結果画面が表示されると思います。   まとめ 今回は、PythonでSeleniumを使った自動操作について解説しました。ぜひ、使ったことない方や興味のある方がいれば、この機会に使ってみてはいかがでしょうか。   監修してくれたメンター 土井友裕（どいともひろ） 社内エンジニアとして、活動をしています。 扱えるプログラミング言語は、Python、Ruby、Dart(Flutter)、C# 、Java…他 など幅広く経験しております。開発実績としては、大手医療機器メーカーのWEBシステムの開発に従事しておりました。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
Python

【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由

本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。また本記事は、Mary Stribley氏によって投稿されたものです。 グラフィックデザイナーにとって、グリッドは特に重要なデザインツールであるとされています。   ほんの数本のグリッドの存在がデザインに加わることが、デザインプロジェクト全体にとって、極めて重要なのはなぜでしょうか？ デザイナーは一人一人異なる答えを持っているかもしれませんが、要するに、グリッドは、それなしでは時間もかかり、面倒で困難なデザインを構築するのに役立ってくれるのです。 もしあなたがグリッドデザインの世界を探求しようか迷っているとしたら、グリッドをレパートリーに加えるだけで、デザインが非常に良くなる15の理由をお話します。   01. コンテンツが整理される グリッドの主な利用価値の1つは、デザインの要素を整列化、順序化したり、Webページをクリーンできちんとしたデザインにするのに役立つことです。これはグリッドの整列機能の効果であり、グリッドの役割の大部分を占めていると言えます。 グリッドシステムを確立することで、要素を整列化するのに使える基本構造を自分自身で創ることが可能となるのです。そして、これによりクリーンで整理されたレイアウトを実現できます。 例として、Christine Wisnieski によるTwist CreativeのGridデザインのレイアウトを見てみましょう。各要素がきれいに整列されて、全体としてクリーンな仕上がりになっています。 グリッドを使うときには、各要素をきれいに整列できるようなタイプのものを見つけましょう。要素とは具体的には、文章、画像、グラフィックなどで、その他どのような対象も要素となりえます。 最終的な完成イメージという大まかな全体像から始めて、それに合うグリッドを組み立てましょう。   02. あなたの仕事を高速化する 常に高速化と効率化を追い求める世界で生きる私たちにとって、「効率改善」などは耳に聞き慣れた言葉ですから、このメリットの説明は、すんなりと受け入れてもらえるかもしれません。 グリッドは、あなたのデザインにかける時間を、よりスピードアップして充実したものにしてくれるでしょう。というのも、どのポジションに要素を配置するのが最高の選択なのかを示すガイドとしても、機能してくれるからです。 要素が良く見えそうなポジションを手さぐりで探してから、ランダムに配置するという作業をしなくても、グリッドがあれば、あなたを自然な解へと導いてくれるでしょう。   グラフィックデザイナーのTroy Templeman氏が述べるように、「Gridデザインは、どの場所にコンテンツを配置できるかというよりむしろ、どの場所にコンテンツを配置すべきかという、デザイナー自身の決定をサポートすることで、デザインのプロセスをスピードアップしてくれる。」というわけです。 グリッドは家の建築の土台のようなものとして考えることができます。一番最初に建造しておくべきものの1つであり、そこからさらに構築を進めます。   [PR] 未経験からWebエンジニアを目指す方法とは03. 文章の居心地が良くなるようなレイアウトを実現できる 少なくとも、グリッドと文字は、2つのデザイン要素として相性のいいの組合せです。強力なグリッドは、文章量の多いレイアウトを、よりすっきりとして組織化された印象に整えてくれます。ボディコピーの文章も読みやすくしてくれるでしょう。 文章を読みやすくするのに役立つグリッドの手法の1つに、「ベースライングリッド」があります。これはノートの罫線のようなもので、文章の1行1行がベースラインとなるグリッドの上に乗ります。これらのグリッドは、文章で作られた各要素が、同じ高さに並ぶように整えてくれます。 もしあなたが文章の行を整列していなくても、多くの人はその特定のアンバランスな箇所には気づかないかもしれませんが、あなたのデザインが全体として散らかっているということは無意識的に気づくものです。つまり、小さな変化が大きな効果をもたらしてくれるのです。 これは、「ベースライングリッド」の実例です。各行がそれぞれ整列されていて、クリーンですっきりとしたタイポグラフィーの効果を生み出しています。   04.　他のデザイナーとの共同作業をもっと容易にしてくれる あなたも今までに他のデザイナーと共同で仕事をしたことがあるでしょうか？ そのような場面では、グリッドは、ストレスとコミュニケーションの齟齬をいくらか和らげてくれるかもしれません。 すでにお話したように、グリッドはデザインに基本構造を作るのに役立ち、個々の要素がどの場所に置かれるべきかについての方針も示してくれます。もし、あなたが最初にグリッドからデザインを組み立てていれば、新しいデザイナーが途中から加わったときにも、あなたのデザイン手法や、要素の配置の意図を理解してもらえるでしょう。   例として、あなたが下にあるようなデザインに取り組んでいて、これから第3パラグラフを作成するときに、他のデザイナーに参加してもらうよう依頼するケースを考えてください。 グリッドシステムを使っていれば、配置や整列を正確に実践できます。加えて、「カラムの幅はどのくらいにしますか？」「1つ前のカラムからどのくらいの距離を空けて配置しますか？」などのメッセージが行ったり来たりすることも少なくなるでしょう。というのも、グリッドによって全ての答えはすでに用意されているからです。   他のデザイナーと共同で仕事をする時には、わかりやすくて、最終的な完成品に合うグリッドシステムを構築しましょう。必要なカラムの数が3つであるなら、13も使う必要はありません。グリッドシステムを組み立てていないうちから、要素の整列を行うのは避けましょう。グリッドを機能的で役立つものにしておくのが大切です。   05. バランスの整ったデザインを創りやすい グリッドの美しさはその統一感にあります。あなたのデザインを複数のカラムに分割しようとするときには、シンメトリーなレイアウトから始めることになるでしょう。左右のどちら側のデザインがもう一方の側からずれているか判断することも、容易になるでしょう。   例として、以下のMaan Ali氏によるWebサイトのデザインを見てみましょう。左右対称なグリッド、大きさの均一化されたブロックと文章を使うことで、均整のとれたデザインになっています。 他の例として、Braulio Amado氏によるデザインでは、中央のグラフィックを加えて3つのカラムとして表現することで、シンメトリーで完璧なバランスになっています。 かなり強いデザインであるために、圧迫感のある印象を人に与えやすいにもかかわらず、きちんと整列して完璧なバランスを実現することで、クールで落ち着いたデザインになっているのです。   06. マルチページのレイアウトに統一感を与える グリッドは複数ページのレイアウトにも役立つでしょう。レイアウトにグリッドを使うことで、あるページから別のページへ、あるレイアウトから別のレイアウトへ、グリッドを継承することが可能です。容易にレイアウト全体の一貫性を保つことができます。 例として、WebサイトのRolling Stoneを考えてみましょう。数多くのページから構成されていますが、各ページの構造やコンテンツはそれぞれ異なっています。全体のページで一貫したレイアウトを保ちながら、各ページごとに最高の方法でデザインするには、どうしたら良いと思いますか？   以下の画像では、WebサイトのRolling Stoneの音楽のページとトップページを比較しています。4つのカラムで構成されるグリッドデザインを使うことで、一貫性があり、クリーンで、親しみが持てるような外観になっています。一方で、各ページにある空白のスペースも、ページがしっかり機能することに役立っています。 グリッドがマルチページのレイアウトに役立つ具体例としては、スタイルガイドのようなマニュアルが一般的です。これらは教育目的で使われ、線形のデザインで整えるのが望ましいため、グリッドが活用されるのです。例として、以下のMike CollingeによるBosphorusのスタイルガイドでは、グリッドが統一して使われています。 複数のページをデザインするプロジェクトに取り組んでいるとしたら、「素晴らしいマルチページのレイアウトを設計するためのチェックリスト」に目を通しておきましょう。   07. 階層化したデザインを表現できる Gridデザインの共通の前提は、グリッドを使うことで各要素を均一なサイズのブロックに分けることですが、こうすることで自動的にデザインをコントロールできます。 階層化はデザインにとって大切なことであり、グリッドはこの階層化をスピードアップして容易にしてくれます。あなたが階層化の大切さにまだ気づいていないとしても、全てのデザインは少なくとも3段の階層を持つべきである理由のリストによって、その認識は変わるでしょう。   例として、NASAのホームページのデザインを見てみましょう。 4つのカラムのグリッドで構成されるデザインで、より重要度の高い画像を、複数のカラムや列の領域まで引き伸ばして大きくすることで、階層を表現しています。 「ハロウィーンの空を飛ぶ活動を終えた彗星」の左上の画像は、2カラム×2列分のサイズに広げられ、ページの中で最も注目を引くようにデザインされています。他の重要な話にも、画像が複数のカラムに引き伸ばされたものがあります。 印刷物にもグリッドをデザインの基本として使うことができます。複数のカラムのサイズに拡大することで、ある要素に注目を集めたり、逆に小さなカラムのサイズにして、ある要素を目立たないようにすることができます。   次の例は、David Tang氏によるデザインで、数字の23や30に注目を集めるように、グリッドの大きさや配置が工夫されています。   08. 散らかったレイアウトと、さよならできる グリッドは、恐怖の散らかったデザインを一掃してくれる素晴らしいツールです。そのためには、マージンを使いましょう。 マージンとは、デザインのまわりの余白のことです。一般的に、マージンが狭いほど、あなたのデザインは詰まって 散らかって見えてしまいます。マージンをより広くすることで、整ったクリーンなデザインに見せることができます。   以下の例では、マージンがグレーの色でマークされています。 グリッドとマージンはしばしば一緒に使われますが、この組合せには、デザインをより開かれたクリーンな印象にする効果があります。 散らかったデザインを回避するもう1つの方法は、ガターを使う方法です。ガターとは、グリッドのカラム間にある余白のことです。ガターのサイズは調整できますが、機能するグリッドを作るためには、全体のガターサイズは統一しましょう。 マージンとガターを組み合わせることで、効果的な結果を生み出している例を見てみましょう。このAisle One によってデザインされた壁紙は、マージンとガターが目立つようなデザインであるため、それぞれいかに効果的に使われているかに気づかせてくれます。   09. 心地よいデザインの世界が開ける 芸術家や写真家など数多くのデザイナーが、グリッドを作品のベースに使っている理由は、数学的な美しさを持つデザインを生み出すと考えられているからです。 グリッドによって心地よいデザインを生み出す方法の1つに、「三分割法」があります。 最も基本的かつ簡単な方法の1つです。写真の技術としてもよく使われる方法ですが、理論の根本は、各2本の水平線と垂直線によって、全体のデザインを9つの均一な区画分けることにあります。線の交点(以下の例ではブルーの円)にデザイン要素を置くことで、心地よいデザインを生み出します。 この理論が写真に使われるとき、写真家は、レンズの焦点がこれらの交点に集まるようなフレームを慎重に選びます。 試しに「三分割法」をあなたのテキストデザインに取り入れて、目に心地よくなるかどうか確認してみましょう。ページを水平方向と垂直方向に均等な3×3の区画に分けて、これらのシンプルなガイドを応用するだけです。   10.　グリッドのルールを破ってインパクト効果を狙う グリッドのレイアウトのルールを守ることで、クリーンで整った美しいデザインを生み出すことができますが、時にはグリッドのルールを破ることで、ユニークで人目を引くような効果を狙うことができます。   例として、99Uによるデザインでは、シンプルな3カラムグリッドが使われていますが、イエローの文字を対角方向に ページ全体に走らせることで、グリッドによるクリーンな直線性のルールを破っています。「Think differently(考え方の転換)」というメッセージを伝えるには、印象的で記憶に残りやすく、実に効果的なデザインです。 グリッドのルールを破ると、特定の要素に注目を集める効果もあります。例として、このBig CartelのWebサイトのデザインを見てみましょう。要素はグリッドに従って整列されていますが、いくつか例外的なデザイン要素があります。グリッドから飛び出ている要素が、強い垂直ラインのデザインを破ることで、人の視線を引く効果があります。   11. 柔軟性に富む グリッドがあなたのデザインに合うかどうか心配になりますか？全てのグリッドは柔軟性に富むので、デザインの変化にも対応できますから、心配する必要はありません。 あなたがグリッドを作るときには、好きなだけカラムの数を選ぶことができるのは、グリッドの柔軟性の１つです。   以下の例では、1カラムのデザインと、2または3カラムのデザインの比較を示しています。 もちろん一般的には、デザイナーやデザインの必要性に応じて、最大13カラムの範囲でグリッドが構成されます。以下の例では、フルページサイズの画像と文字、そしてシンプルなレイアウトタイプを活かしたデザインで、1カラムのグリッドシステムとして完璧です。 次のDesign Surgeryによるレイアウトのデザインは、13カラムで構成されています。所々に入っている画像と相まって、長くなりがちな記事の文章を効果的に魅せています。 最終的にカラムの数はあなた次第です。ただ、カラムの数が多いほどデザインの柔軟性が高まり、数が少ないほどシンプルで柔軟性が低くなることも、デザインする時には心に留めておきましょう。   12. 対角線のデザインに役立つ 文字通り、異なる角度からのデザインのアプローチにも、グリッドは役に立ちます。グリッドは水平または垂直に並べるだけではなく、対角線の軸上に配置しても、効果的です。 Andrew Ackroyd氏によってデザインされたポスターは、フォントと画像が対角線のグリッド上に並べられ、モダンでスタイリッシュな効果を生み出しています。 対角線のグリッドは、画像の多いレイアウトにも役立ちます。Karen Hoffstetter氏によるこのデザインでは、対角線を活かしたフレームを使った画像で、全体が埋め尽くされたデザインです。 またこのデザインでは、対角線のグリッドに加えて、水平方向と垂直方向グリッドも使われていることが、要素の美しい整列を可能にしています。   13. 万能に使える グリッドが最も利用されているのは、雑誌や編集のレイアウトなどですが、その他のどんな用途にも、デザインツールとして活用できます。 多くの有名なロゴは、グリッドシステムに基づいて作成されています。例えば、Braunの有名なロゴは、グリッドを使用して、文字をクリーンで強さのあるデザインに統一するプロセスから、誕生したのです。 グリッドはまた、イラストレーション全般にも使うことができます。Dean Gorissen氏による、都市のイラストレーションでは、クリーンでシャープな角度が使われていますが、これが対角線のグリッドの形が利用されたことを示しています。 どのような用途であれ、グリッドは、計り知れないほど便利なツールとなってくれるでしょう。全てのデザインスタイルやデザイナーにとって有益なツールではないかもしれませんが、多くのケースにおいては役に立ちます。あなたの次のプロジェクトでも、グリッドの活用を考えてみてください。   14. 余白のデザインに役立つ あなたは余白を活かしたデザインの世界を深く掘り下げてみたいと思っていますか？グリッドは余白のデザインにも役立ちます。 デザインを複数のカラムに分けて、要素を並べた後、残ったいくつかの列やカラムは空けたままにして余白を作りましょう。 João Oliveira氏によるこのレイアウトでは、グリッドのいくつかの領域を空けておくことで、余白を広く作っています。その結果として、スタイリッシュかつ洗練されたデザイン、機能的でミニマルなレイアウトが実現されていて、散らかりや不要な要素は全くありません。 同様に、Mehmet Gozetlik氏によるポスターのデザインでも、グリッドの機能が活かされています。フォントと画像が中央のカラムに整列され、外側のカラムは余白にされています。美しくバランスが取られていて、要素が中央に集められた、視覚効果も高いポスターデザインです。   15. 読者の目に優しいデザイン 活字印刷のレイアウトを読みやすくすることで、グリッドは、文章のデザインにも役立ちます。 人間の目は、文章のまとまりの長さにとても敏感です。文章のまとまりが長すぎると、最後まで読み進めるのも辛くなりますが、短すぎても細切れな印象になり、しっかりと読み込むのが難しくなります。 一般的に、行の黄金比は、1行あたり、単語数で6以上、合計文字数で空白も含めて約50～65文字になるとされています。 文字の多いレイアウトにグリッドを使うことで、簡単に素早く均一なカラムを作ることができます。カラムを使うことで、文章の長さを強力にコントロールできます。 これこそ、新聞でグリッドを基本としたレイアウトがよく使われている理由です。読みやすいコンテンツを作るのに役立っているのです。 編集に関することをもっと学びたいと思いますか？「世界の編集デザインベスト50」のリストが紹介されているWebページを訪問して、目を通しておきましょう。   次はあなたの番です：グリッドデザインを早速実践しましょう あなたがグリッドのファンであるなしに関わらず、非常に多くのデザインで役に立つことは明らかです。グリッドの起源は13世紀に遡るというのも、驚くにはあたらないことかもしれません。 グリッドには、デザインのバランスを整えて整列することから、対角線のデザインでタイポグラフィーをクールに見せることに至るまで、数多くの活用方法があります。 グリッドは、デザインのページ上のただの線ではありません。デザインを構造化し、デザインの方向性を示し、デザインを形作ることで、あなたの望む完成イメージを実現する力があるのです。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
Webデザイン

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） プログラミング Python Pythonでセレニウムをサイト上で活用する方法を現役エンジニアが解説【初心者向け】