Power Automate のフローを Web キャプチャする (とても困難でした) を簡単にするスクリプトで変えたものを元に戻すスクリプト II

この記事は以前に書いた記事の内容、今やってみると動作しなかったのでアップデートの記事です。 rksoftware.hatenablog.com

Power Automate のフローの Web キャプチャは簡単です。

■ 罠 (トラップ)

ただ一つ大きな罠があるだけです。
課題は、1 画面に収まらない場合です。たいていのフローは 1画面に収まらないと思うのですがその際、画面に見えている領域しかキャプチャできないという点です。

■ 解決策

この課題に対するソリューションは以前に書きました。

また、その手順をスクリプトで行えるスクリプトも書きました。

■ 変えたら戻す。それが Web ページ改編のルール

そんなルールなどないのだけれども。

まあそのまま編集し続けると何か起こるかもしれません。ブラウザをリロードすれば元通りなわけで安心なのですけれどもそれではアレなので、ちょっとコレを作ってみました。

document.getElementsByClassName("main-container")[0].style.height = "100%"; document.getElementsByClassName("manage-flow-section")[0].style.height = null;

このスクリプトで元に戻ります。実行の仕方は以前の記事を参照してください。

■ 簡単ですね

簡単ですね。

Power Automate のフローを Web キャプチャする (とても困難でした) を簡単にするスクリプト II

この記事は以前に書いた記事の内容、今やってみると動作しなかったのでアップデートの記事です。 rksoftware.hatenablog.com

Power Automate のフローの Web キャプチャは簡単です。

■ 罠 (トラップ)

ただ一つ大きな罠があるだけです。
課題は、1 画面に収まらない場合です。たいていのフローは 1画面に収まらないと思うのですがその際、画面に見えている領域しかキャプチャできないという点です。

■ 解決策

この課題に対するソリューションは以前に書きました。 rksoftware.hatenablog.com

しかしこのソリューション、要素を探してチェックをオフにするという手作業が発生します。しかも 2 回も！ 面倒です。

■ スクリプト作りました

Web ページ内のたいていのことはスクリプトで何とかなります。皆さん大好き JavaScript です。

document.getElementsByClassName("main-container")[0].style.height = "auto"; document.getElementsByClassName("manage-flow-section")[0].style.height = "auto";

これをブラウザのコンソールに貼り付けて実行します。

■ 実行方法

• フローの編集ページを開きます。
• F12 キーを押して開発者ツールを開きます。
• 開発者ツールの「コンソール」タブを開きます。
• 前述のスクリプトを貼り付けます。
• Enter キーを押して実行します。

スクロールが画面全体になりました。

■ 簡単ですね。

簡単ですね。

関連記事

Power Automate のフローを Web キャプチャする (とても困難でした) を簡単にするスクリプトで変えたものを元に戻すスクリプト

rksoftware.hatenablog.com

Power Automate のフローを Web キャプチャする (とても困難でした) II

この記事は以前に書いた記事の内容、今やってみると動作しなかったのでアップデートの記事です。 rksoftware.hatenablog.com

Power Automate のフローの Web キャプチャは簡単です。

■ 罠 (トラップ)

ただ一つ大きな罠があるだけです。
課題は、1 画面に収まらない場合です。たいていのフローは 1画面に収まらないと思うのですがその際、画面に見えている領域しかキャプチャできないという点です。

■ ネットで検索

Web キャプチャ (Web ブラウザで表示中のページを画像として保存するための機能) 自体の情報は豊富です。1 画面に収まらないページを全面 (スクロールしなければ見えない領域も含めて) キャプチャする方法はネットで検索すればすぐに出てきます。実際他のサイトではそれで撮れます。

撮れた画像の例 1 枚目

撮れた画像の例 2 枚目 (1 枚目の状態からスクロールしてもう一度キャプチャ)

しかしその通りにやってもこのように細切れにしか撮れません。それはなぜでしょう？

■ そもそも画面に収まっている

実は Power Automate のフローの編集画面は 1 画面に収まっていないように見えますが、実は 1 画面に収まっています。

ただ、収まっている画面の中にスクロールする領域があるだけ

なのです。

前述の画像のスクロールバーを見てもらえば、Web ブラウザの普通の全体のスクロールバーではなく一部分だけに対してのスクロールバーになっていることがわかります。このため、ブラウザとしては画面に収まっているようにしか見えないという理屈だと思います。

■ 対策概要

理由がわかれば簡単な話です。Web ページのソースをいじって一部分だけのスクロールをなくしてしまえばいいのです。簡単です。
ブラウザで F12 キーを押して開発者ツールを表示してやっていきます。

■ ソースを書き換える

• フローの編集画面を開いて F12 キーで開発者ツールを開きます。
• 「要素」タブを開きます。
  　
• main-container という class の設定されている div 要素を探します。
• 開発者ツール右ペインで「スタイル」タブを開きます。
• height: 100%; を探しチェックを外します。

• manage-flow-section という class の設定されている div 要素を探します。
• height: calc(100vh - 48px); を探しチェックを外します。

これだけです。簡単ですね。

■ Web キャプチャを撮る

Edge でやっていきます。

ブラウザのメニューから Web キャプチャ を選択します。

