ポップアップ ウィンドウの構成

前のワークフローでは、レイヤの追加とそのプロパティの設定を行って、マップを作成しました。火山や溶岩流危険地帯用のポップアップ ウィンドウなど、さらに高度なプロパティの一部は、レイヤの追加時にすでに設定済みです。このワークフローでは、そのポップアップがどのように構成されたかを確認します。

マップを開く

手順:
  1. Web ブラウザで、ArcGIS Online のホーム ページを開きます。www.arcgis.com/home
  2. 右上隅の [サイン イン] リンクをクリックします。
  3. ユーザ名とパスワードを入力し、[サイン イン] をクリックします。
    [サイン イン] ページ

    組織のホーム ページが表示されます。サイトは随時変更されるので、最新のマップおよびアプリケーションの表示は異なる場合があります。

    組織のホーム ページ

    注意注意:
    個人アカウントを使用してサイン インした場合は、一般に公開されている ArcGIS Online のホーム ページが表示されます。それでも問題ありません。
  4. バナーの上のリボンで、[マイ コンテンツ] ボタンをクリックします。
    組織のホーム ページの [マイ コンテンツ] ボタン
  5. [マイ コンテンツ] ページで、ハワイの火山のマップ (どちらのマップでもかまいません) のタイトルをクリックし、詳細ページを開きます。
    ユーザの [マイ コンテンツ] ページに表示される Web マップのリスト
    注意注意:

    前のワークフローのいずれかに火山マップがない場合は、組織のギャラリーから Hawaii Island Volcanism の Web マップを開き、新しい名前で保存して、手順 7 に進みます。(Center for Hawaii Island Analysis のメンバーでない場合は、公開 URL からこのマップを開くことができます。)

  6. 詳細ページで、サムネイル画像をクリックしてマップを開きます。
    アイテムの詳細ページにあるマップのサムネイル画像
  7. サイド パネルで、[マップのコンテンツの表示] をクリックします。
    [マップのコンテンツの表示] ボタン
  8. マップ上の火山フィーチャをクリックすると、そのポップアップ ウィンドウが開きます。
    フアラライ火山のポップアップ ウィンドウ
  9. ポップアップ ウィンドウで、サムネイル画像をクリックします。

    キャプション付きの大きな画像が、新しいブラウザ タブまたはウィンドウに表示されます。

  10. 大きな画像が表示されているブラウザ タブまたはウィンドウを閉じます。
  11. ポップアップ ウィンドウのタイトル バーの白色の矢印をクリックすると、基になる危険地帯のポップアップ ウィンドウが表示されます (複数存在する場合は、クリックしてすべてに移動できます)。
    注意注意:

    ロイヒ火山をクリックした場合は、隠れている危険地帯はありません。

  12. 開いているポップアップ ウィンドウを閉じます。

    ポップアップ ウィンドウによって、Web マップが面白くなります。では、このような火山や溶岩流の情報はすべて、どこから来たのでしょうか。画像はどこに格納されているのでしょうか。これらをどのようにしてまとめるのでしょうか。

ポップアップ ウィンドウの削除と有効化

フィーチャ サービスが公開されると、デフォルトのプレーン ポップアップ ウィンドウ構成になります。サービスの所有者は、この構成を変更できます。変更するには、そのサービスをレイヤとしてマップに追加する人すべてに対する新しいデフォルトの外観を設定します。このセクションでは、プレーン ポップアップ ウィンドウ構成が Volcanoes レイヤの場合にどのように表示されるかを説明します。

