ポップアップの基礎

こちらは、ArcGIS アドベントカレンダー 2025 の 16 日目の記事です。他の記事もぜひご覧ください。

ArcGIS では、フィーチャが持っている属性データを確認する方法としてポップアップがあります。ポップアップではただ属性データを表示するだけではなく、さまざまな表現をすることができます。ポップアップで行える表現方法を 3 回に渡って紹介します。今回は第 1 弾として、ポップアップの基礎について紹介します。本記事は、米国 Esri 社のブログ記事「Pop-ups: the essentials」を翻訳したものを、一部加筆・変更したものです。

はじめに

Web マップの作成は簡単ですが、本当に優れたマップを作るには、少し追加の工夫と技術が必要です。スマートマッピングは、1つ以上の属性を使ってデータを効果的かつ意味のある方法で表現するための選択肢を示し、データに隠されたストーリーを引き出す視覚的に魅力的なマップを、これまで以上に簡単に作成できるようにします。さらに、効果やブレンディングといった追加のツールを使うことで、真に表現力豊かなマップを仕上げることができます。

スタイルやエフェクトを超えて、レイヤーのポップアップは、地図情報体験を総合的に完成させるために不可欠で重要な要素です。ポップアップを使うことで、単調な属性リストが、直感的で魅力的な情報を表示する、より意味のあるものへと変わります。良いポップアップを作るのは簡単ですが、しばしば見過ごされがちです。しかし、少しの知識と工夫で、ポップアップを次のレベルへ引き上げ、属性情報を価値ある洞察へと変えることができます。

クイックリンク

以下のリンクから興味のあるセクションにジャンプできます。

はじめに
クイックリンク
ポップアップの基本
表現の違い
フィールドの設定
ポップアップタイトル
ポップアップコンテンツ
レイヤーのポップアップ設定の保存
例を確認する
ポップアップサンプルマップ
例を確認する
単一フィールドのテキスト
書式付きテキスト
テキストと写真
テキストと動画
テキストと写真とチャート
HTML
Arcade 式
添付ファイル
アプリ内のポップアップ
参考リンク

ポップアップの基本

表現の違い

構成されていないポップアップと、よく練られたポップアップの違いは一目瞭然です。レイヤーのデフォルトのポップアップは、デフォルトのフィールド名を持つ属性のシンプルなリストです。マップまたはレイヤーの所有者は、ポップアップの表示内容を柔軟にカスタマイズできます。具体的には、以下のような設定が可能です。

表示・非表示フィールドの選択
フィールドエイリアスの設定
数値や日付のフォーマット調整
グラフや画像の追加

デフォルトの未設定の属性リストを表示するのではなく、カスタムフォーマットのテキストやチャートを提供することで、豊富な情報表示を提供することができます。Arcade 式、HTML、または関連テーブルのデータを使用するなどの追加の設定機能を使用すると、さらに多くのことができます。概要については、ポップアップの設定を参照してください。

下の2つの例を比べてみてください。どちらがより有意義で魅力的な体験を提供できるでしょうか？

このブログチュートリアルの残りの部分では、さまざまなポップアップ設定を表示する California Fourteeners のサンプルマップを使って一緒に進めることができます。このマップについての詳しい説明は、ポップアップサンプルマップのセクションで紹介されています。

フィールドの設定

より良いポップアップを作成するための最初のステップは、属性フィールドを設定することです。以下の手順に従ってください。

ステップ1. レイヤーパネルで、フィールドを設定したいレイヤーを選択します。

ステップ2. 表示名を設定し、数値の場合はカンマと小数点以下の桁数の使用方法を指定します。

設定（明るい背景色）ツールバーの「フィールド」をクリックします。
設定したいフィールドをクリックします。
表示名（エイリアス）と、数値の場合はカンマと小数点以下の桁数を編集します。完了したら［完了］をクリックします。

ポップアップタイトル

ポップアップのタイトルがポップアップの上部に表示されます。空白、表示テキスト、フィールド、またはテキストとフィールドの組み合わせが可能です。タイトルを設定するには、以下の手順に従ってください。

ステップ1. 設定（明るい背景色）ツールバーから [ポップアップ] をクリックします。[ポップアップを有効にする] がオンになっていることを確認します。

ステップ2. タイトルをクリックするとパネルが展開します。

