【Esri Japan AI Weeks】ArcGIS Arcade アシスタントを使ってリッチな Web マップを作ろう

0.1 ポップアップ属性
0.2 ポップアップのエレメント

ポップアップ属性

次に「全国市区町村界データ2025」のレイヤーに対してポップアップを設定します。このレイヤーに対して、対象のフィーチャ上に「学校データ（国土数値情報令和 5 年度）」のフィーチャがいくつあるかを追加します。はじめにオプションの [属性式] ボタンをクリックして [式の追加] をクリックして Arcade エディターを表示します。

Arcade エディターを開いたら Arcade アシスタントを開きます。

Arcade アシスタントが開いたら、テキスト入力欄に以下の指示文章を入力して Arcade の構文を生成します。

同じマップ上にある「学校データ（国土数値情報令和 5 年度）」レイヤーのフィーチャが対象のフィーチャ上にある学校数を「学校数」というフィールド名で定義してください。

上記の指示に対する Arcade の構文が生成されたら、左下部の真ん中のボタンをクリックしてコードブロックに構文を上書きます。

コードブロックが更新されたらコードブロック上部の [実行] ボタンをクリックして構文のテストを行います。

実行された結果を確認します。

計算結果としては妥当な結果が得られているため、Arcade 式のタイトルを「学校数」に変更して [完了] ボタンをクリックします。

完了し、マップの画面に戻ったら、以下の手順で作成した「学校数」の属性をポップアップに追加します。意図した結果が得られる構文を以下に記述します。

// ArcGIS Arcade アシスタント (ベータ版) によって生成された式
// AI-generated content may be inaccurate. Review before using.
var schoolLayer = FeatureSetByName($map, "学校データ （国土数値情報 令和 5 年度）");
var schoolCount = Count(Intersects(schoolLayer, $feature));
return schoolCount;

属性式の画面の左上の [戻る] ボタンで戻る → [フィールドリスト] を展開 → [フィールドの選択] → 式の欄にある先ほど作成した「学校数」のチェックボックスのチェックをオンにする → [完了] ボタンを押下します。

完了し、任意のフィーチャをクリックしてポップアップを表示します。ポップアップの一番下に新しく「学校数」のフィールドが追加され、対象の市区町村フィーチャ内に含まれる学校ポイントの数が表示されているのを確認します。

ポップアップのエレメント

引き続き「全国市区町村界データ2025」のレイヤーに対してポップアップを設定します。このレイヤーに対して、対象のフィーチャ上にある「学校データ（国土数値情報令和 5 年度）」のフィーチャが「学校分類」フィールドの属性値の分類ごとに校数を表示するグラフを追加します。

はじめに [コンテンツの追加] をクリックし、表示された追加対象のコンテンツ一覧から [Arcade] をクリックして Arcade エディターを追加します。

Arcade エディターを開いたら Arcade アシスタントを開きます。

Arcade アシスタントが開いたら、テキスト入力欄に以下の指示文章を入力して Arcade の構文を生成します。

以下の条件で縦棒グラフを表示してください。

・縦軸は対象のポリゴン上に同じマップ上にある「学校データ（国土数値情報令和 5 年度）」レイヤーのフィーチャ数

・横軸は「学校データ（国土数値情報令和 5 年度）」レイヤーの P29_003 （学校分類）フィールドのデータをドメインのコードではなく表示名

上記の指示に対する Arcade の構文が生成されたら、左下部の真ん中のボタンをクリックしてコードブロックに構文を上書きます。

コードブロックが更新されたらコードブロック上部の [実行] ボタンをクリックして構文のテストを行います。

実行された結果を確認します。結果がエラーではないため [完了] をクリックします。

完了することでポップアップにグラフのエリアが表示されます。しかし、枠だけ表示されますがグラフが表示されません。

グラフを表示するための情報に誤りがあることが推測されます。そのため、Arcade アシスタントが生成した構文を確認していきます。

以下が実際の Arcade の構文です。

// ArcGIS Arcade アシスタント (ベータ版) によって生成された式
// AI-generated content may be inaccurate. Review before using.
var schoolLayer = FeatureSetByName(
  $map,
  "学校データ （国土数値情報 令和 5 年度）",
  ["P29_003"],
  true
);
var schoolsInPolygon = Intersects(schoolLayer, $feature);
var categoryCounts = GroupBy(
  schoolsInPolygon,
  "P29_003",
  { name: "count", expression: "1", statistic: "COUNT" }
);
var categories = [];
var counts = [];
for (var item in categoryCounts) {
  Push(categories, DomainName(schoolLayer, "P29_003", item["P29_003"]));
  Push(counts, item["count"]);
}
return {
  type: "media",
  title: "学校分類別フィーチャ数",
  attributes: { "カテゴリ": categories, "件数": counts },
  mediaInfos: [
    {
      type: "barchart",
      title: "学校分類別フィーチャ数",
      value:
        {
          fields: ["件数"],
          series: [{ dataSource: { data: counts }, name: "件数" }],
          categories: categories
        }
    }
  ]
};

