ページの追加と管理

ページは、アプリのレイアウトの基盤となるドキュメントです。 ヘッダー、本文、フッターというコンテンツを含めることができる 3 つの主要な要素で構成されています。

Web エクスペリエンスには少なくとも 1 つのページが含まれ、複数のページを含めることができます。 レイアウトをデザインするとき、利用者にコンテンツを表示する最適な方法を決定します。 マップにフォーカスしたコンテンツの場合、全画面アプリ ページを使用します。 コンテンツを組み合わせる場合 (垂直にスクロールする必要があるマップ、複数の画像、テキストのブロックなど) 、スクロール ページを使用します。 ユーザーが複数のページにアクセスできるように、アプリにメニューを含める場合は、アプリ ページをサブメニューにグループ化するフォルダーを追加したり、他の Web サイトへのリンクを追加したりします。 また、アプリやページの読み込み時に開くウィンドウを追加および構成することもできます。

ウィジェット、ブロック、およびスクリーン グループ テンプレートをページに追加すると、[ページ] パネルの [アウトライン] セクションの [本文] ノードに一覧表示されます。 検索可能なアウトラインには選択したページのブロック、スクリーン グループ、およびウィジェットの階層が表示され、有効にしている場合はヘッダーとフッターも含まれます。 アウトラインで、アイテムをクリックして [その他] ボタンをクリックすると、名前の変更や複製などの操作のメニューが表示されます。 [すべて展開] をクリックするとそのアイテムの下の階層が表示され、[すべて折りたたみ] をクリックするとそのアイテムの下の階層が非表示になります。

ページをアプリに追加するには、[ページの追加] ボタン をクリックして、コンテンツおよび想定されるアプリのフローに合うページ テンプレートを選択します。次に、シナリオ例を示します。

• ヘッダーが含まれる 1 つの全画面ページにマップ中心のアプリを作成します。
• ホーム ページ上で全画面アプリを含む複数ページのアプリ、およびユーザーがメニューまたはボタンを使用してアクセスできる別のページ上のサポート コンテンツを含むスクロール ページを作成します。

ビルダー ウィンドウの下部にあるクイック ナビゲーション メニューを使用し、エクスペリエンス内のページやウィンドウを選択して、その設定にアクセスします。 このメニューには、ページ階層とウィンドウ タイプのプレビューが表示されます。

アプリでウィジェットを選択すると、ビルダー ウィンドウの下部にパンくずリストも表示されます。 パンくずリストを見ると、選択したウィジェットが他のウィジェットやページ エレメントに含まれているかどうかがわかります。

複数ページのアプリ

[ページ] パネルには、アプリでページを管理するための以下のオプションがあります。

• [ページの追加] - 全画面アプリおよびスクロール ページという 2 つのページ タイプから選択します。 各ページ タイプには、複数のテンプレートが含まれています。 テンプレートには、マップ中心のテンプレートとコンテンツの組み合わせ (テキスト、画像、マップなど) にフォーカスしたテンプレートがあります。 空白のテンプレートを選択してカスタム レイアウトをデザインすることもできます。
• [リンクの追加] - 別の Web サイトへのリンクを追加して、ユーザーがアプリのメニューから関連する Web ページにアクセスできるようにします。
• [フォルダーの追加] - ページとリンクのフォルダーを追加し、メニュー ウィジェットにドロップダウン メニューとして表示します。
• 他のオプション - 複数ページの場合、ページをホーム ページとして選択したり、必要に応じて、アプリに追加するメニュー ウィジェットからページを非表示にしたりします (アプリ内のすべてのメニューは同じページを含みますが、メニューのスタイルを別々に設定することができます)。ページの名前変更、複製、および削除を行ったり、ページを別のページ上にドラッグして階層的に整理したりすることができます。 ページをドラッグすると、他のページ間に配置される場所を示すラインが表示されます。 別のページの下にネストするには、周りにボックスが表示されるまで、そのページを移動先のページにドラッグします。 ページ、リンク、またはフォルダーのアイコンを設定することもできます。

設定

ページには次のような構成の設定があります。

• [アイコン] - アイコンを変更して、[ページ] パネルのページを区別します。 [一般] ギャラリーと [矢印] ギャラリーからアイコンを選択するか、ファイルからアイコンを追加できます。 [削除] ボタンをクリックして、[マイ アイコン] ギャラリーから未使用のアイコンを削除します。

  注意:

  次の画像形式をアップロードできます: PNG、GIF、JPG、JPEG、BMP。 最適なパフォーマンを維持するために、1 回のアップロードに対して 10MB のサイズ制限が設けられています。

