エクスペリエンスを開く

最初に、前のチュートリアルで作成したエクスペリエンスを開きます。

  1. 前回のチュートリアル「Web アプリへのウィンドウの追加」を完了した場合は、American River Marine Estuary エクスペリエンスをもう一度開いて次のセクションに進みます。
    注意:

    エクスペリエンスを見つける方法がわからない場合は、ArcGIS Experience Builder を開いて ArcGIS アカウントでサイン インします。 [最近のエクスペリエンス] ページに自分のエクスペリエンスが一覧表示されます。

  2. 前回のチュートリアルを完了していない場合は、ArcGIS Experience Builder を開いて ArcGIS アカウントでサイン インします。
    注意:

    ArcGIS アカウントがない場合は、ソフトウェア アクセスのオプションをご参照ください。

    [最近のエクスペリエンス] ページが表示されます。

  3. [新規作成] ボタンをクリックします。

    [新規作成] ボタン

  4. [ArcGIS Online] タブをクリックします。

    ArcGIS Online タブ

  5. 検索バーに「estuary template 3」と入力します。
  6. [American River Marine Estuary Template 3] カードで、[作成] ボタンをクリックします。

    American River Marine Estuary テンプレート カードの作成ボタン

    キャンバスが開き、これまでに作成されたエクスペリエンスが表示されます。 これには、マップ、ヘッダー、その他のウィジェットを含む列、ウィンドウを開くボタンがあります。

    エクスペリエンス テンプレートの全表示

  7. ビルダー ツールバーで、タイトルをクリックして名前を「American River Marine Estuary」に変更します。

    エクスペリエンスのタイトル

カスタム レイアウト オプションの有効化

American River Marine Estuary エクスペリエンスはインタラクティブなキオスクを想定しているため、デザインは大きい画面用のフォーマットが中心です。 しかし、あなたのクライアントは Web サイトからアプリにリンクしたいとも考えているため、ユーザーはタブレットやモバイル デバイスからアプリを開くこともあります。 そこでカスタム レイアウト オプションを使用し、小さい画面でのみ表示されるレイアウトを調整します。

  1. ビルダー ツールバーで [中画面デバイス用のページを編集] ボタンをクリックします。

    中画面デバイス用のページを編集ボタン

    キャンバスは、タブレット デバイスの画面をエミュレートして狭くなります。 マップ横の列は狭くなりすぎて、使い勝手が悪くなっています。 ウィジェットのコンテンツは一切判読できません。

    エクスペリエンスの中画面ビュー

    メニューの横に 2 つの状態メニューがあります。1 つはヘッダー用、もう 1 つはマップの本体用です。 これらは、両方とも [自動] に設定されています。つまり、中画面用のレイアウトは、大きい画面用のレイアウトと同じになります。

  2. アプリの本体の横の [カスタム] をクリックします。

    アプリの本体のカスタム オプション

  3. [有効化しますか？] ウィンドウで、[OK] をクリックします。

    これで、大きい画面用の設計に影響を与えずに、中画面上のページ用のレイアウト設計を変更できます。

  4. 列をクリックします。 2 つのウィジェット間のスペースをクリックし、他のウィジェットではなく列を選択するようにしてください。
    ヒント:

    列ウィジェットが選択されていると、[列] ウィンドウが表示されます。 また、[ページ] ウィンドウの [アウトライン] セクションで列ウィジェットを選択することもできます。

  5. 使用する列が 2 つから 4 つになるよう、列ウィジェットのサイド ハンドルを右側にドラッグします。

    列のハンドルをドラッグ

    列の幅が広がり、凡例全体が表示されるようになりました。 このように変更しても、大きい画面でのエクスペリエンスには影響しません。

アイテムを保留中リストに移動

小さい画面のレイアウトからウィジェットを完全に削除したいこともあります。 ウィジェットを削除して、大きい画面のレイアウトからも削除するのではなく、保留中リストに移動する方法があります。

  1. ビルダー ツールバーの [小画面デバイス用のページを編集] ボタンをクリックします。

    小画面デバイス用のページを編集ボタン

    キャンバスはさらに小さくなります。 ここでは、さらに大きな変更を加えます。

  2. キャンバスで、アプリをスクロールします。

    列が表示され、その下にマップが示されます。 小さい画面では、行ウィジェットは列として表示されるため、レイアウトは行内の列ではなく、列内の列として構成されます。

    エクスペリエンスの小画面ビュー

    モバイル アプリのスペースは限られているため、シンプルな方がより見やすくなります。 凡例ウィジェットとブックマーク ウィジェットの情報はポップアップにも表示されるため、これらのウィジェットは小さい画面のビューから削除します。 また小さい画面では、スワイプ機能も利便性が低いため削除します。 つまり、列ウィジェット全体を削除し、マップだけを残すことができます。

  3. キャンバスの本体の横の [カスタム] をクリックします。 [OK] をクリックします。
  4. 列ウィジェットを選択します。 列内のウィジェットではなく、列が選択されていることを確認します。

    列ウィジェットは削除しないでください。 カスタム モードのウィジェットを削除すると、ウィジェットがアプリ全体から削除されてしまうため、大きい画面でも使用できなくなります。 中画面または小さい画面のレイアウトからウィジェットを削除するのではなく、保留中リストに移動します。 そうすることでウィジェットは保持され、他の画面サイズで引き続き使用することができます。

    ヒント:

    列ウィジェットを誤って削除してしまった場合は、ツールバーで [元に戻す] ボタンをクリックします。

  5. ウィジェットのツールバーで [保留中のリストに移動] ボタンをクリックします。

    保留中のリストに移動ボタン

    列とそのすべてのコンテンツがキャンバスから消去されます。 マップのみが残ります。

    小さい画面でのエクスペリエンスの全表示

    注意:

    マップがキャンバス全体に表示されない場合は、マップをクリックして少しドラッグし、サイズをリセットします。

    マップ ツール (マップの切り替えボタンなど) がキャンバス下部に表示されない場合は、[マップ] ウィンドウの [スタイル] タブを開きます。 [高さ] で [カスタム] を選択し、サイズを [100%] に設定します。

