Apps (アプリ)
最新
カスタム HTML - Automation Cloud 最新
Banner background image
ロゴ
Apps ユーザー ガイド
最終更新日 2024年2月21日

カスタム HTML

カスタム HTML コントロールは上級ユーザーを対象としており、HTML、CSS、および JavaScript プログラミング言語の柔軟性を提供して、ビジネス ニーズに応じてカスタムの対話型コントロールを作成します。 このコントロールには、HTML、CSS、および JavaScript コード専用のエディターが含まれており、URL を介して外部でホストされている CSS および JavaScript ファイルを組み込むという利点があります。

全般

  • コード エディターを開く - HTML、CSS、JavaScript コードを追加するための 3 パネルのエディターを開きます。

  • アクセシビリティ対応のラベル - コントロールの説明です。 このプロパティは、アクセシビリティを強化するためにスクリーン リーダーによって使用されます。

  • 非表示 - true の場合、実行時にコントロールが非表示になります。

  • 無効 - true の場合、実行時にコントロールが非アクティブになります。 HTML、CSS、および JavaScript のコンテンツは読み込まれますが、クリックなどのユーザー操作には応答しません。

イベント

イベントはありません。

スタイル

  • コントロールの配置 - 既定では、親の配置を継承します。親とは異なる配置を設定することもできます。既定の親の配置に戻すには、現在優先されているオプションの選択を解除します。

    注: 配置は、親に対して選択したレイアウト ([縦方向]/[横方向]) によって異なります。
  • 枠線 - コントロールの枠線です。 枠線の太さと半径を設定できます。
  • マージン - コントロールのマージンです。既定では 4px のマージンが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティの組み合わせは、[マージン] セクションの右側にある [リンク] ボタンをクリックして解除できます。

  • サイズ - コントロールの幅と高さです。既定では、サイズは [auto] に設定されています。最小値または最大値を設定するには、3 点リーダー メニューのアイコン (...) をクリックします。

カスタム HTML 用のコード エディター

カスタム HTML コントロールのコード エディターには、HTML、CSS、および JavaScript プログラミング言語でコードを入力するための 3 つのパネルが用意されています。 各エディターは、IntelliSense、または自動コード補完、および構文の強調表示をサポートします。

パネルのコードがプロジェクトにコンパイルされ、プレビュー用に Apps Studio に表示されます。 コントロールの機能を確認するには、アプリをプレビューします。

docs image
重要:
  • 各エディターの最大コンテンツ サイズは 5 MB です。 コンテンツがこのサイズを超えると、変更を保存できなくなります。

  • IntelliSense は、HTML エディター内に記述された CSS および JavaScript コードでは機能しません。

外部リソースの追加

スタイルまたはスクリプトが既に定義されている場合は、対応する CSS パネルまたは JavaScript パネルにコードを記述しなくても、コントロール内でそれらを参照できます。

To reference existing .cssor .js files:
  1. カスタム HTML コントロールの コード エディター で、[ 外部リソース ] タブに切り替えます。

  2. [CSS] セクションで、外部 CSS ファイルを追加します。 ファイルは、アプリが実行されている場所での互換性と可用性を確保するために、ネットワークからアクセス可能な URL でホストされている必要があります。

  3. [JavaScript] セクションで、外部スクリプト ファイルを追加します。 ファイルは、アプリが実行されている場所での互換性と可用性を確保するために、ネットワークからアクセス可能な URL でホストされている必要があります。

  4. すべての外部リソースの追加が完了したら、[ 保存] をクリックします。

docs image

Tab キーのアクセシビリティ ショートカット

既定では、Tab キーを押すと、現在のエディター内にタブ スペースが追加されます。 Tab キーの動作をカスタマイズするには、次のショートカットを使用します。

OS

ショートカット

動作

Windows

Ctrl + M

パネル間を移動し、エディターに表示されているボタンにフォーカスを変更するよう Tab キーに指示します。 Ctrl + M キーをもう一度押すと、既定のタブ動作に戻ります。

macOS

Ctrl + Shift + M

パネル間を移動し、エディターに表示されているボタンにフォーカスを変更するよう Tab キーに指示します。 Ctrl + Shift + M キーをもう一度押すと、既定のタブ動作に戻ります。

HTML エディター

