ユースケース入門 - 開発編 -

開発編では、若手エンジニアの佐藤さんが、企画編で検討した内容をもとに、Accel Studioを使ってタスクボードアプリを作成するプロセスを紹介します。

テンプレートから生成した画面や処理を活用しながら、アプリケーションの仕様に合わせてローコード資材をカスタマイズしていきます。リーダーの高橋さんからアドバイスを受けながら、画面・処理・データの設定や、開発中につまずきやすいポイントについても確認していきましょう。

このユースケースで作成するアプリケーションのローコード資材は、下記よりダウンロードできます。実際に資材を確認・編集しながら、アプリケーションの作成方法を学んでみましょう。

テンプレートからアプリケーションを作成する

Accel Studioでは、アプリケーションのひな型としてテンプレートを利用できます。企画編では、タスクボードアプリを作成するために、「空のアプリケーション」「自己紹介」「マスタメンテナンス」の3つのテンプレートを利用する方針を決めました。

開発では、これらのテンプレートからアプリケーションを作成し、必要な画面や処理をメインのアプリケーションに取り込んでいきます。

(1) メインで作業するアプリケーションを作成する ⋯⋯【メイン】タスクボードアプリ

「空のアプリケーション」テンプレートでは、アプリケーション作成時に画面や処理を生成せず、ローコード資材を管理するためのアプリケーションだけを作成します。作成したアプリケーションに、他のアプリケーションから必要な画面や処理などのリソースを追加して、タスクボードアプリの作業環境を整えます。

(2) 画面UIを利用するアプリケーションを作成する ⋯⋯【画面】タスクボードアプリ

「自己紹介」テンプレートでは、ユーザ情報の登録・更新・削除や、カード形式での一覧表示を行うアプリケーションを作成できます。今回は、このテンプレートから生成されるIM-BloomMakerの画面をタスクボードアプリの画面作成に活用します。

(3) 処理を利用するアプリケーションを作成する ⋯⋯【処理】タスクボードアプリ

「マスタメンテナンス」テンプレートでは、データの登録・更新・削除や一覧表示を行うアプリケーションを作成できます。今回は、このテンプレートから生成されるIM-LogicDesignerの処理をタスクボードアプリの処理作成に活用します。また、データ定義についても、このアプリケーション上でIM-Repositoryのエンティティを作成します。

※以降は、説明の簡便性のため、【メイン】アプリ、【画面】アプリ、【処理】アプリという表現を使用します。

作業環境に必要なリソースを取り込む

アプリケーションの準備ができたら、作業環境となる【メイン】アプリに、既存のリソースを取り込みます。Accel Studioの［リソースの追加］から、【画面】アプリと【処理】アプリに用意したリソースを追加します。

(1) 画面を取り込む

｢画面｣ から【画面】アプリの画面コンテンツを追加します。既存の画面コンテンツは、「業務テンプレートから作成」フォルダから選択します。

(2) 画面URLを取り込む

｢公開URL｣ から【画面】アプリの画面URLを追加します。既存の画面URLは、「業務テンプレートから作成」フォルダから選択します。

(3) ロジックを取り込む

｢ロジック｣ から【処理】アプリのロジックを追加します。検索窓に「【処理】タスクボードアプリ」と入力すると、対象のロジックを絞り込むことができます。

(4) APIのURLを取り込む

｢公開URL｣ から【処理】アプリのAPIのURLを追加します。検索窓に「タスクボードアプリ」と入力すると、対象のAPIのURLを絞り込むことができます。

(5) データ定義を取り込む

｢データ定義｣ から【処理】アプリのデータ定義を追加します。既存のデータ定義は、「業務テンプレートから作成」フォルダから選択します。

これで、【メイン】アプリから画面・処理・データ定義など、アプリケーションの作成に必要なリソースをまとめて扱えるようになりました。

ローコード資材をカスタマイズする

作業環境が整ったら、取り込んだローコード資材をタスクボードアプリの仕様に合わせてカスタマイズします。ここでは、「どこを修正するのか」「修正するときに何を確認するのか」という観点から、佐藤さんが行った作業を紹介します。

ロジックを修正する：IM-LogicDesigner

