商圏レポートを作れる Web アプリを構築してみよう！ArcGIS Experience Builder の Business Analyst ウィジェットの活用法

ノーコードで柔軟なデザイン構成の Web アプリを構築できるアプリケーション「ArcGIS Experience Builder」(以下「Experience Builder」) では、多種多様なウィジェットを使用して Web アプリを構成できます。

本ブログでは、簡単操作で商圏レポートを作成できる「Business Analyst ウィジェット」(以下「BA ウィジェット」) の活用法を、実際の Web アプリの構築手順を交えてご紹介します。

BA ウィジェットを使用して Web アプリを構築してみよう

今回はプリセット モードを使用して、自社の既存店舗リストから任意の店舗を選び、自動で商圏およびインフォグラフィックスを作成することができる Web アプリを構築します。

完成イメージ

マップの作成

Step1：ArcGIS Online にサインインします。

Step2：Excel やテキスト ファイルからフィーチャ レイヤーを作成したい | ArcGIS リソース集 (esrij.com) の手順に沿って、既存店舗のフィーチャ レイヤーを作成します。ここでは、以下の店舗リストを使用します。

こちらから実際のリストをダウンロードできます。

Step3：[マップ] からマップビューアーを開きます。

Step4：[レイヤー] 内の [追加] をクリックして、ドロップ ダウンで [マイ コンテンツ] が設定されていることを確認します。

Step5：[レイヤーの追加] で、Step2 で作成したレイヤー名を入力して検索し、表示されたレイヤーの [+] ボタンをクリックしてマップに追加します。

Step6：レイヤーがマップに追加されたことを確認した後、[保存と開く] をクリックし、[名前を付けて保存] を選択します。

Step7：タイトルに「商圏分析マップ」と入力し、タグやサマリーを適宜入力した後に、[保存] を行います。

商圏分析アプリの構築

上記で作成したマップを元に、商圏分析ができる Web アプリケーションを構築します。

Step1：左上の [アプリの作成] をクリックして、[Experience Builder] を選択します。

Step2：[開始するテンプレートの選択] が開いたら、[空のグリッド] の [作成] をクリックし、Web アプリの構築画面を開きます。

Step3：タイトルをクリックして任意の名前を入力します。下の例では [商圏分析アプリ] と入力しています。

Step4：レイアウト中央のマップ ウィジェットをクリックして、左上に表示される [横方向に分割] ボタンをクリックします。

Step5：再度マップ ウィジェットをクリックし、左上に表示される [縦方向に分割] ボタンをクリックします。

Step6：左下の空のグリッド内の [+] をクリックし、[リスト] をクリックしてリスト ウィジェットを追加します。

Step7：右側の空のグリッド内の [+] をクリックし、[Business Analyst] をクリックして BA ウィジェットを追加します。

ここまでで、アプリに必要なウィジェットを追加できました。次に、各ウィジェットの設定を行っていきます。

Step8：右部の BA ウィジェットをクリックして、設定パネルを開きます。

Step9：[コンテンツ] タブを開き、まず以下のように設定します。

• モード：プリセット
• マップ ウィジェット：商圏分析マップ
• 位置の設定 (国または地域)：日本

Step10：[バッファーの設定] をクリックし、「バッファーの設定」で [リング] を選び、距離単位を「km」に変更して [適用] をクリックします。

Step11：[インフォグラフィックスの選択] をクリックし、「インフォグラフィックスの選択」で [Esri インフォグラフィックス] を展開し、[基本統計プロファイル] を選択します。

Step12：「インフォグラフィックスの設定」オプションをクリックして展開し、インフォグラフィックスの表示レイアウトや、エクスポートの許可を任意に設定します。

ここまでの設定で、BA ウィジェットをプリセット モードで実行できるようになりました。次に、マップ ウィジェットの設定を行います。

Step13：左上のマップ ウィジェットを選択してマップ ウィジェットの設定パネルを開き、[コンテンツ] タブの「ツール」オプションの [検索] を無効にします。

Step14：続いて [アクション] タブを開き、[トリガーの追加] → [レコード選択の変更] をクリックします。

Step15：「← ターゲット選択」 で [Business Analyst] を選択し、「← アクションの選択」で [フィーチャの選択] をクリックします。

ここまでの設定で、マップ上で選択したフィーチャに対してインフォグラフィックスを作成できるようになりました。最後に、リスト ウィジェットの設定を行います。

Step16：左下のリスト ウィジェットをクリックして、リスト ウィジェットの設定パネルを開きます。

Step17：[コンテンツ] タブを開き、テンプレートの選択で、「行」テンプレートの上から 3 つ目を選んで [開始] をクリックします。

Step18：[データの選択] をクリックし、商圏分析マップに格納された既存店のポイント データを選択します。

Step19：続いて [アクション] タブを開き、メッセージ アクションの [トリガーの追加] をクリックします。

Step20：「トリガーの選択」で [レコード選択の変更] を選択し、「← ターゲット選択」で [Business Analyst] を選択します。最後に、「← アクションの選択」で [フィーチャの選択] を選択します。

ここまでの操作で、リストに表示されたフィーチャを選択してインフォグラフィックスを実行できるようになりました。次に、リストに店舗名の一覧が表示されるようにレイアウトを調整します。

Step21：左下のリスト ウィジェットの錠前のアイコンをクリックしてロックを解除します。

Step22：リストの 1 行目をクリックし、[動的コンテンツ] をクリックします。

Step23：「動的コンテンツ」の [属性] タブを開き、既存店の名前を表すフィールドを選択します。ここでは、「名前」フィールドを選びます。

Step24：ウィジェットの枠線を動かして、BA ウィジェットをメインに閲覧できるように適宜ウィジェットの大きさを調整します。

以上で、既存店のリストから選んだ任意の店舗に対してインフォグラフィックスを実行できる準備が整いました。

Step25：上部のツールバーにある [ライブ ビュー] をクリックして、ライブ ビューを有効化します。

Step26：左下のリストから任意の店舗を選択すると、選択した店舗を起点とした 1, 3, 5km のリング商圏がマップ上に作成され、商圏内の人口・世帯の分布が分かる商圏レポートをすぐに作成することができます。もしくは、マップ上の既存店ポイントを選択した場合もレポートを作成できます。

おわりに

本ブログでは、Experience Builder の BA ウィジェットの活用法を、実際の Web アプリの構築方法を交えてご紹介しました。BA ウィジェットを設定することで、簡単操作で商圏分析を実行できるアプリケーションを構築できます。ぜひご活用ください。

関連リンク

• ArcGIS Experience Builder 製品ページ
• Business Analyst ウィジェット—ArcGIS Experience Builder | ドキュメント (英語表記)
• ArcGIS Experience Builder (2023 年 2 月アップデート) の新機能
• ArcGIS Business Analyst Web and Mobile Apps 23.R01 の新機能
• 災害危険度が高まったエリアの情報を迅速に把握！～リアルタイム防災気象情報×インフォグラフィックス～
• ArcGIS Business Analyst インフォグラフィックス ギャラリーでより高品質で魅力的な商圏分析・マーケティング レポートを作成