studio-web

latest

false

重要 :

このコンテンツの一部は機械翻訳によって処理されており、完全な翻訳を保証するものではありません。新しいコンテンツの翻訳は、およそ 1 ～ 2 週間で公開されます。

Studio Web ガイド

デリバリー:

最終更新日時 2026年3月6日

カスタム HTML

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

全般

コードエディターを開く - 3 つのパネルで構成されるエディターを開いて、HTML、CSS、JavaScript のコードを追加できます。
アクセシブルラベル - コントロールの説明です。このプロパティはスクリーンリーダーによって使用され、アクセシビリティを向上できます。
非表示 - true の場合、実行時にコントロールが非表示になります。
無効化 - true の場合、実行時にこのコントロールを非アクティブにします。HTML、CSS、JavaScript のコンテンツは読み込まれますが、クリックなどのユーザーの操作には応答しません。

イベント

イベントはありません。

スタイル

コントロールの配置 - 既定では、親の配置を継承します。親とは異なる配置を設定することもできます。既定の親の配置に戻すには、現在優先されているオプションの選択を解除します。
注:
配置は、親に対して選択したレイアウト ([縦方向]/[横方向]) によって異なります。
枠線 - コントロールの枠線です。枠線の太さと半径を設定できます。
マージン - コントロールのマージンです。既定では 4px のマージンが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティの組み合わせは、[マージン] セクションの右側にある [リンク] ボタンをクリックして解除できます。
サイズ - コントロールの幅と高さです。既定では、サイズは [auto] に設定されています。最小値または最大値を設定するには、3 点リーダーメニューのアイコン (...) をクリックします。

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

The code editor of the Custom HTML control provides three panels to input code in HTML, CSS, and JavaScript programming languages. Each editor supports IntelliSense, or the automatic code completion, and syntax highlighting.

このパネルから入力したコードはプロジェクトにコンパイルされ、プレビュー用に App Studio でレンダリングされます。コントロールの機能を確認するには、アプリをプレビューします。

docs image

重要:

各エディターのコンテンツの最大サイズは 5 MB です。コンテンツがこのサイズを超えると、変更を保存できなくなります。
IntelliSense は、HTML エディター内に記述した CSS と JavaScript コードでは機能しません。

外部リソースを追加する

定義済みのスタイルやスクリプトが既にある場合は、それらをこのコントロール内で参照できます。対応する CSS パネルや JavaScript パネルでコードを記述する必要はありません。

既存の .css または .js ファイルを参照するには、以下の手順に従います。

[カスタム HTML] コントロールのコードエディターで、[外部リソース] タブに切り替えます。
[CSS] セクションで、外部 CSS ファイルを追加します。相互運用性を確保し、アプリが実行される場所で確実にファイルを利用できるようにするため、ファイルはネットワークでアクセス可能な URL でホストされている必要があります。
[JavaScript] セクションで、外部スクリプトファイルを追加します。相互運用性を確保し、アプリが実行される場所で確実にファイルを利用できるようにするため、ファイルはネットワークでアクセス可能な URL でホストされている必要があります。
外部リソースをすべて追加し終わったら、[保存] をクリックします。

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

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

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

HTML エディター

このパネルではコントロールの構造を入力できます。通常は HTML コードブロックの <body></body> タグ内に含まれています。

たとえば、対話型の円グラフのコンテナー要素をアプリに追加するには、次の 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 クラス「chart-container」を参照します。詳しくは、「CSS エディター」をご覧ください。

CSS エディター

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

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

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

JavaScript エディター

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

たとえば、Apple 製品の全世界の売上を示す円グラフを作成し、選択したスライスの値を表示するようにデザインするには、以下の手順を実行します。

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

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js

次の 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 を使用する必要があります。
関数内で getVariable() を呼び出す場合は、その関数は async としてください。この例では init() 関数を作成してすぐに呼び出しました。
getVariable() を最上位レベルで呼び出す場合は、async 関数内に埋め込みます。

無効な変数名などのエラーを処理するには、トライキャッチステートメントを使用します。以下に例を示します。