取り込んだロジックを、タスクボードアプリの仕様に合わせて修正します。今回は、IDや登録者、登録日などの情報を自動で設定できるように、ロジックを修正します。

(1) 登録処理を修正する

IDを自動で設定するため、「変数操作」タスクを追加します。マッピング設定では、マッピング関数のidentifierを利用します。また、「登録」タスクでは、登録者や登録日を自動で設定するため、マッピング設定に暗黙的な変数を追加します。

(2) 編集処理を修正する

「更新」タスクのマッピング設定に暗黙的な変数を追加し、更新者や更新日を自動で設定できるようにします。

画面の変数を修正する：IM-BloomMaker

次に、IM-BloomMakerの画面をタスクボードアプリに合わせて修正します。まずは、画面で使用する変数・定数・入力・多言語を確認し、不要なものを削除したり、新しいデータ定義を追加したりします。

不要な変数を削除する

使用しない変数や多言語を削除します。ただし、使用箇所だけでは不要か判断しにくい変数については、無理に削除せず、コメントを残しておく方法もあります。コメントを入力すると、変数名に吹き出しが表示されるため、後から判断しやすくなります。

(1) 変数を削除する

$variable配下の変数を確認し、IM-Repositoryのデータ定義に置き換えるものを削除します。entity配下のユーザ情報の表示に関する変数やendPoint配下の自己紹介の処理に利用する変数などを削除しましょう。

(2) 多言語を削除する

画面のラベルやメッセージを確認し、不要な多言語を削除します。多言語はアクションから参照されている場合もあるため、使用箇所もあわせて確認します。

新しく変数を追加する

IM-Repositoryのデータ定義をインポートすることで、必要な変数や定数をまとめて追加できます。一つずつ変数を作成する手間が省かれるだけではなく、データベースやテーブルと連携ができ、設定次第ではバリデーションチェックも可能です。

(1) 変数にエンティティをインポートする

登録・編集・詳細画面では、$variable配下にエンティティをインポートします。

(2) 配列変数に辞書項目をインポートする

一覧画面では、$variable配下の配列変数に辞書項目をインポートします。

(3) 定数に列挙型をインポートする

両方の画面で、それぞれ$constant配下に列挙型をインポートします。

既存の変数を修正する

作成するアプリケーションに合わせて、既存の変数や入力を修正します。今回は、主にIDに関する設定を変更します。

(1) 変数を追加・変更する

画面間や画面とロジックの間でデータを受け渡すために、必要な変数を追加・変更します。

(2) 入力を追加・変更する

登録・編集・詳細画面では、入力値をユーザコードからIDに変更し、登録者を追加します。

(3) 多言語を追加・変更する

両方の画面で、既存のラベルやメッセージを変更し、新しく必要なラベルを追加します。多言語を変更した場合は、標準以外の言語についても変更または削除します。特に、日本語を修正しないと、変更前のラベルやメッセージが表示されてしまうため、注意してください。

画面デザインを修正する：IM-BloomMaker

変数を整理したら、画面のデザインをタスクボードアプリに合わせて修正します。エレメントを削除・置換する場合は、関連する変数もあわせて確認します。反対に、エレメントを追加する場合は、必要な変数値を正しく設定します。

(1) 入力エリアを修正する

登録・編集・詳細画面の「Refer Area」では、ユーザ情報を表示していたエリアをタスクの入力・表示エリアに変更します。また、「Input Area」では、不要なエレメントを削除し、タイトル、ステータス、詳細など、タスクに必要な項目を配置します。

(2) 検索エリアを修正する

一覧画面の「Search Condition」では、IM-Repositoryのデータ定義の検索条件を確認しながら、不要な検索項目を削除し、タイトルやステータスなど、タスクボードに必要な検索項目に変更します。

(3) 一覧表示エリアを修正する

一覧画面の「Card List」では、カードに表示する項目をタスクボードの仕様に合わせて変更します。

アクションを修正する：IM-BloomMaker

画面の変数やデザインを修正したら、画面遷移やクリック操作など、アプリケーションの挙動に合わせてアクションを修正します。アクションを削除する場合は、いきなり削除するのではなく、まず一時的に無効化（トグルを左側にする）して動作を確認する方法もあります。