手順:
  1. [コンテンツ] パネルで、Hazard Zone Boundaries レイヤをオフにします。
    [コンテンツ] パネルでオフになった Hazard Zone Boundaries レイヤ

    このレイヤをオフにするとそのポップアップ ウィンドウが表示されなくなるので、Volcanoes レイヤに集中できます (危険地帯の境界は透明なので、マップの外観は変わりません)。

  2. ポインタを Volcanoes レイヤの上に移動して、表示される小さな矢印をクリックします。レイヤ プロパティのショートカット メニューで、[ポップアップの削除] を選択します。
    レイヤ プロパティ メニューの [ポップアップの削除] コマンド
  3. マップ上の火山フィーチャをクリックします。もう一度試してみます。

    何も発生しません。ポップアップ ウィンドウは削除されました。

  4. Volcanoes レイヤのレイヤ プロパティを再び開き、[ポップアップの有効化] を選択します。
  5. マップ上で火山フィーチャをクリックし、ポップアップ ウィンドウを開いたままにします。
    マウナケア火山のデフォルトのプレーン ポップアップ ウィンドウ

    ポップアップ ウィンドウはデフォルトのプレーン構成になります。すなわち、左側にフィールド名、右側に対応する値のあるリストです。

    注意注意:

    「詳細」は、フィールド値が URL の場合にデフォルトで表示されるテキストです。

    デフォルトのポップアップ ウィンドウ構成

    フィーチャ サービスのデフォルトのポップアップ ウィンドウ構成は、フィールド名と値のリストです。サービスの所有者は、レイヤ プロパティ メニューの [アイテム プロパティを保存] コマンドで新しい構成を保存できます (このコマンドは、サービスの所有者のみ使用できます)。新しい構成は、マップ レイヤとしてサービスを追加したユーザに対して表示されるようになるので、ユーザ側で何もしなくても、適切なポップアップ ウィンドウがマップに表示されます。特定のマップの中で、マップ所有者は、ポップアップ ウィンドウをカスタマイズして構成できます。

簡単なポップアップ ウィンドウ プロパティの構成

ポップアップ ウィンドウには、タイトル、コンテンツ、および画像やグラフなどのメディアを含め、構成できるプロパティが数多くあります。このセクションでは、ポップアップ ウィンドウ構成にいくつかの小さな変更を行い、そのプロセスがどのように機能するかを把握します。

手順:
  1. Volcanoes レイヤのレイヤ プロパティ メニューを開き、[ポップアップの構成] を選択します。

    サイド パネルが変化して、ポップアップ プロパティが表示されます。

    ポップアップ プロパティ パネル
    デフォルトのポップアップ タイトルは、レイヤ名 (Volcanoes) および中括弧で囲んだフィールド名になっています。この場合、フィールド名は NAME で、火山の名前を格納します。フィールド名は変数のような働きをするので、マップ上で火山をクリックすると、そのポップアップ ウィンドウのタイトルにはその特定の火山の名前が表示されます。
    マップ上に表示したときのマウナケア火山のポップアップ ウィンドウ タイトル
  2. [ポップアップ タイトル] ボックスで、{NAME} フィールド以外のテキストをハイライトして削除します。
    NAME フィールドのみが入っている [ポップアップ タイトル] ボックス
  3. パネルのさらに下にある [ポップアップのコンテンツ] セクションで、[属性の構成] をクリックします。
    [ポップアップ プロパティ] パネルの [属性の構成] リンク

    [属性の構成] ダイアログボックスは、表示の状態 (オン/オフ)、フィールド名 (変更不可)、およびフィールド エイリアス (変更可) によって、フィーチャ サービスのフィールドの一覧を表示します。

    属性の構成ダイアログ ボックス
  4. [属性の構成] ダイアログ ボックスの [表示] 列で、{NAME} フィールドのチェックボックスをオフにします。

    火山の名前は、すでにポップアップ ウィンドウ タイトルに表示されています。

  5. {PhotoCredit} フィールドと {Last_eruption} フィールドのチェックボックスもオフにします。
  6. [フィールドのエイリアス] 列で、VolcanoPicture をクリックして、テキストを編集可能にします。そこに「Image」と入力します。
    エイリアスとして「Image」が入力された VolcanoPicture フィールド
  7. もう一度 [フィールドのエイリアス] 列で、Volcano_Thumb をクリックします。このエイリアスを「Thumbnail」に変更して、Enter キーを押し、編集内容をコミットします。

    [属性の構成] ダイアログ ボックスには、次の図でハイライトした変更が反映されます。

    変更箇所をハイライトした [属性の構成] ダイアログ ボックス

  8. [フィールド名] 列で、{ELEVATION} をクリックします。

    ダイアログ ボックスの右側に、書式設定のプロパティが表示されます。

  9. [形式] のドロップダウン矢印をクリックして、[0 小数桁] を選びます。
    ELEVATION フィールドの数字の形式を小数点以下 0 桁に設定
    注意注意:

    これはレイヤの中で唯一の数値フィールドであり、そのため書式設定できる唯一のフィールドです。

  10. [属性の構成] ダイアログ ボックスの [OK] をクリックします。
  11. [ポップアップ プロパティ] パネルの下部にある [ポップアップを保存] ボタンをクリックします。
  12. マップ上の火山をクリックします。
    マウナケア火山のポップアップ ウィンドウ

    ポップアップ ウィンドウに、タイトルおよびコンテンツへの変更が反映されます。

  13. [詳細] リンクの 1 つをクリックします。

    どちらのリンクをクリックした場合も、新しいブラウザ タブまたはウィンドウに画像 (フル サイズまたはサムネイルのどちらか) が表示されます。これで問題はありませんが、使い慣れた、わかりやすい管理方法ではありません。

  14. 火山の画像が表示されているブラウザ タブやウィンドウがあれば閉じます。
  15. マップ上でポップアップ ウィンドウを閉じます。
  16. マップを保存します。

    次のセクションでも、ポップアップ ウィンドウ構成の操作を続けます。

    情報の取得元

    ポップアップ ウィンドウで構成するフィールド (属性) は、サービスの公開元のデータから取得します。これは、シェープファイルまたはジオデータベースのフィーチャクラスのような空間データセットの場合があります (この場合には、属性はデータセットの関連テーブルに属しています)。あるいは、テキスト ファイルまたは Excel ワークシートの場合があります。どちらの場合も、属性およびその値はテーブル形式で格納されます。テーブル形式では、行で地理フィーチャを表し、列に、フィーチャに関する情報を含めます。画像へのパスは、この例の VolcanoPicture フィールドのように、テキスト文字列として格納されます。画像そのものは、アクセスできるサイト上に格納する必要があります。これは独自サーバでも、写真共有サイトのような一般サーバでもかまいません。

    火山属性の .csv ファイル