async function init() {
  try {
    const value = await App.getVariable("test");
  } catch (e) {
    console.log("Error in evaluating app variable:", e);
  }
}
init();
async function init() {
  try {
    const value = await App.getVariable("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();

注:

設定操作が完了するまで待ってから他のコードを実行するには、await を使用します。

無効な変数名や、変数と設定値の型の不一致などのエラーを処理するには、トライキャッチステートメントを使用します。以下に例を示します。

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 コントロールとその中の関数は、実行時にコントロールが表示された後に初期化されます。

変数の型

表を展開

アプリの変数の型	変数の関数からの応答のサンプル
Text (String)	"Hello world"
UInt64 (Int)	100
Decimal number	50.25
True/False (Boolean)	True
DateOnly	2024-01-02 (形式: YYYY-MM-DD)
DateTimeOffset	2024-01-06T09:54:41.9170000Z (同等の JS 形式: Date オブジェクトの ISO 文字列)
AppsFile - [ファイルピッカー] コントロールの値	JS File オブジェクト
AppsFile - URL から作成される値。例: `new AppsFile("https://image.jpg")`	File オブジェクト: `{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 }`
<Entity> (Single entity row)	`{ 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 }`
Datatable	`[{From: 'Ahmedabad', To: 'Azua', ...},{From: 'banglore', To: 'Dominican Republic',...},...]`

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

[カスタム HTML] コントロールにはクライアント側からアクセスできるため、機密データを含めないでください。
<html> タグと <head> タグは HTML エディター内で使用しないでください。コードは自動的に <body> タグ内に追加されるためです。
[外部リソース] タブには Bootstrap、jQuery、その他の JavaScript SDK などの外部リソースの CDN URL を追加します。
変数の変更のリッスンを停止する場合は、deregister() 関数を使用します。
アプリケーションの速度の低下を防ぎ、コントロールの応答性を維持するために、大きなデータループを回避します。
DOM 要素の使用は可能な限り最小限に抑えます。DOM 要素は必要な場合にのみ作成し、古くなったら削除します。
大規模なデータセットには、標準的なスクロールではなく無限スクロールや仮想スクロールを使用します。
クリーンで最適化された冗長性のないコードを作成・維持します。

機能制限

コントロールを Apps に接続するには、変数の関数 getVariable()、setVariable()、onVariableChange() を使用する必要があります。
HTML コントロールのサイズは、ポップアップまたはドロップダウンメニューの表示に合わせて動的に調整されません。これらのメニューに合わせて HTML コントロールのサイズを手動で設定する必要があります。
デザイン時に HTML コントロールを操作することはできません。
setVariable()、getVariable()、および onVariableChange() 関数は、実行時にのみ動作します。
変数名の変更や変数の削除は、コードエディターに自動的に反映されません。現在の変数でコードを手動で更新する必要があります。
[カスタム HTML] コントロールから画像データを転送してストレージバケットへ、またはデータ URL を使用するエンティティへ送る場合、ファイルサイズが 1 MB を超えてはなりません。このサイズを超えるファイルはパフォーマンスの問題を引き起こす可能性があります。
このコントロールがプロセス、キュー、ストレージバケットなどの他の 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] コントロールのコンソールログを追加および絞り込む

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

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

詳しくは、以下のビデオをご覧ください。

ブレークポイントを追加する

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

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

詳しくは、以下のビデオをご覧ください。

VB のプロパティ

VB のプロパティ	データ型	説明
`AccessibleLabel`	文字列	コントロールの説明です。スクリーンリーダーなどのアクセシビリティテクノロジで使用されます。
`Hidden`	Boolean	[カスタム HTML] の表示/非表示を指定します。true の場合、実行時にコントロールが非表示になります。
`Disabled`	Boolean	[カスタム HTML] コントロールを無効化するかどうかを指定します。true の場合、実行時にこのコントロールとの対話が無効化されます。HTML、CSS、JavaScript のコンテンツは読み込まれますが、ユーザーの操作には応答しません。

このページは役に立ちましたか?

前へチェックボックス

次へ日付の選択

Studio Web ガイド

全般​

イベント​

スタイル​

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

外部リソースを追加する​

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

HTML エディター​

CSS エディター​

JavaScript エディター​

カスタム HTML で変数を使用する​

getVariable()​

setVariable()​

onVariableChange()​

変数の型​

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

機能制限​

[カスタム HTML] コントロールのコードをデバッグする​

[カスタム HTML] コントロールのコンソール ログを追加および絞り込む​

ブレークポイントを追加する​

VB のプロパティ​