In this panel you can input the structure of your control, which is usually contained inside the <body></body> tags of a HTML code block.

たとえば、インタラクティブな円グラフのコンテナー要素をアプリに追加するには、次の HTML スニペットを使用します。

<canvas id="myChart" class="chart-container" style="width:100%;max-width:600px"></canvas><canvas id="myChart" class="chart-container" style="width:100%;max-width:600px"></canvas>

場所:

  • id="myChart" は、HTML 要素内部に対話型の円グラフを生成する JavaScript の「myChart」要素を指します。 詳しくは、「JavaScript エディター」をご覧ください。
  • class="chart-container" は、HTML要素内に円グラフのスタイルを追加する「チャートコンテナ」CSSクラスを参照します。 詳しくは、「CSS エディター」をご覧ください。

CSS エディター

このパネルでは、コントロールのスタイルと内部の要素を入力できます。

たとえば、円グラフに色と罫線を追加するには、次の CSS スニペットを使用します。

.chart-container {
    background-color: #f3f7e9;
    border: 1px solid #cccccc;
}.chart-container {
    background-color: #f3f7e9;
    border: 1px solid #cccccc;
}

JavaScript エディター

このパネルでは、タイムリーなコンテンツ更新、マップ、アニメーション化された 2D/3D グラフィックスなど、コントロールの対話型部分を作成できます。

たとえば、世界中のアップル製品の売上の円グラフを作成し、選択したスライスの値を表示するようにデザインするには、次のようにします。

  1. 次の JavaScript 外部リソースを追加します。

    https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.jshttps://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js
  2. 次の JavaScript スニペットを使用します。

    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'pie',
      data: {
        labels: ['iPhone', 'iPad', 'MacBook', 'Apple Watch', 'AirPods'],
        datasets: [{
          label: 'Sales',
          data: [120000, 80000, 50000, 40000, 30000],
          backgroundColor: [
            '#5CB85C', // Green
            '#F0AD4E', // Orange
            '#D9534F', // Red
            '#5BC0DE', // Light blue
            '#999',    // Gray
          ],
          borderColor: '#fff',
          borderWidth: 2,
        }],
      },
      options: {
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: 'Apple Products Sales',
          },
        },
      },
    });const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'pie',
      data: {
        labels: ['iPhone', 'iPad', 'MacBook', 'Apple Watch', 'AirPods'],
        datasets: [{
          label: 'Sales',
          data: [120000, 80000, 50000, 40000, 30000],
          backgroundColor: [
            '#5CB85C', // Green
            '#F0AD4E', // Orange
            '#D9534F', // Red
            '#5BC0DE', // Light blue
            '#999',    // Gray
          ],
          borderColor: '#fff',
          borderWidth: 2,
        }],
      },
      options: {
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: 'Apple Products Sales',
          },
        },
      },
    });

カスタム HTML での変数の使用

カスタム HTML コントロールと他のコントロールまたは連携との間の通信を確立するには、 変数を作成し 、組み込み関数 setVariable()getVariable()onVariableChange() を使用することをお勧めします。

getVariable()

JavaScript エディターで、この関数を使用して既存の変数の値を取得します。

たとえば、変数の値を internalValueに渡すには、次の JavaScript スニペットを使用します。
async function init() {
  let internalValue = await App.getVariable('<app_variable_name>');
}
init();async function init() {
  let internalValue = await App.getVariable('<app_variable_name>');
}
init();
注:
  • getVariable() 関数は非同期であるため、awaitを使用する必要があります。
  • If you call getVariable() inside a function, make that function async. In the example provided, we created the init() function and immediately invoked it.
  • 最上位レベルで getVariable() を呼び出す場合は、 async 関数内に埋め込みます。
無効な変数名などのエラーを処理するには、try-catch ステートメントを使用します。 例えば:
async function init() {
  try {
    const value = await App.getAppVariable("test");
  } catch (e) {
    console.log("Error in evaluating app variable:", e);
  }
}
init();async function init() {
  try {
    const value = await App.getAppVariable("test");
  } catch (e) {
    console.log("Error in evaluating app variable:", e);
  }
}
init();

setVariable()

JavaScript エディターで、この関数を使用して既存の変数に値を設定します。 最初の引数は変数名で、2 番目の引数は設定する値です。