ポップアップ ウィンドウのコンテンツの構成

手順:
  1. Volcanoes レイヤのレイヤ プロパティを開き、[ポップアップの構成] を選択します。
  2. ポップアップ ウィンドウのタイトルは、前のセクションで設定したままにします。
    [ポップアップ タイトル] 入力ボックス
  3. [ポップアップ コンテンツ] で、[表示] のドロップダウン矢印をクリックし、[カスタム属性表示] を選択します。
    ポップアップ ウィンドウのコンテンツ表示の選択肢を表示するドロップダウン リスト
  4. [構成] ボタンをクリックします。
    [ポップアップ プロパティ] パネルの [構成] ボタン

    [属性表示のカスタマイズ] ダイアログ ボックスが開きます。このダイアログ ボックスは、大きい空の入力ボックスと、横に並んだ書式設定ツールから成ります。

    [属性表示のカスタマイズ] ダイアログ ボックス

  5. 空の入力ボックスをクリックし、「Volcano type:」と入力してから、Space キーを押します。
  6. ダイアログ ボックスのツールバーの [Add field name] ボタンをクリックし、[TYPE {TYPE}] を選択します (ドロップダウン リストにはフィールド エイリアスおよびフィールド名の両方が表示されます)。
    [Add field name] ボタンとフィールド名のドロップダウン リスト

    入力ボックスは次のようになっているはずです。

    カスタム属性表示の入力ボックス
  7. 入力ボックスの「Volcano type:」テキストをハイライトし、ツールバーの [太字] ボタン [太字] ボタン をクリックします。
  8. 画面内の空白部分をクリックしてテキストのハイライトを解除します。
    「Volcano type:」が太字になった入力ボックス
  9. 必要に応じて、{TYPE} フィールド名の後の行の最後をクリックし、Enter キーを押して、新しい行を始めます。
  10. 同じ手順に従って、標高と最終噴火日のテキスト、太字書式設定、およびフィールド名を追加します。次の画像を参考にしてください。
    完了後の [属性表示のカスタマイズ] ウィンドウ
    注意注意:

    前のセクションで、標高フィールドに小数点以下なしで表示する書式を設定しました。その書式設定は有効なままです。

  11. [属性表示のカスタマイズ] ダイアログ ボックスの [OK] をクリックします。

ポップアップ ウィンドウのメディアの構成

