チュートリアル:Anaplan XL Reporting でレスポンシブなナビゲーション バーを作成

Anaplan XL Reporting のダッシュボード デザイナーでは、レスポンシブで動的なダッシュボードを作成できます。このチュートリアルの手順では、あらゆる画面サイズに適したマルチシート ダッシュボードの全幅ナビゲーション バーを作成する方法について説明します。

1. Excel シートでナビゲーション バーのデザインを作成します。これには、必要なページにリンクする XL3Links が含まれる必要があり、会社のロゴやタイトルなども表示できます。
2. このデザインを複製し、各ページ用のハイライトを作成します。これにより、どのページが表示されているのかが明確になります。関連する範囲を指すように、各ページにビューポートを追加します。
3. ダッシュボード シート上のこの範囲を指すページ化されたビューポートを作成します。ビューポートは [Scale to fill] と [Lock aspect ratio] に設定する必要があります。
4. ページ化されたビューポートの背景を設定します。連続した全幅ナビゲーション バーのエフェクトを作成するには、ナビゲーション バー デザインの塗りつぶし色と同じになるように設定します。

ダッシュボード又はワークブック内のどのページにも、関連するハイライト表示されたデザインを指す新しいページ化されたビューポートが必要です。各ページの行の高さが同じ場合、ナビゲーション バーは固定されているように表示されますが、ハイライト表示されたセルは移動します。

ナビゲーション バーは横長の画面や大きな画面には適していますが、モバイル ビューには小さすぎます。ダッシュボード ターゲットでは、さまざまな画面サイズやナビゲーション バーに対応できるさまざまなレイアウトを作成できます。

1. モバイルで使用する 2 番目のデザインを作成します。同じ配色とフォントを使用して、切れ目のないデザインのような印象を与えます。さきほどと同様に、各ページのハイライト表示も必要です。
2. ダッシュボードで新しいターゲットを作成します。元のページ化されたビューポートを非表示にして、モバイル ナビゲーション バーのデザインを指す新しいビューポートを作成します。 
   1. ダッシュボード シートでデザイン モードに切り替えて、ダッシュボード パネルで [Edit targets] を選択します。 
   2. モバイル ポートレート用の新しいターゲットを追加し、[OK] を選択してこのターゲットの編集に切り替えます。 
   3. アイテム設定で、全幅ナビゲーション バーを表示する元のビューポートを非表示にします。 
   4. 以前と同じ方法を使用して、モバイル デザインを指す新しいページ化されたビューポートを作成します。 
   5. 他のダッシュボード ターゲット上の新しいページ化されたビューポートを非表示にします。
      ダッシュボードには、画面サイズに最適な目標が表示されます。スマートフォン上の表示では、ナビゲーション バーの見た目が異なります。
      Chrome 又は Firefox で表示すると、ビューポートに予期しない白い罫線が表示される場合があります。これを解決するには、範囲自体ではなく、ナビゲーション バーの範囲を保持しているシート全体の背景色を設定します。