プログラミング初心者でもできるブラウザ自動操作

プログラミング初心者の最大のハードルは環境構築だと思います。
今回はなるべく環境構築が少なく済み、
かつ意味不明な記述が少ない言語を選びました。
ですが結局長くなってしまいました。
今回はクロームを自動で動かします。
 
## 今回ダウンロードするもの
（よくあるプログラムの初心者本に書いてそうな、どでかいソフトはインストールしません）

- エディタ  
  **Visual Studio Code(以下VSCode)** 
- 言語  
  **Python** 
- ブラウザ自動操作に必要なツール的なもの  
 **chromedriver.exe（selenium）** 

## とりあえず文字を出す
### VSCodeのインストール
まずVisual Studio Codeというエディタをダウンロードをします。
（IDE（eclipseやnetbeans,VisualStudioみたいな超高機能なエディタ）みたいに項目多すぎて初心者が投げ出したくならなくて使いやすいエディタです。
他にも色々こういう系エディタありますが自分の所感ではatom→起動遅くてうざい、windows向けじゃない、sublime,brackets→色々自分で拡張すんのめんどい　といった印象です）
<img src="https://qiita-image-store.s3.amazonaws.com/0/131295/5e1dfebe-2c7b-0778-3e40-6f60e5e03548.png" width="400px" />


もちろん自動で日本語です。プログラミング初心者に英語のツール勧めてくる奴はどうかしてます。
後で作業しやすいようにチェックを入れときます。（ファイルの右クリックメニューに登録されます。こういうのうざいって人はチェック入れなくてもいいです。）
<img src="https://qiita-image-store.s3.amazonaws.com/0/131295/da36f8a5-7854-2edf-80a3-e91431843009.png" width="400px" />


###Pythonのインストール
次にPythonをDL＆インストール
https://www.python.org/downloads/
<img src="https://qiita-image-store.s3.amazonaws.com/0/131295/867aed65-2bd8-16a1-f383-d99916c7eb97.png" width="400px" />

Add to PATH にチェックを入れます。（pythonコマンドとpipコマンドが打てるようになります。チェック入れ忘れたら自分で環境変数に追加します。）
<img src="https://qiita-image-store.s3.amazonaws.com/0/131295/53023498-6a55-f1d7-3c0b-9741585824aa.png" width="200px" />


（ちなみに今回ブラウザ自動操作に使うツール的なのはseleniumというものなのですが、どんな言語でもかけます。多分多いのはjava C# Pythonの3つ
ですがjavaやC#は初心者にはめんどくさい事が多い気がするのでPythonを選びました）

chromedriver.exeも必要ですがとりあえず後にします

