この記事では、IM-BloomMakerのデバッグ方法について紹介します。
IM-BloomMakerでは、作成した画面の変数やアクションの動作を、Webブラウザの開発者ツールから確認できます。画面が期待どおりに動作しない場合は、デバッグツールを使って変数の値やアクションの実行状況を確認することで、原因を特定しやすくなります。
ここでは、IM-BloomMakerのデバッグツールの準備から基本的な使い方まで紹介します。デバッグツールを活用して、効率的に画面の動作を確認してみましょう。
デバッグツールの準備
IM-BloomMakerでは、Google Chromeの拡張機能としてデバッグツールを提供しています。
Google Chromeにデバッグツールをインストールすると、Chromeの開発者ツールにIM-BloomMaker専用のタブが追加され、作成した画面の変数やアクションを確認できるようになります。
デバッグツールのインストール
Google Chromeのウェブストアから、IM-BloomMakerのデバッグツールをインストールします。デバッグツールのインストール後、Google Chromeの開発者ツールからIM-BloomMakerのデバッグツールを利用できるようになります。
ローコード操作マニュアル - 画面のプレビューとデバッグ > デバッグツールをインストールする
IM-BloomMakerのデバッグ方法
IM-BloomMakerで作成した画面をGoogle Chromeで開き、開発者ツールからIM-BloomMakerのデバッグツールを選択します。
基本的な操作
デバッグツールでは、画面に設定した変数やアクションについて、以下のような情報を確認できます。
変数を確認する
画面に設定した変数を一覧で確認できます。また、デバッグ時には変数の値や配列の要素数を変更できます。
変数の値を確認することで、アクションの実行前後で値が期待どおりに変化しているかを確認できます。
アクションを確認する
画面に設定したアクションやアクションアイテムを一覧で確認できます。また、アクションアイテムにブレイクポイントを設定し、処理を一時停止して実行状況を確認できます。
アクションが期待どおりに実行されない場合は、ブレイクポイントを利用して、どのアクションアイテムまで処理が実行されているかを確認できます。
デバッグを実行する
デバッグツールを起動し、変数やアクションを確認するためにデバッグを実行します。基本的な使い方についてローコード操作マニュアルで確認できます。
ローコード操作マニュアル - 画面のプレビューとデバッグ > デバッグを実行する
基本操作の確認
デバッグツールの基本的な使い方を確認したら、実際に画面を作成してデバッグを試してみましょう。
デバッグツールの使い方（Web版）
IM-BloomMakerで簡単な計算を行う画面を作成し、デバッグツールを使って変数やアクションの動作を確認します。
CookBook - IM-BloomMaker Chrome 拡張機能のデバッグツールの使い方
デバッグツールの使い方（YouTube版）
Web版のCookBookと同じ内容を動画で確認できます。実際の操作画面を見ながら、デバッグツールの使い方を確認したい場合におすすめです。
YouTube -【intra-mart】IM-BloomMakerのデバッグツールの使い方【ローコード開発】
デバッグの確認ポイント
画面コンテンツにおけるデバッグのポイントを確認します。
- データの正しいセット確認：フォーム入力後や初期表示時に、正しい値が変数にセットされているか
- データバインドの動作確認：画面上で値を変更した際に、対応する変数の値が更新されるか
- 条件分岐や表示制御のテスト：表示・非表示や値の切り替えなど、画面コンテンツの条件制御が意図通りに動作しているか
- エラー発生時の原因調査：データが完全に表示されない、画面やコンソールにエラーが出ているなど、想定外の挙動が発生した場合
画面のデバッグ操作（ケース別）
画面のデバッグにおける確認ポイントやケース別の操作例について確認できます。
ローコード操作マニュアル - 画面のデバッグ操作（ケース別）
チュートリアル
実際にアプリケーションを作成しながら、デバッグの実行方法を学びましょう。チュートリアルでは、登録機能と一覧取得機能を備えたシンプルな資産管理アプリケーションを作成します。
登録画面
画面から登録処理を呼び出し、画面と処理の連携や値の受け渡しを確認するためにデバッグを実行します。
登録画面のデバッグ
登録画面や登録処理の作成が完了した後、デバッグを実行して動作を確認します。まずはロジックフロー単体で動作を確認し、その後、画面から処理を呼び出して一連の動作を確認します。
ローコードチュートリアル［入門編］- 3.7 画面と処理のデバッグ
管理画面
画面から一覧取得処理を呼び出し、画面と処理の連携や値の受け渡しを確認するためにデバッグを実行します。
管理画面のデバッグ
管理画面や一覧取得処理の作成が完了した後、同じようにデバッグを実行して動作を確認します。まずはロジックフロー単体で動作を確認し、その後、画面から処理を呼び出して一連の動作を確認します。
ローコードチュートリアル［入門編］- 4.7 画面と処理のデバッグ
まとめ
IM-BloomMakerでは、デバッグツールを使って、画面に設定した変数の値やアクションの実行状況を確認できます。画面が期待どおりに動作しない場合は、変数の値を確認したり、アクションにブレイクポイントを設定したりすることで、不具合の原因を特定しやすくなります。まずはデバッグツールの基本的な操作を確認し、実際に作成した画面でデバッグを試してみましょう。
intra-martでは、IM-BloomMakerをもっと知っていただくために、マニュアルやコンテンツなどを豊富にご用意しています。IM-BloomMakerの機能を最大限に発揮させるためにも、ぜひご活用ください。