縦に長い画面のスクリーンショット取得について

日本 フォーラム
1

こんにちは、初めて投稿させていただきます。

縦に長い画面のスクリーンショットを簡単に取る方法は
ありますでしょうか？

「スクリーンショットを作成」アクティビティだと
表示されている画面しか取れなかったので、
画面をスクロールして全画面取れる方法が無いか模索しております。

何か良いアドバイスを頂けますと幸いです。
どうぞ、よろしくお願いいたします。

2

おい @hnagashima

これが役立つかどうかを確認してください…

ありがとう
#nK

1 Like
3

@Nithinkrishna
こんにちは

返信ありがとうございます。
こちらの環境で試してみます。

4

@Nithinkrishna
こんにちは

いただいたリンクを確認いたしました。
「ScrollPatternIdentifiers.HorizontalScrollPercentProperty Field」で
スクロール率を取得することにより、全画面スクリーンショット取得が
実現できそうなことは分かりました。

しかし、上記の関数に関しての情報が少ないため、またこちらの知識不足のため
UiPathでの使い方が分らない状態です。

UiPathで、「ScrollPatternIdentifiers.HorizontalScrollPercentProperty Field」を
使うためにもう少し具体的な手順を教えて頂けないでしょうか？

どうぞ、よろしくお願いいたします。

5

こんにちは

対象がブラウザなら、InjectJsScriptアクティビティでJavaScriptで現在のスクロール位置を取る手も考えらるかと思います。

function(e,v) {return window.scrollY;}

で取得した値を元に、画像のマージと、末端まで到達したかの判断をすると良いかと思います。

1 Like
6

Chromeなら全画面のスクリーンショットが標準機能で実現できますね。

  1. スクリーンショットを撮りたいサイト上で Ctrlキー、ShiftキーとIキー を押します。→ デべロッパーツール が開きます。
  2. デべロッパーツールが開いた状態で Ctrlキー、ShiftキーとPキー を押します。
  3. 入力欄が出てくるので 「full」 と入力するとスクリーンショットの機能が表示されるので Enterキー を押します。
    【Google Chrome】サイト全体をスクリーンショットする方法【拡張機能不要】 - 電脳情報局
1 Like
7

@Yoichi さん
@N2027 さん

お返事ありがとうございます。

お二人からご紹介いただいた方法ですが、残念ながら当方の環境では
うまくスクロール位置や全画面を取得することで出来ませんでした。

今更ですが、事前情報をお伝え出来ておらず申し訳ございませんが、
当方で画面スクロールを実施したい環境は通常のwebサイトではなく、
「Reactで作成したwebアプリケーション」となっております。
そのため、通常のwebサイトでは使えるものも使えなかったり、
うまく動作しなかったりと苦慮しております。

以上、よろしくお願いいたします。

8

どんな画面か想像つかないです。
手動でもできなければ、UiPathでも実現困難です。

9

Reactで作成されたWebアプリなら、
デベロッパーツールで縦長の全画面のキャプチャを撮ることは厳しいかもしれません。
あくまで想像ですが、対象の画面はスクロールが最下部まで行ったら、
次のコンテンツの読み込みが走り、スクロールが伸びるといった感じの画面ではないでしょうか？

あくまで仮説ですが、
JS挿入で、スクロールしながらキャプチャを撮っていく方法ならうまく実現できるかもしれません。
ただし、この方法だと縦長の１枚のキャプチャは取ることができません。
１枚ずつ別のキャプチャになってしまいます。（１枚にしたい場合、マージする方法検討が必要）
１、キャプチャを取得
２、指定した分スクロール
３、コンテンツ読み込みが走る場合があるので、数秒待機
４、ページ最下部でないことを確認
最下部でない場合、１に戻りキャプチャを取得
最下部の場合、処理終了

10

上記の方法だとうまくReactで作成されたアプリでもキャプチャ取れました。
１枚の縦長キャプチャではなく、
１ページごとに分割された複数枚のキャプチャを撮る形になります。
１案としてご検討頂けますと幸いです。

＜処理内容＞
※下記１～４をループ内に配置し、JSの戻り値をもとにループ処理を実行する
1、スクリーンショットを作成を実行
// 自動インクリメントの設定を忘れない（名前が重複すると上書きされるため）
2、ホットキー押下「pgdn」
// １ページ分DOWN
3、待機処理「5秒ほど」
// 追加のページロードが走る可能性があるため
4、JSスクリプト挿入
// 下記JSスクリプトを挿入する

function(element) {
  var html = document.querySelector('html');
  var bodyHeight = document.body.clientHeight; // bodyの高さを取得
  var windowHeight = window.innerHeight; // windowの高さを取得
  var bottomPoint = bodyHeight - windowHeight; // ページ最下部までスクロールしたかを判定するための位置を計算
  
  var currentPos = window.pageYOffset; // スクロール量を取得
  if (bottomPoint <= currentPos) { // スクロール量が最下部の位置を過ぎたかどうか
    // スクロール最下部の為、falseを返しループ処理終了
    return false;
  } else {
    // スクロール最下部ではない為、trueを返しループ処理続行
    return true;
  }
}
1 Like