Power Automate for desktop「画像をData URLに変換する」

・ 実験室

#PowerAutomateDesktop #PA4d #Base64 #テキストの解析 #正規表現 #DataURL

概要

Power Automate for desktop の 2 月アップデートで「カスタムフォームの表示（プレビュー）」アクションが使えるようになりました。カスタムフォームは複数項目が入力できるほか、URL または DataURL を用いた画像表示が可能です。そこで今回はアップデートで新たに実装された「ファイルを Base64 に変換する」アクションを使用してDataURL を作成します。

01

画像を埋め込んだ例です。

02

環境

  • Windows 10 Pro 21H2
  • Power Automate for desktop 2.17.169.22042

Data URL について

https://developer.mozilla.org/ja/

データ URL

Data URI scheme

data:[<mediatype>][;base64],<data>

カスタムフォームの表示アクションで使える画像フォーマットは以下のとおりです。

拡張子 Data URL
jpeg data:image/jpeg;base64,data
jpg data:image/jpeg;base64,data
gif data:image/gif;base64,data
png data:image/png;base64,data

フロー

大まかな流れは次の3つです。

  • ファイルを選択　 1〜5
  • 拡張子を判定　 6〜10
  • タイプに応じた DataURL を生成しクリップボードに格納　 11〜14

flow

ファイルの拡張子を調べ、画像の拡張子にマッチした場合のみ Data URI scheme の MIME タイプに、マッチした拡張子を代入。base64 エンコードした画像データとつなげるという方針です。jpg の時は jpeg に置き換えます。

ファイルを選択する 1〜5 のアクションについては省略。

拡張子を判定する部分から見ていきます。

  1. テキストの解析 %SelectedFile.Extensions%を解析するテキストにします。 検索するテキストを(jpg)|(jpeg)|(gif)|(png)として拡張子がいずれかにマッチしているかを調べます。Switch アクションも検討しましたがアクション数が増えて見づらいためテキストの解析を使います。 3

  2. If

    いずれの拡張子にマッチしない場合、変数%Position%に（-1）が返ってくるので判定に使います。-1 の場合処理を停止します。

    4

  3. メッセージを表示

  4. フローを停止する

  5. End

  6. テキストを置換する

    拡張子が jpg の場合 jpeg に置換します。%Match%を上書きしています。大文字小文字を区別しないようにします。 5

  7. ファイルを Base64 に変換する

    新しいアクションを使います。 画像ファイルを Base64 文字列にエンコードします。

    6

  8. クリップボードテキストを設定 Data URI scheme に各変数を代入しクリップボードに格納します。

    data:image/%Match%;base64,%Base64Text%

    7

  9. メッセージを表示 処理終了のメッセージを表示しています。

動作確認

ブラウザの URL 欄にペーストしてみます。

8

画像が表示されれば成功です。

9

「FLAT ICON DESIGN」様の画像を使用させていただきました。 http://flat-icon-design.com/

まとめ

画像ファイルを Data URL に変換しました。 これまではスクリプト実行アクションに Base64 変換スクリプトを書いていましたが、新アクションの「ファイルを Base64 に変換する」により手軽に行うことができました。 「テキストの解析」アクションや「テキストを置換する」アクションを使うことで処理をまとめ、条件判定を少なく記述することができました。 次回、「カスタムフォームの表示（プレビュー）」アクションを使って画像を埋め込んでみます。