ステップ3. タイトルを設定します。

フィールドのドロップダウン [{ }（波括弧）] をクリックしてフィールドの値を追加します。{field_name} のようにフィールド名は波括弧の中に表示され、内容はクリックされた特定のフィーチャの値で設定されます。

以下が例になります。

HTML を使ってタイトルをフォーマットすることもできます。例えば、以下に示すマークアップを使用すると、タイトルのフォント、サイズ、色が変更されます。

<font face=’verdana’><font size=’4′><font color=’0066cc’>{NAME}

ポップアップコンテンツ

ポップアップコンテンツはポップアップウィンドウの主要部分を埋めます。コンテンツの追加をクリックすると、ポップアップ要素のリストが表示されます。

ユニークなポップアップエレメントは以下の通りです。

フィールドリスト
デフォルトでは、マップに追加した各フィーチャレイヤーにフィールドのリストが表示されます。フィールドは、上記の [フィールドを設定する] セクションで説明したように設定できます。フィールドリストでは、表示するフィールドを選択したり、フィールドを並べ替えたりすることもできます。

チャート
グラフを追加して、数値属性フィールドの値をグラフィカルに表示できます。棒グラフ、折れ線グラフ、円グラフを追加できます。

画像
画像（PNG、JPEG、GIF 形式）への URL を提供することで、ポップアップに画像を含めることができます。URLはフィールドから取得することもできます。画像には、タイトル、キャプション、関連サイトや拡大画像へのリンク、代替テキストを含めることができます。ヒント：画像をポップアップの横幅いっぱいに表示したい場合は、400px以上の幅を使用してください。画像を Web 用に最適化し、サイズを小さくします。

テキスト
説明的なテキストを含めることができます。タイポグラフィーと色は変更可能です。フィールドとリンクは、プレーンテキストと組み合わせて使用できます。HTMLを追加することもできます。

Arcade
Arcade は ArcGIS の式言語です。ポップアップでは、2 つの方法で使用できます。最初の方法は、テキストのフィールドのように扱える式を作ることです。
エクスプレッションは、ポップアップに埋め込むことができる情報を評価し、フォーマットし、配信するのに非常に便利です。

添付ファイル
フィーチャレイヤーのデータに添付ファイルが含まれている場合、添付ファイルはレイヤーのポップアップに追加されます。添付ファイルはリストまたはギャラリーとして表示できます。
ポップアップから添付ファイルを削除することもできます。ポップアップで添付ファイルをクリックすると、新しいブラウザーのタブで添付ファイルが開きます。

関連レコード
レイヤーの中には、共通のフィールドを通じて、他のテーブルやレイヤーとの関係があらかじめ確立されているものもあります。レイヤーにリレーションシップがある場合、自動的に検出され、関連レコードを表示するポップアップを設定できます。ポップアップコンテンツ要素の下部に、関連レコードを設定する追加オプションが表示されます。詳細については、「関連レコードの表示」を参照してください。

レイヤーのポップアップ設定の保存

Map Viewer でレイヤーのポップアップを設定すると、設定はマップと共に保存されます。適切な権限があれば、既存のポップアップ設定を上書きして変更し、新しいマップに保存することができます。

フィーチャレイヤーの設定を他のマップで使用できるようにするには、レイヤーをマイコンテンツのアイテムとして保存します。既存のフィーチャレイヤーのプロパティに変更を加え、ソースレイヤーのプロパティを変更せずに変更を保存する場合、レイヤーを新規アイテムとして保存できます。詳しくは、「レイヤーの保存と複製」をご覧ください。オプションは以下の通りです。

保存
既存のレイヤーアイテムの変更を保存します。このオプションは、レイヤーアイテムを所有しているか、編集権限がある場合に利用できます。

名前を付けて保存
マップのレイヤーからマイコンテンツに新しい項目を作成します。新しいアイテムはレイヤープロパティを保存し、マップ内のレイヤーのソースになります。

複製
マップ内の既存のレイヤーからマップ内に新しいレイヤーを作成します。複製レイヤーはソースレイヤーのデータを参照します。

レイヤーを保存、または新しいレイヤーアイテムとして名前を付けて保存するには、設定（明るい背景色）ツールバーからプロパティをクリックし、情報パネルを開きます。

