本記事は、Microsoft Power Automate Advent Calendar 2024 12月2日担当分の記事です。
Microsoft Copilot を利用して、Power Automate for desktop の練習用ページを作る方法についてまとめてみました。
はじめに
Power Automate for desktop では、Edge や Chrome などの Web ブラウザーを利用して、Web ページの操作を自動化する機能があります。
これらの機能を利用した操作対象は、社内で利用しているシステムなど業務用の Web システムが対象になると思いますが、それを操作する前に初歩的な操作の確認など練習を行いたいこともあると思います。
そんな時に、Microsoft Copilot を利用して、Web ページ (html ページ) を作ってもらって、それを使って練習してみようというのが今回のテーマです。
Microsoft Copilot とは
Microsoft が提供する大規模言語モデルを利用した AI サービスの総称です。色々な Copilot が提供されていますが、今回は Web 情報から回答生成する無償で利用できるチャットベースの Copilot に関する話です。
https://copilot.cloud.microsoft/ (データ保護が備わった Copilot)
https://copilot.microsoft.com/ (コンシューマー向け Copilot)
前提事項
今回は、データ保護を備えた Copilot を利用しています。
私が試した範囲では、どちらも回答はほぼ同じ結果となりましたが、データ保護が備わった Copilot ではファイルの出力まで行ってくれたのでこちらを利用しています。こちらは、組織アカウント (Microsoft Entra ID アカウント) でサインインが必要です。)
コンシューマー向け Copilot でもメッセージの通り、生成されたコードを html の拡張子として保存すれば同じことになるのでどちらでも問題ないと思います。
<左:データ保護を備えた Copilot 右:コンシューマー向けCopilot>
Copilot に入力項目を持つ html ページを作成してもらう
Copilot に以下のプロンプトを送信します。
「出張申請を行うためのフォームを作成してください。
出張日、行先 (都道府県)、行先 (詳細)、交通手段、概算費用の項目を用意してください。」
出来上がったものを見てみると、お願いした項目が作成されています。
日付については、日付入力用の項目 (input type="date") として作成してくれます。
このままでも使えますが、見た目をカッコよくしてもらいます。
CSS で装飾されてカッコよくなりました。入力の難易度が変わるわけではないですが、カッコイイ方が個人的に練習のモチベーションが上がるので、ありがたいです。
テキストボックスばかりなので、都道府県をリスト入力項目に、行先をチェックボックス項目にしてもらいます。
プロンプト :「 都道府県をドロップダウンリストから選択できるようにしてください。交通手段を飛行機、新幹線、自動車から選択するチェックボックス項目にしてください。」
ただし、ここで html ファイルを出力できなくなりました。生成処理に時間がかかる場合は、このような傾向があります。今回は、都道府県を選択項目にしたため、出力される項目数が多くなったことが要因と思われます。
そんな場合も、html 自体は生成してくれるので、それをコピーして html ファイルとして保存します。
保存したファイルを開くとプロンプト通り、都道府県がリストから選択できるようになってます。都道府県の並びが都道府県コード順になってるのも嬉しいです。
Power Automate for desktop から操作してみる
作成した html ファイルをブラウザーの起動アクションで呼び出しします。
初期 URL の項目には、作成した html ファイルの保存パスを指定しますが、file プロトコルを含めた形式となります。
例えば、ファイルが "C:\Users\user01\Desktop\Page.html" というパスである場合、初期項目 URL は以下になります。(file:/// が先頭に必要で、/ が \ とする必要があります。)
file:///C:/Users/user01/desktop/Page.html
実行するとブラウザーが起動します。
次は、通常の Web ブラウザーの操作と同様に UI 要素を取得して、フォームへの入力を練習を行います。
[出張日] の入力項目の UI 要素を取得してみると、ID 属性が "trip-date" というものを指定しています。
html ファイルをテキストエディタやブラウザー上で右クリック > [ページのソース表示] を見ると、たしかに input 要素の ID "trip-date" が存在していることが確認でき、なぜこれがセレクターとして取得されたのか理解しやすくなります。
次に、取得した UI 要素に対して、実際に操作をしてみた結果を見てみます。問題無く操作ができました。
Copilot にテーブルを含む html ページを作ってもらう
自動化操作で、テーブル情報のスクレイピングを行うシナリオがあると思います。次は、テーブルを含めた html を生成してもらいます。
はじめに、そのもとになるデータを列挙します。今回は野菜を 50 個挙げてもらいます。
挙げてもらったデータを html として出力してもらいます。
出来上がったファイルがこちらです。
上記でも十分ですが、ページング機能を持つテーブルも多いため、ページングを含むページの作成を依頼します。
次へボタンが備わったページング機能付きのhtmlを生成してくれました。
Power Automate for desktop でページング機能を持つページを操作する
ページからのデータの抽出には、[Web ページからデータを抽出する] アクションを使ってデータを取得します。
対象のページを開き、テーブル要素と次のページ要素を取得します。
テーブルのスクレイピングが成功するか、実際に操作をしてみた結果を見てみます。ちゃんと成功しています。
おわりに
Microsoft Copilot を利用して、とても簡単に練習用サイトを作れることが確認できました。
シンプルなページを作成して、html 要素を学びながら UI 操作を学習することもできると思いますし、複雑な構成のページを作って、より難易度の高いシナリオの練習もできる可能性もあると思いました。