• [ラベル] - ページの名前を変更します。 このラベル ページはエクスペリエンスの URL でも使用されます。 ページを追加すると、ラベルには連番ルールが適用されます。 たとえば、ページ 1 を複製するとページ 2 が生成されます。ページ 2 がすでに存在する場合はページ 3 が生成されます。

  注意:

  公開後にページの名前を変更した場合でも、以前に使用していた URL は有効です。

• [ウィンドウで開く] - 必要に応じて、ページが開いたときにページの前に表示されるウィンドウを選択します。 (ページで開くウィンドウは固定ウィンドウのみ選択できます)。
• [コンテンツの幅] (スクロール ページのみ)
  • [カスタム] - ページの最大幅を設定します。
  • [自動] - ページの幅全体を使用します。
• [アニメーション] - ページの本文にウィジェットのアニメーションを追加します。 (アニメーションは、アウトラインの最上位のウィジェットに適用されます)。
• ボディ
  • [塗りつぶし] - ページの色を選択します。
• [ヘッダー] - 選択したページのヘッダーを表示します。 以下のヘッダーの設定は、ヘッダーが有効化されたすべてのページに適用されます。
  • [高さ] - ヘッダーの高さを変更します (ピクセル単位)。
  • [塗りつぶし] - ヘッダーの色を変更します。
  • [スクロール時にページの上部に留まる] (スクロール ページのみ) - ユーザーが下にスクロールしたとき、ヘッダーはページの上部に表示されたままになります。
• [フッター] - 選択したページのフッターを表示します。 以下のフッターの設定は、フッターが有効化されたすべてのページに適用されます。
  • [高さ] - フッターの高さを変更します (ピクセル単位)。
  • [塗りつぶし] - フッターの色を変更します。
• [レイアウト] (スクロール ページとグリッド ページのみ)
  • [ギャップ] - ページの行間またはグリッド アイテム間のギャップ (とじしろ) を定義します (ピクセル単位)。 グリッド ページでは、ギャップの色を定義できます。
  • [埋め込み] - ページの 4 辺の埋め込みを定義します (ピクセル単位)。
• [グリッド アイテム] (グリッド ページのみ) - 実行時にユーザーがグリッド アイテムをどのように操作できるかを定義します。
  • [サイズ変更を許可] - ユーザーがギャップをドラッグしてグリッド アイテムをサイズ変更できるようにします。
  • [拡大を許可] - ユーザーが個々のグリッド アイテムを拡大できるようにします。

    注意:

    この設定は、ウィジェットの [スタイル] 設定タブでオーバーライドできます。 これは、ユーザーが一部のグリッド アイテムは展開できるが他はできないようにする場合に便利です。

テンプレート

テンプレートには、設定済みのレイアウトとテーマレイアウトが含まれています。これらはそのレイアウトのロックを解除して変更できます。 [レイアウトのロック] ボタンを使用すると、テンプレートを使用してデザインを開始でき、必要に応じてそのテンプレートを変更できます。 レイアウトのロックを解除すると、構成パネルにその他のオプションが表示され、[ウィジェットの挿入] が有効になります。 [デフォルト] ギャラリーのテンプレートを使用してデザインを開始する場合、[プレビュー] ボタンをクリックすると、たとえば、ニーズに合ったテンプレートを選択する際などに役立ちます。 アプリに複数のページを追加するとき、同じテンプレートからほとんどのテンプレートを選択できます (複数ページのテンプレートは、Web エクスペリエンスを作成するときにのみ選択できます)。以下のカテゴリからテンプレートを選択します。

