Forguncyで実現するレスポンシブな業務アプリの作り方

業務アプリを作っていると、こんな悩みありませんか？

• PCではちょうどいいのに、タブレットだと崩れる
• 画面サイズごとに別画面を作るのは大変
• ユーザー環境に依存せず使いやすくしたい

Forguncyでは、行・列の設定やキーワードを組み合わせることで、レスポンシブなUIを実現できます。

Forguncyでできるレスポンシブ対応一覧

ページストレッチモード

今回の記事では取り上げませんが、存在だけ知っておいてもらえればと思います。
この設定を有効化すると、ブラウザのサイズに合わせて画面全体が引き延ばされます。
特にこだわりがなければ、この設定だけで済むこともあると思います。
ただ、画像などがあると予期せぬサイズ変更でいびつな見た目になってしまう可能性があることに注意です。

行列の高さと幅の自動調整／比例配分

行列を選択＞右クリック＞行の高さ…／列の幅…

上記から設定が可能です。

できることや詳しい設定方法は後述します。

キーワード＋コマンド

Forguncyではページサイズに関するキーワードが用意されています。

このキーワードはコマンドでも利用可能なので、コマンドの条件分岐などを駆使することで、
ページのサイズによるレイアウト変更処理などを自作することが可能です。

それでは次からはその詳しい設定方法や仕様を共有します。

「自動調整」でレイアウトを変える

自動調整では、WEBブラウザのサイズではなく、そのセルに含まれる内容のサイズによって画面の大きさを変更してくれます。

活用イメージとしては、セルに設定された値ごとに幅や高さを設定するのが面倒な場合や、フォームの入力エリアを自動で伸縮させるようなことができます。

↓設定イメージ※自動調整が設定されたセルはオレンジ色になります。

↓実際の動作イメージ

リストビューや画像などに適用しようとすると、サイズがゼロになってしまうのでご注意ください。

参考：https://docs.forguncy.com/v10/rowandcolumnoperations.html

「比例配分」でレイアウトバランスを維持する

比例配分ではレスポンシブ対応のイメージ通りの設定で、WEBブラウザのサイズに応じて大きさを変えることができます。
２つのパターンで設定ができます。

一つが通常のサイズ設定と同様、ピクセル単位。
もう一つが重要な考え方である比率です。

ピクセル単位では、最小値のピクセル数、最大値のピクセル数が設定できます。
↓例えば以下のような設定をした場合※比例配分を設定した行列は色が紫になります。

↓以下のような動作になります。

今回は最大値を４０ピクセルにしたので、他の通常セル（２０ピクセルに設定）の２倍のサイズまでしか大きくなっていないことが確認できます。

比率ではブラウザの余白を割合で表現してサイズを分割することができます。
↓例えば以下の設定を行うとします。

上記の例では、ブラウザの余白を１対３対１に分けて、そのサイズ分列幅を動的に変更しています。

活用シーンとしては、ページ上の余白を自動調整する使い方があります。

実はForguncyのビルトインページやテンプレートで比率の設定は多用されています。

例えばログイン画面

実行すると以下のようなレイアウトですが、

もし、比例配分を設定していなかったらこうなります。

サイズが固定なので、ブラウザのサイズが小さいとスクロールバーが表示されます。

参考：https://docs.forguncy.com/v10/rowandcolumnoperations.html

キーワード＋コマンドで振る舞いを変える

この方法ではブラウザのサイズによって、表示するアイテムを切り替えるときに有効です。

Forguncyのテンプレートだと、請求書発行テンプレートで実装されています。

左側のメニューをブラウザのサイズに応じて切り替えています。

実装イメージは以下の通りで、

まずは、サイズごとに異なるレイアウトを作り、どちらかを非表示にしておきます。

上記にように、ブラウザのサイズを条件分岐に使ってレイアウトの表示非表示でメニューを切り替えています。

※詳しくは、Builderのテンプレート、「請求書発行」をご確認ください。

まとめ：3つを組み合わせるのがコツ

レスポンシブ対応は、1つの機能で解決するものではなく、以下の組み合わせが重要です。

要素	役割
自動調整	レイアウトを変える
比例配分	レイアウトを維持する
キーワード制御	振る舞いを変える

参考リンク

ヘルプ：https://docs.forguncy.com/v10/rowandcolumnoperations.html

デモ：請求書発行