画面ショットの撮り方のコツというTIPSです。
Power Automate でステップ数が多いフローを使うとフロー図が縦に長くなります。このような縦に長いフロー図をドキュメントに載せたり、もしくはWebサイト上で掲載するために1枚の画面ショットに収めたいです。どうやりますか？
思いつく方法
- 何枚も画面ショットを撮って1枚につなげる
- NG。とても手間がかかるし、綺麗につなげるのは難しい
- 「縦に長いページの画面ショットを自動で撮る」フリーソフトを使う
- NG。ブラウザやOSの相性によってソフトが動かないことがある。そもそもフリーソフトを会社貸与PCで使うには許可がいることが多い
- Edgeの「Webキャプチャ」機能を使えばフルサイズの画面ショットが撮れる
- NG。「Webキャプチャ」機能はPower Automate のフロー図の画面では正常に動作しない
この投稿で解説するのは上記とは別の方法です。
実際に使っているところを見せてほしい
この投稿では下記のフローを例として、画面ショットを撮る手順を解説します。取得した画面ショットもこの投稿に掲載します。
wataruf.hatenablog.com
どうやって画面ショットの取得を実現するの？
開発者ツールのデバイスエミュレーションを使います。この機能を使って、目的のフローがすっぽり収まるサイズの画面を作成して、その画面で画面ショットを撮ります。
エミュレーションって何？
エミュレーションの説明は以下の通りです。
エミュレーションとは、ある装置やソフトウェア、システムの挙動を別のソフトウェアなどによって模倣し、代替として動作させること。代替となるソフトウェアなどのことを「エミュレータ」（emulator）という。
手順
カスタムデバイスを作成する（= フローが1画面で収まる画面を作成する）
まずは、画面ショットを撮りたいフローを開きます。各アクションの設定内容も画面ショットに含めたい場合は、次の手順に進む前に各アクションをクリックして設定値が見える状態にしてください。
次に、開発者ツールを開きます。「・・・」-「その他のツール」-「開発者ツール」をクリックします。
「デバイスエミュレーションの切り替え」ボタンをクリックします。
下図の赤枠部分をクリックします。このメニューはデバイス選択のドロップダウンです。
「編集」をクリックします。
「カスタムデバイスの追加」をクリックします。
デバイス名に任意の名前を入力します。ここでは例として「Power Automate の画面ショット取得用」とします。「ユーザーエージェント文字列」のドロップダウンで「Desktop」を選択します。入力が完了したら、「追加」をクリックします。
追加したデバイスが先ほどのドロップダウンメニューに表示されるので、ドロップダウンメニューから選択します。これでカスタムのデバイス画面でフローを表示している状態になりました。
作成したデバイス画面でフローを表示したままにして、デバイスの「編集」をクリックします。
フローが1画面に収まるように、デバイス画面のサイズを入力します。縦のサイズをおおまかに決めてから横のサイズを調整するのがおすすめです。
フローが収まる縦のサイズがピンとこないのでまずは適当に入力します。値を入力したら「保存」をクリックします。
指定した画面サイズでフローが表示されます。下図の例ではまだすっぽりと綺麗にはフロー図が収まっていないですね。
画面サイズを調整するために再度「編集」をクリックします。
フロー図が1画面で収まるまで画面サイズを調整しましょう。
調整中。。
1画面に収まるサイズになりました。「保存」をクリックします。
「閉じる」をクリックします。
カスタム画面を使って画面全体の画面ショットを実行する
「・・・」>「コマンドの実行」をクリックします。
コマンドの入力欄で「スクリーン」と手入力します。ドロップダウンで表示された「フルサイズのスクリーンショットをキャプチャする」を選択します。
5秒ほど待つと画面ショットが保存されます。
何で開発者ツールのコマンドを使って画面ショットを実行するの？
開発者ツールを閉じるとエミュレーションの機能も終了してしまうためです。カスタムデバイスの画面のまま画面ショットを取得するために、画面ショットは開発者ツールの機能で取得します。
取得した画面ショット
取得した画面ショットがこちらです。はてなブログの表示では自動で圧縮されてしまっているようですが、元の画像だと細部まで文字が読めるほど高い解像度で画像が撮れています。
情報元のサイト
この投稿で解説した方法はこちらのサイトで紹介されている内容をもとにしています。情報元のサイトではChrome を使っていますが、「これEdge でも応用できるのでは!! (｀・ω・´)」と考えてやってみました。
www.tachytelic.net
最後に
Power Automate のフローを取得する方法として解説しましたが、この方法であればブラウザで表示するものであれば他の場面でも使えます。SharePoint Online のサイトで縦のスクロールバーが表示する程長いページを取得するときにも使えます。