• 標準の全画面アプリ用にデザインされた一般的なワークフローのマップ中心のテンプレート。 これらのテンプレートは次のカテゴリに分類されます。
  • [固定] - これらのテンプレートを構成するには、マップを選択し、関連ウィジェットを追加します。 次に例を示します。
    • [ビルボード] は、マップとウィジェット コントローラー ウィジェットが含まれるシンプルなマップ ビューアーです。
    • [折りたたみ可能] は、コントローラー ウィジェットを含む見出しを備え、マップに焦点を合わせたオープンなインターフェイスのテンプレートです。
    • [ジュエリーボックス] は、マップと組み合わせてリスト内にフィーチャを表示するテンプレートです。
    • [ローンチパッド] は、コントローラー ウィジェットをページの下部に固定して、マップを強調するテンプレートです。
    • タブは、いくつかの異なるセクションを開くビュー ナビゲーション ウィジェットが左側に配置されたテンプレートです。
  • [グリッド] - フルページ グリッド ウィジェットと同じように動作するこれらのテンプレートを構成するには、グリッド アイテムとしてウィジェットを追加し、ウィジェットとその枠線をドラッグして配置とサイズを変更します。 以下の使用可能なグリッド ページ テンプレートがあります。
    • [Avatarboard] は、ホバー効果とフリップ効果を持つ複数のカード ウィジェットを表示します。フラッシュ カードのように、後ろに詳細を追加できます。
    • [チェッカーボード] は、中央にマップ、その周囲にマップに関連したウィジェットが配置されたグリッド ページ テンプレートです。
    • [Collage] は、固定パネル ウィジェットの周囲に複数の画像ウィジェットを表示します。
    • [Leaflet] には、複数の列ウィジェットの中にテキスト ウィジェットと画像ウィジェットがあります。
    • [Mapflyer] は、マップ ウィジェットとともに座標ウィジェットを使用してダイナミック テキストと位置情報を表示します。
    • [マルチバース] では、複数のデータ ソースを操作できます。 データの追加ウィジェットを使用すると、さまざまなソースからデータをインポートして、ユーザーがマップとテーブルを介して複数のソースを比較および解析できるようにするプロセスを簡素化できます。
    • [パノラマ] には、マップ ウィジェットと 2 つのチャート ウィジェットがあります。 ユーザーは、チャート、リスト、フィルターの各ウィジェットを操作して、マップのデータを解釈できます。

    グリッド ウィジェットのようなグリッド ページには、タブ、グリッド列、グリッド行が含まれることがあります。これらはすべて、[ページ] パネルのアウトラインに表示されます。 どのウィジェットでも、アウトラインで任意のグリッド行やグリッド列を選択し、[その他] ボタンをクリックして、操作を行うメニューを表示できます。 グリッド行には [スペースを左右に整列] ボタン、グリッド列には [スペースを上下に整列] ボタンがあります。 行または列によってタブが作成される場合は、行か列の名前を変更できます。 グリッド ウィジェットに含まれる個々のウィジェットの [その他] メニューには、[横方向に分割] ボタンと [縦方向に分割] ボタンがあります。

  注意:

  一部の全画面アプリ テンプレート内のヘッダー バーは、ページの [ヘッダー] 設定を使用する代わりに、固定パネル ウィジェットを使用して作成されています。 これにより、複数ページのアプリを作成する場合に他のページの [ヘッダー] 設定を有効にして構成することができます。 ヘッダーとフッターのコンテンツ、レイアウト、および設定は、[ヘッダー] 設定や [フッター] 設定を有効にするアプリのすべてのページで使用されます。

• ブロックまたはスクリーン グループで整理されるスクロール ページのテンプレート。 ブロック コンテナーは行ウィジェットに似ています。 次に例を示します。
  • [ギャラリー] は、目立つサムネイル画像を使用してコンテンツを強調するテンプレートです。
  • [一般] は、コンテンツを共有するための長くスクロールするテンプレートを提供します。
  • [イントロダクション] は、画像と見出しを効果的に表示するようにデザインされたモジュール レイアウトのテンプレートです。
  • [視差] は、ページの上部にバナー画像があり、その後にスクロール パネルのスクリーン グループが表示されるテンプレートです。

• ゼロから作成しデザインする、全画面ページおよびスクロール ページ用の空白のテンプレート。
  • [空白のスクロール] は、スクロールする Web ページでカスタム デザインを作成するための空白のテンプレートです。 ウィジェットをスクロール ページに追加すると、デフォルトでブロックに追加されます。 [ブロックの挿入] ボタンをクリックして、一般的なブロック レイアウトから選択するか、[スクリーン グループの挿入] ボタンをクリックして、複数のスクリーン テンプレートから選択します。
  • [空白の全画面] は、全画面アプリでカスタム デザインを作成するための空白のテンプレートです。
  • [空のグリッド] は、フルページ グリッド ウィジェットと同じように動作する空のテンプレートです。