今度は、ポップアップ ウィンドウにサムネイル画像を表示し、そこから大きな画像へリンクするようにします。

手順:
  1. [ポップアップ プロパティ] パネルで、[ポップアップ メディア] の下にある [追加] ドロップダウン ボタンをクリックし、[イメージ] を選択します。
    [追加] ボタンの下に表示されるメディアの選択肢のリスト
  2. [画像の構成] ダイアログ ボックスで、デフォルトのタイトル (「Image 1」) をハイライトして削除します。「Photo:」と入力します。
  3. [タイトル] ボックスの右側にある [Add field name] ボタン [Add field name] をクリックします。フィールドのリストで、下にスクロールして、[PhotoCredit{PhotoCredit}] を選択します。
  4. [タイトル] ボックスで、コロンと左側の括弧の間をクリックして、Space キーを押します。
    [画像の構成] ダイアログ ボックスの [タイトル] 入力ボックス
    ヒントヒント:

    これらの入力ボックスは独自の目的に使用できます。この場合、[タイトル] フィールドには、画像のタイトルではなく、写真家の著作権を格納しています。

  5. [キャプション] ボックスに「Click image to learn more.」と入力します。
  6. [URL] ボックスの右側の [Add field name] ボタンをクリックします。フィールドのリストを下へスクロールして [Thumbnail {Volcano_Thumb}] を選択します。
    [URL] 入力ボックス

    このフィールドには、火山のサムネイル画像の URL があります。

  7. [リンク] ボックスの右側の [Add field name] ボタンをクリックします。フィールドのリストを下にスクロールして、[Image {VolcanoPicture}] を選択します。
    完了後の [画像の構成] ダイアログ ボックス

    [URL] ボックスには、必ず画像へのパスを格納します。画像はポップアップ ウィンドウの下半分に表示され、[リンク] ボックスに格納されているアイテムがどんな種類であっても自動的にリンクされます。それは、この場合のように別の画像でもよく、Web サイト、PDF など、URL 付きであれば何であっても構いません。

  8. [画像の構成] ダイアログ ボックスの [OK] をクリックします。
  9. [ポップアップ プロパティ] パネルの下部にある [ポップアップを保存] をクリックします。
  10. マップ上の火山フィーチャをクリックします。
    マウナロア火山のポップアップ ウィンドウ

    ポップアップ ウィンドウに構成が表示されています (一部のテキスト書式や水平の区切り線は自動的に適用されます)。

    ヒントヒント:

    サムネイル画像に割り当てられる領域は 200 x 150 ピクセルです。サイズ変更を行わずに、この画像領域に合わせる場合は、画像編集ソフトウェアを使用してサムネイル画像をトリミングしてください。

  11. サムネイル画像をクリックしてリンクをテストし、大きな画像が表示されているブラウザ タブまたはウィンドウを閉じます。
  12. マップ上でポップアップ ウィンドウを閉じます。
  13. マップを保存します。

実習:危険地帯のポップアップ ウィンドウの構成

この手順を学習したので、今度は Hazard Zone Boundaries レイヤのポップアップ ウィンドウを構成してみてください。まず、元に戻せるように現在の構成を記録しておきます。

  • Hazard Zone Boundaries レイヤをオンにします。
  • そのレイヤ プロパティを開き、[ポップアップの構成] を選択します。
  • [ポップアップのコンテンツ] で [構成] ボタンをクリックすると、現在のコンテンツの構成が表示されます。このポップアップ ウィンドウのテキストの大部分は、{Description} というフィールドに格納されています。
  • [ポップアップ メディア] の下にある画像タイトルをダブルクリックするか、[メディアの構成] ボタン [メディアの構成] をクリックすると、現在のメディアの構成が表示されます。

では、ポップアップ ウィンドウを削除し、次にそれらを有効化し、デフォルト構成から開始します。

ヒントヒント:

作業に行き詰まり、元の構成に戻すことが必要になった場合は、Lava Flow Hazard Zone Boundaries フィーチャ サービスをマップに再び追加できます。

次の手順

次のチュートリアルでは、マップを Web アプリケーションとして公開して優れたデザインの外観にする方法について学びます。

ArcGIS Resources のチュートリアル ページで、このシリーズの全チュートリアルの一覧を確認できます。