Webアプリの画面デザイン方法って？ForguncyはExcelライクなスタイルで簡単設定

グレープシティが提供するノーコードWebアプリ作成ツール「Forguncyは、Excelっぽいセル型に独自の外観デザインを設定し、Web画面をデザインします。設定した内容は他のページでも繰り返し再利用できる便利な機能があります。

Forguncyとは

Forguncyは、Webアプリをノーコードで開発・運用できるツールです。名前の由来は「Exce方眼紙」 → ほうがんし → ホーガンシー。複数のシステムと直接接続して参照・更新が行えるデータ管理機能と、Excel感覚でレイアウトができる画面デザイン機能を備えています。

ノンプログラミングWebアプリ作成ツール - Forguncy（フォーガンシー）| グレープシティ株式会社

Forguncyのデザイン方式はExcel方眼紙

Forguncyの画面レイアウトはExcel方眼紙方式を採用しています。HTMLやCSSを使わずにセルにいろいろな設定をするだけで誰でも簡単にWebアプリの画面を作れます。画面作成イメージは下記動画をご覧ください。この記事ではForguncyのセル型にスタイルを設定する方法を説明します。

セルスタイル

以下の各セル型に対していくつかのセルスタイルを用意しています。
　・ボタン
　・テキストボックス
　・複数行テキストボックス
　・ハイパーリンク
　・コンボボックス
　・数値
　・日付
　・時刻
　・画像
　・画像アップロード
　・ユーザー選択コンボボックス
　・ピボットテーブル
　・メニュー
　・ふりがなテキストボックス

セル型により、既定で用意されているセルスタイルは異なります。
セルスタイルは、［ホーム］タブの［セルスタイル］をクリックすると「テーマのセルスタイル」または「お勧めのセルスタイル」が開きます。この中から選択することで簡単に外観の変更が可能です。

ボタンの場合

テキストボックス,複数行テキストボックス,コンボボックス,日付,時刻、ユーザー選択コンボボックス,ふりがなテキストボックスの場合

ハイパーリンクの場合

数値の場合

画像の場合

画像のアップロードの場合

ピボットテーブルの場合

メニューの場合

　　　　　　　　　参照：https://docs.forguncy.com/v6/#celltypestyle.html
　　　　　　　　　　　　　（グレープシティ　オンラインヘルプ）

セルスタイルのカスタマイズ

セルスタイルは既定のスタイル以外に、独自のセルスタイルを新しく作成することもできます。
セルスタイルを開いて、「新しいセルスタイル．．．」をクリックしてください。
開いた「セルスタイルの設定」ダイアログから状態ごとに外観（色、罫線、角丸、影、文字スタイル、内側余白、透過性）を設定することができます。

試しに以下のように設定してみました。
ボタン型のセルに通常時は背景が青、罫線はなし、角丸を10ピクセル、影を有効、スタイルは太字に設定。

マウスオーバー時は背景を赤、その他は通常時を継承する。

ブラウザでアプリにアクセスすると、ボタンの上にマウスを乗せたり離したりする度にボタン色が変わることが確認できました。

　　　　　　　通常時　　　　　　　　　　　　マウスオーバー時

設定したセルスタイルはユーザー設定の中に登録されていますので、何度でも再利用することができます。

ボタン以外のセル型についても、同じ項目の設定が可能です。
ただし、メニュー型のセルは、セルスタイルの設定ダイアログにおいて「ノード」を選択し、選択したメニューレベルに対して異なる状態のスタイルを設定できます。

登録した後のセルスタイルは、スタイル名を右クリックすると、編集、削除、複製が可能です。
また、既定で用意されているセルスタイルも、編集、複製、リセットが可能です。

　　　　　参照：https://docs.forguncy.com/v6/#newcelltypestyle.html
　　　　　　　　https://docs.forguncy.com/v6/#celltypestyleoperation.html
　　　　　　　　　　　（グレープシティ　オンラインヘルプ）

Forguncy４以前のセルスタイルに合わせる

Forguncy４以前のバージョンにはセルスタイル機能がありません。
Forguncy４以前のバージョンで作成したプロジェクトをForguncy６で開いた場合、
既存のセル型に自動的にセルスタイルが適用されることはありませんが、
新規に設定したセル型には、自動的にセルスタイルが適用されます。
これによって、以前のバージョンで作成したプロジェクトをForguncy６で編集すると、統一感のないデザインになってしまいます。
以前のデザインに統一する場合は、新規で設定したセル型を指定して、［ホーム］タブの［セルスタイル］をクリックして開いた画面から、「セルスタイルのクリア」を選択してください。

ただし、テキストボックスなどはセルの枠線が描画されなくなるため、「セルの書式設定」から以前と同様になるような罫線を設定してください。
もしくは、以前のデザインに似た新しいセルスタイルを作成し、そのセルスタイルを右クリックして「既定のスタイルに設定」を選択すると、次回からそのセルスタイルが適用されるようになります。

[V6] セルのスタイルをForguncy 4以前に合わせたい

おわりに

セルスタイルを使うと、アプリケーションに独自の外観を統一的にデザインすることが簡単にできます。
Excelのセル色やフォントを設定するように、自分好みのセルスタイルがクリックするだけで作成でき、
状態によってスタイルを変更することがノーコードで実現できます。
カスタムスタイルはForguncyプロジェクトからインポートも可能ですので、独自のデザインを繰り返し活用できる便利な機能です。