- 基本情報
- デモ アプリ
- 使い方
- 通知
- VB の式を使用する
- アプリをデザインする
- イベントとルール
- アプリで RPA を活用する
- アプリ内でエンティティを活用する
- アプリ内でキューを活用する
- アプリでメディアを活用する
- アプリでアクションを活用する
- アプリケーション ライフサイクル管理 (ALM)
- UiPath® ファーストパーティ アプリ
- 基本的なトラブルシューティング ガイド
カスタム HTML
[カスタム HTML] コントロールは上級ユーザー向けです。HTML、CSS、JavaScript のプログラミング言語の柔軟性を利用し、ビジネス ニーズに応じてカスタムの対話型コントロールを作成できます。このコントロールには、HTML、CSS、JavaScript のコード専用のエディターが含まれているため、外部でホストされている CSS ファイルや JavaScript ファイルを URL を介して組み込めるという利点もあります。
-
コード エディターを開く - 3 つのパネルで構成されるエディターを開いて、HTML、CSS、JavaScript のコードを追加できます。
-
アクセシブル ラベル - コントロールの説明です。このプロパティはスクリーン リーダーによって使用され、アクセシビリティを向上できます。
-
非表示 - true の場合、実行時にコントロールが非表示になります。
-
無効化 - true の場合、実行時にこのコントロールを非アクティブにします。HTML、CSS、JavaScript のコンテンツは読み込まれますが、クリックなどのユーザーの操作には応答しません。
-
コントロールの配置 - 既定では、親の配置を継承します。親とは異なる配置を設定することもできます。既定の親の配置に戻すには、現在優先されているオプションの選択を解除します。
注: 配置は、親に対して選択したレイアウト ([縦方向]/[横方向]) によって異なります。 - 枠線 - コントロールの枠線です。枠線の太さと半径を設定できます。
-
マージン - コントロールのマージンです。既定では 4px のマージンが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティの組み合わせは、[マージン] セクションの右側にある [リンク] ボタンをクリックして解除できます。
-
サイズ - コントロールの幅と高さです。既定では、サイズは [auto] に設定されています。最小値または最大値を設定するには、3 点リーダー メニューのアイコン (...) をクリックします。
[カスタム HTML] コントロールのコード エディターには 3 つのパネルがあり、HTML、CSS、JavaScript のプログラミング言語でコードを入力できます。各エディターでは、IntelliSense (コードの自動補完機能) と構文の強調表示機能がサポートされています。
このパネルから入力したコードはプロジェクトにコンパイルされ、プレビュー用に App Studio でレンダリングされます。コントロールの機能を確認するには、アプリをプレビューします。
-
各エディターのコンテンツの最大サイズは 5 MB です。コンテンツがこのサイズを超えると、変更を保存できなくなります。
-
IntelliSense は、HTML エディター内に記述した CSS と JavaScript コードでは機能しません。
定義済みのスタイルやスクリプトが既にある場合は、それらをこのコントロール内で参照できます。対応する CSS パネルや JavaScript パネルでコードを記述する必要はありません。
.css
または .js
ファイルを参照するには、以下の手順に従います。
-
[カスタム HTML] コントロールのコード エディターで、[外部リソース] タブに切り替えます。
-
[CSS] セクションで、外部 CSS ファイルを追加します。相互運用性を確保し、アプリが実行される場所で確実にファイルを利用できるようにするため、ファイルはネットワークでアクセス可能な URL でホストされている必要があります。
-
[JavaScript] セクションで、外部スクリプト ファイルを追加します。 相互運用性を確保し、アプリが実行される場所で確実にファイルを利用できるようにするため、ファイルはネットワークでアクセス可能な URL でホストされている必要があります。
-
外部リソースをすべて追加し終わったら、[保存] をクリックします。
既定では、Tab キーを押すと、現在のエディター内にタブ スペースが追加されます。Tab キーの動作をカスタマイズするには、次のショートカット キーを使用します。
OS |
ショートカット キー |
動作 |
---|---|---|
Windows |
Ctrl + M |
パネル間を移動し、エディターに表示されているボタンにフォーカスを変更するよう Tab キーに指示します。Ctrl + M キーをもう一度押すと、Tab キーの既定の動作に戻ります。 |
macOS |
Ctrl + Shift + M | パネル間を移動し、エディターに表示されているボタンにフォーカスを変更するよう Tab キーに指示します。Ctrl + Shift + M キーをもう一度押すと、Tab キーの既定の動作に戻ります。 |
<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 スニペットを使用します。
.chart-container {
background-color: #f3f7e9;
border: 1px solid #cccccc;
}
.chart-container {
background-color: #f3f7e9;
border: 1px solid #cccccc;
}
このパネルでは、コンテンツのタイムリーな更新、マップ、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', }, }, }, });
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 から作成される値
例:
|
File オブジェクト:
|
GUID |
"5637F7DB-391D-4C8B-805D-0A918531CA3E" |
List(Of string) | ["Banana", "Kiwi", "Apple", "Lemon"] |
ListSource(Of <Entity>) |
|
<Entity> (Single entity row) |
|
ListSource(Of <Choiceset>) |
|
Datatable |
|
-
[カスタム 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 のエンティティの File 型フィールドの入力には使用できません。
-
このコントロールがプロセス、キュー、ストレージ バケットなどの他の UiPath® コンポーネントと通信するには、変数を使用する必要があります。
-
LESS または SCSS を使用して前処理された CSS コードは、HTML コントロールとの互換性がありません。
-
以下の API は、セキュリティ上の理由により、使用すると警告なしに失敗します。
-
download
属性を使用してダウンロードする -
Window.alert()
、Window.confirm()
、Window.print()
、Window.prompt()
を使用してモーダルを開ける -
ポインターと向きをロックする
-
トップレベルのブラウザ コンテキストに移動する
-
requestFullscreen()
を使用して全画面表示に入る -
MediaDevices.getDisplayMedia()
を使用して画面をキャプチャする -
MediaDevices.getUserMedia()
を使用してカメラまたはマイクにアクセスする -
支払いをリクエストする
-
navigator.geolocation()
を使用して場所にアクセスする -
navigator.share()
を使用してデータを共有する
-
- JavaScript エディターで
console.log()
を追加します。 - App Studio のセッションで F12 を押してブラウザー コンソールを開き、[Console] タブを選択します。
- コンソールの設定で、[Selected context only] チェックボックスをオンにします。
- コンソール ページの上部にある JavaScript コンテキスト ドロップダウンから、目的の HTML コントロールの
html-control-base.html
オプションを選択します。
選択したコントロールのログがコンソールに表示されます。
詳しくは、以下のビデオをご覧ください。
はじめに
このアプリは、d3.js や chart.js などの JavaScript ライブラリを使用して、さまざまな種類のグラフを作成する方法を示しています。
デモ アプリ (使用方法)
- UiPath® Apps で新しいアプリを作成し、ダウンロードしたデモ アプリをインポートします。
- アプリをプレビューしてすべてのグラフの種類を操作します。
はじめに
このアプリでは、エンティティ、[カスタム HTML]、および [編集グリッド] コントロールを組み合わせて、対話型の円グラフを表示します。対話機能をアクティブ化するには、ドロップダウン メニューからオプションを選択します。これにより、円グラフのセクションと編集グリッド内のレコードが変更されます。その後、グラフ セクションをクリックすると、編集グリッド内のデータが更新されます。
デモアプリ (ご自身でお試しください)
対話型の円グラフをご自身で試すには、以下のデモ アプリを使用するか、手順に従います。
デモ アプリ (使用方法)
- デモ アプリをプレビューします。
- [Filter Tickets by Customer Name] ドロップダウンからオプションを選択します。チケットの合計数、円グラフの表現、および編集グリッド内のデータが変わります。
- グラフのスライス上にカーソルを合わせます。ツールチップに、カテゴリ名とチケット数が表示されます。
- グラフのスライスをクリックします。編集グリッドに、選択したカテゴリのレコードが表示されます。
手順
ダウンロード後、次の手順を実行します。
はじめに
このアプリは、カスタムの日付時刻ピッカーを作成する方法を示しています。
デモ アプリ (使用方法)
- UiPath® Apps で新しいアプリを作成し、ダウンロードしたデモ アプリをインポートします。
- アプリをプレビューして日付時刻ピッカーを操作します。
はじめに
このアプリは、パスワード フィールドを作成する方法を示しています。
デモ アプリ (使用方法)
- UiPath® Apps で新しいアプリを作成し、ダウンロードしたデモ アプリをインポートします。
- アプリをプレビューしてパスワード フィールドを操作します。
はじめに
このアプリは、署名の入力フィールドを作成する方法を示しています。
デモ アプリ (使用方法)
- UiPath® Apps で新しいアプリを作成し、ダウンロードしたデモ アプリをインポートします。
- いくつかのエラーが見つかる可能性があります。エラーを修正するには、参照されているストレージ バケット「Demo app」をテナント内のバケットに置き換えます。
- アプリをプレビューして署名の入力フィールドを操作します。
- 全般
- イベント
- スタイル
- カスタム HTML 用のコード エディター
- 外部リソースを追加する
- Tab キーのアクセシビリティのショートカット キー
- HTML エディター
- CSS エディター
- JavaScript エディター
- カスタム HTML で変数を使用する
- カスタム HTML のベスト プラクティス
- 機能制限
- [カスタム HTML] コントロールのコードをデバッグする
- [カスタム HTML] コントロールのコンソール ログを追加および絞り込む
- ブレークポイントを追加する
- デモ
- カスタム HTML: グラフを作成する
- カスタム HTML: 変数の関数を使用して対話型の円グラフを作成する
- カスタム HTML: 日付/時刻選択を作成する
- カスタム HTML: パスワード フィールドを作成する
- カスタム HTML: 署名入力フィールドを作成する