アクティビティ
最新
フォーム内で画像を表示する 目次
ロゴ
ワークフローに関するアクティビティ
最終更新日 2023年12月11日

フォーム内で画像を表示する

埋め込みによりフォーム内に画像を表示する方法は以下のとおりです。Base64 の画像の場合は、カスタム JavaScript を使用して表示します。

画像を埋め込む

このチュートリアルでは、HTML コンポーネントを使用して、フォーム内に画像を埋め込む方法を説明します。

  1. 画像ファイルを、使用しているフォームと同じフォルダーに追加します。

    この例では、display_PDF_file_form.jpg という名前の画像をアップロードしました。

  2. フォームに [HTML 要素] コンポーネントを追加します。
  3. [表示] タブの [コンテンツ] に、コード スニペット「<img id="myimage" src="display_PDF_file_form.jpg">」を入力します。「display_PDF_file_form.jpg」を、表示する画像の名前で置き換えます。

    width および height 属性を使用して、フォーム内の画像の幅と高さをさらに調整できます。

Base64 の画像を表示する

このチュートリアルでは、UiPath フォームを使用して Base64 の画像を動的に表示する方法について説明します。このオートメーションでは、HTML 要素と 2 つのボタンを含むカスタムのフォーム ファイルを作成し、表示する画像をユーザーが選択できるようにします。さらに、別のワークフローを作成して画像を Base64 形式に変換します。この変換用ワークフローは他のトリガー ワークフローで呼び出され、フォーム内に表示する前に画像の前処理を行います。
前提条件: Studio プロジェクトのフォルダーに表示する画像を追加します。
  1. 新しいフォームを作成し、[HTML 要素] を 1 つと [ボタン] コンポーネントを 2 つ追加します。
    1. [HTML 要素] を編集し、指定の HTML コードを [コンテンツ] フィールドに追加します。カスタム JavaScript のプレースホルダー名として myImage を使用します。
      <img id='myImage'  width='100' height='100' /><img id='myImage'  width='100' height='100' />
    2. 2 つのボタンの [アクション][イベント] に設定し、2 つの異なる画像を表示するためのトリガーにします。
  2. Main ワークフローに [フォームを表示] アクティビティと [ローカル トリガーを実行] アクティビティを追加し、フォームを表示してプロジェクト内のすべてのトリガーを有効化するようにします。
  3. ConvertImageToBase64」という名前の別のワークフローを作成して、プロジェクトの画像を Base64 エンコードに変換します。
    1. データ マネージャーで次の 2 つの String 引数を作成します。
      名前 方向 データ型 既定値 説明
      in_Image In String "uipath.png" (ユーザーがボタンをクリックする前に表示する既定の画像) この引数は、変換する画像へのパスを保持します。
      Base64Image Out String NA この引数は、変換結果の Base64 の画像を保持します。
    2. [画像を読み込み] アクティビティを追加し、画像を読み込んでローカル変数に格納するようにします。[ファイル名] フィールドに、データ マネージャーで作成した in_Image を入力します。[出力] フィールドで、「loadedImage」という名前のローカル変数を作成します。この変数の型を UiPath.Core.Image に設定します。
    3. [代入] アクティビティを追加します。[保存先] フィールドに出力引数 Base64Image を入力し、[保存する値] フィールドにローカル画像変数と画像変換メソッド .Base64 を入力します。
      この例では、「loadedImage.Base64」と入力します。
  4. トリガー ワークフローを作成する前に、「templateSRC」という名前の String 型グローバル変数を作成し、既定値"data:image/png;base64,<base64>" に設定します。
    templateSRC 変数は、 [HTML 要素] コンポーネントで宣言されたソース属性 (src) の値のテンプレートとして機能します。
  5. 1 つ目の [ボタン] コンポーネント用に「showUiPathShortLogoTrigger」という名前のトリガー ワークフローを作成します。
    1. [フォーム トリガー] アクティビティを追加し、追加したボタンの 1 つに [イベント] を設定します。
    2. [ワークフローを呼び出し] アクティビティを追加し、画像を Base64 エンコードに変換するワークフローを呼び出します。呼び出しには以下の引数を使用します。
      名前 方向 入力 値 (Value)
      in_Image In String uipath.png (変換してフォームに表示するために使用する画像)
      Base64Image Out String base64str (ローカル String 変数)
  6. [フォームのスクリプトを実行] アクティビティを追加し、カスタム JavaScript を使用して Base64 の画像を表示します。[ソース] フィールドで、次のスクリプトを使用します。
    "document.getElementById('myImage').src='"+templateSRC.Replace("<base64>",base64str)+"'""document.getElementById('myImage').src='"+templateSRC.Replace("<base64>",base64str)+"'"
    上記のスクリプトでは、template_SRC 値内のプレースホルダー <base64> が実際の Base64 の画像データ (base64str) で置換されます。その後、結果として生成される変更後の template_SRC は、ID が 'myImage' の HTML 画像要素のソース (src) 値として割り当てられます。この操作では、画像のソースを動的に更新して、Base64 でエンコードされた画像を表示します。
  7. もう 1 つのボタン用に別のトリガー ワークフローを作成します。
    この例では、ワークフローに「showUiPathLogoTrigger」という名前を付けます。
    1. [フォーム トリガー] アクティビティを追加し、追加したボタンの 1 つに [イベント] を設定します。
    2. [ワークフロー ファイルを呼び出し] アクティビティを追加し、以下の引数を使用して ConvertImageToBase64 ワークフローを呼び出します。
      名前 方向 入力 値 (Value)
      in_Image In String uipath2.png (変換してフォームに表示するために使用する画像)
      Base64Image Out String base64str (ローカル String 変数)
  8. [フォームのスクリプトを実行] アクティビティを追加し、カスタム JavaScript を使用して Base64 の画像を表示します。[ソース] フィールドで、次のスクリプトを使用します。
    "document.getElementById('myImage').src='"+templateSRC.Replace("<base64>",base64str)+"'""document.getElementById('myImage').src='"+templateSRC.Replace("<base64>",base64str)+"'"
    このスクリプトは、プレースホルダー <base64> を実際の Base64 の画像データで置換し、画像のソースを動的に更新することにより、 template_SRC の値を変更します。

ワークフローの例

この手順に従ってチュートリアルをご自身で試してみるには、こちらのサンプル プロジェクトをご覧ください。

  • 画像を埋め込む
  • Base64 の画像を表示する
  • ワークフローの例
ロゴ
サポートを受ける
ロゴ
RPA について学ぶ - オートメーション コース
ロゴ
UiPath コミュニティ フォーラム
UiPath ロゴ (白)
信頼とセキュリティ
© 2005-2023 UiPath. All rights reserved.