設定されたポップアップは、ArcGIS Instant Apps、ArcGIS StoryMaps、ArcGIS Dashboards などのアプリケーション全体で表示されます。古いアプリでは、少し異なるポップアップが表示されますのでご注意ください。

例を確認する

ポップアップサンプルマップ

このブログ記事で紹介した例は、ポップアップサンプルマップを使って見ることができます。マップを開いたら、[サインイン] をクリックしてマップをコンテンツに保存します。サインインせずに確認することもできます。

各ポップアップのサンプルは、California Peaksに含まれるユニークなレイヤーで表されます。このレイヤーは、一度に 1 つのレイヤーしか表示できない、排他的な可視性グループレイヤーです。

各レイヤー名は、ポップアップがどのように設定されているかを示しています。コンテンツ（暗い背景色）ツールバーからレイヤーパネルを開き、California Peaks: Pop-up Example のグループレイヤーを開きます。

次に、マップ内のフィーチャをクリックすると、設定されたポップアップが表示されます。

ヒント
ドッキング ボタンをクリックすると、ポップアップがドッキングされ、より多くのコンテンツが表示されます。

ポップアップの設定を確認するには、レイヤーパネルでレイヤーを選択し、設定（明るい背景色）ツールバーのポップアップをクリックします。クリックしてコンテンツ要素を展開し、どのように構成されているかを確認してください。レイヤーによっては、複数のポップアップ要素を使用するものがあることに注意してください。

例を確認する

以下は、ポップアップサンプルマップにおける各レイヤーの説明と、その設定方法です。

デフォルト(未設定)
レイヤーのデフォルトポップアップ表示は、属性フィールド名をソースからそのまま使用した属性の一覧であり、数値にはデフォルトの書式設定が適用されます。これは California Peaks: Default (not configured) レイヤーのデフォルトポップアップです。

情報表示を改善するために、いくつかの簡単な変更を加えることができます。例えば、LATやLONGなど不要なフィールドは非表示にできます。フィールドエイリアスを使用すれば、大文字表記を小文字混在表記に変更し可読性を向上させられます。フィールド表示名（エイリアス）を活用すれば、より理解しやすい名称に変更可能です。例えば DESC_ を Description に変更するなどです。さらに数値表示は、カンマの有無や小数点以下の桁数を指定してフォーマットできます。

PHOTO_URL、PHOTO_CREDIT、REFなどの一部のフィールドには、ポップアップをさらに強化するために使用できるリンクが含まれています。

設定済みフィールド
California Peaks：Configurated fields レイヤーが次の段階へ進みます。フィールドペインで適用された設定を使用し、表示名が変更され、数値表示が設定されました。

ポップアップフィールドリスト要素では、フィールドの右側にある×をクリックすることで、フィールド（LATやLONGなど）を削除できます。

フィールドは整理しやすくするため、並び替えも可能です。左側のフィールドハンドルを掴み、新しい位置にドラッグ＆ドロップしてください。

設定前のフィールドリスト要素（左側）と設定後のフィールドリスト要素（右側）を比較してください。わずかな変更で、ポップアップは大幅に改善されました。

単一フィールドのテキスト

説明フィールドには峰の説明テキストが含まれます。 California Peaks: Text from one field レイヤーのポップアップテキストは、テキストメディアボックス内の {DESC_} フィールドを使用します。

