皆さん、こんにちは。
今回は、AnacondaのJupyterlabではなく、VSC（visual studio code）を使用して、Web自動操作を行っていきたいと思います。
実例としまして、「https://gs.statcounter.com/」というブラウザやOS等のシェア率を調査するサイトがあり、こちらのサイトからシェア率を取得する方法をご紹介したいと思います。
■記事内リンク
・VSC/Pythonの導入
・VSCの設定/Jupyter起動/エラー解除
・Stat Counterでシェア率取得
□VSCの導入
◇VSCについて
前回までAnacondaのJupyterLabを使用していました。
Anacondaは、Pythonも包括されており、導入が安易でした。
そのままAnacondaを使用するも問題ありませんが、VSCを使うことで、様々なツールとの連携が可能となり、テスト自動化の幅が広がります。
また、ソフトウェア開発されている方も、VSCを使用されている方が多く、開発者との情報の連携も行いやすいと考えています。
さらに、VSCには様々な拡張機能があり、その中に「Jupyter」と呼ばれるものがあります。
こちらは、AnacondaのJupyter notebookに対応しており、Anacondaで使用していたJupterlabと、ほとんど同じように使用することができます。
◇VSCインストール
VSCを早速インストールしていきましょう。
以下サイトにアクセスします。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
「今すぐダウンロード」を選び、お使いのPCに沿ったverを選びます。
私の場合、Surfaceは64bit版ですので、そちらのインストーラー版を選択します。
インストーラーをダウンロード後、インスト―ルを行っていきます。
基本、デフォルト値で問題ありません。
「同意する」を選び、各チェックを付けます。
環境変数Pathを設定する場合、インストール後、再起動が必要となります。
インストール完了後、VSCを起動しましょう。
以下のように表示されればOKです。
（キャプチャ画像はすでに日本語化設定しているものとなります。）
◇Pythonインストール
続いて、Pythonをインストールしましょう。
Anacondaで使用していたPythonを参照すれば使うことはできますが、今回は別途Pythonをインストールし、そちらを参照するようにしたいと思います。
Pythonは、以下公式のサイトからインストールが行えます。
https://www.python.org/
サイト遷移後、「Downloads」を選択後、最新版となるPythonをインストールします。
インストールも基本、デフォルト設定で進めてOKです。
システム環境変数のPATHに設定する際は、「Add Python 3.9 to PATH」にもチェックを入れましょう。
「Step was successful」と表示されればOKです。
□VSCの設定/Jupyterの起動/エラー解除
Pythonをインストールできたら、VSCに戻り設定を行っていきます。
◇日本語設定
・日本語化拡張機能のインストール
まず日本語設定しましょう。
VSCの左側にある拡張機能の項目を選択し、検索で「Japanese Language Pack」と検索すると、日本語化する拡張機能がヒットします。
そちらをインストールします。
(画像はすでに日本語化したものとなります。)
・日本語設定
日本語拡張機能をインストールしたら、以下操作で設定します。
1.VSC画面上部の「View」⇒「Command Palette…」を選択します。
2.「Configure Display Language」⇒「Ja」を選択します。
メニュー周りが日本語化されるとOKです。
もし日本語されない場合は、VSCを再起動で反映されると思います。
◇「Jupyter」の設定
続いて、日本語化と同様に、「Jupyter」の拡張機能をインストールします。
拡張機能の項目から「Jupyter」と入力し、検索ヒットしたJupyterをインストールします。
インストールできればOKです。
◇インタープリンター設定（インストールしたPython Path設定）
次は、以下手順でPythonのPath設定を行います。
1.「表示」⇒「コマンドパレット…」を選択します。
2.「python」と入力すると、「python:Select Interpreter」を選択します。
3.PC内にインストールされているPythonのPathを選ぶことができるので、先ほどインストールした最新のPythonのPathを指定します。
4.PythonのPathを選択すると、画面左下に選択したPythonのVerを確認することができます。
私の場合、「Python 3.9.5 64-bit」と設定されたことを確認しました。
尚、補足としまして、前回まで使用していたAnacondaのPythonのパスを指定することも可能です。
◇Jupyterの起動
VSCでコードを書く場合は、「ファイル」⇒「新規ファイル」、または「ファイル」⇒「開く」となっています。
新規でファイルを開いた後、「言語｛０｝の選択」で任意の言語を選択して、コードを記述することができます。
「Jupyter」の場合は、以下操作で新規ファイルを作成することができます。
1.「表示」⇒「コマンドパレット」を選択
2.「Jupyter」と検索すると、候補から「Create Blank Notebook」を選択
上記を行うと、AnacondaのJupyterで記述していた形式のファイルが作成されます。
ファイル名を指定しましょう。
今回は、「Win_VSC_01」と設定しました。
・Seleniumのインストール
早速、PythonにSeleniumをインストール、インポートしていきます。
Anaconndaの時と同様に、以下コマンドを入力します。!pip install selenium
・インポート
続いてインポートを行います。
Selenium、Web driver、timeをインポートします。#インポートimport seleniumfrom selenium import webdriverimport timeprint("インポートしました")
・ブラウザ起動しサイト遷移
Chrome Driverを起動し、StatCounterにアクセスしましょう。
Anacondaと同様に、以下を記述します。#Chrome Driver設定driver=webdriver.Chrome(executable_path="C:\\Users\\sinsu\\WebDrivers\\ChromeDriver\\Ver89\\chromedriver.exe")time.sleep(3)driver.maximize_window()time.sleep(3)
・サイト遷移
以下を記述してサイトに遷移できればOKです。#テストページ遷移driver.get('https://gs.statcounter.com/')time.sleep(3)
print("Stat Counterに遷移しました。")time.sleep(1)
該当のページへ遷移できればOKです。
◇Seleniumインストール/インポート時のエラーについて
当初、私がVSCを導入したところ、エラーでSeleniumがインストール、及びインポートもできない事象が起きました。
その際、以下を実行し、改善することができました。
・拡張機能「Jupyterの更新」
拡張機能の項目で、「アップデート」表示があれば、そちらを実行してみてください。
・PythonのPath見直し
Pythonインストール時、環境変数Pathの追加にチェックを忘れていたので、システム環境PathにPythonのPathを追加します。
1.Windows左下の検索を選択し、「システム環境変数の編集」と入力
2.「環境変数」を選択
3.システム環境変数側の「Path」を選択後、「編集」を選択
4.PythonのPathを指定
（私の場合：C:\Users\sinsu\AppData\Local\Programs\Python\Python39）を指定
・ターミナル側で以下インストール
ターミナル側で、selenium、ipykernelをインストールします。
ターミナルが表示されていなければ、以下を実行し、インストールします。pip3 install ipykernelpip3 install selenium
※pipとしてしまうと、Python2.x系となってしまいますので、Pip3とします。
問題なくSeleniumのインストール、インポートができればOKです。
「表示」⇒「ターミナル」で表示が可能です。
□Stat Counterでシェア率取得の自動化
今回は、Stat Counterのサイトで「日本のブラウザ1年のシェア率」を取得したいと思います。
◇Stat Counterについて
こちらのサイトは、ブラウザ、OS、Screen、SNSなどのシェア率を期間、地域を選んで取得することができます。
私も業務で使わせていただいており、シェア率の高いモノを推奨ブラウザ、OS等に選定しています。
シェア率が高いモノを推奨とすることで、プロジェクト関係者にも、数値での裏付けすることにより、説得力のある情報をそろえることができます。
◇ブラウザシェア
まずはブラウザシェア率を取得したいと思います。
1.「Browser Market Share」選択
以下コードを記述します。#ブラウザシェア取得#Step1「Browser Market Share」選択BMS =driver.find_element_by_css_selector('#main-categories > div:nth-child(1) > a > div > img').click()time.sleep(3)print("ブラウザシェアを選択しました")time.sleep(1)
実行し、Browser Market Shareの表示になればOKです。
2.「Edit Chart Data」を選択
「Edit Chart Data」を選択します。
#Step2「Edit Chart Data」を選択Edit =driver.find_element_by_id('btn-edit-chart').click()time.sleep(3)print("Edit Chart Dataを選択しました")time.sleep(1)
編集画面に遷移できればOKです。
3.Edit操作
Editは、それぞれ以下内容に設定します。
・Browser「Desktop」「Mobile」のみを選択#Browser「Desktop」「mobile」のみtablet_release=driver.find_element_by_id('device_type_tablet').click()time.sleep(2)Console_release=driver.find_element_by_id('device_type_console').click()time.sleep(2)print("タブレット、コンソールを解除しました")time.sleep(1)
・Region「Japan」#Step3-2.地域：日本#インポートfrom selenium.webdriver.support.ui import Selecttime.sleep(2)#日本選択Region = driver.find_element_by_id('region')Select(Region).select_by_value('JP')time.sleep(3)print("日本を選びました")time.sleep(1)
・Chart Type「Bar」#Step3-3.Chat Type設定Bar=driver.find_element_by_id('chart-type-bar').click()time.sleep(3)print("Chart Typeを選択しました")time.sleep(1)
・Shortcuts:「Last12 Months」#Step3-4.期間を指定shortcuts=driver.find_element_by_id('monthly-12-1').click()time.sleep(3)print("12カ月に指定しました")time.sleep(1)
4.「View Chart」を選択#Step4.「View Chart」を選択View_chart=driver.find_element_by_id('view-chart').click()time.sleep(3)print("View Chartを選択しました。")time.sleep(10)
※Chartの表示が読み込まれる時間を考慮し、time.sleep(10)と10秒に設定しています。
5.Save ChartImage
ブラウザシェア率は、画像とCSVのデータそれぞれを保存したいと思います。#Step5.Chart保存#Step5-1.image保存Save_Chart=driver.find_element_by_id('download-image').click()time.sleep(3)print("Chartを保存しました")
time.sleep(1)#Step5-2.CSV保存Save_CSV=driver.find_element_by_id('csv-version').click()time.sleep(3)print("View Chartを保存しました。")time.sleep(1)
保存した画像とCSVをチェックしてみましょう。
以下のように表示されればOKです。
◇各ステップを通しでの実施
Step1～5まで、各セルに記述して実行しました。
これを通しで行ってみたいと思います。
AnacondaのJupyterLabでは、各セルを選択しShft+Mでセルをマージすることができました。
VSCのJupyterは、このセル統合は行えません。
少し手間ですが、コピーペーストで実施していきたいと思います。
◇新規セルに各ステップをまとめる
わかりやすいように、新規セルを2つ作成し、片方はマークダウン設定としたいと思います。
・マークダウン
マークダウンは、以下項目を選択することで、マークダウン表記となります。
マークダウン時は、「#」を付けてテキストを記述することで、見出し設定を行うことができます。
Jupyterlabの操作としては、過去に以下記事を投稿していますので、そちらをご参照ください。
・通しでの実行
新規セルに各ステップをコピー＆ペーストを行い、1つのセル実行できるように設定しました。
https://susakiworks.com/wp-content/uploads/2021/05/win_VSC_01.zip
image、CSVファイルともにダウンロードできました。
・image
・CSV
■最後に
今回は、VSCの導入・設定、Statcounterでのシェア取得についてご紹介いたしました。
次回は、上記をタスクスケジューラで定期的に実施する方法をご紹介したいと思います。
最後まで見て頂き、ありがとうございました。
サイトトップへ
https://susakiworks.com/
Pythonをおぼえたらブラウザ操作を自動化しよう: Seleniumで操作してBeautifulSoupで解析をする
