4.7 画面と処理のデバッグ
画面と処理の作成が完了したら、デバッグを実行して動作を確認します。まずはロジックフロー単体で動作を確認し、その後、画面から処理を呼び出して一連の動作を確認します。
ロジックフローのデバッグを実行する
作成したロジックフローの動作や値の流れを検証するために、デバッグを実行します。ロジックフローのデバッグでは、検索フォームに入力した値を設定し、実行時に渡す入力値や出力値、および各エレメントが返す値について確認できます。
Step 1. デバッグ画面を表示する
操作手順
- ［ロジック］タブをクリックします。
- 「資産一覧取得処理（試作品）」をクリックします。
- ［デバッグ］をクリックします。
Step 2. デバッグに使用する値を設定する
操作手順
- ［ステップ実行］をクリックします。
- 入力値の欄をダブルクリックします。
- 下記の値を入力し、［決定］をクリックします。
- tmpAssetName：プリンタ
- ［実行］をクリックします。
└ 「確認」ダイアログで［決定］をクリック
Step 3. ステップごとにデバッグを実行する
操作手順
ここでは、検索条件として資産名が入力された状態でデバッグを実行し、一覧取得処理が正常に完了することを確認します。各エレメントをステップごとに実行しながら、変数の値や実行結果を確認してください。
▽ 「開始」制御要素
- 「開始」時点の入力値を確認します。
- コンソールペイン：
- 設定した入力値が表示
- 実行開始のメッセージが表示
- 変数情報ペイン：
- 「入力」配下に、設定した入力値が表示
- ［ステップ実行］をクリックします。
▽ 「エンティティデータ件数の取得」タスク
- 「エンティティデータ件数の取得」では、検索結果の件数を確認します。
- コンソールペイン：
- タスク実行のメッセージが表示
- 変数情報ペイン：
- 「im_repositorySearchEntityCount1」配下の
countが2 2は、「プリンタ」と検索して該当したデータの件数を示す
- ［ステップ実行］をクリックします。
▽ 「エンティティデータの検索」タスク
- 「エンティティデータの検索」では、「プリンタ」と検索して該当したデータの内容を確認します。
- コンソールペイン：
- タスク実行のメッセージが表示
- 変数情報ペイン：
- 「im_repositorySearchEntityData1」配下に該当データが2件表示
- ［
］または［ 
］をクリックしてデータの中身を確認
- ［ステップ実行］をクリックします。
▽ 「終了」制御要素
- 「終了」では、フローが正常に終了するかを確認します。
- コンソールペイン：
- タスク終了のメッセージが表示
- フローの実行結果を表示
- 変数情報ペイン：
- 「出力」配下に該当データが2件表示
- ［ ］または［ ］をクリックしてデータの中身を確認
ロジックフローのデバッグでは、正常に処理が実行されることの確認に加え、例外処理やエラー発生時の挙動、条件分岐の評価結果を確認することが大切です。デバッグの確認ポイントについて、詳細は「ローコード操作マニュアル - ロジックのデバッグ操作（ケース別）」を参照してください。
画面コンテンツのデバッグを実行する
画面から一覧取得処理を呼び出し、画面と処理の連携や値の受け渡しを確認するためにデバッグを実行します。画面コンテンツのデバッグでは、画面変数の値やアクションの実行内容を確認できます。
IM-BloomMakerでは、デバッグツールをWebブラウザ（Chrome）にインストールすることで、Chromeの開発者モードを使用して画面コンテンツをデバッグできます。また、デバッグツールを利用するには、「IM-BloomMakerブラウザ拡張機能」の認可設定が必要です。詳細は「ローコード操作マニュアル - 画面のプレビューとデバッグ > 画面コンテンツのデバッグを実行する」を参照してください。
Step 1. デバッグ画面を表示する
操作手順
- ［画面］タブをクリックします。
- 「資産管理画面 -TOP-（試作品）」をクリックします。
- ［
］をクリックして、プレビューを表示します。
- Chromeのデベロッパツールを表示します。
└ ブラウザの［
］をクリック
└［その他のツール］→［デベロッパーツール］の順にクリック
- IM-BloomMakerのデバッグツールを表示します。
└［ 〉〉 ］→［BloomMaker］の順にクリック
Step 2. 入力値の引き渡しを確認する
操作手順
検索フォームやソートアイコンに関する値がstate配下に格納されていること、およびその値がendPoint.register.requestParameter配下に引き渡されていることを確認します。
検索条件の値を確認する
検索条件は、資産名のtmpAssetNameに設定しているため、state配下とendPoint配下にあるsearchConditionの値をそれぞれ確認します。
- 検索フォームに「プリンタ」と入力します。
└ 変数state.condition.searchCondition配下の値に入力内容が反映されます。
- 検索ボタンをクリックします。
state配下の値が、APIへ送信するendPoint配下の値として引き渡されていることを確認します。
画面から処理への入力値の引き渡しについては、「4.2 画面で利用する値の設定 > 変数とAPI連携の仕組み」を参照してください。stateとendPoint.requestParameterの関係を理解すると、画面と処理のデータの流れを把握しやすくなります。
ソート条件の値を確認する
ソート条件は、ソート対象の項目をkeyに、並び順をorderに設定しています。state配下とendPoint配下にあるsortConditionの値をそれぞれ確認します。
- リロードボタンをクリックします。
└ 検索フォームがリセットされ、すべてのデータが一覧に昇順で表示されます。表示されない場合は、リロードボタンを再度クリックしてください。 - ［▼］をクリックします。
└ すべてのデータが一覧に降順で表示されます。表示されない場合は、［▼］を再度クリックしてください。 state配下の値が、APIへ送信するendPoint配下の値として引き渡されていることを確認します。
└ ソート対象の項目keyにtmpAssetNumber、並び順orderにdescと表示されます。
- ［▲］をクリックします。
└ すべてのデータが一覧に昇順で表示されます。表示されない場合は、［▲］を再度クリックしてください。 state配下の値が、APIへ送信するendPoint配下の値として引き渡されていることを確認します。
└ 並び順orderにascと表示されます。
- 「4.6 アクションの設定」では、昇順・降順ソートアクションとして、ソート対象の項目
keyと並び順orderにそれぞれ値を設定しています。 - 並び順の値である
ascとdescは、ロジックフローの「エンティティデータの検索」タスクで定義されています。詳細は、「IM-LogicDesigner仕様書 - 5.2.1.18.2. エンティティデータの検索」を参照してください。
Step 3. ロジックフローの呼び出しを確認する
操作手順
画面からロジックフローを実行した後、デバッグログを確認します。デバッグログでは、ロジックフローが正しく呼び出されていることや、画面から渡された値、各タスクの実行結果を確認できます。
デバッグログを設定する
- ログ一覧メニューを表示します。
└［ログ］→［ロジックフローデバッグログ一覧］をクリック - ［ログ出力対象設定］をクリックします。
- 「資産一覧取得処理（試作品）」のログ出力設定をオンに切り替えます。
└ トグルが緑色になれば、ログ出力が有効な状態です。 - ［
］をクリックし、「デバッグログ一覧」画面を表示します。
プレビューで値を入力する
- ［ ］をクリックして、プレビューを表示します。
- 検索フォームに「ノートパソコン」と入力し、検索ボタンをクリックします。
デバッグログを確認する
- ログ一覧メニューを表示します。
└［ログ］→［ロジックフローデバッグログ一覧］をクリック
- 該当フローが実行されていることを確認します。
└ フローの途中でエラーが発生している場合は、該当タスクやデータマッピングを修正します。
処理中に生成される値を確認する
- 「エンティティデータの検索」タスクの出力値を確認します。
└ 「タスク終了」の「im_repositorySearchEntityData1」にある［
］をクリック - 「ログ詳細」ダイアログで出力値を確認します。
└ 「ノートパソコン」に該当するデータが1件表示されます。
デバッグログの利用方法について、詳細は「ローコード操作マニュアル - デバッグログの確認」を参照してください。
こんなときは
操作中に不明な点や問題が発生した場合は、以下の項目から該当する内容を選択してください。