###実装
とりあえず文字を出します。
適当なフォルダを作ります。
フォルダを右クリックしてOpen with Codeをクリック
![Screenshot_17.png](https://qiita-image-store.s3.amazonaws.com/0/131295/174a7f2f-4bce-4170-7caf-a643c708b881.png)

そして左メニュー画面で右クリック→新しいファイルを「hello.py」という名前で作成します。
![Screenshot_20.gif](http://i.imgur.com/H2UtyGN.gif)

作成したら

```
print("konnnitiwa seaki")
```
と入力し<kbd>Ctrl+S</kbd>で保存します。
![Screenshot_21.png](https://qiita-image-store.s3.amazonaws.com/0/131295/6f400411-60e4-1c63-bbfb-d648c6eb5a5d.png)


保存したらVSCode内で<kbd>Ctrl + Shift + C</kbd> を押すとコマンドプロンプトが開くので
python hello.py　と入力します。
konnnitiwa sekaiと出たらひとまず成功です。
![Screenshot_22_.png](https://qiita-image-store.s3.amazonaws.com/0/131295/8623f3fd-a6ef-b7d1-1bc5-bbb87a89e9d5.png)

### VSCodeを使いやすく
でもこれだとただのメモ帳と変わらないのでエラー表示や自動入力を有効にします。
VSCodeのpythonの拡張機能をインストールします
VSCode内で <kbd>CTRL+P</kbd> を押すとこの画面がでてくるので
![Screenshot_23.png](https://qiita-image-store.s3.amazonaws.com/0/131295/afc657cf-22d6-e28e-7de3-3f60d9d6551d.png)

`ext install Python`と入力し、5番目ぐらい下のたくさんDLされてるPythonをクリックしてインストールします。
![Screenshot_18.png](https://qiita-image-store.s3.amazonaws.com/0/131295/fdd8ac51-6398-8aa6-09fb-608a9481f097.png)

インストールしてる間、左下がぐるぐるします。
![Screenshot_24_.png](https://qiita-image-store.s3.amazonaws.com/0/131295/ce62088a-308a-21bd-79b0-44829b9a79f0.png)


終わったら再起動します。
すると上にこんなメッセージ出たと思います。（適当にファイルいじって保存すると出ます）
![Screenshot_25.png](https://qiita-image-store.s3.amazonaws.com/0/131295/fe12dc14-8fc7-fb1e-2277-85c55addcecc.png)
pylintっていうコードチェックしてくれるやつ入れろって言われてます。
もっかい<kbd>Ctrl+Shift+C</kbd>でコマンドプロンプトを開き、
`pip install pylint`でpylintをインストールします。
![Screenshot_26.png](https://qiita-image-store.s3.amazonaws.com/0/131295/300d8511-b339-3e87-75c5-5ede92b34e79.png)
これで保存したときにコードにエラーがないかチェックしてくれます。(VSCodeの再起動不要)
![Screenshot_27.png](https://qiita-image-store.s3.amazonaws.com/0/131295/afcb66eb-8563-73ed-e369-d563bafd5a6d.png)
ついでにいちいち実行するときコマンドプロンプト開いて入力するのもだるいのでプログラムの実行をショートカットで自動化します。
（ブラウザ自動操作はもうちょっと待ってください）
また<kbd>Ctrl+P</kbd>でこの画面を出し
`>tasks config` と入力しタスクライナーの構成をクリックし→Othersをクリックします。 
![Screenshot_28.png](https://qiita-image-store.s3.amazonaws.com/0/131295/6a610bf0-27e6-7a6a-3e8d-382aa5b3b222.png)
![Screenshot_29.png](https://qiita-image-store.s3.amazonaws.com/0/131295/d758742d-6d35-6a52-5b13-0c6e4fd88f38.png)



.vscodeという設定フォルダができ、tasks.jsonという設定ファイルができるので以下のように変更します。
（commandとargsの部分だけ変えればOKです）
![Screenshot_30.png](https://qiita-image-store.s3.amazonaws.com/0/131295/b07b658f-b063-6dfe-5f4a-767db5d69fbb.png)

これでhello.pyの画面に戻り、<kbd>Ctrl+Shift+B</kbd>を押せば、わざわざコマンド打たなくてもプログラムをVSCode内で実行してくれます。
![sekai.gif](http://i.imgur.com/HmXtR5q.gif)


（python ファイル名　というコマンドを<kbd>Ctrl+Shift+B</kbd>で実行してくるってだけの設定ファイルです）
（ちなみにvscode、べた褒めした割にコンソール内の日本語が文字化けします。
コマンドプロンプトからファイル実行すれば日本語の文字化けは起こりません。）
![Screenshot_32.png](https://qiita-image-store.s3.amazonaws.com/0/131295/5445d65a-08df-76d0-cfd7-730b8ed3aa5c.png)

## ブラウザ自動操作

### 準備
いよいよブラウザ操作です。
chromedriver.exeをDLします。
https://sites.google.com/a/chromium.org/chromedriver/downloads
![Screenshot_14_.png](https://qiita-image-store.s3.amazonaws.com/0/131295/4fcd923d-0244-cf9b-c6f0-67d4cc15ec5f.png)
![Screenshot_16_.png](https://qiita-image-store.s3.amazonaws.com/0/131295/d87a5087-d63f-73a7-b416-7c103bfd2740.png)


解凍してhello.pyと同じフォルダにchromedriver.exeを置きます。
![Screenshot_33_.png](https://qiita-image-store.s3.amazonaws.com/0/131295/469a1718-237f-20b4-3a5e-5c95428900ce.png)

また、コマンドプロンプトを開き、
`pip install selenium`
と打ちます。pythonでseleniumというものが使えるようになります。
ブラウザ操作用のツールはこのseleniumとchromedriver.exeが必要になります。

### 実装
hello.pyを以下のコードをコピペします。

```py:hello.py
from selenium import webdriver # さっきpip install seleniumで入れたseleniumのwebdriverというやつを使う

driver = webdriver.Chrome("./chromedriver.exe") # さっきDLしたchromedriver.exeを使う
driver.get("http://www.yahoo.co.jp/") #chrome起動してyahooに移動
searchBox = driver.find_element_by_css_selector("#srchtxt") #検索入力ボックスのhtmlを探す
searchBox.send_keys("世の中 憎い") #その検索ボックスで　「世の中 憎い」と打つ
kensakuBotan = driver.find_element_by_css_selector("#srchbtn") #htmlから検索ボタンを探す
kensakuBotan.click() #検索ボタンをクリック
```

### 実行
<kbd>Ctrl+S</kbd> で保存後、<kbd>Ctrl+Shift+B</kbd> で実行します
すると、chromeが立ち上がり勝手に検索します。
![Screenshot_22.png](https://qiita-image-store.s3.amazonaws.com/0/131295/f4f9ae12-65d1-5798-7aca-ba2cf9f6566e.png)
できましたか？これであなたも今日からあなたもスクリプターです
find_element_by_css_selector()の中身は、実際にブラウザでyahooを開きhtmlのソースを見て調べます。
chromeだとF12で開発者ツールが使えてこんなかんじちょちょっとhtmlの部品のcssセレクタというのがとれます。
![chrome.gif](http://i.imgur.com/fxIBpqm.gif)



余談  
---
pipというのはpython用のアプリストアみたいなものです。pip install ○○コマンドでpythonで使える色々なものをDLできます。
pip install selenium とかでインストールしたものは
C:\Users\ユーザー名\AppData\Local\Programs\Python\Python35-32に多分入ってます
多分ライブラリがごちゃごちゃになるので普通仮想環境作ってやるみたいですがめんどくさいのでやりませんでした
私はselenium使うの初めてなので世の中のスクリプターがこれ使ってるかどうかは分からないです。
あと、pythonも書いたことないです。