Power Automate for desktop「Color Pickerを利用したData URLの生成」

概要

Microsoft Power Automate for desktopでAdaptive Cardsの背景用にData URLを生成するツールをつくりました。Microsoft PowerToysのColor Pickerユーティリティと@kinuasaさんが公開されている色情報からBase64データにエンコードするスクリプトHexColorCodeToBase64.ps1を組み合わせました。今回はクリップボードのアクションを多用しています。

gif

Adaptive Cards Designerの各パーツのBackground ImageのURLに貼り付けて使います。

きっかけなど

「気ままに勉強会 #21」に参加させていただきました。Miyake Mitoさんが登壇されAdaptive Cardsについて熱くお話しされていました。丁寧にハンズオンされていてとても楽しかったです。折角カードをデザインするなら、背景色を自由に、簡単に、変更できたらとおもいつくりました。いつもきっかけをいただき感謝です!次回も楽しみです。

環境など

  • Windows 10 pro 21H2
  • Microsoft Power Automate for desktop 2.20.141.22151
  • Microsoft PowerToys 0.59.1
  • 2022年6月の情報です。
  • エラーハンドリングはしていません。
  • 自己責任でお願いいたします。

PowerToysの設定

Docs「Microsoft PowerToys: Windows をカスタマイズするためのユーティリティ」を参考にインストールします。わたしはGitHubからPowerToysSetup-0.59.1-x64.exeをインストールしました。

次にPowerToysを設定します。 必ず「アクティブ化の動作」を「色の選択のみ」にするのと規定の色の形式をHEXにします。

フローの作成

次の4ステップで構成します。

  1. 初期化
  2. PowerToysのColor Pickerを起動
  3. クリップボードをモニター
  4. Data URLを生成

flow

  1. コメント 初期化

  2. クリップボードの内容をクリア

  3. 変数の設定

  4. コメント PowerToysのColor Pickerを起動

  5. キーの送信

    キーの送信を使ってWin+Shift+CでColor Pickerを起動します。{LWin}({LShiftKey}({C}))

  6. キーを押す/離す

    今回のポイントはこのアクションです。前述キーの送信アクションを使用後、Win,Shiftキーが押したままの状態になるようです。そこでこのアクションで解放します。

  7. コメント クリップボードをモニター

  8. ループ条件

    `%ClipbordText%‘に値が格納されるまでループし続けます。Color Pickerで色が選択されるとクリップボードに値が格納されループから抜けます。

  9. クリップボードテキストを取得

  10. End

  11. コメント Data URLの生成

  12. PowerShellスクリプトの実行

    スクリプト全文と解説は@kinuasaさんのブログ「初心者備忘録[Power Automate for desktop]カスタム フォームの背景色を自由に設定する方法」を参照ください。前のアクションを受けて、変数部分のみ次のように変更します。"#fff68f"->"#%ClipboardText%"

  13. クリップボードテキストを設定

    Base64エンコードされたデータをData URLとしてクリップボードに格納します。 data:image/png;base64,%PowershellOutput.Trimmed%

まとめ

PowerToysのColor Pickerユーティリティときぬあささんの作成されたHexColorCodeToBase64.ps1を組み合わせてData URL生成ツールをつくりました。Adaptive Cardsのコンテナーやカラムの背景色を変更したいとき結構いい感じです。

デスクトップでおこなう小さな作業をサッと「組み合わせてつなぐ」のはPA4dの得意な部分です。お試しいただければ幸いです。

今回の記事を書くにあたり、スクリプト使用についてきぬあささんにお願いしたところ快諾していただきました。この場をかりてお礼申し上げます。ありがとうございました!

参考