ArcGIS Experience Builder でスクロール ページを作成しよう！

2024/7/5
ヒント／テクニック ArcGIS Experience Builder

ArcGIS Experience Builder (以下、「Experience Builder」) は、ノーコードで柔軟な Web アプリ作成が可能な ArcGIS 製品です。豊富なテンプレートを組み合わせたり、複数ページで構成したりといった、レスポンシブなアプリ作成が可能です。

みなさんは Experience Builder で縦にスクロールできるアプリの作成ができることをご存じでしょうか。「スクロール ページ」という構成を使用して作成するアプリでは、1 画面でのページ構成とは異なり、複数ページを 1 枚のページとして表示することができます。
本ブログでは、Experience Builder のスクロール ページの作成についてご紹介します。

スクロール ページの作成準備

Experience Builder で Web アプリ作成をする際には、最初にテンプレートを選択します。スクロール ページの作成を行うためには、[空] セクションにある [空白のスクロール] または [スクロール] セクションにある豊富なテンプレートを使用します。

各テンプレートは、テンプレート カードの右下にある [プレビュー] ボタンでページ構成を確認できます。作成する Web アプリのイメージに近いテンプレートを見つけたら、テンプレート カードの左下の [作成] をクリックします。
今回は、スクロール ページの構成を 1 から見るために [空白のスクロール] を使用します。

そうすると、以下のように空白のキャンバスが表示されます。ブラウザー サイズによっては、キャンバスが収まらない場合があります。その場合は、ビルダー画面の下部リボン右端にある [幅を現在のウィンドウに調整] ボタンをクリックして、キャンバス サイズを調整します。

Experience Builder のビルダー画面についての詳細は、ストーリー マップ「ArcGIS Experience Builder を開始 – テンプレート選択と UI 」をご参照ください。

スクロール ページの構成

スクロール ページを構成するには、左サイドバーの [ウィジェットの挿入] パネルからウィジェットを追加するか、キャンバス中央上部にある [ブロックの挿入]、[スクリーン グループの挿入] を組み合わせて行います。
今回は [ブロックの挿入] および [スクリーン グループの挿入] を活用した構成を行います。

ブロックの挿入

[ブロックの挿入] では、6 種類のテンプレートを使用して、あらかじめセットされている画像ウィジェットとテキスト ウィジェットを含むテンプレートをブロックとしてキャンバスに追加できます。

1 つ目のブロックを追加すると、そのブロックのすぐ下に [ブロックの挿入] または [スクリーン グループの挿入] が表示されるので、複数のブロックを続けて追加できます。

追加したブロックの上部中央にカーソルを合わせると、ビルダー ツールバーが表示されます。[ドラッグしてブロック〇〇を移動] をクリックした状態でドラッグすると、任意の場所にブロックを移動できます。またビルダー ツールバー内の [ブロックの挿入] をクリックすると、1 つ下に挿入されるほか、ブロックの複製や削除が可能です。

スクリーン グループの挿入

[スクリーン グループの挿入] では、[ブロックの挿入] で追加したブロックとは異なり、スクロール操作できる動的ブロックを追加できます。スクリーン グループは 8 種類のテンプレートから選択できます。各テンプレートの詳細は、ヘルプ ページをご参照ください。

スクリーン グループは、メイン ステージとスクロール パネルを有する複数のスクリーンで構成されています。背景となるメイン ステージを固定したまま、スクロール パネルに含まれたウィジェットのみをスクロール表示できます。

スクリーンの編集

ここからは、挿入したスクリーン グループのスクリーンの設定についてご紹介します。スクリーンの設定は、ビルダー ツールバーの [設定] ボタンをクリックし、右サイドバーに表示される [スクリーン グループ] ウィンドウで行います。

[スクリーン グループ] ウィンドウの [+ 新しいスクリーン] をクリックして、グループにスクリーンを追加できます。または、キャンバス内のグループ選択時に表示されるスクリーン ツールバーの [+] ボタンでも追加できます。

[+ 新しいスクリーン] の下にある各スクリーン カードをクリックすると、[スクリーン] ウィンドウが表示されます。ここでは、スクリーンに含めるメイン ステージとスクロール パネルを設定できます。詳細は次のセクションでご紹介します。

メイン ステージの編集

メイン ステージの編集は、[メイン ステージ] セクションで行います。設定できる項目は背景のみで、任意の色で塗りつぶすか画像を参照できます。背景に画像を設定した場合は、[位置] のドロップダウン リストで表示位置を 5 種類から選択できます。

スクロール パネルの編集

スクロール パネルの編集は、[スクロール パネル] セクションで行います。 [モード] では、ドッキングとフローティングとの切り替えができます。[サイズ] では、スクロール パネルの横幅を設定できます。[位置] では、スクロール パネルの配置を変更したり、ギャップやパディングを変更したりして、レイアウトを調整できます。[背景] では、メイン ステージと同様に背景の設定が可能です。

ドッキング モードは、固定したスクロール パネル内でコンテンツをスクロースできます。フローティング モードは、パネル自体がスクロールされます。

例えば、メイン ステージに注目してほしいコンテンツ (グラフや見せたい画像など) を挿入している場合は、スクロール パネルが被らないドッキング モードが最適です。一方、メイン ステージの背景 (風景画や壁紙など) を広く見せる場合はフローティングが最適です。

スクロール パネル編集の一例

下記は、スクロール パネルの背景を編集した例です。背景をページ全体のトーンに合わせることで、統一感を持たせ、モダンなデザインにすることが可能です。またフローティングの場合は、背景を透かすことで、メイン ステージに設定した画像がスクロール パネルで隠れないように調整できます。

おわりに

今回は、Experience Builder のスクロール ページについて紹介しました。Experience Builder の特長でもある豊富なテンプレートを使用することで、ノーコードでスクロール形式の Web アプリを作成できます。

また同様にスクロール形式の Web アプリを作成できる ArcGIS StoryMaps と比べ、設計の難易度は上がりますが、その分柔軟な Web アプリ作成が可能になっています。

関連リンク

以下、ArcGIS Experience Builder の関連ドキュメントも合わせてご参照ください。

類似の記事

フォローする