サイズと位置をピクセル単位で設定

小さい画面用にカスタム レイアウトを作成すると、後からレイアウトを変更しようとしたときに、変更を 2 ～ 3 回加えなくてはならないという欠点があります。 しかし、パーセンテージではなくピクセル単位でサイズを設定することで、カスタム レイアウトを有効にせずに済むことがあります。

小さい画面では、エクスペリエンスの [マップの説明] ボタンは小さすぎるため、テキストがすべて収まりません。

テキストが途切れているボタン

小さい画面用にボタンのカスタム サイズを設定することもできますが、その代わりにボタンの全面的なサイズを変更して、どのサイズの画面でも問題なく表示されるようにし、カスタマイズの必要性をなくします。

  1. ビルダー ツールバーの [大画面デバイス用のページを編集] ボタンをクリックします。

    大画面デバイス用のページを編集ボタン

  2. ヘッダーにポインターを合わせ、[ヘッダーの編集] をクリックします。 ボタン ウィジェットをクリックします。
  3. [ボタン 2] ウィンドウで、[スタイル] タブをクリックします。

    スタイル タブ

    [サイズと位置] の [幅] と [高さ] の設定が、画面サイズに対するパーセンテージで表示されます。 そのため、小画面デバイスではボタンが小さすぎて判読できなくなっています。

  4. [幅] の横の [%] ボタンをクリックし、[px] を選択します。 [高さ] 設定の [%] も [px] に変更します。

    幅と高さをピクセルに設定

    ボタンのサイズをピクセルで設定すると、画面のサイズとは関係なく、ボタンは常に同じサイズになります。

  5. [幅] に「120」と入力します。 [高さ] に「30」と入力します。

    幅と高さの設定

    ボタンは大きい画面では少し小さく、小さい画面ではまだ少し大きいようです。 しかし、新しいサイズはどの画面サイズでも問題なく使えそうです。 ボタンの位置もピクセル単位で設定します。

    [高さ] パラメーターの下に、位置ダイアグラムがあります。 このダイアグラムは、ヘッダーのエッジからのボタンの位置を決定します。

  6. 位置ダイアグラムで、下と右の位置計測の横にある [%] ボタンをクリックし、[px] を選択します。
  7. 両方の計測値を「10」ピクセルに変更します。

    右および下の位置を 10 ピクセルに設定

    これで、ボタンはヘッダーの右下隅から 10 ピクセルの位置に配置されます。

    サイズ変更したボタン

    次に、タイトル テキストの位置もエッジから 10 ピクセルになるよう調整します。

  8. キャンバスで、タイトル テキストをクリックします。

    [テキスト] ウィンドウの [スタイル] タブで、位置ダイアグラムの 4 つすべての計測値が [0] パーセントに設定されています。 これは、タイトルがヘッダーのスペース全体に表示されるよう構成されているからです。 この計測値の 1 つを調整します。

  9. 位置ダイアグラムで、左の計測値を「10」ピクセルに変更します。

    左の位置を 10 ピクセルに設定

    キャンバスで、テキスト ウィジェットがやや右に寄ります。

    右に寄ったタイトル テキスト

  10. [中画面デバイス用のページを編集] ボタンと [小画面デバイス用のページを編集] ボタンをクリックし、小さい画面でヘッダーがどのように表示されるか確認します。

    サイズと位置の設定が小さい画面に反映される

  11. ビルダー ツールバーの [大画面デバイス用のページを編集] ボタンをクリックし、[保存] ボタンをクリックします。

このチュートリアルでは、3 つの画面サイズに対応するようレイアウトを調整しました。 カスタム レイアウト オプションを有効にし、不要なアイテムを保留中リストに移動し、ウィジェットのサイズと位置をピクセル単位で設定して、画面サイズにかかわらずウィジェットのサイズが変更しないようにしました。 エクスペリエンスを一般公開する方法については、このシリーズの最後のチュートリアル「エクスペリエンスとテンプレートの公開」をご参照ください。