• DoRubyとは
  • お問い合わせ
  • Ruby/Rails
  • Web開発
  • Webマーケティング
  • アピリッツ
  • ライフハック
  • ゲーム制作/開発
  • Railsの小技
  • Rubyの小技
  • Gemの紹介
  • ActiveRecord
  • 初心者向け
  • Java/Scalaテク
  • Unixのあれこれ
  • データベース
  • スマホ開発
  • HTML/CSS/JavaScript
  • デザイン製作
  • インフラ
  • クラウド
  • セキュリティ
  • エディタ
  • バージョン管理
  • その他
  • python
  • アクセス解析
  • Googleアナリティクス
  • Googleデータスタジオ
  • Web広告
  • SEO
  • UI/UX
  • ソーシャルメディア
  • EC開発
  • Webシステム開発
  • コンサルティング
  • Webデザイン
  • ブロックチェーン
  • ゲーム紹介
  • アプリ紹介
  • ASP
  • 風景
  • パソコン
  • ツール
  • ガジェット
  • 仕事術
  • 健康
  • 生活
  • 書評
  • Excel(エクセル)
  • PowerPoint(パワーポイント)
  • ゲームプランニング
  • SpriteStudio
  • マスターデータ入力/作成
  • Unity
  • キャラクターデザイン
  • ゲームシナリオ
  • レベルデザイン
  • ゲーム分析
  • 3DCG
  • イラスト制作
  • CG/アニメーション
  1. ホーム
  2. Web開発
  3. その他
  4. puppeteer で Headless してみた
  • 2017-12-07
    • カテゴリ:
    • その他
    • タグ:
    • node.js
    • ひとりAdventCalendar'17

puppeteer で Headless してみた

この記事は公開から1年以上が経過しています。情報が古い可能性がありますのでご注意ください。

puppeteer は Node.js からGoogle ChromeをHeadless mode(ウィンドウを表示しない状態のChorome)を操作するためのライブラリです。Headless であることの利点は今どきのJavascriptゴリゴリのSPAなどのテストをクラウドのようなディスプレイが繋がっていない機器で実行できたりするところです。 今日明日と2回に渡って puppeteer の使い方を紹介したいと思います。今日のこの記事では puppeteer をインストールしてWebサイトにアクセスしてスクショを取るところまでをやってみせます。

環境

  • 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 が作成されますが...

enter image description here

上記のように日本語が「豆腐」になってしまいました。
日本語を表示するためには日本語フォントが必要なのでインストールします。

日本語フォントをインストール

とりあえず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 を実行してスクショを取ります。

enter image description here

今度はちゃんと日本語が表示されましたね。

さいごに

以上のように puppeteer を使うと手軽にスクリプトからchromeを操作することができることがわかったと思います。
明日は、実際のWebサイトにアクセスしてWebUIの操作したり情報そ取得する方法について書く予定です。


  • 312 views
    • Tweet
    • このエントリーをはてなブックマークに追加

この記事を書いた人
nakamatsu
仕事ではRubyでサーバサイド/Node.jsでServerlessアプリケーション/AWSインフラ・DevOpsなど。 趣味で Alexa スキル作ったりしてます。 「俺のメモ」シリーズは DoRuby をメモ帳代わりに使う実験。 記事の内容についてのご連絡は 【e-mail: nakamatsu "at" appirits.com】 まで、お願いします。

「いいね!」するとDoRubyの最新記事を受け取ることができます。

Facebook

Twitterから最新記事を受け取るならこちら

Follow @doruby

Feedlyから最新記事を受け取るならこちら

follow us in feedly

おすすめの記事
  • 2,260 views
  • 2016-07-27
リニューアルをしたDoRubyの3つの目的
  • 2,118 views
  • 2016-08-15
ビット演算でフラグを管理する
  • 1,741 views
  • 2017-04-24
アピリッツの新卒合宿2017

カテゴリ

Ruby/RailsRailsの小技Rubyの小技Gemの紹介ActiveRecord初心者向けWeb開発Java/ScalaテクUnixのあれこれデータベーススマホ開発HTML/CSS/JavaScriptデザイン製作インフラクラウドセキュリティエディタバージョン管理その他pythonWebマーケティングアクセス解析GoogleアナリティクスGoogleデータスタジオWeb広告SEOUI/UXソーシャルメディアアピリッツEC開発Webシステム開発コンサルティングWebデザインブロックチェーンゲーム紹介アプリ紹介ASP風景ライフハックパソコンツールガジェット仕事術健康生活書評Excel(エクセル)PowerPoint(パワーポイント)ゲーム制作/開発ゲームプランニングSpriteStudioマスターデータ入力/作成Unityキャラクターデザインゲームシナリオレベルデザインゲーム分析3DCGイラスト制作CG/アニメーション

    人気の記事
    最近の記事
    • 3,503 views
    • 2020-04-02
    Kali Linux 2020.2 導入と日本語化
    • 802 views
    • 2020-03-06
    rack-lineprofを改造して管理画面からファイル指定&ログ追跡出来るように
    • 779 views
    • 2020-03-05
    FactoryBot と Gimei を使って架空のユーザを作る
    • 580 views
    • 2020-02-04
    ActionCable実装しようwith webpack
    • 511 views
    • 2020-01-27
    この頃のプルリクに対するレビュー
    Facebook

      サイト情報
      • DoRubyとは
      • 株式会社アピリッツ

      ソーシャルアカウント
      • Facebook
      • Twitter

      企業情報
      • 会社概要
      • 採用情報
      • お問い合わせ
      サービス製品
      • レコメンドASP
      • サイト内検索ASP「Advantage Search」
      • オープンソースECサイト構築パッケージ「エレコマ」
      • 受注・在庫・商品情報一元管理「モールコネクター」
      • セキュリティ診断サービス
      • Googleアナリティクスセミナー

      Copyright © Appirits All Rights Reserved.