環境
- Ubuntu 16.04 LTS (Amazon LightSail)
- Node.js v8.9.2 (後述の手順でインストールします)
nvm 入れて node.js インストール
nvmじゃなくても良いのですが、慣れた手順なので nvm を入れて nvm から node.js をインストールします。
$ curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | sh <一旦ログアウトして再度ログイン> (インストール可能なバージョンを確認) $ nvm ls-remote (とりあえずVer8系を入れる) $ nvm install v8 (インストールされたバージョンを確認) $ nvm ls
puppeteer を インストール
puppeteer 自体のインストールは以下のコマンドで完了します。 Chrome がインストールされていない場合は Chrome も一緒にインストールされるようです。(自分の環境では先に Chrome をインストール済みでした)
$ node i puppeteer
とりあえず動かしてみる
以下はこのサイトを訪問してスクショを取るサンプル
// sample.js const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://doruby.jp'); await page.screenshot({path: 'doruby.png'}); await browser.close(); })();
上記を保存して node sample.js
のように実行すると、カレントディレクトリに doruby.png
が作成されますが...
上記のように日本語が「豆腐」になってしまいました。
日本語を表示するためには日本語フォントが必要なのでインストールします。
日本語フォントをインストール
とりあえずIPAフォントを入れてみます
$ sudo apt-get install fonts-ipafont-gothic fonts-ipafont-mincho
以下のコマンドでIPAフォントがインストールされていることを確認
$ fc-list | grep IPA /usr/share/fonts/opentype/ipafont-mincho/ipam.ttf: IPAMincho,IPA明朝:style=Regular /usr/share/fonts/opentype/ipafont-gothic/ipagp.ttf: IPAPGothic,IPA Pゴシック:style=Regular /usr/share/fonts/opentype/ipafont-mincho/ipamp.ttf: IPAPMincho,IPA P明朝:style=Regular /usr/share/fonts/opentype/ipafont-gothic/ipag.ttf: IPAGothic,IPAゴシック:style=Regular /usr/share/fonts/truetype/fonts-japanese-mincho.ttf: IPAMincho,IPA明朝:style=Regular /usr/share/fonts/truetype/fonts-japanese-gothic.ttf: IPAGothic,IPAゴシック:style=Regular
再度動かしてみる
日本語フォントが入ったのでこんどはちゃんと表示されるはず、先程と同様に node sample.js
を実行してスクショを取ります。
今度はちゃんと日本語が表示されましたね。
さいごに
以上のように puppeteer を使うと手軽にスクリプトからchromeを操作することができることがわかったと思います。
明日は、実際のWebサイトにアクセスしてWebUIの操作したり情報そ取得する方法について書く予定です。