フィールドを選択するには、テキストエディターを開き、フィールドリストツールを開くか、または {（左波括弧）を入力して開始します。フィールドのドロップダウンリストから Description を選択します。

書式付きテキスト

California Peaks: Formatted text レイヤーは、フィールドとテキストを色と書体（デフォルトから 14 ポイントの Verdana に変更）で組み合わせたテキスト要素を使用しています。また、REF フィールドの URL を使用して「詳細情報…」リンクが追加されています。

テキストと写真

California Peaks: Text + photo と同じテキスト要素を使用し、{PHOTO_URL} フィールドに保存されたURLから画像要素を追加します。画像がポップアップ領域の幅全体を完全に埋めるようにしたい場合は、幅 400 ピクセル以上の画像を使用してください。

ヒント
画像はポップアップ内に収まりますが、表示パフォーマンスを最適化するには、常に画像の物理的なサイズを縮小することが最善です。ポップアップで使用する縮小サイズの写真を作成し、必要に応じて元のサイズの写真へのリンクを設定してください。

テキストと動画

California Peaks: Text + video レイヤーは、上のレイヤーと似ていますが、写真を自動再生動画に置き換えます。動画はエディターの HTML ソース ボタンから追加できます。

動画はHTML5の <video> タグおよび関連要素を使用してサポートされています。詳細については、W3Schools HTML Video を参照してください。

テキストと写真とチャート

California Peaks: Text, photo, chart は上のレイヤーを基に構築され、山頂の標高とプロミネンス（山の高さを、その山を囲む最も低い等高線に対して測ったもの。ただし、その等高線内により高い山頂が含まれない）を比較するチャート要素を追加します。

グラフを追加する際は、必要なフィールドを選択し、データに応じて値の表示方法（棒グラフ、折れ線グラフ、円グラフ）を選択します。

チャートと画像はどちらもメディア要素です。画像またはチャート要素内に複数のメディア要素を追加することで、メディアグループを作成できます。これにより、縦方向ではなく横方向のポップアップ表示が実現され、チャートまたは画像の両側に表示される左右の矢印を使用して操作できます。

HTML

California Peaks: HTML はハイパーテキストマークアップ言語（HTML）を用いて、表を作成し、出典へのリンク付きグラフィックを追加するために2つのテキスト要素を使用します。

最上位のテキスト要素は [表の挿入] ツールを使用して表の作成を開始しますが、HTMLソースエディターで完成させます。2番目のテキスト要素は [ソース] ツールを使用してHTMLを入力します。

Arcade 式

ArcadeはArcGIS全体でサポートされている式言語です。計算の実行、テキストの操作、論理式の評価に使用できます。

ポップアップでは、Arcade は2つの方法で使用されます。フィールドのように評価可能なテキスト要素内の式を作成する場合、またはコンテンツのブロックを返す独立した要素として使用する場合です。

California Peaks: Text + Arcade expression は、単一の式（{expression/expr0}）を用いて、プロミネンスの順位を説明する文字列を返します。

式を作成、編集、または表示するには、[式を管理] をクリックし、次に式をクリックするか、[式を追加] をクリックします。

詳細については、「ArcGIS Arcade を使用したポップアップの基礎」を参照してください。

添付ファイル

添付ファイルは、フィーチャレイヤーに含まれるファイルまたは画像です。添付ファイルは通常、ArcGIS Field Maps、ArcGIS Survey123、ArcGIS QuickCapture などで撮影された写真ですが、Map Viewer や ArcGIS Pro を使用して写真やその他のドキュメントを追加することもできます。添付ファイルはリンクとは異なり、ドキュメントがフィーチャ自体に保存されます。

California State Boundary: Attachments レイヤーには複数の添付ファイルがあります。写真 3 枚と PDF ファイル 1 つです。レイヤーに添付ファイルがある場合、ポップアップ設定パネルに自動的に添付ファイル要素が表示されます。添付ファイル要素の設定項目には、タイトル、説明、表示オプションが含まれます。

レイヤーは、ズームアウトした時のみ表示されるように設定されています。レイヤーの表示を切り替えた後、オプション（…）をクリックして [レイヤーにズーム] を選択してください。

州境界内をクリックすると添付ファイルが表示されます。デフォルトの添付ファイル表示オプションは自動であり、アプリが最適な方法で添付ファイルを表示できるように設定されています。なお、添付ファイル表示はリスト形式に設定することも可能です。

アプリ内のポップアップ

ポップアップを設定すると、すべてのアプリとデバイスで共通して使用されます。例えば、上記の例で HTML を使用して設定したポップアップは、ArcGIS StoryMaps で作成したストーリー内で以下のように表示されます。

ヒント
基本的なポップアップ設定はアプリやデバイス間で共通ですが、設定可能なアプリやアプリビルダーによってはポップアップの内容が若干異なる表示になる場合があります。特定のアプリやデバイス向けにマップを作成する場合は、アプリ内で設定をテストし、レイヤーのポップアップ設定を適宜調整することで最適な結果を得られます。

参考リンク

ArcGIS Online ヘルプ
https://doc.arcgis.com/ja/arcgis-online/create-maps/configure-pop-ups-mv.htm
ArcGIS リソース集
https://doc.esrij.com/online/users-guide/map/popup/

ポップアップの基礎