async function setValue() {
  await App.setVariable('<app_variable_name>', <app_variable_value>);
}
setValue();async function setValue() {
  await App.setVariable('<app_variable_name>', <app_variable_value>);
}
setValue();
注:
set 操作が完了するのを待ってから他のコードを実行するには、 awaitを使用します。
無効な変数名や、変数と設定値の間の型の不一致などのエラーを処理するには、try-catch ステートメントを使用します。 例えば:
try {
  App.setVariable('<app_variable_name>', <app_variable_value>);
} catch (e) {
  console.log("Error in setting app variable:", e);
}try {
  App.setVariable('<app_variable_name>', <app_variable_value>);
} catch (e) {
  console.log("Error in setting app variable:", e);
}

onVariableChange()

JavaScript エディターで、この関数を使用して、既存の変数値の変更をリッスンし、最新の変数値にアクセスします。

App.onVariableChange('<app_variable_name>', value => {
  console.log("Latest value: ", value);
});App.onVariableChange('<app_variable_name>', value => {
  console.log("Latest value: ", value);
});
次の例では、 onVariableChange() によって返される関数を deregister 変数に代入します。 次に、変数の変更のリッスンを停止する場合は、 deregister() 関数を呼び出すことができます。
const deregister = App.onVariableChange('<app_variable_name>', value => {
  console.log("Latest value: ", value);
});

// To stop listening for value changes, the deregister function can be invoked like below
deregister();const deregister = App.onVariableChange('<app_variable_name>', value => {
  console.log("Latest value: ", value);
});

// To stop listening for value changes, the deregister function can be invoked like below
deregister();
注:
  • リスナーは、カスタム HTML コントロールが完全にレンダリングされた後に開始されます。 カスタム HTML コントロールが初期化される前に変数の値が変更された場合、更新された値はキャプチャされません。

    最新の変数値を取得するには、onVariableChange()を呼び出す前に getVariable() を呼び出します。
  • HTML コントロールとその中の関数は、実行時にコントロールが表示された後に初期化されます。

Variable types

App variable type

Sample response from variable functions

Text (String)

"Hello world"

UInt64 (Int)

100

Decimal number

50.25

True/False (Boolean)

True

DateOnly

2024-01-02

(Format: YYYY-MM-DD)

DateTimeOffset

2024-01-06T09:54:41.9170000Z

(Equivalent JS Format: Date object ISO string)

AppsFile - value of a File picker control JS File object
docs image
AppsFile - value created from URL

例:

new AppsFile("https://image.jpg")new AppsFile("https://image.jpg")

File object:

{FileSize: 0, Name: "", URL: "https://image.jpg", __infoType: "$metadata"}{FileSize: 0, Name: "", URL: "https://image.jpg", __infoType: "$metadata"}

GUID

"5637F7DB-391D-4C8B-805D-0A918531CA3E"

List(Of string)["Banana", "Kiwi", "Apple", "Lemon"]
ListSource(Of <Entity>)
{
  data: [{Name: "John", Age: "28", ...},{Name: "Kane", Age: "48", ...}],
  totalRecords: 2
}{
  data: [{Name: "John", Age: "28", ...},{Name: "Kane", Age: "48", ...}],
  totalRecords: 2
}
<Entity> (Single entity row)
{
  Name: "John", 
  Age: "28", 
  ...
}{
  Name: "John", 
  Age: "28", 
  ...
}
ListSource(Of <Choiceset>)
{
  data: [{DisplayName: "Male", Id: "00F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Male", ...}, {DisplayName: "Female", Id: "01F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Female", ...}],
  totalRecords: 2
}{
  data: [{DisplayName: "Male", Id: "00F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Male", ...}, {DisplayName: "Female", Id: "01F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Female", ...}],
  totalRecords: 2
}
Datatable
[{From: 'Ahmedabad', To: 'Azua', ...},{From: 'banglore', To: 'Dominican Republic',...},...][{From: 'Ahmedabad', To: 'Azua', ...},{From: 'banglore', To: 'Dominican Republic',...},...]

