ヘッダーやメニューを固定したままコンテンツだけスクロールする

UI部品　基本編

この記事でわかること：
・ヘッダーやメニューを表示したままコンテンツ領域だけをスクロールする方法
・画面の一部だけをスクロールできるレイアウトの作成方法
・ヘッダーやメニューを固定表示する画面の作成方法
・長いコンテンツでも操作しやすい画面構成の作り方
・子ページを表示する領域でスクロールを有効にする方法

画面全体がスクロールする構成で「メニューは見えるままにしたい」「コンテンツだけスクロールしたい」と感じたことはありませんか？
別のメニューを選択するたびに上へ戻る必要が生じるようなアプリでは、機能としては問題なく利用できても、ちょっとした手間の積み重ねが使いづらさや不満につながることがあります。
そういった不便を解消できるよう、今回はヘッダーやメニューを表示したままコンテンツ領域だけをスクロールできる画面構成を紹介します。
画面全体ではなく一部だけスクロールすることで、ヘッダーやメニューを常に表示できる操作しやすい画面を実現します。

1 1.プロジェクトを確認する
- 1.1 手順1-1.プロジェクトを開く
- 1.2 手順1-2.ページを確認
2 2. コンテンツ領域だけをスクロールできる仕組みを知る
- 2.1 手順2-1. 期待どおりにスクロールすることを確認する
- 2.2 手順2-2.設定の確認
3 3.デバッグを実行する
4 Forguncyのマスターページについてもっと知る
- 4.1 この記事はお役に立ちましたか？

1.プロジェクトを確認する

今回の演習で使用するプロジェクトを確認します。なお、今回はForguncy Builderに内蔵されているテンプレートを使用します。

手順1-1.プロジェクトを開く

Forguncy Builderを起動すると、下図のような画面が表示されます。

画面を下にスクロールし、テンプレートの中から「出張申請精算」アプリを選択します。

手順1-2.ページを確認

プロジェクトには出張申請フォルダと出張精算フォルダに分かれて複数のページが内蔵されています。
そのうち、ページ名の横にマークがあるものは、マスターページを利用しているページです。
今回はマスターページを使っているページで、ヘッダー固定・メニュー固定の状態を維持しながらコンテンツだけをスクロールしたいので、このマークがついているページを開きます。
例として、この記事では動作確認に出張精算フォルダ内のTravel_Report_Newページを使用します。

＞参考：Forguncyヘルプ – マスターページのはたらき

2. コンテンツ領域だけをスクロールできる仕組みを知る

マスターページを利用しているページで子ページの表示方法を設定する場合、スクロールやカットの制御は横方向にのみ適用されます。
そのため、ヘッダーやメニューを表示したままコンテンツ領域だけを縦スクロールさせたい場合は、別の工夫が必要になります。
今回は、レイアウト設定を活用してコンテンツ領域だけをスクロールできる画面を実現します。

手順2-1. 期待どおりにスクロールすることを確認する

出張申請精算アプリでは既に設定が行われているので、まずはメニューやヘッダーが表示されたままコンテンツ部分のみがスクロールされる動作を確認します。
デバッグ方法の詳細は3.デバッグを実行する を参照してください。
今回は先に述べた通り、Travel_Report_Newページをビルダーで開いた状態でデバッグを行います。
開いたページで出張旅費精算書をスクロールすると、ヘッダーのメニューが固定されており、コンテンツ部分だけがスクロールしていることを確認できます。

手順2-2.設定の確認

先ほどの手順で、ヘッダーやメニューを表示したままコンテンツ領域だけがスクロールすることを確認しました。
ここからは、その動作を実現している設定を確認していきます。
左ペインの[ナビゲーションウィンドウ]から、[マスターページ]内の「マスターページ」を開きます。
マスターページはC7セルからがプレースホルダーとなっており、別のページが配置される領域です。

このプレースホルダーが配置されている行、すなわち今回では７行目～44行目の行の高さの設定を変更することで、縦方向のコンテンツ領域のみのスクロールを実現できます。
これらの行を選択した状態で行ヘッダーを右クリックし、[行の高さ…]をクリックします。
行の高さウィンドウが開くので、設定を確認します。
今回は設定が「比率配分」になっています。
この部分の最大値を1にすることで、縦方向のスクロールが可能になります。