ユースケース入門 - 開発編 -
kodamad
開発編では、若手エンジニアの佐藤さんが、実際にAccel Studioを使って開発を進めていくプロセスを紹介します。
ここでは、各テンプレートから生成されたアプリケーションの画面や処理を有効に活用することで、ローコード開発を効率良く進めていきます。リーダーの高橋さんからアドバイスを受けながら、開発中に起こりがちなつまずきやすいポイントなども含めて、佐藤さんと一緒に確認していきましょう。
テンプレートからアプリケーションを作成する
Accel Studioでは、アプリケーションのひな型としてテンプレートが用意されています。佐藤さんは、企画編で準備したカテゴリ配下に、3種類のテンプレートを用いて、それぞれ3つのアプリケーションを作成しました。
(1) メインで作業するアプリケーションを作成する ⋯⋯【メイン】タスクボードアプリ
｢空のアプリケーション｣ テンプレートは、アプリケーション作成時点で画面や処理を作成しません。このテンプレートは、まずローコード資材を入れる箱だけを作成するために使用します。リソースの追加機能により、他の2つのアプリケーションから必要な画面や処理などを取り込みます。
(2) 画面UI参照用のアプリケーションを作成する ⋯⋯【画面】タスクボードアプリ
｢自己紹介｣ テンプレートは、ユーザ情報の登録・更新・削除を行い、カードデザインを用いた一覧表示ができます。IM-BloomMakerを使用した画面側の実装は、このテンプレートから作成したデータを利用します。
(3) 処理マスタ参照用のアプリケーションを作成する ⋯⋯【処理】タスクボードアプリ
｢マスタメンテナンス｣ テンプレートは、作成したいデータベースのテーブルに合わせて、登録・更新・削除を行い、表を用いた一覧表示ができます。IM-Repositoryのデータ定義は、このテンプレート上で新しくエンティティを作成します。また、IM-LogicDesignerを使用した処理側の実装は、このテンプレートから作成したデータを利用します。
※以降は、説明の簡便性のため、【メイン】アプリ、【画面】アプリ、【処理】アプリという表現を使用します。
Accel Studioでデータ定義を行う
Accel Studioの「マスタメンテナンス」テンプレートを使用して、データ定義を行う流れを確認できます。企画編で検討した内容をもとに、エンティティ・辞書項目・列挙型について、それぞれ設定を進めていきましょう。
｢自己紹介｣ テンプレートの処理を使っても良さそうなのに、なぜ「マスタメンテナンス」テンプレートの処理を使用するのでしょうか？
｢自己紹介｣ テンプレートでは、あらかじめテーブルが設定されているため、テーブルの自由度がなく、新しく作成するアプリに不要な情報も含まれています。今回作成したIM-Repositoryのテーブルに置き換えることで、余計な修正を減らし、効率的に作業を進められるというメリットがあります。
作業環境に必要なリソースを取り込む
作業環境となる【メイン】アプリの詳細画面を開き、「＋リソースの追加」から既存のリソースを取り込みます。佐藤さんは、【画面】アプリと【処理】アプリから、それぞれ必要と思われるリソースを取り込みました。
(1) 画面を取り込む
｢画面｣ から【画面】アプリの該当する画面コンテンツを追加します。既存の画面コンテンツは、「業務テンプレートから作成」フォルダから選択します。
(2) 画面URLを取り込む
｢公開URL｣ から【画面】アプリの該当する画面URLを追加します。既存の画面URLは、「業務テンプレートから作成」フォルダから選択します。
(3) ロジックを取り込む
｢ロジック｣ から【処理】アプリの該当する処理をすべて追加します。既存のフロー定義は、検索窓に「【処理】タスクボードアプリ」と入力すると絞り込むことができます。
(4) APIのURLを取り込む
｢公開URL｣ から【処理】アプリの該当するAPIのURLをすべて追加します。既存のAPIのURLは、検索窓に「タスクボードアプリ」と入力すると絞り込むことができます。
(5) データ定義を取り込む
｢データ定義｣ から【処理】アプリのデータ定義を追加します。既存のデータ定義は、「業務テンプレートから作成」フォルダから選択します。
Accel Studioでリソースを追加する
Accel Studioで既存のリソースを追加する方法について確認できます。アプリケーションに紐づいているリソース情報やリソース同士の関係性については、リソース関連図で確認できます。
これで、作業環境の準備ができたぞ。アプリの実行処理をベースに修正を進めてみよう。
ローコード資材をカスタマイズする
取り込んだ画面やロジックをもとに、タスクボードアプリの仕様に合わせてカスタマイズを進めていきます。ユースケースでは、佐藤さんが行ったカスタマイズについて、ポイントだけをピックアップして紹介します（詳細については、ローコード資材をダウンロードして確認できるように準備を進めています。近日公開予定です）。
ローコード資材のダウンロード（近日公開!!）
完成したタスクボードアプリのローコード資材をダウンロードできます。ダウンロードには、会員登録が必要です。
ロジックを修正する：IM-LogicDesigner
取り込んだロジックをもとに、必要な情報が自動で設定されるように修正します。
(1) 登録処理を修正する
IDを自動で設定できるようにするため、「変数操作」タスクを追加します。マッピング設定では、マッピング関数のidentifierを利用します。「登録」タスクでは、登録者や登録日を自動で更新できるようにするため、マッピング設定に暗黙的な変数を追加します。
(2) 編集処理を修正する
更新者や更新日を自動で更新できるようにするため、「更新」タスクのマッピング設定に暗黙的な変数を追加します。
マッピング関数を利用してIDを生成する
identifier関数では、API Identifierを利用して一意となるIDを発行します。戻り値はstring型となり、発行されたIDが返却されます。
暗黙的な変数による自動更新設定
マッピング設定に暗黙的な変数を利用すると、アカウントコンテキストのユーザアカウントに関する情報やセッション情報が入力値として設定できます。
ロジックフローにタスクを追加したときは、前後のタスクのマッピング設定も念のために確認したほうが良いですよね？
そうですね。あとは、今回のように一部のタスクのマッピング設定に変更を加えた場合、フロー全体のマッピング設定についてもデータのやり取りを追っていきながら一つずつ確認していくと良いですよ。
画面の変数を修正する：IM-BloomMaker
取り込んだ画面をもとに、変数の設定項目（変数・定数・入力・多言語）を修正します。
不要な変数を削除する
使用しない変数や不要な多言語については削除しますが、使用箇所だけでは判断が難しいものについては残しておきます。残す変数については、変数エディタでコメントを入力しましょう。コメントを入力すると、変数名に吹き出しが表示されるため、後から判断しやすくなります。
(1) 変数を削除する
$variable配下の変数を確認し、IM-Repositoryのデータ定義に置き換えられるものは削除します。entity配下のユーザ情報の表示に関する変数やendPoint配下の自己紹介の処理に利用する変数などを削除しましょう。
(2) 多言語を削除する
画面のラベルやメッセージを確認し、不要なものを削除します。アクションの使用箇所も併せて確認しましょう。
変数の使用箇所を確認する
（右ペインを分割）アイコンをクリックすると、左側に使用箇所が表示されます。調べたい変数をクリックすると、使用箇所が表示され、デザイナ画面でも確認できます。特に、登録・編集・詳細画面では、3つの画面を1つの画面コンテンツとしてまとめているため、どの画面に影響する変数なのかを確認しながら進めるのに便利です。
新しく変数を追加する
作成するアプリケーションに必要な変数や定数は、IM-Repositoryのデータ定義をインポートすることで、簡単に追加できます。一つずつ変数を作成する手間が省かれるだけではなく、データベースやテーブルと連携ができ、設定次第ではバリデーションチェックも可能です。
(1) 変数にエンティティをインポートする
登録・編集・詳細画面では、$variable配下の変数にエンティティをインポートします。
(2) 配列変数に辞書項目をインポートする
一覧画面では、$variable配下の配列変数に辞書項目をインポートします。
(3) 定数に列挙型をインポートする
両方の画面で、それぞれ$constant配下に列挙値をインポートします。
データ定義をインポートする
画面の変数にデータ定義をインポートすることにより、双方向バインディングという変数の変更を自動反映できる機能が利用できます。変数をインポートする位置によっては、ネストが深くなり、変数パスの複雑化や依存関係の管理が複雑になります。
既存の変数を修正する
作成するアプリケーションに合わせて、既存の変数や入力を修正します。今回はIDを中心に変更していきます。
(1) 変数を追加・変更する
両方の画面で、データの受け渡しをする変数の追加・変更を行います。
(2) 入力を追加・変更する
登録・編集・詳細画面で、入力値をユーザコードからIDに変更し、登録者を追加します。
(3) 多言語を追加・変更する
両方の画面で、既存のラベルやメッセージを変更し、新たに必要なラベルを追加します。変更した場合は、標準以外の言語もあわせて変更または削除します。特に、日本語を修正しないと、変更前のラベルやメッセージが表示されてしまうため、注意してください。
複数の画面を一つの画面コンテンツとして作成している場合、プレビュー表示を切り替える方法について教えてください。
元となる「自己紹介」テンプレートでは、入力値の$input/__mode__を見ると、画面を切り替えるための設定が入っています。ドキュメントを参考に設定値を変えると、画面も切り替えられますよ。ただし、表示したい画面によっては、変数やアクションを一部変更する必要があります。
画面種別の判別処理
Accel Studioのテンプレートで登録・編集・詳細画面が含まれる場合、Java前処理プログラムを利用して画面種別を判別するように設定されています。入力値の$input/__mode__に対して、画面ごとに設定された値を確認しましょう。
画面デザインを修正する：IM-BloomMaker
変数を修正した後、変更したいエリアの画面デザインを修正します。エレメントを削除・置換する場合は、該当の変数値が削除されているかを併せて確認します。また、エレメントを追加する場合は、該当の変数値を正しく設定するようにしましょう。
(1) 入力エリアを修正する
登録・編集・詳細画面の「Refer Area」では、ユーザ名の表示からタスクのテキスト入力に差し替えます。また、「Input Area」では、不要なエレメントを削除し、タスクのステータスや詳細などに修正します。
(2) 検索エリアを修正する
一覧画面の「Search Condition」では、IM-Repositoryのデータ定義の検索条件を確認しながら、不要なエレメントを削除し、検索項目であるタイトルやステータスに修正します。
(3) 一覧表示エリアを修正する
一覧画面の「Card List」では、タスクボードで表示する項目に修正します。
IM-BloomMakerの編集方法
CookBookでは、IM-BloomMakerで行うさまざまな編集方法について紹介しています。取り入れたいエレメントや機能を検索し、作成したいアプリケーションに追加してみましょう。
一覧画面では、変数値は[0]のままだと、タスクが一覧で並ぶように表示できませんよね？
そうですね。各行の要素番号を自動で補完できるように、配列の添え字である[$index]に書き換えてみましょう。$indexを使用すれば、配列の各要素の値を取得できます。
アクションを修正する：IM-BloomMaker
作成するアプリケーションの挙動（画面遷移やクリック操作など）に合わせて、アクションを修正します。アクションを削除する場合は、まず一時的に無効化（トグルを左側にする）して、不要と判断できた段階で削除する方法も有効です。
今回のように【画面】アプリから流用できるアクションについては、アクション内で指定されている変数を一つずつ確認し、必要に応じて修正します。また、ロジックについては、【処理】アプリのものに適宜差し替えていくようにします。
(1) 初期表示のアクションを修正する
登録・編集・詳細画面の「Initialize」アクションでは、ユーザコードに関する変数や参照に関する処理の差し替えを行い、それ以外の不要なアクションは無効にします。また、一覧画面の「Initialize」アクションでは、検索条件やユーザコードを確認する処理などの不要なアクションを無効にし、テーブルデータを表示するアクションのみ残します。
(2) 登録・更新・削除のアクションを修正する
【画面】アプリでは、登録・更新・削除に関するアクションが「on Click 〇〇 Button」というアクション名でそれぞれ設定されています。各アクションの設定を開き、リクエストパラメータに関する変数の確認や、【処理】アプリのロジックへの切り替えを行います。
(3) 検索のアクションを修正する
一覧画面の「on Clicked Search」アクションでは、プルダウンに関する変数の差し替えやテーブルデータを表示するアクションの確認を行い、それ以外の不要なアクションは無効にします。取得に関するアクションの場合、レスポンスデータの変数の差し替えや取得後の後続処理に注意します。
アクションの使用箇所を確認する
（右ペインを分割）アイコンをクリックすると、左側に使用箇所が表示されます。調べたいアクションをクリックすると、使用箇所が表示され、デザイナ画面でも確認できます。
アクションの種類を確認する
アクションの種類は、変数やメッセージ、URLなど幅広い用途に対応できるアクションやREST APIを実行できるアクションなど、さまざまな種類を用意しています。
アクションは、基本的に、クリックした後で何を実行するかを考えながら設定していけば良さそうですが、項目が多かったり、並び順を考えたり、慣れるまで大変そうですね。
そうですね。アクションを設定するときにまず意識してほしいのは、IM-BloomMakerは変数によって、画面を制御したり、ロジックとのやり取りを行うということです。たとえば、エラーメッセージを表示させる際に画面を変更する処理があるか、ロジックフローやAPIとデータの受け渡しがあるかを考えると良いですね。
確かに変数を見ながら、このアクションはどういう設定をしているのかというのが頭の中で整理しやすくなりますね。あと、アクションエディタ画面で各アクションアイテムに説明を入れていくと、後から振り返ったときに一つずつ変数をクリックしなくても良さそうです。
説明を入れておくと、他の人がレビューしたり、作業を別の人に引き継ぐときにも便利なので、これからチームで開発するときにも活用していきましょう。その他にも、アクション設定では入力規則といったバリデーションや他の画面への遷移も見ていくと良いですよ。
プレビューを確認する：IM-BloomMaker
必要な設定が一通り終わったら、プレビューで登録・編集・詳細画面と一覧画面における挙動と表示を確認します。チェック項目をある程度決めておくと、この後のテスト工程でも役に立ちます。
エラーの原因を調査する
挙動がおかしい場合、そのエラーの原因が処理側のマッピング設定にあるのか、画面側のアクションや変数にあるのかを判断します。デバッグを実行し、該当箇所を見つけ、修正と確認を繰り返します。
処理側に原因がある場合：IM-LogicDesigner
たとえば、「登録」ボタンをクリックしても登録ができないなど、画面側から処理側にデータの受け渡しが正常に行われていない場合は、IM-LogicDesignerのマッピング設定を確認します。確認したいロジックフローで、デバッグを実行することも可能です。また、必要に応じて、フロー内に「ログ出力」タスクを追加し、原因を特定・調査する方法も有効です。
IM-LogicDesignerのデバッグ方法
マッピング設定でデバッグを実行し、入力値に対する出力値が期待通りの値になるかを確認します。その他にも、ロジックフロー自体のデバッグやログを用いたデバッグの方法についても押さえておきましょう。
画面側に原因がある場合：IM-BloomMaker
たとえば、一覧画面から登録画面への遷移がおかしいなど、画面側の処理が正常に行われていない場合は、IM-BloomMakerのアクション設定を確認します。IM-BloomMakerのデバッグツールを利用すれば、確認したい画面でデバッグを実行することも可能です。必要に応じて、ブレイクポイントを設定して確認する方法も有効です。
IM-BloomMakerのデバッグ方法
デバッグツールを使用すると、プレビュー画面で変数とアクションのデバッグを実行できます。デバッグツールの「アクション」エリアでは、一時的に無効化にしたアクションも表示されるため、ブレイクポイントを設定する場合は注意してください。
レイアウトを調整する：IM-BloomMaker
レイアウトを調整したい場合、プレビューを確認しながら余白などを調整します。その他にも、必要に応じて、サイズや色なども変更します。
レイアウトを調整する
「プロパティ」タブにある設定項目から、レイアウトの調整に必要な値を入力します。外余白と内余白の違いについても確認しておきましょう。
作成したアプリケーションのレビューを依頼する
アプリケーションが完成に近付いたところで、第三者にレビューを依頼します。今回、佐藤さんはリーダーの高橋さんにレビューを依頼することにしました。レビュー依頼時には、以下のような情報もあわせて伝えるようにしました。
- Accel Studioのアプリケーション名
- プレビューで確認したチェック項目
- アプリケーションの概要をまとめたメモ
タスクボードアプリの作成が一通り終了しました。自分でも見直してみて、大きな問題はなさそうなので、レビューをお願いします。
アプリ作成、お疲れさまでした。実際にツールを使って作成してみて、どのあたりが大変だと感じましたか？
画面や処理の変更はスムーズに進めることができましたが、最後エラーを一つずつ潰していくのが大変でした。ですが、ローコード開発ツールをどう使うと良いかが見えてきた気がします。
そうですね。エラーもいろいろなパターンがあるから、大変ですよね。私もローコード開発を始めたばかりのときは、ドキュメントを参考にしながら対処していったことを思い出します。早速作っていただいたタスクボードアプリを、テストも兼ねてレビューしてみますね。
次のステップへ：成果編
ここまでの手順で、タスクボードアプリの開発が終了しました。実際の開発では、紹介した手順を何度も繰り返しながら進めることが一般的です。ここでは、詳細な手順を割愛していますが、佐藤さんと同じようにe-learningやチュートリアルガイドで学んだ内容を活かして、試行錯誤しながら実践することで、ツールへの理解がさらに深まります。佐藤さんと同じようにアプリケーションを作成しながら、ダウンロードしたローコード資材を用いて答え合わせするという方法もおすすめしています。
次の成果編では、リーダーの高橋さんからの指摘をもとにアプリケーションを修正し、完成に向けて仕上げていきます。
