はじめに

Webページ全体を画像として保存するサンプルシナリオ(以降、本サンプルシナリオ)について説明します。

本サンプルシナリオの概要

本サンプルシナリオは、以下の処理を行います。

• 対象のWebページをChromeで表示します。
• Webページ全体の高さ、幅を取得するjavascriptをアドレスバーに入力します。
• javascriptを実行し、値をクリップボードにコピーします。
• 「クリップボード」ノードを使用して値を取得し、変数に格納します。
• 取得した高さ、幅を指定して「Webページを画像として保存(Chrome)」ライブラリを実行します。

使用するWinActorモジュール

本サンプルシナリオでは、以下のWinActorモジュールを使用します。

• ノード/アクション/ウィンドウ状態待機.ums6
• ノード/アクション/指定時間待機.ums6
• ノード/アクション/文字列送信.ums6
• ノード/アクション/クリップボード.ums6
• 04_自動記録アクション/エミュレーション.ums6
• 23_ブラウザ関連/ブラウザ起動.ums6
• 23_ブラウザ関連/ページ表示.ums6
• プチライブラリ/ブラウザ関連/Webページを画像として保存(Chrome).ums6
  (プチライブラリはこちらからダウンロードできます。)

動作確認環境

本サンプルシナリオは以下の環境で確認しています。

• Windows 10、WinActor 6.3.2、Google Chrome 98.0.4758.81
• Windows 10、WinActor 7.3.1、Google Chrome 98.0.4758.81

制約事項

• 本サンプルシナリオおよびドキュメントは、Google Chromeが使用できる環境での実行を前提に記載されています。

本サンプルシナリオの使い方

本サンプルシナリオの実施方法は以下の通りです。

Step1.サンプルシナリオのZIPファイル展開・フォルダ格納

ダウンロードしたサンプルシナリオのZIPファイルを展開し、任意のフォルダに格納します。

Step2.動作に必要な変数を設定

本サンプルシナリオを実行するために必要な値を、変数一覧で設定します。
事前に設定が必要な変数は下記の通りです。

• ブラウザ名
  
  • 任意のブラウザ名を指定してください。
• 対象ページURL
  
  • 対象WebのURLを指定してください。
• 保存ファイル名
  
  • 保存する画像のファイル名を指定してください。
    例)画像ファイル格納先\webページ画像.PNG
• chrome.exeのパス
  
  • chrome.exeのファイルパスを指定してください。
    例)C:\Program Files\Google\Chrome\Application\chrome.exe
• コマンド待機時間(ミリ秒)
  
  • 画像を作成するコマンド発行後の待機時間を指定してください。
    例)15000

Step3.ウィンドウ識別名の再取得

下記ライブラリのウィンドウ識別名を再取得してください。

• ウィンドウ状態待機
• エミュレーション (※3か所で使用されています。全て再取得してください。)
• 文字列送信

Step4.サンプルシナリオの実行

WinActorで本サンプルシナリオを実行します。

Step5.サンプルシナリオの終了後の確認

指定した保存ファイル名のPNGファイルが作成されていることを確認してください。

トラブルシューティング

本サンプルシナリオでは、変数指定が不十分であった場合、エラーメッセージが出力されます。
詳細については、エラーメッセージ一覧を参照してください。

サンプルシナリオ解説

本サンプルシナリオで使用している実装テクニックについて解説します。

1.Webページの高さ、幅を取得

本サンプルシナリオでは、javascriptを用いてWebページの高さ、幅を取得しています。

取得方法は下記の通りです。

①「エミュレーション」ノードで「Ctrl+L」キーを押下し、カーソルをアドレスバーに移動します。
②、③、④「文字列送信」、「クリップボード」、「エミュレーション」ノードでアドレスバーに下記のjavascriptを入力します。「javascript:」文字列はクリップボードからアドレスバーへペーストできないため、「文字列送信」ノードを使用してアドレスバーに直接記入しています。
　1.高さを取得するjavascript
　　javascript:(function(){let t = document.body.appendChild(document.createElement('textarea'));t.value = document.body.scrollHeight;t.select();document.execCommand("copy"); })();
　2.幅を取得するjavascript
　　javascript:(function(){let t = document.body.appendChild(document.createElement('textarea'));t.value = document.body.scrollWidth;t.select();document.execCommand("copy");})();
⑤「エミュレーション」ノードで「Enter」をキーを押下します。javascriptが実行され、値がクリップボードにコピーされます。
⑥「クリップボード」ノードでクリップボードに取得した値を変数に格納します。