Miobiki

  1. HOME
  2. javascript
  3. マニュアル用のスクリーンショット準備を自動化させる

マニュアル用のスクリーンショット準備を自動化させる

目次

操作マニュアルを作成したりするのって大変ですよね。
分かりやすいようにスクリーンショットを撮ったり、動画も撮ってみたりしてみましたがどうも面倒で納得がいきませんでした。

そこでふと思いました。
Puppeteer使えば楽にマニュアル用画像を準備できて、しかもブラウザテストも兼ねることができるのではと。

これならちょっと楽しそうでやる気が出たので、Puppeteerを使ってマニュアル用スクリーンショット準備を自動化してみます。

マニュアルの題材

サンプルとしてwordpress5.0.0で投稿に画像の挿入する方法にします。
その説明用のスクリーンショットを自動生成させます。

コードの雛形生成

puppeteerに撮影してもらうからといって、コードを自分で書いてたらプラマイゼロではと思ったので、Puppeteer recorderというchromeエクステンションを利用します。
使い方はgithubや他のブログなどを参考にしてみてください。

セレクターが複雑になるので、最初から最後まで通して記録するより、ページ遷移だけ、モーダル表示だけというふうに区切って記録するとコピペした時に分かりやすくなります。

スクリプト実行環境準備

ひと一通りの流れのスクリプトが準備できたら、次はサクッと実行環境を準備します。

npm init -y
npm install puppeteer
{
  "scripts": {
    "start": "node index.js",
  }
}

wordpressもdockerで準備しておきます。

version: '3.1'
services:
  wordpress:
    image: wordpress:5.0.0-php7.0-apache
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
  db:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
docker-compose up -d

wordpress起動後 http://localhost:8080 にアクセスしてインストールと画像を1枚アップロードしておきます。

実行してみてエラーを修正する

wordpressの準備が終わったら、ローカルでスクリプトを実行してみます。

npm start

実行してみると、ログインステップなどを忘れてたりしてエラーになりました。エラーにならないように修正していきます。
とくに動的にidが変わったりする部分はセレクターを変更します。

そして一通りの流れが完了するようにします。

カスタマイズ

あとは自動化が完成したら分かりすいスクリーンショットを取るためにカスタマイズをします。

ボーダーをつける

特定の要素に注目されるように、撮影前にボーダーをつけます。
hoverやfocusも試してみましたが、スクリーンショット時に外れてしまいました。

let border
page.setBorder = (selector) => {
  return page.evaluate((selector) => {
    border = $(selector).css("border")
    $(selector).css("border", "2px solid red")
    return true
  }, selector);
}
page.resetBorder = (selector) => {
  return page.evaluate((selector) => {
    if (border) {
      $(selector).css("border", border);
    }
    return true
  }, selector);
}

連番の画像ファイル名

スクリーンショットもファイル名が連番になるようにしておきます。

let step = 0
page.captureStep = (fullPage = false) => {
  return page.screenshot({path: `ss/step-${++step}.jpg`, fullPage})
}

実行

準備が整いましたので、実行して生成された画像を確認してみます。
ここまでのソースをgithubに置いておきますが、残念ながらheadlessモードだとログイン後、要素が見つからずにタイムアウトします…

step1

step2

step3

step4

step5

step6

step7

step8

これらの画像を利用すれば分かりやすいマニュアルが準備できそうです!

まとめ

今回のような簡単なものなら普通に作った方が早いです。セレクターを調整したりエラーの解消が大変です。
ですが、めんどうだと思っていた作業が楽しくなったので良しとします。

headlessモードのときのデバックが分からないままなのでもう少し知見をためたいです。