ポップアップで選択肢が表示されるので ページ全体をキャプチャ を選択します。

フロー全体がキャプチャされます。やったね！

保存した画像はこんな感じです。この画像が欲しかった！

■ 簡単ですね

簡単ですね。

関連記事

Power Automate のフローを Web キャプチャする (とても困難でした) を簡単にするスクリプト

rksoftware.hatenablog.com

Power Automate のフローを Web キャプチャする (とても困難でした) を簡単にするスクリプトで変えたものを元に戻すスクリプト

rksoftware.hatenablog.com

Power Automate で変数 (的なもの) のスコープを絞れるか

結論、できません。

■ 変数的なもの

Power Automate でイミュータブルな変数的なもの (定数的なもの) を作る方法を考えました。

rksoftware.hatenablog.com

結構使える考え方ではないかと思います。

■ 変数のスコープは最小限にするそれがプログラムのルール

この変数的なもの、フローのトップレベル以外でも使えます。ということになると当然期待するのはスコープがそのレベルに絞られてくれること。当然の期待です。
実験してみましょう。

■ 実験

条件の分岐の中とスコープの中の 2 箇所で「 作成 」してみました。そしてその値を末尾で使用するフローを書いています。

条件が真の場合 (条件の中の作成を通る場合)

条件が偽の場合 (条件の中の作成を通らない場合)

どちらの場合でも、末尾のトップレベルの場所で使用できてしまいました (偽の場合は作成されていないので値はありませんが)。

■ 難しいですね

難しいですね。

Power Automate で try { } catch { } finally { }

Power Automate も失敗します。というかどんなプログラムも失敗します。しかし管理できている失敗にはそれに対応した処理を行うことができます。
※管理できていない失敗はそのままプログラムを終了するのがプログラムの鉄則です。管理できていない失敗が起きたまま動作を継続すると、サーバー上に蓄えたデータが消失する、重要な情報が流出するなど大変なことが起こる可能性があります。

■ 例外処理

多くのプログラミング言語で採用されている管理できている失敗に対応する方法、それは何でしょう？ そう、例外処理です。try { } catch { } finally { } といえば多くの方が「ああ、アレね」と思うのではないでしょうか？

Power Automate でもそれに相当するアクションがあります。「 スコープ 」 です。

■ 例

次のようにスコープを 3 つ並べます。

上の画像でアクションにつけている名前のようにそれぞれが役割を果たします。

■ 役割の設定とスコープの関連付け

その役割の設定と 3 つのスコープを関連付ける方法は簡単です。

「スコープ (catch { } に相当)」 アクションの横の 「・・・」 をクリックしてポップアップメニューから 「 実行条件の構成 」 を選びます。

見ればわかるでしょう。適切なチェックを ON にすることで設定ができます。

■ 設定

こんな感じに設定すれば try { } catch { } finally { } 的な感じでしょう。

■ 簡単ですね

簡単ですね。

Power Automate で複数の定数を 1 アクションで宣言したっぽい感じにする

Power Automate の変数は非常に便利です。プログラミング言語の変数と同じくらい便利です。

■ 存在感がある

しかし、プログラミング言語で 1 行に 1 定数を宣言するよりも非常に高さが必要になるという特徴があります。

3 つ宣言したらこの存在感。

■ JSON の解析というソリューション

そんな時、「 JSON の解析 」アクションが使えるかもしれません。

こんな感じに。あたかも 1 つのアクションで 3 つの定数を宣言したかのようにできている気がします。

■ スキーマ欄の埋め方

「 JSON の解析 」 はとても素晴らしいアクションですが、「 スキーマ 」 を設定しなければならないことが意外と敷居が高くもあります。
JSON を手書きするのは皆さん余裕でしょうが、JSON のスキーマを手書きしている人は意外と少ないのではないでしょうか？

大丈夫です。

「 JSON の解析 」 はとても素晴らしいアクションなので 「 サンプルから生成 」 があります。
例えばこの画像のように、次のような JSON を使って 3 つの定数を作る場合を考えます。

{ "const01": 1, "const02": "埼玉", "const03": true  }

「 サンプルから生成 」 をクリックして

表示さえたポッポアップに、前述の使いたい JSON を貼り付けて 「 完了 」。

これでスキーマが設定されました。

■ 簡単ですね

簡単ですね。

関連記事

rksoftware.hatenablog.com

rksoftware.hatenablog.com

Power Automate で先頭以外でイミュータブルな変数 (っぽいもの) を宣言する

Power Automate の変数は非常に便利です。プログラミング言語の変数と同じくらい便利です。

■ 先頭でしか宣言できない

そんな便利な変数ですが、少し不便な仕様もあります。フローのトップレベルでしか宣言できません。現実的には先頭で全部宣言するようなフローになると思います。
また、ミュータブルな変数しか存在しないという点も注意が必要です。

参考

rksoftware.hatenablog.com

■ 作成を使ってみよう

そんな時に使えそうなのが「 作成 」アクションです。説明より実践してみましょう。

これで非トップレベルにイミュータブルな値 (定数ともいえるかもしれない) を作れた気がします。

関連記事

rksoftware.hatenablog.com rksoftware.hatenablog.com