カスタム HTML のベスト プラクティス

  • カスタム HTML コントロールにはクライアント側でアクセスできるため、機密データを含めないでください。

  • <html> タグと <head> タグは HTML エディター内で使用しないでください。コードは自動的に <body> タグ内に追加されます。
  • [ 外部リソース ] タブに、Bootstrap、jQuery、その他の JavaScript SDK などの外部リソースの CDN URL を追加します。

  • 変数の変更のリッスンを停止する場合は、 deregister() 関数を使用します。
  • アプリケーションの速度を低下させないようにし、コントロールの応答性を維持するために、大きなデータ ループを回避します。

  • DOM 要素の使用を可能な限り最小限に抑える: 必要な場合にのみ DOM 要素を作成し、古くなったら削除します。

  • 標準のスクロールよりも大規模なデータセットには、無限スクロールまたは仮想スクロールを使用します。

  • クリーンで最適化された冗長性のないコードを作成して維持します。

機能制限

  • カスタム HTML には、制御ルールをトリガーする機能はありません。

  • コントロールを Apps に接続するには、変数関数 getVariable()setVariable()onVariableChange()を使用する必要があります。
  • フル コントロールをコピーして貼り付けるか、コントロールを使用してページを複製します。 コントロールは、[ スタイル] タブのプロパティのみと共に貼り付けられます。 HTML、CSS、JavaScript のコードを手動で貼り付ける必要があります。

  • プロセスまたはキューのデータにアクセスするには、プロセスまたはキューのすべてのプロパティに変数を割り当てる必要があります。

  • HTML コントロールのサイズは、ポップアップまたはドロップダウン メニューの表示に合わせて動的に調整されないため、これらのメニューに合わせて HTML コントロールのサイズを設定する必要があります。

  • デザイン時に HTML コントロールを操作することはできません。

  • setVariable()getVariable()、および onVariableChange() 関数は、実行時にのみ動作します。
  • 変数名の変更や変数の削除は、コード エディターに自動的に反映されません。 現在の変数でコードを手動で更新する必要があります。

  • HTML コントロールからファイルを格納する変数は、[ ストレージ バケットへファイルをアップロード ] ルールや Data Service エンティティの [ ファイルの種類 ] フィールドへの入力には使用できません。

  • このコントロールは、変数を使用する方法でのみ、プロセス、キュー、ストレージ バケットなどの他の UiPath コンポーネントと通信できます。

  • LESS または SCSS を使用して前処理された CSS コードは、HTML コントロールと互換性がありません。

  • 以下の API は、セキュリティ上の理由により、使用すると警告なしに失敗します。

    • download 属性を使用したダウンロード
    • Window.alert()Window.confirm()Window.print()Window.prompt()を使用してモーダルを開きます。
    • ポインターと向きのロック

    • トップレベルのブラウザコンテキストの移動

    • requestFullscreen()を使用して全画面表示に入る
    • MediaDevices.getDisplayMedia()を使用した画面キャプチャ
    • MediaDevices.getUserMedia()を使用してカメラまたはマイクにアクセスする
    • 支払いのリクエスト

    • navigator.geolocation()を使用して場所にアクセスする
    • navigator.share() を使用したデータの共有

カスタム HTML コントロールのコードのデバッグ

カスタム HTML コントロールのコンソールログの追加とフィルタリング

  1. JavaScript エディターで console.log() を追加します。
  2. App Studio セッションで、F12 を押してブラウザー コンソールを開き、[ コンソール ] タブを選択します。
  3. コンソール設定で、[ 選択されたコンテキストのみ ] チェックボックスをオンにします。
  4. コンソール ページの上部にある [JavaScript] コンテキスト ドロップダウンから、目的の HTML コントロールの [ html-control-base.html ] オプションを選択します。

選択したコントロールのログがコンソールに表示されます。

詳細については、ビデオを参照してください。

ブレークポイントの追加

  1. JavaScript エディターで console.log() を追加します。
  2. App Studio セッションで、F12 を押してブラウザー コンソールを開き、[ コンソール ] タブを選択します。
  3. ログの右側にある VM メッセージをクリックします。

デバッガーが開きます。 目的の行番号をクリックしてブレークポイントを選択します。

詳細については、ビデオを参照してください。

Support and Services icon
サポートを受ける
UiPath Academy icon
RPA について学ぶ - オートメーション コース
UiPath Forum icon
UiPath コミュニティ フォーラム
UiPath ロゴ (白)
信頼とセキュリティ
© 2005-2024 UiPath. All rights reserved.