自動でscreenshotを取る感じの環境メモ

##目的
Webページのスクリーンショットを自動的に取得したい・・・
PhantomJSはサポートが終わりそう（終わってる？）ということで、
google-chrome + seleniumな環境で実装。
で、Scriptを実行している都合上、怪しいコードを実行されても嫌なので、
スクリーンショットを取る部分はDocker上で実装して、他のプログラム達
とは若干分けたい！ということでやったことをメモメモ（・ω・;

実際はGoogleChromeにもSandboxがあってそれなりに安全らしいのですが、
Chrome自体に脆弱性があった時が嫌なので分離・・・

メモなので失敗した内容も失敗例として書いたり、設定の時に打ったコマンドを全部書いてます。

##環境
ubuntu 18.04 (english)

##Dockerインストール

```
# apt-get update
# apt-get install docker.io
# systemctl enable docker
# systemctl start docker
# docker pull ubuntu:18.04
```

##取得した画像をホストと共有する設定を先に・・・(やらなくても良いです）

```
Docker側
# mkdir /tmp/share

ホスト側
# mkdir /opt/share
```

##Docker 起動

```
# docker run -i -t -d --name="dockername" ubuntu /bin/bash

# docker start dockername

# docker attach dockername
```

##Dockerでの設定
何にも入ってなかったので、設定

###wgetと基本コマンド系をインストール

```
docker# apt-get install iputils-ping net-tools
docker# apt-get install wget
docker# apt-get install unzip
```

###Chromeとchromedriverをダウンロード

```
docker# wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

docker# wget https://chromedriver.storage.googleapis.com/74.0.3729.6/chromedriver_linux64.zip
//※74.0.3729.6と書かれているところはバージョンなので、google-chromeのバージョンと合わせてください。
//http://chromedriver.storage.googleapis.com/
//↑ここに使用可能なバージョンのリストがある。
//google-chrome-stable --version　
//でChromeのバージョンは確認できる。
```

###Chromeのインストール

```
//Chromeのインストール
docker# dpkg -i google-chrome-stable_current_amd64.deb
```

###chromedriverのインストール

```
docker# unzip chromedriver_linux64.zip
docker# mv chromedriver /usr/bin/
docker# chmod +x /usr/bin/chromedriver
```

###seleniumのインストール

```
docker# apt-get install python3-pip
docker# apt install python3-selenium
```

###docerイメージにviすら入ってなかったのでviをインストールしたい・・・

```
docker# apt-get install vim
//↑何故かエラーになった・・・↑

//色々試した結果、このコマンドで解決
docker# apt  --fix-broken install

docker# apt-get install vim
```

###スクリーンショットの取得

```
docker# adduser user
//・・・パスワードなどを設定
docker# su user
docker$ vi test.py
```

```test.py
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
import time

options = Options()
options.binary_location = '/usr/bin/google-chrome-stable'
options.add_argument('--headless')
options.add_argument('--window-size=1280,2048')

driver = webdriver.Chrome('chromedriver', chrome_options=options)
//URLはとりあえず自分のQiita
driver.get('https://qiita.com/xio_yae/items/f800a8ef250ef851279e')
print(driver)
driver.save_screenshot('/home/user/screenshot.png')
driver.quit()
```

実行するとエラーになった。

```
$ python3 test.py
---
Traceback (most recent call last):
  File "get.py", line 13, in <module>
    driver = webdriver.Chrome('chromedriver', chrome_options=options)
  File "/usr/lib/python3/dist-packages/selenium/webdriver/chrome/webdriver.py", line 75, in __init__
    desired_capabilities=desired_capabilities)
  File "/usr/lib/python3/dist-packages/selenium/webdriver/remote/webdriver.py", line 154, in __init__
    self.start_session(desired_capabilities, browser_profile)
  File "/usr/lib/python3/dist-packages/selenium/webdriver/remote/webdriver.py", line 243, in start_session
    response = self.execute(Command.NEW_SESSION, parameters)
  File "/usr/lib/python3/dist-packages/selenium/webdriver/remote/webdriver.py", line 311, in execute
    self.error_handler.check_response(response)
  File "/usr/lib/python3/dist-packages/selenium/webdriver/remote/errorhandler.py", line 237, in check_response
    raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.WebDriverException: Message: unknown error: Chrome failed to start: crashed
  (unknown error: DevToolsActivePort file doesn't exist)
  (The process started from chrome location /usr/bin/google-chrome-stable is no longer running, so ChromeDriver is assuming that Chrome has crashed.)
  (Driver info: chromedriver=74.0.3729.6 (255758eccf3d244491b8a1317aa76e1ce10d57e9-refs/branch-heads/3729@{#29}),platform=Linux 4.15.0-22-generic x86_64)
---
```

docker上でsandboxの実行が引っかかってるらしい
options.add_argument('--no-sandbox')を追加したらOKだった。

```test.py
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
import time

options = Options()
options.binary_location = '/usr/bin/google-chrome-stable'
options.add_argument('--headless')
options.add_argument('--window-size=1280,2048')
options.add_argument('--no-sandbox')

driver = webdriver.Chrome('chromedriver', chrome_options=options)
driver.get('https://qiita.com/xio_yae/items/f800a8ef250ef851279e')
print(driver)
driver.save_screenshot('/home/user/screenshot.png')
driver.quit()
```

###画像を確認
dockerからローカルにコピー

```
# sudo docker cp dockername:/home/user/screenshot.png ./
```

|![111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251555/533d1f81-9129-febc-dca6-edc9904470a5.png)|
|:-:|


あれ、文字化けしている・・・
こちらを参考に修正
[UbuntuのCLI環境でGoogleChromeを使ってウェブサイトのスクリーンショットを取得する](https://qiita.com/mitsusaki/items/4b915677e1d4e9e21ca2)
というか、かなりまとまってて最初から見ればよかった・・・

```
# wget --content-disposition IPAfont00303.zip http://ipafont.ipa.go.jp/old/ipafont/IPAfont00303.php 
# unzip IPAfont00303.zip -d /usr/share/fonts/
# fc-cache -fv
```

再度実行するとうまく取れてる！