Experience Builder では、データ属性、統計、単純な式を使用して、基本的な動的コンテンツを表示できます。 ウィジェット設定で静的スタイルと状態ベースのスタイルを適用することもできます。
高度な書式設定には、高度な動的コンテンツと動的スタイル設定の 2 つのタイプがあります。
- 高度な動的コンテンツでは、データを使用して計算を実行し、ウィジェットのコンテンツとして表示する動的な値を返します。 高度な動的コンテンツを作成するには、Arcade 式を使用できます。
- 動的スタイル設定では、データに基づいてウィジェットの背景、枠線、他の視覚的エレメントを更新します。 動的スタイル設定を作成するには、Arcade 式と、ノーコード機能である条件付きスタイル設定の両方を使用できます。
Arcade
Arcade は、軽量で安全な式言語であり、Experience Builder アプリでのデータの操作とカスタム コンテンツの作成に使用できます。 Arcade を使用すると、動的コンテンツと動的スタイル設定の両方を作成できます。
書式設定プロファイル
書式設定プロファイルは、式を評価および解釈するための環境とルールを定義します。
Experience Builder には、次の 2 つのタイプの書式設定プロファイルがあります。
ウィジェットの書式設定プロファイルは、個々のウィジェットのコンテンツとスタイル設定をカスタマイズするもので、 $dataSource プロファイル変数を使用して、データ ソース レベルでデータを参照します。
リスト アイテム ウィジェットの書式設定プロファイルは、リスト ウィジェットの個々のリスト アイテムのコンテンツとスタイル設定、およびリスト アイテム内のテキスト/ボタン/画像ウィジェットなどのウィジェットのコンテンツとスタイル設定をカスタマイズするもので、 $feature プロファイル変数を使用して、機能レベルでデータを参照します。
注意:
さらに、Experience Builder には、データ ソースとして FeatureSet を作成するデータ プロファイルも含まれています。 データ プロファイルは、Arcade によるデータの追加に使用できます。
いずれの場合も、Experience Builder では、Arcade エディターでスクリプトを入力します。 このエディターでは、サポートされている変数と関数、およびスクリプトのテストに役立つライブ データのプレビューにアクセスできます。
Arcade エディターは、動的コンテンツの作成、動的スタイル設定の作成、またはデータの追加のいずれの目的で Arcade を使用しているかに応じて、ビルダー インターフェイスの異なる部分に表示されます。
Arcade を使用した高度な動的コンテンツ
動的コンテンツとは、データまたはユーザーの操作に応じて変化するコンテンツのことです。 Arcade を使用すると、ウィジェットのコンテンツとして表示する動的な値を計算して返すことができます。 コンテンツをフィールドまたは統計情報に直接バインドするのではなく、ロジック、条件、関数に基づいて値を計算する式を作成できます。
返される値は、次のいずれかのフィールド タイプである必要があります。
- テキスト
- Number
- Date
- Date Only
- Time Only
Experience Builder では、次の方法で動的コンテンツを使用できます。
- ボタン テキストを含むテキスト コンテンツの作成
- 画像ソースの設定
- URL によるリンクの設定 (テキスト ウィジェットのリンクを除く)
Arcade のサンプル スクリプト
以下のサブセクションには、動的コンテンツの作成に使用できる Arcade スクリプトを記載しています。
条件に基づいてメッセージを表示
return IIf($feature.status== "Delayed", "⚠️ Delayed", "✅ On Schedule");レコードの最終更新日からの日数を表示
var lastUpdated = $feature.EditDate;
return Floor(DateDiff(Now(), lastUpdated, "days")) + " days ago";個別値の数を表示
var ds = $dataSources["dataSource_id"].layer;
var distincItem = Distinct(ds, 'CNTRY_NAME');
return Count(distincItem);フィルター適用後のメッセージを表示
var ds = $dataSources["dataSource_1-18c66465e65-layer-2"].layer;
var queryStr = $dataSources["dataSource_1-18c66465e65-layer-2"].queryParams.where;
Console(queryStr);
if (!IsEmpty(queryStr)) {
var result = Filter(ds, queryStr);
return "Filtered view: " + Count(result) + " records are displayed.";
}
return "All records are displayed."リスト ウィジェットの長いテキストを短縮
var desc = $feature.description;
return Left(desc, 10) + IIf(Count(desc) > 10, "...", "");カテゴリーに基づいて異なる画像をリスト内の画像ウィジェットに表示
if ($feature.category === "park") {
return "https://example.com/images/park.png";
} else if ($feature.category === "school") {
return "https://example.com/ images /school.png";
} else {
return "https://example.com/ images /default.png";
}動的コンテンツのスタイル設定
テキスト コンテンツの場合は、値とそのテキスト スタイルの両方を含むディクショナリーを返すことができます。 スクリプトの例を次に示します。
return {
value: "Advanced dynamic content",
text: {
size: 16,
bold: true
}
};値を HTML 形式で返して、さらに高度なスタイル設定を作成することもできます。 HTML を使用するスクリプトの例を次に示します。
return "<p style=\"font-family: Arial; font-size: 16px; color: #333; margin-bottom: 12px;\">" +
"Welcome to Experience Builder! Visit our " +
"<a href=\"https://experience.arcgis.com\" style=\"color: #007BFF; text-decoration: none;\">" +
"homepage</a> for more details.</p>" +
"<p style=\"font-size: 15px; font-family: Verdana; color: #444; margin-bottom: 8px;\">" +
"Key features:</p>" +
"<ul style=\"font-size: 14px; font-family: Verdana; color: #444; margin-top: 0;\">" +
"<li style=\"margin-bottom: 6px;\">Interact with 2D and 3D content in one app.</li>" +
"<li style=\"margin-bottom: 6px;\">Deploy responsive apps to any device.</li>" +
"<li style=\"margin-bottom: 6px;\">Create, deploy, and manage apps in a single place.</li>" +
"</ul>"次の表に、Experience Builder での Arcade スクリプトでサポートされている HTML タグの一覧を示します。
| タグ | 属性 |
|---|---|
h1、h2、h3、h4、h5、h6 | スタイル |
span | スタイル |
p | スタイル |
s | スタイル |
strong | スタイル |
em | スタイル |
u | スタイル |
ol、ul | スタイル |
li | スタイル |
br | |
a | style、href、target |
img | style、src、alt、height、width |
条件または Arcade を使用した動的スタイル
動的スタイル設定を使用すると、データに基づいてウィジェットを視覚的に調整できます。 これには、フィールド値、統計、または計算されたロジックに基づいたテキスト サイズ、背景色、枠線スタイルなどのビジュアルの変更が含まれます。
ウィジェットをデータに接続すると、[動的スタイル] 設定がウィジェットの設定パネルに表示されます。
次のウィジェットが、動的スタイルをサポートしています。
- テキスト ウィジェット - [動的スタイル] 設定は設定パネルの下部に表示されます。
- ボタン ウィジェット - [動的スタイル] 設定は [高度な設定] の下に表示されます。 状態 ([デフォルト] と [ホバー]) ごとに固有の設定があります。
- リスト ウィジェット - [動的スタイル] 設定はそれぞれの状態 ([デフォルト]、[ホバー]、[選択]) の下に表示されます。
注意:
リスト ウィジェットでは、動的スタイルが、ウィジェット全体ではなく、個々のリスト アイテムに適用されます。
[動的スタイル] をオンにして、設定ボタン 
をクリックすると、[動的スタイル] パネルが開きます。 このパネルには、[条件] と [スクリプト] という 2 つのタブがあります。
状態
条件付きスタイルは、単純なルールに基づいてスタイルを適用できるノーコード オプションです。 スクリプトを作成する必要はありません。 ステータス インジケーター、カテゴリー、値の範囲など、データの差異を視覚的に強調する場合におすすめの方法です。
[条件] タブには次の設定があります。
- [条件に使用するインジケーターの選択] - 条件ステートメントを作成するための方法を選択します。 テキスト ウィジェットとボタン ウィジェットでは、データ属性、統計、または以前に構成した動的コンテンツを使用できます。 リスト ウィジェットでは、データ属性のみを使用できます。
次の表に、インジケーターとして使用できる属性フィールドのタイプと、それらのインジケーターでサポートされている演算子の一覧を示します。
インジケーター フィールド タイプ サポートされている演算子 String
is、is not、contains、is blank、is not blank
Number
is、is not、is greater than、is less than、is between
- [スタイル条件] - インジケーターを設定したら、[スタイル条件の追加] をクリックして、条件を作成できます。 各条件は次のコンポーネントから構成されます。
- 演算子 - インジケーターでサポートされている演算子のリストから選択します。
- 値 - インジケーターに対して比較されるターゲット値。 [ソース タイプの選択] をクリックして、ユーザー入力、フィールド、個別値、統計 (数値インジケーターの場合) などの入力方法を選択します。
- スタイル - 条件が満たされている場合に適用されるビジュアル スタイル設定 (テキストの色、背景、枠線など)。
現在のデータが条件を満たしていない場合でも、設定パネルで条件を選択して、キャンバス上でのその効果をプレビューできます。 条件を並べ替え、複製、削除することができます。 現在のデータが複数の条件に一致する場合は、条件リスト内で上位に配置されたものが優先されます。 現在のデータがどの条件にも一致しない場合、ウィジェットでは静的スタイル設定が使用されます。
スクリプト
Arcade スクリプトを使用すると、複雑で柔軟性の高いスタイル ロジックを作成できます。 [スクリプト] タブで、[Arcade エディター] をクリックし、エディター ウィンドウを開くことができます。
Experience Builder では、スクリプトがローカルに保存されるので、次回エディターを開いたときに引き続きそのスクリプトを使用できます。 スクリプトを実行するには、[適用] をクリックします。 これを行うと、適用されたスクリプトが [使用中のスクリプト] ボックスに表示されます。
Arcade エディターでは、ノーコード インターフェイスでスタイル ルールを構成するのではなく、スタイル プロパティとそれに対応する値から成るディクショナリーを返すスクリプトを作成します。 これにより、[スタイル条件] 機能では実現できないカスタムのロジック、計算、条件に基づいてスタイルを適用できるようになります。
Experience Builder では、戻り値を使用してウィジェットのスタイルを表示します。 ディクショナリーに含まれないスタイル キーを入力すると、ウィジェットはそれらのプロパティに対してデフォルトのスタイル設定を使用します。
次の表に、各ウィジェットでサポートされているスタイル プロパティの一覧 (予測される値のタイプとその意味を含む) を示します。
注意:
色を設定する場合は、値が、色名 ("red")、16 進数コード ("#ff0000")、rgba() など、CSS 色形式に従っていることを確認してください。
テキスト ウィジェットのスタイル設定
テキスト ウィジェットは次のスタイル プロパティをサポートしています。
| プロパティ | タイプ | 説明 |
|---|---|---|
text | ディクショナリー | テキスト スタイルの設定に使用 |
text.size | Number | フォント サイズ (ピクセル単位) |
text.color | String | テキストの色 |
text.bold | Boolean | 太字スタイルを使用するかどうかを示す |
text.italic | Boolean | 斜体スタイルを使用するかどうかを示す |
text.underline | Boolean | 下線スタイルを使用するかどうかを示す |
text.strike | Boolean | 取り消し線スタイルを使用するかどうかを示す |
背景 | ディクショナリー | 背景の設定に使用 |
background.color | String | 背景色 |
background.fillType | String | 'fit'、'fill'、'center'、'tile'、'stretch' |
background.image | String | 画像 URL |
テキスト ウィジェットで、選択した都市の人口に応じて異なるテキスト サイズと背景色を使用して都市名をスタイル設定するスクリプトの例を次に示します。
// Get the list of selected features from the data source
var sf = $dataSources["dataSource_id"].selectedFeatures;
// Get the population of the first selected feature
var pop = First(sf).Population;
// Initialize style variables
var bgColor = "";
var txtStyles = null;
// Apply style based on population threshold
if (pop > 500000) {
bgColor = "rgba(238, 246, 255, 1)";
txtStyles = {
size: 34,
bold: true
};
} else {
bgColor = "rgba(255, 216, 219, 1)";
txtStyles = {
size: 25,
italic: true
};
}
return {
background: {
color: bgColor
},
text: txtStyles
};ボタン ウィジェットのスタイル設定
ボタン ウィジェットは次のスタイル プロパティをサポートしています。
| プロパティ | タイプ | 説明 |
|---|---|---|
text | ディクショナリー | テキスト スタイルの設定に使用 |
text.size | Number | フォント サイズ (ピクセル単位) |
text.color | String | テキストの色 |
text.bold | Boolean | 太字スタイルを使用するかどうかを示す |
text.italic | Boolean | 斜体スタイルを使用するかどうかを示す |
text.underline | Boolean | 下線スタイルを使用するかどうかを示す |
text.strike | Boolean | 取り消し線スタイルを使用するかどうかを示す |
icon | ディクショナリー | アイコン スタイルの設定に使用 |
icon.name | String | アイコン名 |
icon.position | String | 'LEFT' または 'RIGHT' |
icon.size | Number | アイコン サイズ (ピクセル単位) |
icon.color | String | アイコンが SVG 形式の場合に、アイコンの色を設定できる |
背景 | ディクショナリー | 背景の設定に使用 |
background.color | String | 背景色 |
background.fillType | String | 'fit'、'fill'、'center'、'tile'、'stretch' |
background.image | String | 画像 URL |
border | ディクショナリー | 枠線スタイルの設定に使用 |
border.border | ディクショナリー | すべての枠線に同じスタイルを設定 |
border.border.type | String | 'solid'、'dashed'、'dotted'、'double' |
border.border.color | String | 枠線色 |
border.border.width | Number | 枠線幅 |
border.borderLeft | ディクショナリー | 左の枠線スタイルを設定します。 ディクショナリー形式は border.border と同じです。 |
border.borderRight | ディクショナリー | 右の枠線スタイルを設定します。 ディクショナリー形式は border.border と同じです。 |
border.borderTop | ディクショナリー | 上の枠線スタイルを設定します。 ディクショナリー形式は border.border と同じです。 |
border.borderBottom | ディクショナリー | 下の枠線スタイルを設定します。 ディクショナリー形式は border.border と同じです。 |
borderRadius | ディクショナリー | 枠線の半径の設定に使用 |
borderRadius.unit | String | 'px'、'rem'、'em'、'vw'、'%' |
borderRadius.number | Number[] | [top-left-radius, top-right-radius, bottom-right-radius, bottom-left-radius] |
ヒント:
ボタン アイコンには、利用可能なアイコン セットから選択するか、独自のアイコンをアップロードできます。 アイコンをアップロードする場合は、Arcade スクリプト内でそのアイコンを名前で参照できます。
注文の配達ステータスに基づいてボタン ウィジェット アイコンを変更するスクリプトの例を次に示します。
var status = $feature.deliveryStatus;
var isDelivered = status == "Delivered";
return {
icon: {
name: IIf(isDelivered, "check", "glasses")
}
};リスト ウィジェットのスタイル設定
リスト ウィジェットは、リスト アイテムごとに次のスタイル プロパティをサポートしています。
| プロパティ | タイプ | 説明 |
|---|---|---|
背景 | ディクショナリー | 背景の設定に使用 |
background.color | String | 背景色 |
background.fillType | String | 'fit'、'fill'、'center'、'tile'、'stretch' |
background.image | String | 画像 URL |
border | ディクショナリー | 枠線スタイルの設定に使用 |
border.border | ディクショナリー | すべての枠線に同じスタイルを設定 |
border.border.type | String | 'solid'、'dashed'、'dotted'、'double' |
border.border.color | String | 枠線色 |
border.border.width | Number | 枠線幅 |
border.borderLeft | ディクショナリー | 左の枠線スタイルを設定します。 ディクショナリー形式は border.border と同じです。 |
border.borderRight | ディクショナリー | 右の枠線スタイルを設定します。 ディクショナリー形式は border.border と同じです。 |
border.borderTop | ディクショナリー | 上の枠線スタイルを設定します。 ディクショナリー形式は border.border と同じです。 |
border.borderBottom | ディクショナリー | 下の枠線スタイルを設定します。 ディクショナリー形式は border.border と同じです。 |
borderRadius | ディクショナリー | 枠線の半径の設定に使用 |
borderRadius.unit | String | 'px'、'rem'、'em'、'vw'、'%' |
borderRadius.number | Number[] | [top-left-radius, top-right-radius, bottom-right-radius, bottom-left-radius] |
優先度レベルの高いリスト アイテムに別の背景色を指定するスクリプトの例を次に示します。
var isHigh = $feature.priority == "High";
return {
background: {
color: IIf(isHigh, "rgba(217, 249, 242, 1)", "rgba(255, 238, 194, 1)")
}
};Arcade に関するベスト プラクティスと使用上の注意
Arcade スクリプトを使用して、動的コンテンツと動的スタイルを生成するためのベスト プラクティスと注意の一覧を次に示します。
- Experience Builder での Arcade スクリプトでは、FeatureLayer、OrientedImageryLayer、SubtypeGroupLayer、および SubtypeSublayer レイヤー タイプのみがサポートされています。
- データ ソースまたはデータ ビューに適用されたフィルターおよび空間フィルターは、プロファイルのデータ ソースに自動的に追加できません。 フィルターを手動で同期するには、getFilteredFeatureSet 関数を使用します。
- ウィジェットの書式設定プロファイルの場合、Arcade スクリプトを実行または適用すると、そのスクリプトをテストするために現在のデータが使用されます。 たとえば、selectedFeatures を使用するときに何も選択されていないと、選択なしのケースを処理した場合を除き、スクリプトによって [無効な Arcade スクリプト] というメッセージが表示されます。
- リスト アイテム ウィジェットの書式設定プロファイルの場合、Arcade スクリプトを実行または適用すると、そのスクリプトをテストするために最初のリスト アイテムが使用されます。
- アプリ ページごとに、Arcade スクリプトによって設定される動的コンテンツと動的スタイルの両方を含め、ウィジェットの書式設定プロファイルを使用する最大 10 個の Arcade 式がサポートされます。
- 集約値を複数の場所で使用する場合は、[データの追加] ウィンドウの [Arcade] オプションを使用して、その値を一度追加することで他の場所で使用します。
- ウィジェットの書式設定プロファイルで使用されるフィールドは、使用されるフィールド リストに自動的に追加されません。 これらのフィールドが他の場所で参照されない場合、Arcade スクリプトが正常に実行されず、不正な出力が生成される可能性があります。