ArcGIS Experience Builder では、さまざまな機能をもったウィジェットを自由に配置し、サイズを変更することで、柔軟なアプリ構築が可能です。また、レイアウト ウィジェットを組み合わせることで、レイアウトの細かい調整が可能になります。
みなさんは、ウィジェットのサイズや位置を設定する際に、「サイズの単位」や「位置の原点」を意識したことはあるでしょうか。もしかすると、「なんとなく設定しているけど、実はよくわかっていない」といった方も多いのではないでしょうか。
本ブログでは、ウィジェットのサイズや位置を設定する際の機能や仕組みをご紹介します。
ウィジェット サイズの設定
ウィジェットのサイズや位置の設定は、ウィジェットを選択した際に右サイドバーに表示される [スタイル] タブの [サイズ & 位置] オプションで行います。
はじめに、ウィジェットのサイズの設定から確認します。ウィジェットのサイズは、[サイズ & 位置] オプションの [幅] と [高さ] で指定します。[幅] と [高さ] では、[自動]、[ストレッチ]、[カスタム] の 3 つのモードを選択できます。各モードについての詳細は、ヘルプ ページ「全画面ページのレイアウト」を参照してください。
[カスタム] モードを選択すると、サイズ値の入力をしたり、サイズ単位を [px] と [%] の 2 つから選択したりできます。
[px] 単位では、ピクセル単位での絶対値を指定できます。そのため、画面の解像度によって大きさが変化します。一方、[%] 単位では、ウィジェットが配置されている枠 (キャンバスやコンテナー) のサイズに対して相対的に大きさが変化します。
ここで実際に ArcGIS Experience Builder の Web アプリで確認してみましょう。確認用のアプリ ページ「枠なし (サイズ単位別)」を開きます。このページには、「幅 : 高さ」で [px] と [%] のそれぞれの組み合わせごとにウィジェットが配置されています。
このページを開いているブラウザーのページ表示を拡大・縮小してみてください。それぞれの組み合わせの変化に注目してみると、「px : px」ではブラウザーの画面解像度が変化することで、ウィジェットのサイズが非常に大きくなったり、小さくなったりします。「% : %」では画面解像度が変化しても表示画面に対するサイズ比率のため、ウィジェットの位置やサイズは大きな変化が起こりません。
使い分けの例として、[px] はブラウザーの表示倍率やデバイスの違いによって拡大されると解像度が低下してしまう画像や、決められたピクセル サイズで表示したい場合などに使用します。[%] は画面解像度が変化してもサイズの比率は維持できるため、レスポンシブ デザインを採用する際などに使用します。
ウィジェット位置の設定
追加したウィジェットは、キャンバス内で自由に配置できます。この位置についても、先ほどご紹介したサイズ単位によって指定されています。ウィジェットの位置を設定するには、[幅] と [高さ] の下にあるボックス モデルで、「左上」「左下」「右上」「右下」の 4 つの原点を基準にフレームワークの外側からの距離を指定します。
「サイズ単位の設定」で使用した Web アプリでは、各ウィジェットは左下を原点として設定していました。確認用のサンプル アプリ「枠なし (原点位置別)」を開きます。このページでは、背景が赤色の上にあるウィジェットが「左上」、緑色の上にあるウィジェットが「右上」といったようにそれぞれ 4 つの原点に振り分けています。また、各ウィジェットのサイズは、原点位置のサイズ単位と同じものを使用しています。
ここでもページを表示しているブラウザーのページ表示を拡大・縮小してみてください。原点が「左上」の場合、「px : px」のウィジェットは拡大すると右下へ、縮小すると左上に変化します。「% : %」のウィジェットはほとんど変化がありません。
ウィジェットの位置の原点は、キャンバスに追加した際に自動的に割り当てられます。例えばキャンバスの左上に追加した場合は、原点は左上で設定されます。原点を変更したい場合は、[スタイル] タブのボックス モデル内で十字の破線を区画をつくるように 2 つ選択します。
入れ子 (ネスティング) のサイズと位置
ここまで、ウィジェットのサイズと位置の設定について説明してきました。次にレイアウト ウィジェットに他のウィジェットを入れた状態 (入れ子/ネスティング) のサイズと位置について確認します。
次のアプリ ページ「枠入り (サイズ単位別)」を開きます。このページでは、レイアウト ウィジェットの 1 つである固定パネル ウィジェットにテキスト ウィジェットを入れた状態になっています。
ブラウザーのページ表示を拡大・縮小してみると、色分けされている固定パネル ウィジェットと中のテキスト ウィジェットが同じ倍率で変化しています。これは、レイアウト ウィジェットに入れられたテキストウィジェットの位置が自動で [%] で指定されるためです。
レイアウト ウィジェットに入れられたウィジェットの位置は、配置する際にウィジェットの四隅に表示される [%] 値で確認できます。また、[%] 値は各レイアウト ウィジェットの枠から指定されていることがわかります。
そのため、元のサイズ値がレイアウト ウィジェットを超えていなければ、非常に高い拡大率の場合でも、入れられているウィジェットが枠から飛び出すことはありません。
テキストのサイズ単位を設定
最後にテキストのフォント サイズを指定するサイズ単位についてご紹介します。
ArcGIS Experience Builder のテキスト ウィジェットで表示できるフォントのサイズ単位には、[px]、[rem]、[vw] の 3 つが用意されています。
確認用のサンプル アプリ「テキストのサイズ単位」を開きます。このページでは、赤色のボックスに「px」単位で指定したテキストを、緑色のボックスには「rem」単位、紫色のボックスには「vw」単位で指定したテキストを入力しています。ブラウザーのページ表示を拡大・縮小してみてください。
「px」単位のテキストは、px で指定したフォント サイズを維持するため、表示倍率ごとの画面ピクセル値によって大きさが変化しています。「rem」単位はどうでしょうか。一見すると「px」単位と違いはほとんど見られません。
それは、「rem」単位がフォント サイズの縮尺設定に依存しているためです。ArcGIS Experience Builder の [テーマ] → [カスタマイズ] → [テーマのフォント] にあるフォント サイズの縮尺を設定するオプションを例に確認してみます。デフォルトは 100% になっていますが、これを変更してみます。
縮尺設定を変更すると基準となるフォント サイズが変化し、1 rem あたりの px 値が変動するため、「rem」単位で指定したテキストのサイズだけが変化します。「px」と「rem」の違いは小さいですが、「rem」を使用する際には知識が必要となります。
3 つ目の「vw」単位は表示幅に対してフォント サイズを % で指定できるものです。画面解像度が変化しても一定の大きさで維持できる優れモノで、レスポンシブ デザインを行う際に活躍します。
しかし、注意点もあります。例えば、PC の画面サイズに対応した大画面デバイス用で設定し、自動レイアウトで小画面デバイス用をカスタマイズした場合、表示幅の違いによって非常い文字が小さくなってしまう場合もあるため、共通したサイズ調整が難しい単位であることに注意する必要があります。
おわりに
今回は、ArcGIS Experience Builder で追加できるウィジェットおよびテキストのサイズと位置について、その仕組みを実際のアプリ画面を用いてご紹介しました。
大画面デバイス用の編集画面で主な Web アプリ構築を行っていると、あまり気にならないことではありますが、ArcGIS Experience Builder の強みの 1 つであるレスポンシブ デザインを行う際やウィジェット位置を細かく整える際には、非常に役立つ知識です。ぜひ、みなさんもサイズと位置の設定をより一層意識して、多くの人が利用しやすい Web アプリの構築に活用してみてください。
参考リンク
- ArcGIS Experience Builder 製品ページ
https://www.esrij.com/products/arcgis-experience-builder/ - ArcGIS Experience Builder 利用ガイド
https://storymaps.arcgis.com/collections/17d54de732b14fa3a66152b21fbb2fa1/