Web マップの Web アプリへの変換
ストーリーを伝えるためのコミュニケーション デバイスとして、マップを中心とした Web アプリが最適であるということでチームが合意しました。 Web マップを検索および修正し、そのマップから新しい Web アプリを作成し、その基本的なレイアウト構造を構成します。
住居データを含むマップの検索
空の Web マップから始めるのではなく、既存のマップを修正します。 ArcGIS Living Atlas of the World は、厳選された地理データとマップのコレクションです。 ここには、公共政策における空間/データのリテラシー レベルの向上を目指したサイト Esri Maps for Public Policy が含まれています。 このサイトで、住宅政策に関連するデータとマップを検索します。
- Esri Maps for Public Policy サイトに移動します。
ここでは、公共政策のさまざまなトピックに関連するデータ リソースを検索できます。 このチュートリアルでは、住居に関連する Web マップを検索します。
- [Issues] タブをクリックします。
- [Economic Opportunity] タブをクリックします。 検索バーに「vacant housing」と入力し、Enter キーを押します。
- 検索結果で、[Owned, Rented, or Vacant Housing Units] という名前の Web マップ (所有者: lisa_ berry) のタイトルをクリックします。
このマップのアイテム ページが表示され、マップとそこに含まれているデータを読むことができます。 このマップには、持ち家住宅、賃貸住宅、空き家住宅が多い地域が示されています。 このマップのデータは、米国国勢調査局によって実施された ACS (全米コミュニティ調査) から取得されました。 作成するアプリはこのマップをベースにするとよいでしょう。
注意:
公共政策の意思決定では一般に ACS 5 年推定データが用いられ、このデータは貧困、収入、住居などの広範なトピックをカバーしています。 ArcGIS Living Atlas で提供されている ACS レイヤーの詳細については、「Living Atlas の Census ACS レイヤーを使用したコミュニティの詳細」をご参照ください。
このマップは一般公開用の Web アプリで使用することを想定しているため、次に進む前に、コンテンツの使用に関する特別な制約や制限事項がないか確認します。
- アイテム ページの下部までスクロールして [利用規約] セクションを見つけます。
この Web マップは Esri の Web サービスおよび API に関する利用規約の下でライセンス供与されています。 これらの利用規約の詳細については、[View Summary] または [View Terms of Use] をクリックしてください。 概要では、Esri とそのデータ プロバイダーへの帰属を示す限りにおいて、誰でも内部および外部用にこの Web マップを使用できることが説明されています。
- 上にスクロールして [著作権 (帰属)] セクションを見つけます。
これはデータ プロバイダーへの帰属を適切に示す際に必要となる情報です。 この情報を後で使用します。
Web マップの構成
Web アプリの主なコンテンツとして使用可能な、住居形態に関する Web マップを見つけて、このプロジェクトでその Web マップを使用する権限があることを確認しました。 次に、Web マップのコピーを保存し、作成する Web アプリの目的に合わせて Web マップのレイヤーを再構成します。
- アイテム ページの一番上までスクロールし、[サイン イン] をクリックします。 ArcGIS の組織アカウントにサイン インします。
注意:
組織アカウントがない場合は、ソフトウェア アクセスのオプションをご参照ください。
- アイテム ページの上部にある [Map Viewer で開く] ボタンをクリックします。
注意:
[Map Viewer で開く] ボタンが表示されない場合、[Map Viewer Classic で開く] の横にある矢印をクリックし、[Map Viewer で開く] を選択します。
マップが開きます。
- [コンテンツ] (暗い背景の) ツールバーにある [レイヤー] ボタンをクリックします。
ヒント:
[コンテンツ] ツールバーが表示されない場合、ページの上部にある [新しい Map Viewer で開く] をクリックします。
[レイヤー] ウィンドウが表示されます。 州、郡、および国勢調査地区レベルの住居データが含まれている 3 つのレイヤーがリストに表示されます。 それぞれのレイヤーは異なる縮尺で表示するように設定されているため、現在は [Tract] レイヤーだけが表示されています。
擁護団体が注目するのは地域レベルの住居問題なので、国勢調査地区レベルのデータのみを対象とします。 Tract レイヤーだけが含まれている Web マップのコピーを保存します。
- [レイヤー] ウィンドウの State レイヤーで [オプション] ボタンをクリックします。 [削除] をクリックします。
- また、[County] レイヤーも削除します。
作成する Web アプリに関連するデータだけが残りました。 次に、これがすべての縮尺で表示されるようにします。
- [Tract] レイヤーをクリックします。
[プロパティ] ウィンドウがマップの反対側に表示されます。
ヒント:
[プロパティ] ウィンドウが表示されない場合、[設定] (明るい背景の) ツールバーにある [プロパティ] ボタンをクリックします。
- [プロパティ] ウィンドウで下にスクロールします。 [表示範囲] スライダーを調整して [世界] から [部屋] までの範囲に設定します。
- [コンテンツ] ツールバーで、[保存して開く] ボタンをクリックしてから [名前を付けて保存] をクリックします。
- [保存] ウィンドウで、[タイトル] に「Housing map」と入力します。 [サマリー] ボックスで、既存のテキストを以下に置き換えます。
This map shows if owner-occupied housing, rented housing, or vacant housing is more prevalent in an area. This national data is from the most current American Community Survey (ACS) estimates census tracts. This is a copy of the web map found here: https://www.arcgis.com/home/item.html?id=8e3b994782444345953a30e2a6e5ab23
- [マップの保存] をクリックします。
Web アプリの作成
自分の要件に合わせて Web マップが構成されました。 ArcGIS Experience Builder を使用して、このマップから Web アプリを作成します。 アプリ内のマップと列のレイアウトを設計します。
- [コンテンツ] ツールバーで、[アプリの作成] ボタンをクリックします。
オプションのリストが表示されます。 Web マップから Web アプリを作成可能な ArcGIS 製品がいくつかあります。 製品ごとに、提供されるツールや適した状況は異なります。 このプロジェクトでは、Web マップと組織のスタイルに合わせてアプリの外観を細かく制御します。 カスタマイズのコントロールが最も多く備わっている ArcGIS Experience Builder を選択します。
- [Experience Builder] をクリックします。
テンプレート ギャラリーが表示されます。 今後のプロジェクトでは、これらのテンプレートを使用してレイアウトを事前に構成しておくことで時間を節約できますが、このチュートリアルでは、レイアウトを構成する方法についてより直接的に学べるように、空のキャンバスから始めます。
- [空白の全画面] カードで、[作成] をクリックします。
- [はじめに] ウィンドウが表示されたら、[スキップ] をクリックします。
ArcGIS Experience Builder が開き、キャンバスの中央にマップが表示されます。 エクスペリエンスの名前を、よりわかりやすいタイトルに変更します。
- 上部のリボンの [無題のエクスペリエンス] をクリックし、「Housing Availability」と入力します。
次に、キャンバス全体が表示されるようにします。
- 画面の右下隅にある [幅を現在のウィンドウに調整] ボタンをクリックします。
- [ウィジェットの挿入] ウィンドウがまだ表示されていない場合、サイド ツールバーで [挿入] ボタンをクリックします。
- [ウィジェットの挿入] ウィンドウの下部までスクロールし、[レイアウト] セクションを見つけます。
レイアウト ウィジェットを使用して、アプリ内のウィジェットのグループを整理できます。通常は、レイアウト ウィジェット内の方が、ウィジェットのサイズをより簡単に変更して整然と配置することができます。
- [列] ウィジェットをキャンバス上にドラッグします。
- [列] ウィジェットのツールバーで、配置ボタンをクリックし、[全高] をクリックします。
- 配置ボタンを再びクリックし、[左にスナップ] をクリックします。
列が配置されたので、マップのサイズを変更します。 このプロジェクトの目的の 1 つは、マップに注目が集まるアプリにすることなので、キャンバス全体にマップが表示されるようにします。
- [マップ] ウィジェットをクリックして選択します。 マップのツールバーで、配置ボタンをクリックし、[フル サイズ] をクリックします。
マップがキャンバス全体に広がって配置され、その一部は列に隠れて見えなくなります。 次に、マップのプロパティ設定でデフォルトのマップ範囲を定義します。
- [マップ] ウィンドウの [初期表示] で、[カスタム] をクリックし、[変更] をクリックします。
[初期表示の変更] ウィンドウが表示されます。
- 自分のコミュニティまたは対象となる米国の別の地域 (ニューヨーク市のマンハッタン島など) にズームします。
- [OK] をクリックします。
[マップ] ウィジェットに対してさらにいくつかの構成を行います。
- [マップ] ウィンドウの [ツール] で、[検索] をオフにします。
後から、より多くのコントロールを備えた [検索] ウィジェットを追加します。
- [マップ] ウィンドウの下部付近で、[ツール レイアウト] の下の [大および中サイズ] で、2 つ目のオプションを選択します。
マップのナビゲーション コントロールがマップの右下隅に移動します。 これまでは、これらが列に隠れていました。
最後に、ポップアップを無効にします。 後からこのチュートリアルで、各国勢調査地区におけるタイプ別住宅数に関する情報を表示するウィジェットを追加します。 この情報があるため、ポップアップは不要になります。
- [マップ] ウィンドウの下部にある [オプション] で、[ポップアップの有効化] をオフにします。
- ビルダー ツールバーの [保存] ボタンをクリックします。
- Map Viewer のブラウザー タブと Esri Maps for Public Policy のブラウザー タブを閉じます。
このチュートリアルではこれまでに、Web マップを検索して要件に合わせて修正し、ArcGIS Experience Builder でこれを Web アプリに変換しました。
ウィジェットの追加と構成
マップを構成した後は、ユーザーがデータを簡単に理解して調査できるようにするため、いくつかのウィジェットを追加します。 [チャート]、[テキスト]、[検索]、[メニュー] ウィジェットを追加します。
チャート ウィジェットの追加
空の列にパイ チャートを追加します。 このチャートをマップ内のデータに接続して、選択した国勢調査地区における住居の構成比が表示されるようにします。
- 必要に応じて、ArcGIS Experience Builder で [Housing Availability] アプリを開き直します。
- [ウィジェットの挿入] ウィンドウで、[検索] ボタンをクリックし、「チャート」と入力します。
- 検索結果で、[チャート] ウィジェットを列上にドラッグします。
空の [チャート] ウィジェットが列に表示されます。 デフォルトでは、列には背景色がないため、列の残りの部分は透明表示されています。
次に、チャートを構成して、マップからの住居情報が表示されるようにします。
- [チャート] ウィンドウで、[データの選択] をクリックします。
- [データの選択] ウィンドウで、[Housing map] を展開して [Tract] をクリックします。
- [チャート] ウィンドウの [Tract] で [デフォルト] をクリックし、[選択フィーチャ] を選択します。
- [チャート タイプ] で、[チャートの選択] をクリックし、[チャート タイプ] ウィンドウで、[パイ チャート] を選択します。
このデータにパイ チャートが適しているのは、このデータが 3 つのカテゴリ (持ち家住宅、賃貸住宅、空き家住宅) に分かれていて、その住宅数の合計が 100% になるためです。
- [チャート] ウィンドウの [データ] で、次のパラメーターを設定します。
- [カテゴリ タイプ] で、[フィールドを使用] を選択します。
- [統計] で、[合計] を選択します。
- [数値フィールド] で、[Vacant Housing Units]、[Owner-Occupied Housing Units]、および [Renter-Occupied Housing Units] をオンにします。
- [並べ替え] で、[カテゴリ軸] を選択します。
チャートに [データが見つかりません] という警告が表示されます。 この警告が表示されるのは、選択したフィーチャをチャートに表示するように選択したにもかかわらず、フィーチャが現在 1 つも選択されていないためです。
- ビルダー ツールバーの [ライブ ビュー] をクリックします。
ライブ ビュー モードでは、Web アプリをユーザーと同じように操作できます。 ウィジェットを選択して移動することはできません。
- マップで、国勢調査地区をクリックします。
国勢調査地区を選択したので、パイ チャートが青色になって警告が消えます。 引き続き [チャート] ウィジェットを構成するため、ライブ ビュー モードを終了します。
- [ライブ ビュー] をオフにします。 [チャート] ウィジェットをクリックします。
[チャート] ウィンドウが再び表示されます。 3 つのカテゴリをわかりやすく示す凡例をチャートに追加します。
- [チャート] ウィンドウで、[一般] の横にある矢印をクリックしてこのセクションを展開します。
- [凡例] をオンにします。 [凡例の位置] で、[下] を選択します。
次に、マップ上の色に合わせてチャートに色を追加します。
- [スライス] セクションを展開します。 [カラー モード] で、[カテゴリ別] を選択し、設定ボタンをクリックします。
- [スライス色] ウィンドウで、B25002_003E (空き家住宅) の横の色をクリックし、[その他] をクリックします。
- [Hex] に「#aa7b7b」と入力して、Enter キーを押します。
色が落ち着いた赤色に更新されました。
- [B25003_002E] (持ち家住宅) の色を「#d3c268」(黄色) に変更します。 [B25003_003E] (賃貸住宅) の色を「#6b99b5」(青色) に変更します。
チャートと凡例がマップと同じ色になりました。 選択した国勢調査地区が黄色の場合、パイ チャートの最も大きいスライスも黄色になります。
マップの色に合わせてチャートを構成することで、チャートがわかりやすくなり、マップの凡例としての機能も備えることができます。
- [ライブ ビュー] をオンにし、いくつかの国勢調査地区をクリックしてチャートが変化することを確認します。
注意:
一部の国勢調査地区では、住居タイプが 1 つまたは 2 つしかないため、スライスが 1 つか 2 つしか表示されません。
空の選択のビューの構成
状況によっては、これ以降も [チャート] ウィジェットに [データが見つかりません] という警告が表示されます。 デフォルト フィーチャとして機能する国勢調査地区を選択します。 Web アプリを初めて開くと、チャートにはデフォルト フィーチャのデータが表示されます。
- マップ上で、国勢調査地区以外のエリア (セントラル パークや水辺など) をクリックします。
チャートが [データが見つかりません] ビューに戻ります。 Web アプリを初めて開いたときにもチャートはこのような表示になります。 空の選択のビューを構成することで、この問題を解決できます。
- サイド ツールバーで、[データ] ボタンをクリックします。 [データ] ウィンドウで、[Housing map] カードをクリックします。
- [使用中] の下の [Tract] カードをクリックします。
- ウィンドウの下部にある [空の選択のビュー] チェックボックスをオンにします。
[チャート] ウィジェットに赤、青、黄のスライスが表示されます。 この設定によって、フィーチャが 1 つも選択されていない場合にチャートが空で表示されることがなくなりました。
- このチェックボックスの横にある設定ボタンをクリックします。
[空の選択のビュー] ウィンドウが表示されます。 ここでは、マップ上で何も選択されていないときに表示される国勢調査地区を選択します。 次の手順で、ニューヨーク州ニューヨーク郡の国勢調査地区 94 を選択します。 別の都市をマップの中心に置く場合、代わりにそのエリアからいずれかの地区を選択します。
- [フィルター] タブで、[追加] をクリックしてから [項目セット] をクリックします。
2 つの空の項目が表示されます。
- [追加] を再びクリックし、[項目] をクリックします。
項目が 3 つになりました。 1 つ目の項目を使用して、データを州によって絞り込みます。
- 1 つ目の項目の [OBJECTID] をクリックし、[State] を選択します。 2 つ目のメニューで、[に 等しい] を選択します。
- 3 つ目のメニューの横にある [ソース タイプの選択] ボタンをクリックし、[個別値] を選択します。
[State] フィールド内のすべての個別値のリストから選択できるようになりました。
- 3 つ目のメニューをクリックします。 検索バーに「new」と入力して [New York] を選択するか、対象の州を選択します。
- 2 つ目の項目を構成して [County に等しい New York County (または対象の郡)] にします。 3 つ目のメニューで郡が表示されない場合、[さらに検索] をクリックしてさらに多くの検索結果を表示します。
ヒント:
ソース タイプを [個別値] に変更してください。
- 3 つ目の項目を構成して [NAME に等しい Census Tract 94 (または対象のエリア内の国勢調査地区)] にします。
- 項目の上にあるコントロールが [And] に設定されていることを確認します。
[And] が選択されている場合、フィーチャは 3 つの項目すべてを満たしている必要があります。 テーブルには、この 3 つの項目によって選択されるフィーチャごとに 1 つの行が表示されます。 マップで何も選択されていない場合、パイ チャートにはこの国勢調査地区の結果が表示されます。
- [変更を適用] をクリックします。
注意:
Web アプリを初めて開くとデフォルトのチャート ビューが表示されます。 マップの空白部分が選択されている場合、データが見つかりませんというビューが引き続き表示されます。
チャートの外観の変更
[チャート] ウィジェットのいくつかの外観プロパティを調整することでチャート ウィジェットを完成させます。 最初に、ウィジェットの上部にあるボタンを削除します。 これらのボタンの機能は作成するアプリでは必要ありません。マップのメッセージが曖昧にならないように、これらのボタンを削除します。
- [ライブ ビュー] をオフにし、[チャート] ウィジェットを選択します。
- [チャート] ウィンドウで、[ツール] セクションを展開します。 [選択] をオフにします。
2 つのボタンが [チャート] ウィジェットから消えます。
- [アクション] タブで、[データ アクション] タブをクリックします。 [データ アクションを有効化] をオフにします。
3 つ目のボタンがチャートから消えます。 次に、[チャート] ウィジェットの背景色を変更します。
- [コンテンツ] タブをクリックし、[表示設定] セクションを展開します。 背景色をクリックし、[その他] をクリックします。
- [Hex] に、「#000000」と入力します。 [A] に、「75」と入力します。
[A] は Alpha を意味し、色の不透明度を制御します。 [チャート] ウィジェットの下にあるマップが透けて見えるようになりました。 しかし、テキストはほとんどわかりません。 これを白色に変更します。
- [テキスト エレメント] の横にある設定ボタンをクリックします。
- [テキスト エレメント] ウィンドウで、[凡例ラベル] の横にある編集ボタンをクリックします。
- 黒色の四角形をクリックします。 [標準色] の下で、白色を選択します。
- [チャート] ウィンドウで、[スライス] セクションを展開します。 [アウトライン] の色を黒色に変更します。
完成した [チャート] ウィジェットでは、暗い背景に白色のテキストが表示されます。
テキスト ウィジェットの追加
次に、マップに背景情報を加えるために、タイトルや引用元データなどのテキストを追加します。 テキストのさまざまな部分の書式を設定してさらに読みやすくし、いくつかのリンクを追加して、アプリのユーザーがマップ上のデータについてさらに詳しい情報を見つけられるようにします。
- サイド ツールバーで [挿入] ボタンをクリックします。 [ウィジェットの挿入] ウィンドウで、検索をクリアします。 [テキスト] ウィジェットを見つけて列上のチャートの下にドラッグします。
[テキスト] ウィジェットが [チャート] ウィジェットの下に少し間隔をあけて自動的に配置されます。
- [テキスト] ウィジェットをダブルクリックし、次のテキストをコピーして貼り付けます。
Owned, Rented, or Vacant?
Click a Census Tract to see housing information for that area.
Housing in Tract, County, State. The median rent is $Rent. The median home value is $Value.
Map by Lisa Berry, Esri. Data from U.S. Census Bureau's American Community Survey (ACS) 2015-2019 5-year estimates, Table B25002.
テキスト行の間にスペースを追加します。 3 番目のテキスト行は、後から動的エレメントを追加するとさらに意味のあるものになります。
ヒント:
Ctrl + Shift + V キーまたは Command + Shift + V キーを使用して、書式設定を含めずにテキストを貼り付けます。
次に、[テキスト] ウィジェットの高さを変更します。
- [テキスト] ウィンドウで、[スタイル] タブをクリックします。 [高さ] の横にある矢印ボタンをクリックし、[自動] を選択します。
この設定によって、[テキスト] ウィジェットは常に、その内容すべてを表示するのに十分な高さになり、かつ高すぎることがなくなります。
次に、テキストと背景に [チャート] ウィジェットと同じ色を選択します。
- [テキスト] ウィンドウで、[背景] の下にある [カスタム] をクリックし、[塗りつぶし] の色をクリックします。 [最近使用した色] で、パイ チャートの背景用に作成した半透明の黒色を選択します。
- [コンテンツ] タブをクリックします。 [テキストの書式設定] で、[フォントの色] ボタンをクリックします。 [標準色] の下で、白色を選択します。
- [テキストの書式設定] で、[中央] ボタンをクリックします。
チャートのテキストが白色の中央揃えになりました。 次に、1 番目のテキスト行 (アプリのタイトル) がより大きく太く見えるように書式設定します。
- 1 番目のテキスト行をハイライトします。 テキスト ツールバーで、[太字] ボタンをクリックし、サイズを 25 px に変更します。
ヒント:
テキスト ツールバーが表示されない場合、[テキスト] ウィンドウの [コンテンツ] タブでフォントのプロパティを変更します。
次に、国勢調査地区が何であるかわからないユーザーのために、米国国勢調査局のリソースへのリンクを追加します。
- 2 番目のテキスト行で、Census Tract という単語をハイライトします。 [テキスト] ウィンドウの [コンテンツ] タブで、[テキストの書式設定] の下にある [リンク] ボタンをクリックします。
- [リンクの設定] ウィンドウの [リンク先] で、[URL] を選択します。 [URL] に、「https://www2.census.gov/geo/pdfs/education/CensusTracts.pdf」をコピーして貼り付けます。
- [次のアプリで開く] で、[新しいウィンドウ] を選択します。 [OK] をクリックします。
- [Census Tract] というテキストを太字にします。
全米コミュニティ調査 (American Community Survey) に関する詳細情報へのリンクも設定します。 データの収集方法と収集元に関する情報が提供されていることで、データ ビジュアライゼーションがより信頼できるものとなります。
- 最後のテキスト行で、[American Community Survey (ACS)] というテキストをハイライトし、これを URL「https://www.census.gov/programs-surveys/acs/about.html」にリンクします。
- [American Community Survey (ACS)] というテキストを太字にします。
[テキスト] ウィジェットにはマップのタイトルが含まれているため、これを列の上部に配置します。
- [チャート] ウィジェットを [テキスト] ウィジェットの下にドラッグします。
列のアイテムの間のギャップも削除します。
- 列の空になっている下の部分、または [テキスト] ウィジェットと [チャート] ウィジェットの間のギャップをクリックして列を選択します。
- [列] ウィンドウで、[間隔] に「0」px と入力します。
[テキスト] ウィジェットと [チャート] ウィジェットが 1 つのアイテムとして表示されるようになりました。
ダイナミック テキストの追加
3 番目のテキスト行に、チャートと同じ方法で、マップ上での選択を反映して更新される住居情報を追加します。 パイ チャートを構成したときに、データ内で使用可能なフィールドを見ています。 これらのフィールドのいくつかを [テキスト] ウィジェットに表示します。
- [テキスト] ウィジェットを選択します。 [テキスト] ウィンドウで、[データに接続] をオンにします。 [データの選択] をクリックします。
- [データの選択] ウィンドウで、[Housing map] を展開して [Tract] をクリックします。
[テキスト] ウィジェットがマップ内の住居データにアクセスできるようになりました。
- [テキスト] ウィジェットで、[Tract] という単語をハイライトします。
このテキストを動的コンテンツに置き換えます。
- [テキスト] ウィジェットのツールバーで、[動的コンテンツ] ボタンをクリックします。
- [動的コンテンツ] ウィンドウで、[NAME] フィールドをクリックします。
[テキスト] ウィジェットで、ハイライトされているテキストが [{NAME}] に置き換えられます。 フィールドとカンマの間に余分なスペースも追加されました。
- 余分なスペースを削除します。
- 次のように単語からフィールドに置き換えます。
- [County] という単語を [County] フィールドに置き換えます。
- [State] という単語を [State] フィールドに置き換えます。
- [Rent] という単語を [Median Rent (Contract Rent for Renter-Occupied Housing Units Paying Cash Rent)] フィールドに置き換えます。
- [Value] という単語を [Median Home Value (for Owner-Occupied Housing Units)] フィールドに置き換えます。
ヒント:
フィールドの名前全体を表示するには、そのフィールドにポインターを合わせます。
- 余分なスペースを削除します。
- すべての動的なフィールドを太字に変更します。
- [ライブ ビュー] をオンにし、マップ上でいくつかの国勢調査地区をクリックします。
ダイナミック テキストが更新されて、選択した国勢調査地区の住居情報が反映されます。
検索ウィジェットの追加
前の手順で、[マップ] ウィジェットから検索バーを削除しました。 これを [検索] ウィジェットに置き換えます。 このウィジェットは、組み込みツールよりも多くのカスタマイズ コントロールが備わっています。 たとえば、これはあらゆる場所に配置でき、外観を変更することもできます。
- [ライブ ビュー] をオフにします。 [ウィジェットの挿入] ウィンドウで、[検索] ウィジェットをクリックしてマップ上にドラッグします。
- [検索] ウィジェットをマップの右上隅近くに配置します。
[検索] ウィジェットのデフォルトのヒント テキストは [住所または場所の検索] です。 これを言い換えます。
- [検索] ウィンドウで、[新しい検索ソース] をクリックして、[ロケーター ソース] を選択します。
[ロケーター ソースの設定] ウィンドウが表示されます。
- [ロケーター ソースの設定] ウィンドウで [ユーティリティの選択] をクリックします。
- [ユーティリティの選択] ウィンドウの [組織] タブで、[ジオコーディング] の下にある [ArcGIS World Geocoding Service] を選択します。
- [ロケーター ソースの設定] ウィンドウで、[検索オプション] の下の [ヒント] に「Search for your area」と入力します。
[検索] ウィジェットのヒント テキストが変わります。
次に、1 つのアクションによって [検索] ウィジェットを [マップ] ウィジェットに接続します。
- [検索] ウィンドウで、[アクション] タブをクリックします。 [トリガーの追加] をクリックします。
- [トリガーの選択] ウィンドウで、[レコード選択の変更] をクリックします。
- [ウィジェット] の下で、[マップ] をクリックします。 [アクションの選択] の下で、[画面移動] をクリックします。
- [アクション設定] ウィンドウを閉じます。
検索でこのアクションが正しく設定されていることをテストします。
- [ライブ ビュー] をオンにします。 [検索] ウィジェットで、場所の名前を入力します。 検索結果で、いずれかの場所の名前をクリックします。
選択した場所がマップで拡大表示されます。
- マップ上で、ズーム コントロールの近くにある [ホーム] ボタンをクリックします。
- ビルダー ツールバーで、[ライブ ビュー] をオフにし、[保存] をクリックします。
ページの追加
データ ビジュアライゼーションが完了しました。 次に、同僚が書いた関連記事を追加します。 [テキスト] ウィジェット内にストーリーへのリンクを追加することもできますが、ストーリーを目立たせて Web アプリの一部であるように感じさせるため、2 つ目のページをアプリに追加し、そこにストーリーを埋め込みます。
- サイド ツールバーで [ページ] ボタンをクリックします。
- [ページ] ウィンドウで、[ページの追加] ボタンをクリックし、[空白の全画面] オプションをクリックします。
新しい空白のキャンバスが表示されます。
- [ページ] ウィンドウで、[ページ 2] にポインターを合わせ、[その他] ボタンをクリックします。 [名前の変更] をクリックします。
- [ページ 2] の名前を「Story」に変更します。 [ページ] の名前を「Map」に変更します。
- [ウィジェットの挿入] ウィンドウから、[埋め込み] ウィジェットをキャンバスに追加します。
- [埋め込み] ウィジェットのツールバーで、配置ボタンをクリックし、[フル サイズ] をクリックします。
このチュートリアルでは、Esri のポリシー マップ チームの Steven Aviles が書いた How the Age of Housing Impacts Affordability というストーリーを埋め込みます。
- [埋め込み] ウィンドウで、[埋め込み方法] として [URL] を選択します。
- 次の URL コードを貼り付けます: https://storymaps.arcgis.com/stories/ae7f226a5ffd4466acbe0c7a14deab0e
このストーリーがキャンバス上に表示されます。 これは ArcGIS StoryMaps によって作成されました。
メニュー ウィジェットの追加
次に、メニュー ウィジェットを追加します。 ユーザーはこれを使用してアプリの 2 つのページを切り替えることができます。ストーリーの一部がメニューで隠れないようにするため、最初にページにヘッダーを追加します。
- サイド ツールバーで [ページ] ボタンをクリックします。 [ページ] ウィンドウで、[Story] ページをクリックします。
- [Story] ウィンドウで、[ヘッダー] をオンにします。
ページの上部に青色のバーが表示されます。
- [高さ] に「60」px と入力します。
- ヘッダーにポインターを合わせ、[ヘッダーの編集] をクリックします。
- [ウィジェットの挿入] ウィンドウから、[メニュー] ウィジェットをページ ヘッダーに追加します。
- [メニュー] ウィジェットを右上隅にスナップさせます。
- [メニュー] ウィンドウの [コンテンツ] タブで、[スタイル] として [ピル] を選択します。
ヘッダーと [メニュー] ウィジェットの青色がアプリの他の部分と調和していません。複数の場所で色を変更する代わりに、アプリのテーマを変更します。
- サイド ツールバーで [テーマ] ボタンをクリックします。 [テーマ] ウィンドウで、[インク] をクリックします。
ヘッダーが白色に変わり、メニュー ピルがダーク グレーに変わります。
この [メニュー] ウィジェットを使用して、ユーザーはストーリーからマップに切り替えることができます。 同じメニュー ウィジェットを Map ページに追加して、マップからストーリーに切り替えることもできるようにします。
- [ページ] ウィンドウで、[Map] ページをクリックします。
マップ上で画面移動すればウィジェットで隠れている領域が見えるようになるため、このページにヘッダーを追加する必要はありません。
- [ウィジェットの挿入] ウィンドウから、[メニュー] ウィジェットをこのページに追加します。 これを右上隅にスナップさせます。
- [メニュー 2] ウィンドウで、[スタイル] として [ピル] を選択します。
- [検索] ウィジェットを下に移動して [メニュー] ウィジェットの下に配置します。
- [ライブ ビュー] をオンにします。 メニュー ボタンをクリックして 2 つのページ間の切り替えをテストします。
- [ページ] ウィンドウで、[ホームページの作成] ボタンが [Map] ページの横に表示されていることを確認します。
このボタンは、ホーム ページとして機能するページを示しています。 これはアプリを初めて開いたときに表示されます。
- [保存] をクリックします。
マップとストーリーが含まれている 2 つのページからなる Web アプリを作成しました。 [マップ] ウィジェット、[列] ウィジェット、[チャート] ウィジェット、[テキスト] ウィジェット、[検索] ウィジェット、[埋め込み] ウィジェット、および [メニュー] ウィジェットを構成しました。 ユーザーが住居の空き状況を調査できるように、アクションや動的コンテンツを使用してウィジェットを接続しました。
モバイル デバイスに合わせたアプリの最適化
これまでに、Web アプリの次の目的のうちの 4 つを達成しました。
- マップが、アプリの主な焦点である必要があります。
- このアプリでユーザーが対象の住所や地域を検索できるようにします。
- 動的なテキストやチャートをアプリに追加して、ユーザーがデータを調査および操作できるようにします。
- マップにジャーナリスティックなストーリーをリンクします。
残る目的は、モバイル デバイス上およびデスクトップ コンピューターの画面上でアプリが機能するようにすることです。
現在のところ、作成している Web アプリは大画面でのみ適切に表示されています。 プロジェクトを完了するため、どのようなサイズの画面でもアプリが適切に表示されるようにエレメントを調整します。
モバイルに合わせたストーリー ページの最適化
どのサイズの画面でもストーリー ページが問題なく表示されるようにするため、[メニュー] ウィジェットのサイズ指定を相対サイズ指定 (パーセントで定義) から絶対サイズ指定 (ピクセルで定義) に変更します。
- 必要に応じて、ArcGIS Experience Builder で [Housing Availability] アプリを開き直します。 [ライブ ビュー] をオンにします。
- 必要に応じて、アプリのメニューで、[Story] ピルをクリックして [Story] ページを表示します。
- ビルダー ツールバーの [小画面デバイス用のページを編集] ボタンをクリックして、小画面モードに切り替えます。
このビューでは、モバイル デバイスでのアプリの外観がエミュレートされます。
- ストーリーをスクロールして、テキストやマップのどの部分も欠けていないことを確認します。
ArcGIS StoryMaps のストーリーはモバイル デバイスに合わせてサイズ調整するように構成済みです。 しかし、ページ ヘッダー上の [メニュー] ウィジェットは短すぎて読めません。
小画面用のカスタム レイアウトを作成することもできますが、この場合、[メニュー] ウィジェットをすべてのサイズの画面に合わせてサイズ調整する方法を変更することで、この問題を解決することができます。 画面のサイズごとのカスタム ソリューションよりも、すべてのサイズの画面で機能するソリューションの方が、今後のアプリの編集と管理が容易になるため、推奨されます。
- ビルダー ツールバーの [大画面デバイス用のページを編集] ボタンをクリックします。
ウィジェットの構成を変更するため、大画面モードに切り替える必要があります。
- [ライブ ビュー] をオフにします。 [ヘッダーの編集] をクリックし、[メニュー] ウィジェットをクリックします。
- [メニュー] ウィンドウで、[スタイル] タブをクリックします。 [幅] プロパティを見つけます。
[幅] プロパティは画面の幅の割合として定義されているため、幅が狭い画面では小さくなりすぎます。 画面のサイズとは関係なく常に同じサイズで表示されるようにするため、代わりにピクセルで幅を定義します。
- [幅] の横の [単位の変更] ボタンをクリックし、[px] を選択します。
- [幅] を「250」px に設定します。
- 小画面モードに切り替えます。
メニューが小さな画面でも十分に読める大きさになりました。
モバイルに合わせた Map ページの最適化
次に、どのサイズの画面でも問題なく表示されるように、Map ページに調整を加えます。 いくつかのエレメントを絶対サイズ指定に変更します。 さらに、モバイル デバイス用のカスタム レイアウトを作成します。
- [ページ] ウィンドウで、[Map] ページをクリックします。
このページではどのウィジェットも狭すぎます。 ほとんどのテキストを読むことができません。
- ビルダー ツールバーの [中画面デバイス用のページを編集] ボタンをクリックして、中画面モードに切り替えます。
このビューでは、タブレットでのアプリの外観がエミュレートされます。 良くなりましたが、チャートの凡例とメニューはまだ一部が欠けています。 これらの幅を絶対サイズ指定に変更します。
- 大画面モードに切り替えます。
- [メニュー] ウィジェットを選択します。 [メニュー 2] ウィンドウの [スタイル] タブで、[幅] を 250 px に変更します。
- [検索] ウィジェットを選択します。 その [幅] を「 250」[px] に変更します。
- チャートの下でクリックして [列] ウィジェットを選択します。 その [幅] を「300」[px] に設定します。
- 中画面モードに切り替えます。
この画面サイズではレイアウト変更の効果が見られます。
- 小画面モードに切り替えます。
ここでは変更の効果が見られません。 マップのほぼ全体が [テキスト] ウィジェットと [チャート] ウィジェットに隠れています。 チームメートと相談し、モバイル バージョンの Web アプリではチャートは不要であると判断しました。画面サイズが小さい場合にはこれが表示されないようにします。 このためには、小画面用のカスタム レイアウトを作成する必要があります。
- キャンバスの横の [カスタム] をクリックします。
- 警告ポップアップ ウィンドウで、[OK] をクリックします。
小画面でアプリを表示したときにだけ影響がある変更をレイアウトに加えます。 [チャート] ウィジェットを非表示にして、大画面のときには表示され、小画面のときには表示されないようにします。
- [チャート] ウィジェットをクリックします。 ツールバーの [保留中のリストに移動] ボタンをクリックします。
[チャート] ウィジェットが消えます。
[チャート] ウィジェットを削除しないことが重要です。 カスタム モードであっても、ウィジェットを削除した場合、そのウィジェットはアプリのすべてのバージョンから削除されます。 保留中リストを使用することで、ウィジェットを削除することなく、表示されないようにすることができます。
ヒント:
[チャート] ウィジェットを誤って削除してしまった場合は、ビルダー ツールバーの [元に戻す] ボタンをクリックします。 [チャート] を後から再び追加する場合、[ウィジェットの挿入] ウィンドウの [保留中] タブでこれを見つけることができます。
次に、[検索] ウィジェットと [メニュー] ウィジェットが隠れないように、[テキスト] ウィジェットのサイズと位置を変更します。
- [テキスト] ウィジェットをクリックします。 列の外にドラッグしてマップ上に配置します。
- [列] ウィジェットを保留中リストに移動します。
- [テキスト] ウィジェットを左下隅にスナップさせます。
- [テキスト] ウィンドウで、[スタイル] タブをクリックします。 [幅] を 90%、[高さ] を 30% に変更します。
このサイズでは、テキストのいずれの部分もマップのナビゲーション コントロールに隠れることがありません。
注意:
カスタム モードでは、他のサイズの画面に影響を与えることなく、ウィジェットのサイズと位置を変更できます。 しかし、この他のプロパティに対する変更はすべてのサイズの画面に反映されます。 たとえば、[テキスト] ウィジェットのフォント サイズを小さくした場合、すべてのサイズの画面でフォントが小さく表示されます。 小画面でのみフォント サイズを小さくしたい場合、[テキスト] ウィジェットを複製し、コピー元のウィジェットを保留中リストに移動し、新しいウィジェットでフォント サイズを変更する必要があります。
仕上げと公開
プロジェクトを完了するため、Web アプリをプレビュー、公開、共有します。
- ビルダー ツールバーの [保存] ボタンをクリックします。
- [正常に保存されました] というメッセージが表示されたら、[プレビュー] ボタンをクリックします。
新しいブラウザー ウィンドウでアプリが表示されます。
- マップ、チャート、ストーリーを探索してアプリをテストします。
- ブラウザー ウィンドウのサイズを変更して、さまざまなサイズの画面でアプリのレイアウトをテストします。
- Experience Builder 編集タブに戻ります。 ビルダー ツールバーの [公開] をクリックします。
さらに、アプリの共有設定を更新して、一般ユーザーがアクセスできるようにします。
- [その他] ボタンをクリックし、[共有設定の変更] をクリックします。
Web アプリのアイテム ページが表示されます。
- [共有] をクリックします。
- [すべての人に公開 (パブリック)] をクリックして、[保存] をクリックします。
このチュートリアルでは、米国内の住居形態に関するマップとストーリーが表示される複数ページの Web アプリを構築しました。 読者がデータを理解しやすくなる対話型のウィジェットを追加しました。 最後に、すべてのサイズの画面で問題なく表示されるようにレイアウトを変更しました。
以上により、自分とチームメイトが調査結果を住宅擁護団体の Web サイトに埋め込んだりソーシャル メディアで Web アプリへのリンクを共有したりすることができるようになりました。
他のチュートリアルについては、Learn ArcGIS のチュートリアル ギャラリーをご覧ください。