今回のように【画面】アプリから流用できるアクションについては、アクション内で指定されている変数を一つずつ確認し、必要に応じて修正します。また、ロジックについては、【処理】アプリのものに適宜差し替えていくようにします。

(1) 初期表示のアクションを修正する

登録・編集・詳細画面の「Initialize」アクションでは、ユーザコードに関する変数や参照に関する処理の差し替えを行い、それ以外の不要なアクションは無効にします。また、一覧画面の「Initialize」アクションでは、検索条件やユーザコードを確認する処理などの不要なアクションを無効にし、テーブルデータを表示するアクションのみ残します。

(2) 登録・更新・削除のアクションを修正する

【画面】アプリでは、登録・更新・削除に関するアクションが「on Clicked 〇〇 Button」というアクション名でそれぞれ設定されています。各アクションの設定を開き、リクエストパラメータに設定する変数を確認します。また、必要に応じて、呼び出すロジックを【処理】アプリのロジックに変更します。

(3) 検索のアクションを修正する

一覧画面の「on Clicked Search」アクションでは、プルダウンに関する変数の差し替えやテーブルデータを表示するアクションの確認を行い、それ以外の不要なアクションは無効にします。処理を変更した場合は、レスポンスデータを後続の処理で正しく利用できているかも確認します。

プレビューを確認する：IM-BloomMaker

必要な設定が一通り終わったら、プレビューで画面の表示や挙動を確認します。登録・編集・詳細画面だけでなく、一覧画面についても、登録・更新・削除・検索・画面遷移など、主要な操作が期待どおりに動作するかを確認しましょう。

エラーの原因を調査する

期待どおりに動作しない場合は、まず、画面側と処理側のどちらに原因があるのかを切り分けます。デバッグを実行し、該当箇所を見つけ、修正と確認を繰り返します。

処理側に原因がある場合：IM-LogicDesigner

たとえば、「登録」ボタンをクリックしてもデータが登録されない場合は、画面から処理側へのデータの受け渡しや、IM-LogicDesignerのマッピング設定を確認します。必要に応じて、ロジックフローのデバッグを実行し、入力値や出力値を確認します。また、フロー内に「ログ出力」タスクを追加し、原因を特定・調査する方法も有効です。

画面側に原因がある場合：IM-BloomMaker

たとえば、一覧画面から登録画面への遷移が正しく行われない場合は、IM-BloomMakerのアクション設定や変数を確認します。IM-BloomMakerのデバッグツールを利用して、変数の値やアクションの実行状況を確認することもできます。必要に応じて、ブレイクポイントを設定して確認する方法も有効です。

レイアウトを調整する：IM-BloomMaker

最後に、プレビューを確認しながら画面のレイアウトを調整します。余白やサイズなどを調整し、必要に応じて画面全体の見た目を整えます。

作成したアプリケーションのレビューを依頼する

アプリケーションが完成に近付いたら、第三者にレビューを依頼します。今回は、佐藤さんがリーダーの高橋さんにレビューを依頼します。レビューを依頼するときは、アプリケーションそのものだけでなく、どのような仕様で作成したのか、どこまで確認したのかも伝えるようにします。

• Accel Studioのアプリケーション名
• プレビューで確認したチェック項目
• アプリケーションの概要をまとめたメモ

次のステップへ：成果編

ここまでの手順で、タスクボードアプリの開発が一通り完了しました。実際の開発では、「修正する → プレビューで確認する → 問題があれば修正する」という作業を繰り返しながら、アプリケーションを完成させていきます。今回のユースケースでは詳細な設定手順をすべて紹介するのではなく、テンプレートを活用してアプリケーションを作成する流れと、開発時に確認したいポイントを中心に紹介しました。

実際にアプリケーションを作成するときは、e-learningやチュートリアルガイドで学んだ内容を活用しながら、自分で手を動かして試行錯誤してみましょう。また、完成したローコード資材をダウンロードして、自分で作成したアプリケーションと比較しながら答え合わせすることもできます。

次の成果編では、レビューで高橋さんから指摘された内容をもとにアプリケーションを修正し、完成したタスクボードアプリの成果を確認します。