Experience Builder アプリの作成とウィジェットの追加
ArcGIS Experience Builder を使用して Web エクスペリエンス アプリを作成します。 最初に空のテンプレートを使用し、ウィジェットを追加および構成してアプリを設定します。
空の Web エクスペリエンスの作成
最初に、空の Web エクスペリエンス アプリを作成します。
- 「ArcGIS の組織アカウント」にサイン インします。
注意:
組織アカウントがない場合は、ソフトウェア アクセスのオプションをご参照ください。
- リボンの [コンテンツ] をクリックします。
- [アプリの作成] をクリックします。
- [Experience Builder] を選択します。
- ArcGIS Experience Builder ホーム ページで、[新規作成] をクリックします。
[テンプレート] ページが開き、テンプレート オプションのギャラリーが表示されます。 テンプレートは、作成するアプリの設定済みのレイアウトとテーマです。 このアプリでは、[空] テンプレートを使用します。
- [デフォルト] タブで、[空白の全画面] テンプレートを見つけて [作成] をクリックします。
アプリがビルダーで開き、空白のキャンバスが表示されます。 アプリの名前を、よりわかりやすいタイトルに変更します。
- リボンの [無題のエクスペリエンス] をクリックし、「State health demographics」と入力します。
Web エクスペリエンスでウィジェットを追加できるようになりました。 ウィジェットは、[マップ中心]、[データ中心]、[ページ エレメント] など、機能に基づいて分類されます。
アプリへのウィジェットの追加
次に、Business Analyst ウィジェット、マップ ウィジェット、テキスト ウィジェットをアプリに追加します。
- [ウィジェットの挿入] ウィンドウで、[マップ中心] の下にある [Business Analyst] ウィジェットをキャンバス上にドラッグします。
右側に [Business Analyst] ウィンドウが表示され、デフォルトで [ワークフロー] モードが選択されています。 このモードでは、アプリのユーザーに位置を選択してインフォグラフィックスを実行する手順が示されます。 ただし、必要な特定のインフォグラフィックスと、表示する特定の場所 (州の郡) がわかっているため、代わりに [プリセット] モードを使用します。
- [Business Analyst] ウィンドウの [モード] で、[プリセット] をクリックします。
次に、[Business Analyst] ウィジェットを [マップ] ウィジェットと [テキスト] ウィジェットで補完します。
- [ウィジェットの挿入] ウィンドウの [マップ中心] セクションで、[マップ] ウィジェットをキャンバスにドラッグします。
- [ページ エレメント] セクションから、[テキスト] ウィジェットをキャンバスにドラッグします。
ヒント:
ウィジェットが見つからない場合は、[ウィジェットの挿入] ウィンドウの上部で検索できます。
- [テキスト] ウィジェットをクリックして選択します。 [マップ] ウィジェットと同じ幅になるまで、右ハンドルをドラッグします。
- [テキスト] ウィジェットをキャンバスの左上隅に配置します。 そのすぐ下に [マップ] ウィジェットを配置し、高さがキャンバスの一番下まで届くようにサイズを調整します。
- [Business Analyst] ウィジェットのサイズを変更し、キャンバスの残りのスペースを使用します。
[テキスト] ウィジェットと [マップ] ウィジェットの列がキャンバスの約 3 分の 1 を占め、[Business Analyst] ウィジェットが残りのスペースを占めるように、アプリの外観のバランスが調整されました。 ウィジェットの配置はいつでも変更できますが、現在のところ十分な見栄えです。
Experience Builder でアプリを作成し、3 つのウィジェットを追加して、アプリの外観とウィジェットの配置を設計しました。 現在、ウィジェットにはデフォルトの機能が割り当てられています。 次に、ビジネス ニーズに合わせてウィジェットの構成をカスタマイズします。
Business Analyst ウィジェットの構成とアプリの公開
[Business Analyst] ウィジェットを使用すると、アプリでインフォグラフィックスを表示できます。[Business Analyst] ウィジェットを追加して、プリセット モードを使用するように構成しました。プリセット モードでは、インフォグラフィックスを埋め込み、デフォルトの位置、バッファー タイプ、およびポイント位置の単位を事前に定義できます。 次に、追加したウィジェットを構成します。 その後、アプリを公開します。
注意:
[ライブ ビュー] をクリックすると、いつでもアプリをプレビューおよび操作できます。
ウィジェットの構成
マップ上に定義済みの位置を設定することで、[Business Analyst] ウィジェットを保健所プロジェクト用に構成します。 また、アプリに表示されるインフォグラフィックスを選択し、タイトルを設定します。
- キャンバスで、[Business Analyst] ウィジェットをクリックして選択します。
[Business Analyst] ウィンドウが表示されます。 このウィンドウでは、好みに合わせてウィジェットを構成できます。 デフォルトでは、[Business Analyst] ウィジェットは [マップ] ウィジェットにリンクされます。 このマップのデフォルト位置を設定します。
- [Business Analyst] ウィンドウの [位置情報の設定] で、[米国] が選択されていることを確認します。 [位置の設定] をクリックします。
注意:
[データ ソース] パラメーターに、ウィジェットで使用されているデータのソースと年代が表示されます。 作成するインフォグラフィックスはこのパラメーターに依存します。 デフォルトでは、このパラメーターは最新の Esri データに設定されます。この設定はあなたの目的にも適しています。
[位置の設定] ウィンドウが表示されます。 このウィンドウでは、インフォグラフィックスの地理範囲を定義することができます。 この例では、カンザス大学ヘルス システム病院を位置として使用します。
- 検索フィールドに「1700 SW 7th St.」と入力し、カンザス州トピカにある検索結果をクリックします。
この位置がマップに追加され、ユーザーがアプリケーションにアクセスする際のデフォルトの位置になります。 次に、インフォグラフィックスの人口統計情報を計算する際に使用するバッファーを設定します。
- [Business Analyst] ウィジェット ウィンドウの [バッファー] で [リング] をクリックします。
[バッファーの設定] ウィンドウが表示されます。
- [バッファーの設定] ウィンドウで [運転時間] をクリックします。
運転時間バッファーには、施設から離れる、もしくは施設に向かう方向の運転時間を計算するかどうかに基づいた追加のパラメーターがあります。 また、交通量データを使用するオプションもあります。 これらのパラメーターは、変更せずにそのままにしておきます。
- [適用] をクリックします。
マップが更新され、施設周辺 5 分、10 分、15 分の運転時間エリアが表示されます。 これらのエリアが、エリアに関する人口統計情報を表示するアプリのインフォグラフィックスの基礎になります。
次に、アプリに表示されるデフォルトのインフォグラフィックスを選択します。アプリの目的は人口統計と健康に関する情報を表示することであるため、これらの変数を含むインフォグラフィックスを選択します。
- [Business Analyst] ウィンドウの [インフォグラフィックス] で、[インフォグラフィックスの選択] をクリックします。
[インフォグラフィックスの選択] ウィンドウが表示されます。
- [Esri インフォグラフィックス] カテゴリを展開し、[Health Care and Insurance Statistics] を選択します。
ウィジェットにインフォグラフィックスが表示されます。
- [インフォグラフィックスの選択] ウィンドウを閉じます。
今はこのアプリをプリセット モードで構成しているため、ワークフロー モードでは使用できないインフォグラフィックスのオプションがいくつかあります。 そのようなオプションの 1 つをオンにします。このオプションにより、マップをクリックしてピンをドロップし、その場所のインフォグラフィックスを計算できるようになります。 このオプションは、施設の周辺地域ではないエリアのインフォグラフィックスを表示したい場合に便利です。
- [Business Analyst] ウィンドウで [インフォグラフィックスの設定] を展開します。 [マップをクリックして実行] をオンにします。
次に、アプリのユーザーに背景情報を提供するため、アプリにタイトルと説明を設定します。
- [テキスト] ウィジェットをダブルクリックし、「Health Care and Insurance Report」と入力します。
- 入力したテキストをハイライト表示します。 [テキスト] ウィンドウで、フォント サイズを「24」px に変更します。
- [太字] ボタンをクリックし、[中心] ボタンをクリックします。
キャンバス上でテキストが更新されます。
- リボン上で [保存] ボタンをクリックします。
好みに応じたアプリの構成が完了し、[ライブ ビュー] モードでの確認と公開ができるようになりました。
アプリの公開と共有
次に、[ライブ モード] を使用してアプリをユーザーとして確認します。 その後、アプリを公開、テスト、共有します。
- 上部リボンで [ライブ ビュー] タブをクリックします。
アプリがライブ ビューに変わり、ボタンの色も変わり、アプリがライブ ビューであることを示します。
ライブ ビューでは、アプリのユーザーと同様にアプリを使用できます。
- マップ ウィジェットの検索バーに「Wesley Medical Center」と入力し、カンザス州ウィチタにある 550 N Hillside Street の結果を選択します。
マップで Wesley Medical Center が拡大表示され、場所の周辺に 5 分、10 分、15 分の到達圏を表すバッファーが適用されます。 インフォグラフィックスは、施設から 5 分の到達圏の医療と保険の変数を表示します。
- インフォグラフィックスのタイトル バーで、[5 分の到達圏] ドロップダウン メニューをクリックし、[10 分の到達圏] を選択します。
インフォグラフィックスが更新され、10 分のバッファー内の人口統計が表示されます。
また、オンにした [マップをクリックして実行] オプションをテストします。
- マップ上の任意の場所をクリックします。
クリックした位置にピンが配置されます。 ピン周辺の運転時間が計算され、インフォグラフィックスが更新されて、そのエリアの人口統計情報が表示されます。
これで、アプリのテストが完了して正常に動作するため、アプリを公開して共有できるようにします。
- 必要に応じて、アプリを保存します。
- リボンで [公開] ボタンをクリックします。
アプリが公開されます。
- リボンで [詳細] ボタンをクリックし、[公開したアイテムの表示] を選択します。
別の Web ブラウザー タブが開き、アプリが表示されます。
- アプリのテストとして、マップ上の任意の位置をクリックすると、その位置の運転時間エリアが作成され、インフォグラフィックスが更新されることを確認します。
- アプリが編集モードになっている他のブラウザー タブに戻ります。
- リボンで [詳細] ボタンをクリックし、[公開したアイテム リンクのコピー] を選択します。
公開したアプリのリンクがコピーされ、共有できるようになりました。 ただし、デフォルトの共有設定は所有者向けになっているため、設定を変更するまで他のユーザーはアプリにアクセスできません。 アプリから ArcGIS Online のアプリのアイテム詳細ページにアクセスできます。
- リボンで [詳細] ボタンをクリックし、[共有設定の変更] を選択します。
![[共有設定の変更] オプション](GUID-F9D14D29-F5F7-4EC4-B9A2-E26ED42242F9-web.png "[共有設定の変更] オプション")
アプリのアイテム詳細ページが表示されます。
- [共有] ボタンをクリックします。
[共有] ウィンドウに、共有のためのさまざまなオプションが表示されます。 現在、アプリにアクセスできるのは所有者だけですが、組織で共有したり、全員と共有 (一般公開) したりするために設定を変更できます。
- [共有] ウィンドウで [組織]、[保存] の順にクリックします。
アプリが共有されたので、組織内の他のメンバーも使用できるようになりました。
このチュートリアルでは、ユーザーが入力した特定の場所のインフォグラフィックスを表示することに重点を置いた Web アプリを作成しました。 Business Analyst ウィジェットやその他のウィジェットを追加し、それらを構成して、アプリをテストし、公開して共有しました。 これで、他のユーザーがアプリを使用して、任意の医療施設に関する医療と保険の情報を探索できるようになりました。
他のチュートリアルについては、チュートリアル ギャラリーをご覧ください。