Arcade の構文で返している値が Web マップのメディアポップアップの仕様に則しているかを確認します。

はじめに attributes プロパティの説明を確認すると以下のように記述されています。

※日本語参考訳

フィールドとその値の代わりに使用される属性を表すキーと値のペアのディクショナリー。このプロパティは、メディア型の要素が式型の要素の内部で返される場合にのみ使用され、arcade 式自体の一部として返される必要があります。このプロパティは、チャートのような mediaInfo に Arcade 由来の属性値を渡すことを可能にします。詳細は、こちらを参照してください。

attributes プロパティではフィールドがキーとしてそれに対応する値をペアとするディクショナリーと記述されています。今回 Arcade アシスタントへ指示する文章に置き換えた場合、フィールドには「学校データ（国土数値情報令和 5 年度）」レイヤーの「P29_003 （学校分類）」フィールドの表示名を設定し、値には「学校データ（国土数値情報令和 5 年度）」レイヤーの「P29_003 （学校分類）」フィールドごとのフィーチャ数を設定されるべきですが、今回の構造は「カテゴリ」というキーに学校分類の表示名の配列と「件数」というキーに各カテゴリの件数の配列が設定されており、想定と異なります。

続いて、mediaInfo[ ] のプロパティを確認します。このプロパティは mediaInfo オブジェクトの配列です。

mediaInfo[ ] のリンクから mediaInfo のプロパティを確認します。

type のプロパティを確認すると `barchart` が設定されています。Bar チャートは横棒グラフ、Column チャートは縦棒グラフのため、異なる値が設定されています。

続いて value プロパティを確認します。このプロパティは value オブジェクトまたは null です。

value のリンクから value オブジェクトを確認します。その上で、生成された Arcade 構文を確認すると「series」「categories」という本来は存在しないプロパティが設定されているのが分かります。

また、fields[ ] プロパティの説明を確認すると以下のように記述されています。

※日本語参考訳

チャートで使用する。文字列の配列で、各文字列はチャートに表示するフィールド名を含む。

fields[ ] プロパティには、チャートで使用するチャートに表示するフィールド名の配列と記述されています。今回の場合は、attributes にてキーとして設定する「学校データ（国土数値情報令和 5 年度）」レイヤーの「P29_003 （学校分類）」フィールドの表示名を配列として設定します。

上記の 3 点を踏まえて以下のように Arcade 構文を修正します。修正箇所は元の構文をコメントアウトし、正しい構文を下に記述してあります。

// ArcGIS Arcade アシスタント (ベータ版) によって生成された式
// AI-generated content may be inaccurate. Review before using.
var schoolLayer = FeatureSetByName(
  $map,
  "学校データ （国土数値情報 令和 5 年度）",
  ["P29_003"],
  true
);
var schoolsInPolygon = Intersects(schoolLayer, $feature);
var categoryCounts = GroupBy(
  schoolsInPolygon,
  "P29_003",
  { name: "count", expression: "1", statistic: "COUNT" }
);
// var categories = [];
// var counts = [];
var attributes = {};
var fields = []
for (var item in categoryCounts) {
  // Push(categories, DomainName(schoolLayer, "P29_003", item["P29_003"]));
  // Push(counts, item["count"]);
  attributes[DomainName(schoolLayer, "P29_003", item["P29_003"])] = item["count"];
  Push(fields, DomainName(schoolLayer, "P29_003", item["P29_003"]))
}
return {
  type: "media",
  title: "学校分類別フィーチャ数",
  // attributes: { "カテゴリ": categories, "件数": counts },
  attributes: attributes,
  mediaInfos: [
    {
      // type: "barchart",
      type: "columnchart",
      title: "学校分類別フィーチャ数",
      value:
        {
          // fields: ["件数"],
          // series: [{ dataSource: { data: counts }, name: "件数" }],
          // categories: categories
          fields: fields
        }
    }
  ]
};

Arcade エディターを上記の Arcade 構文に更新したら [完了] ボタンをクリックします。

先ほどまで枠しか表示されていなかったポップアップのグラフのエリアに学校分類別のフィーチャ数が表示されるのが確認できました。

このように Arcade アシスタントは場合によっては正しくない構文を返してくることがあります。そういった場合は、Web マップの仕様や Arcade のリファレンスを確認して正しく動作するように修正をする必要があります。

まとめ

自然言語で入力された命令から Arcade 条件式を生成することができる Arcade アシスタントを使用して、リッチな Web マップを作成する方法についてご紹介しました。今回作成した Web マップはこちらからご確認いただけます。
Arcade アシスタントをうまく活用することで、プログラミング知識のない方でも Arcade でしか実現できない表現を簡単に使えるようになります。
関数をリファレンスで探すことや、複雑なロジックを考える手間を省けるため、効率よく Web マップを作成することができます。
Arcade の活用にハードルを感じていた方も、ぜひこのアシスタントを試してみてください。

Esri Japan AI Weeks では ArcGIS で利用できる AI の記事を月曜日から金曜日の 5 日間、2 週にわたって投稿いたします。

明日は ArcGIS ドキュメントアシスタントをご紹介いたします。