開発ルール

複数人で開発するアプリケーションの保守性を高めるためには、実装した内容の可読性が重要になります。可読性の高さはシステム改修などのメンテナンス時に影響するため、下記のような開発ルールを定義することを推奨します。

• オブジェクトのフォルダー構成
  ナビゲーションウィンドウで管理される各オブジェクト（テーブル、ページなど）は、モジュールごとにフォルダーを分けて管理します。下図のように、「予算」と「実績」のフォルダーを作成し、モジュールごとに整理します。適切にフォルダーを分けることで、管理や保守の効率を向上させることができます。

  

• セルやテーブルのフィールド、リストビューの列などに名前または別名（以降、別名）をつけます。別名をつけることで、参照時に理解しやすく、また管理や整理、検索が容易になります。
  たとえば、Forguncyベストプラクティスではテーブルのフィールド名は英語での命名を推奨しています。下図のように、英語のままでは判読性に欠ける場合があるため、別名をつけることを推奨します。

  

  下図のように、テーブルのフィールドに別名をつけます。

  

  なお、別名を設定する場合は以下に注意してください。

  • 定義した別名は変更しない
    たとえばテーブルのフィールドに別名が設定されており変更した場合、右ペインで設定するセル型の列名には反映されません。これにより意図しない動作を引き起こす可能性があります。

    変更前

    

    変更後

    

  • プロジェクト内で重複した名前を使用しない
    たとえばセルの名前と変数名を重複した名前を設定した場合、その名前をコマンド内で使用すると、重複により意図しない動作を引き起こす可能性があります。   

  参考：フィールドの作成とデータの入力

• コメントを入力する
  データの更新処理や、画面表示に必要なデータを設定する処理など、アプリケーションにおいて重要な役割を担う処理にはコメントを入力します。

ページデザイン

以下は、ページのデザインにおいて考慮するべき内容です。

• 業務用途にあわせたページ構成
   業務の用途にあわせてアプリケーションに作成するページは多岐にわたることがあります。（予実管理アプリケーションの場合、予算管理ページ、実績管理ページ、予実集計ページなど）ユーザーエクスペリエンス（以下、UX）や保守性、ページの可読性を高めるには、１つのページに複数の用途の業務を混在させないことを推奨します。

• ワイヤーフレームの作成
  ページデザインを行う前にアプリケーション全体のワイヤーフレームを作成します。ワイヤーフレームとは、ボタンの配置場所やフォントサイズ、色、アイコンのデザインなどの細かなスタイルを含まない、大まかなレイアウト構造を指します。通常、ワイヤーフレームはWebデザイナーによって定義されますが、Webデザイナーがいない場合は、下図のようにワイヤーフレーム用のページを作成し、開発者はそのページを参照してページをデザインするのが良いでしょう。

  

• 可変レイアウト
  行の高さと列の幅を［自動調整］または［比例配分］に設定することで可変なページを作成できます。複数のデバイスで利用する場合には、レイアウトが自動調整されUXやメンテナンス性の向上が期待できます。なお、ビルトインページは可変レイアウトになっています。

  

  参考：行と列の操作

スタイルの統一

Webサイトにおいて、ページやボタンごとにスタイルが統一されていない場合、UXや保守性の低下を招くだけでなく、誤操作にもつながる可能性があります。そのため、用途に沿ったスタイルを設定する必要があります。特に削除ボタンやデータ更新ボタン、確定ボタンなど、アプリケーションにおいて重要な役割を担う処理を行う要素には、適切なスタイルを設定してください。

スタイルの統一には下記の機能が利用できます。

• テーマは配色やフォントを設定でき、全てのページに統一されたスタイルの適用が可能です。

• テーマの画像は、すべてのページに統一された背景画像を設定できます。また設定した背景画像の変更を一括で行うこともできます。

• カスタムセルは、セル型のスタイルの統一に利用できます。さらにカスタムセル内に設定したコマンドはモジュール化されることで保守性を向上させることができます。モジュールとは、機能要件を満たすための処理の集まりを指します。

適切なインタラクション

Forguncyには主に３つのインタラクションがあります。インタラクションとは、ユーザーの操作とWebアプリケーションの相互作用のことです。インタラクション処理を適切に実装することで、機能性やユーザビリティの向上が期待できます。

• エラーハンドリングと通知

• 数式と関数

• コマンド

エラーハンドリングと通知

ユーザー操作が伴う処理やその処理結果の応答に使用します。

不正な値が検知された際や業務ロジックのエラーに備えて、適切にエラーハンドリングを行い、必要に応じてエラー内容をユーザーに通知します。また、データの削除や更新処理などの処理を実行する前には確認の通知を行うとよいでしょう。

• データの入力規則
  テキストボックスなどの入力項目には、ユーザーによって適切なデータが入力されるように入力制限を設定します。［データの入力規則］を設定することで、入力値を入力時に検証し、誤ったデータや不適切なデータがデータベースに登録されることを未然に防ぐことができます。

  

  データの入力規則の詳細は、データ入力規則（リストビュー）または、データ入力規則（セル）を参照してください。

• エラーの通知
  ユーザー操作により実行されたコマンドの実行中にエラーが発生した際は、メッセージ通知、ElementUI を使用した通知機能を使って入力者にエラー内容を適切に通知します。

• プッシュ通知
  ワークフロー機能を使用した申請など、他者の更新に伴う通知をタイムリーに受けとる必要がある際は、プッシュ通知を使用します。

• 確認ダイアログ
  データの削除や更新などの処理を行う際は、処理の前に確認のためのダイアログを表示するようにします。下図のように［確認ダイアログを表示する］オプションを有効にしてください。

  

数式と関数

数式や関数はページ上の値を参照した計算やフロントエンドでの即時的な計算処理に使用します。

Forguncyには、Excelと同様の計算やデータ操作に使用可能な数式と関数が用意されています。また、テーブルにはデータべース上で数式による計算結果を保持する数式フィールドを使用できます。

コマンド

一般的なアプリケーション開発においてプログラミングで実現する業務ロジックの作成に相当するのがコマンドです。

Forguncyでは、使用箇所や頻度に応じた3種類のコマンドが用意されています。

コマンドタイプ	トリガー	説明
コマンド（通常）	ボタンやページ上の要素のクリック、テキストボックスなどの値変更、ページロードなど	通常ユーザー操作によって実行され、フロントエンドで動作する処理の実装に使用します。 （例：ページ遷移やポップアップメッセージの表示など）
再利用コマンド	コマンド（通常）	同じ実装が必要なコマンド処理を定義することで再利用を可能にします。フロントエンドだけではなく、サーバーサイドコマンドを呼び出すこともできるため、両方のコマンドを含めることができます。
コマンド（サーバーサイド）	コマンド（通常）やサーバーサイドコマンドからの呼び出し、スケジュールタスク、他アプリケーションからのHTTPリクエスト送信	バックグラウンドでのバッチ処理や高負荷なデータ処理などはサーバーサイドのコマンドを使用します。 また、アーキテクチャとしてフロントエンドとバックエンドの分離する場合は主にデータ処理をサーバーサイドで実装します。