4.3. 開発フェーズ¶
開発フェーズでは、4.2の設計フェーズで作成したテンプレート、パーツ、エレメントセットを含むプロトタイプ部品を組み合わせて実装を進めていきます。
プロトタイピング、データベース設計 （データ設計・変数設計）、開発ルールの共有によって、複数人で行う開発の場合でも統一された仕組みのもとでアプリケーションを作成できます。
注意
IM-BloomMaker や IM-LogicDesigner を用いて同じコンテンツを複数人で同時に編集する場合、一番最後に保存した変更内容が反映されます。編集した内容が上書きされる可能性があるため、注意しましょう。 IM-BloomMaker には 画面作成中に変更が加えられないよう制御する で紹介している排他制御機能が準備されています。複数人で編集する場合は排他制御機能を活用してください。
4.3.1. データ定義を設定する¶
アプリケーションで利用するデータの定義を設定します。Accel Studio のデータ定義は、IM-Repository のデータリポジトリ機能を利用して作成します。
Accel Studio の「アプリケーション詳細」にある「データ定義」タブからテーブルとエンティティを定義することで、IM-Repository が保有する用語データおよび属性情報（メタデータ）が紐づけられます。
コラム
4.3.2. ビジネスロジック処理を作成する¶
アプリケーションで利用するビジネスロジックの処理を作成します。ここでは、IM-LogicDesigner を使用して、データベースからデータをどのように取得するかなどにも考慮し、ロジックフローを作成していきます。 データ定義を設定するで|common_repository_short| のエンティティを活用したデータ定義を設定しておくことで、変更処理にも柔軟に対応できるデータベースアクセスロジックを作成できます。
Accel Studio の「アプリケーション詳細」にある「ロジック」タブからロジックリソースを追加することで、IM-LogicDesigner で作成したロジックフローが紐づけられます。
コラム
4.3.3. 画面コンテンツを作成する¶
アプリケーションで利用する画面のデザインを作成します。ここでは、IM-BloomMaker を使用して、変数の設定やアクションなどを考慮し、画面コンテンツを作成していきます。
Accel Studio の「アプリケーション詳細」にある「画面」タブから画面コンテンツを追加することで、IM-BloomMaker で作成した画面デザインが紐付けられます。
コラム
4.3.3.1. 画面作成中に変更が加えられないよう制御する¶
IM-BloomMaker には、デザイナ画面（コンテンツ、テンプレート、エレメントセット）の排他制御機能があります。
排他制御機能を利用することで、コンテンツの上書き保存を制限し、意図しないデータの上書きを防げます。複数人で共同開発を行う場合は排他制御を有効にすることをおすすめします。
コラム
4.3.3.2. 作成した画面をコピーして、別の画面の開発に使用する¶
コラム
4.3.4. 開発中にデバッグ・画面の修正を行う¶
アプリケーションの開発では、開発中にアクションや変数に関するデバッグ、画面の見た目の修正を行います。
以下に示すように、デバッグや画面修正のツールや機能を使用することで、不具合の原因を特定しやすくなり、早めに対処できます。
- アクションのデバッグ： IM-LogicDesigner のデバッグモード
- 変数のデバッグ： IM-BloomMaker のデバッグツール
- 画面の見た目の修正： IM-BloomMaker の差分表示機能
4.3.4.1. デバッグモードを使用する（IM-LogicDesigner）¶
たとえば、IM-BloomMaker でボタンなどにアクション設定を行った後、プレビュー画面から処理を実行してみます。期待したとおりに処理が動作しなかった場合は、IM-LogicDesigner のデバッグモードによりビジネスロジックのデバッグをしてください。
IM-LogicDesigner のデバッグモードでは、以下のようなデバッグを行います。
- 画面上から入力するデータの値を指定して処理を実行し、処理結果の値を確認する
- ブレイクポイントを設定して、細かく処理の過程を確認する
- 処理に関係する各変数の中身を、画面上から確認する
このように、画面のアクションに関するデバッグをデバッグモードを使って簡単に行うことができます。
コラム
4.3.4.2. デバッグツールを使用する（IM-BloomMaker）¶
画面の変数に関するデバッグは、IM-BloomMaker のデバッグツール（Chromeブラウザ専用）を使用して、Webブラウザの開発者ツール上で行うことができます。
お使いのWebブラウザ（Chrome）にデバッグツールをインストールすると、開発者ツールに IM-BloomMaker のデバッグ専用のタブが追加されます。IM-BloomMaker で作成した画面を開き、開発者ツール上で使用している変数の値を指定します。変数の中身を確認しながら、処理のデバッグを行っていきます。
IM-BloomMaker のデバッグツールは、IM-LogicDesigner のデバッグモードと同様に、ブレイクポイントを設定して段階的に処理を検討できます。
コラム
4.3.4.3. 差分表示機能を使って画面を修正する（IM-BloomMaker）¶
IM-BloomMaker でコンテンツを編集した後、差分表示機能を使って、デザイナ画面上から以下の内容を確認できます。
- ページに配置されたエレメント（画面部品）の構成変更
- 各エレメントに紐づけられたアクション（処理）の変更
- 各部品に設定された変数の変更
IM-BloomMaker でコンテンツを保存するごとに差分情報が記録されます。そのため、以前の状態に戻したい場合、差分を確認しながら任意の状態に戻すことができます。
コラム
4.3.5. アプリケーションの設計書を出力する¶
開発が完了した後、各ローコード開発ツールの設計書出力機能を利用して、アプリケーションの設計書を出力します。
4.3.5.1. ロジックフローの設計書を出力する（IM-LogicDesigner）¶
IM-LogicDesigner で作成したロジックフローの定義内容を基に、ビジネスロジック処理に関する設計書を出力します。設計書は、Excel形式（.xlsx）で出力されます。 サンプルとして、Accel Studioの「タスク管理」テンプレートに含まれる「タスク登録処理」の設計書を以下のリンクからダウンロードできます。
コラム
4.3.5.2. 画面コンテンツの設計書を出力する（IM-BloomMaker）¶
IM-BloomMaker で作成した画面デザインの設定内容を基に、画面コンテンツの基本情報に関する設計書を出力します。設計書は、Excel形式（.xlsx）で出力されます。 サンプルとして、Accel Studioの「タスク管理」テンプレートに含まれる「タスク登録・編集画面」の設計書を以下のリンクからダウンロードできます。
コラム
出力したアプリケーションの設計書と4.1の要件定義フェーズで作成した要件定義書を併せて、4.4の試験フェーズで活用してください。