メインコンテンツまでスキップ

画面のプレビューとデバッグ

ここでは、画面コンテンツのプレビューとデバッグ方法について説明します。作成した画面コンテンツをプレビュー画面で確認し、動作や値の流れを検証するためにデバッグを実行します。

プレビュー画面を開く​

  1. ［ ］をクリックします。
    └ プレビュー画面が別タブまたは別ウィンドウに表示されます。
参考

コンテナヘッダに [main] と表示されているページがプレビューの対象となります。

画面上のエレメントを複数のコンテナで分け、ヘッダやメインコンテンツなどを独立したブロックとして管理する場合、プレビューの対象はコンテナヘッダに [main] と表示されたページです。[main] の設定は、「コンテナ設定」プロパティの「メインページ」で変更できます。

コラム

プレビュー画面を表示したままデザインを変更すると、その内容がプレビューにも反映されます。ただし以下の点に注意してください。

  • 別ウィンドウでプレビューしている場合：
    デザイナ画面での変更は即時には反映されません。反映させるには、プレビュー画面をアクティブにしてください。
  • 変数の代入値を変更した場合：
    変更はプレビュー画面に反映されません。一度プレビューを終了し、再度開き直す必要があります。

画面解像度の違いやスマートフォン表示で確認したいときは、Chromeの開発者モードを利用すると便利です。起動方法は、下記「デバッグツールを起動する」を参照してください。

画面コンテンツのデバッグを実行する​

IM-BloomMakerでは、デバッグツールをお使いのWebブラウザ（Chrome）にインストールすることで、Chromeの開発者モードを使ってデバッグを行います。

デバッグツールをインストールする​

Google Chromeのウェブストアから、IM-BloomMakerの拡張機能をインストールします。

  1. 「chrome web store」にアクセスします。
    └ IM-BloomMakerのDevToolsのページが表示されます。
  2. ［Chromeに追加］をクリックします。
    └ ダイアログが表示されたら［拡張機能を追加］をクリックします。

デバッグツールを起動する​

デバッグを行いたい画面を表示した状態で、Chromeの開発者モードを起動します。

  1. ブラウザの［］をクリックします。
  2. ［その他のツール］をクリックします。
  3. ［デベロッパーツール］をクリックします。
その他の操作

Chromeの開発者モードは、ショートカットキーを使うと、素早く表示できます。

  • Windows：F12／Ctrl+Shift+I
  • Mac：Fn+F12／Command+Option+I

デバッグを実行する​

Chromeの開発者モード画面で、IM-BloomMakerの画面変数とアクションのデバッグを行います。

注意

デバッグツールを起動しても内容が表示されない場合は、「IM-BloomMakerブラウザ拡張機能」の認可設定を行う必要があります。認可設定を確認し、不足している場合はテナント管理者に権限の付与を依頼してください。

画面変数を確認する​

「変数」タブでは、画面で使用されている変数・定数・入力変数・多言語変数・環境情報変数を一覧で確認できます。変数の値を手動で書き換えることで、画面の状態遷移や異常をすぐに再現できます。これにより、実データを使用せずに、アクションの動作検証を行うことができます。

  1. ［BloomMaker］タブをクリックします。
    └ コンソールに変数の一覧が表示されます。
  2. ［変数］タブをクリックします。
  3. 確認したい画面変数のタブをクリックします。
画面変数の値を変更する​

コンソールに表示された変数は、値の代入や配列の要素数といった変更が可能です。ただし、変数の型は変更できません。

  1. ［ ］をクリックします。
    └ 「変数エディタ」ダイアログが表示されます。
  2. 必要に応じて、値や要素数などを編集します。
  3. ［決定］をクリックします。

アクションを確認する​

「アクション」タブでは、画面内のアクションやアクションアイテムを一覧で確認できます。さらに、ブレークポイントを設定することで、アクションの実行過程を段階的に追いながら確認できます。

  1. ［アクション］タブをクリックします。
  2. ［アクションが呼ばれたとき］または［エラーが発生したとき］のタブをクリックします。
アクションアイテムの詳細を確認する​
  1. ［ ］をクリックします。
    └ 「詳細」ダイアログが表示されます。
  2. アクションアイテムの設定内容を確認します。
  3. ［閉じる］をクリックします。
ブレークポイントを設定する​

検証したいアクションアイテムにブレークポイントを設定すると、処理を途中で停止でき、その時点での変数値や画面の状態、実行中の処理内容を詳細に確認できます。

  1. ［ ］をクリックします。
    └ アイコンがブレークポイントを示す に切り替わります。
  2. 画面の該当箇所を操作します。
    └ ブレークポイントを設定したアクションアイテムの直前で処理が一時停止します。
    └ 画面の背景が半透明の黒に変わり、「Please wait..」と表示されます。
  3. ［次へ］をクリックします。
    └ 一時停止していたアクションアイテムの処理が再開されます。
その他の操作
  • ブレークポイントは複数のアクションアイテムに設定できます。
  • アクションアイテムの実行を完全に中止したい場合は、［実行中止］をクリックしてください。
参考

デバッグツールは、実際の例を試しながら操作してみることをおすすめします。詳細は「CookBook - IM-BloomMaker Chrome 拡張機能のデバッグツールの使い方」を参照してください。

次のステップへ：新規コンテンツ定義の保存

画面のデバッグが完了したら、次は画面コンテンツを保存しましょう。「新規コンテンツ定義の保存」では、これまで作成してきた画面のページタイトルやイベントなどを設定し、画面コンテンツを保存します。この操作によって、他のアプリや処理からも参照可能になります。