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

画面コンテンツの修正

ここでは、アプリケーションのリソースに含まれる画面コンテンツの修正について説明します。

画面コンテンツのバージョン変更が及ぼす影響​

画面のルーティング定義（画面URL）は、特定の画面コンテンツ定義とそのバージョンに紐づいています（リソース関連図で確認できます）。

画面コンテンツのバージョンを更新したり、同じバージョンを上書き保存したりすると、該当するルーティング定義（画面URL）だけでなく、アプリケーション全体の動作にも直接影響する可能性があります。特に、運用中に現在稼働中のバージョンを誤って上書きしてしまうと、重大な不具合や業務影響を招く恐れがあります。そのため、画面コンテンツの修正時には、バージョン管理を意識することが非常に重要です。

同じバージョンを上書き保存した場合：
新しいバージョンを作成せずに上書きすると、変更内容が即座にルーティング定義（画面URL）へ反映されます。その結果、想定していない表示や動作が発生するなど、意図しない操作やエラーにつながるリスクがあります。

新バージョンを作成した場合：
ルーティング定義（画面URL）で特定のバージョン番号を指定していると、新しくバージョンを作成しても自動で切り替わることはありません。利用するバージョンを変更したい場合は、ルーティング側で明示的にバージョンを切り替える必要があります。

画面コンテンツを修正する前に、以下の内容を確認してください。

  • ルーティング（画面URL）が現在どの画面コンテンツのバージョンを参照しているか
  • 修正によって、どの画面や処理に影響を与えるか
  • 修正後にルーティング（画面URL）側でバージョン切り替えが必要かどうか

事前にこれらを整理しておくことで、運用ミスや意図しない動作変更を防ぎ、安全にバージョンを管理できます。

参考

リソース関連図では、アプリケーション内で利用している各種リソースの関係性を視覚的に確認できるため、リソースの変更による影響範囲を把握できます。詳細は「アプリケーションの動作確認 > リソースの関連図を確認する」を参照してください。

基本操作​

画面コンテンツの修正に関する基本的な操作と流れについて説明します。

参考

ここで紹介するケースは、Accel Studioの「マスタメンテナンス」テンプレートをもとに作成したToDoアプリケーションを例に説明しています。実際の画面や設定などを確認したい場合は、「ローコード開発チュートリアルガイド - 4.2. シンプルな登録、更新、削除、一覧表示を行うアプリケーションを作成する」を参照し、アプリケーションを生成してください。

ルーティング定義を確認する​

修正したい画面コンテンツに紐づいているルーティング定義（画面URL）のバージョンを確認します。

  1. ［公開URL］タブをクリックします。
  2. 「画面URL」にチェックを入れます。
    └ 画面のルーティング定義のみが表示されます。
  3. 関連するルーティング定義をクリックします。
    └ 「IM-BloomMakerルーティング定義編集」画面が表示されます。
  4. 対象となる「コンテンツ」を確認します。
  1. 「利用するバージョンを指定する」を選択します。
    └ 現状ルーティングに紐づいているバージョンを指定します。
    └ 必ず「最新バージョンを利用する」の選択を外してください。
  2. 「利用バージョン」を入力します。
  3. ［更新］をクリックします。
    └ 「確認」ダイアログで［決定］をクリックします。
注意

新しいバージョンを作成せずに上書きすると、変更内容が即座にルーティング定義（画面URL）へ反映されます。その結果、想定していない表示や動作が発生するなど、意図しない操作やエラーにつながるリスクがあります。画面を修正した後、問題ないことが確認できた上で、「最新バージョンを利用する」または「利用するバージョンを指定する」を選択してください。

コンテンツ定義をエクスポートする​

修正する前に、必要に応じてコンテンツ定義をエクスポートし、事前にバックアップを取得します。万一、不具合が発生した場合でも、バックアップから元の状態に復元できるようにしておきます。

  1. ［ ］をクリックします。
    └ 「サイトマップ」画面が表示されます。
  2. 「BloomMaker」にある［エクスポート］をクリックします。
    └ 「IM-BloomMakerエクスポート」画面が表示されます。
  3. 「エクスポートタイプ」で「選択」を選択します。
    └ 各定義情報（コンテンツ・テンプレート・エレメントセット・ルーティング定義）の一覧が表示されます。
  4. エクスポートしたいコンテンツにチェックを入れます。
  5. ［エクスポート実行］をクリックします。
    └ 「エクスポート確認」ダイアログで［決定］をクリックします。
  • 「im_bloommaker-data.zip」ファイルが、お使いのPCの「ダウンロード」フォルダに保存されます。
  • ZIPファイルを解凍すると、コンテンツ定義が記録されたJSONファイルを確認できます。
注意

「エクスポートタイプ」で「全て」を選択した状態でエクスポートを実行すると、各定義情報（コンテンツ・テンプレート・エレメントセット・ルーティング定義）がすべてエクスポートされるため、処理に時間がかかることがあります。

画面コンテンツを修正する​

該当するコンテンツ定義の編集画面を開き、必要な修正を行います。主に次のような項目を見直します。

  • レイアウト・表示制御の見直し：画面部品の追加・削除、配置やサイズの調整、表示・非表示の制御、ステータスに応じた表示切替など
  • 変数設定とデータ連携の更新：入力フォームやラベルなどの更新、変数やデータモデルとのバインド設定、入力チェックやバリデーションなど
  • アクション・イベントの見直し：ボタンや入力操作に紐づくアクション、画面遷移や処理実行のイベント設定など

  1. 編集したい画面コンテンツをクリックします。
    └ デザイナ画面が表示されます。
  2. 必要に応じて、画面デザインまたは画面変数を編集します。
    └ 詳細は、下記「画面コンテンツの修正例」を参照してください。
  3. ［▼］をクリックします。
    └ 保存メニューが表示されます。
  4. ［基本情報を変更して保存］をクリックします。
    └ 「基本情報を変更して保存」ダイアログが表示されます。
  1. 「新しいバージョンで保存」にチェックを入れます。
    └ チェックを入れないと、同じバージョンへ上書き保存されます。
  2. 必要に応じて「コメント」を入力します。
  3. ［保存］をクリックします。
    └ ダイアログで［OK］をクリックします。
    └ デザイナ画面に戻ります。
コラム

ここでは、次の状態で画面が保存されています。

  • バージョン3：編集した画面が新しいバージョンとして保存されています。
  • バージョン2：ルーティングと紐づき、アプリケーションで利用されています。

「IM-BloomMaker ルーティング定義編集」画面の「利用するバージョンを指定する」でバージョン2が指定されている場合、アプリケーションで利用されるバージョンは変更されません。

参考

バージョン管理の仕組みや差分比較の方法については、「画面コンテンツの編集」を参照してください。

画面コンテンツの修正例​

ここでは、画面コンテンツの修正例として、ケース別に説明します。

＜レイアウト・表示制御を見直したい場合＞​

画面部品の追加・削除、配置やサイズの調整、表示・非表示の制御、ステータスに応じた表示切替などを行います。

修正項目主な内容参照先
レイアウトの修正フレックスコンテナ・ボックス・グリッドなどのエレメントを、ドラッグ＆ドロップで追加・削除・配置変更します。「エレメントを配置する」
「エレメントを削除する」
各エレメントの幅・余白・配置（左寄せ・中央揃えなど）の固有プロパティを適切に設定します。「エレメントのデザインを調整する」
表示制御の修正再配置した部品や既存部品について、「共通」タブの「表示/非表示」プロパティを見直します。「エレメントを配置する」
画面変数（変数・定数・入力変数）や環境情報変数を利用し、エレメントの表示・非表示を制御します。「画面変数の設定 - 基本操作」
「環境情報変数の確認」
入力値やユーザ操作に応じて表示内容を変更する場合は、アクション設定を使用します。「IM-BloomMakerのアクション」
＜変数設定とデータ連携を更新したい場合＞​

入力フォームやラベルなどの更新、変数やデータモデルとのバインド設定、入力チェックやバリデーションの設定などを行います。

修正項目主な内容参照先
変数の修正既存の変数の型（数値・文字列・オブジェクトなど）や初期値を適切に設定し、必要に応じて修正します。「画面変数の編集」
入力値や他リソースとの連携で必要な変数がある場合は追加します。「画面変数を設定する」
不要になった変数は削除します。ただし、他の画面やロジックで参照されていないかを確認してください。「画面変数を削除する」
データ連携の修正・追加外部APIやIM-LogicDesigner連携によるデータ取得・登録・更新のアクション設定を修正します。「外部処理呼び出し」
画面読み込み時やボタンの押下時などのイベントに設定されているアクションで、変数の値やデータ連携処理を修正します。「IM-BloomMakerのアクション」
IM-Repository経由でデータをやり取りしている場合、画面上の変数とエンティティ項目間の紐づけを調整します。「データ定義の変更を反映する」
＜アクション・イベントを見直したい場合＞​

ボタンや入力操作に紐づくアクション、画面遷移や処理実行のイベント設定などを行います。

修正項目主な内容参照先
イベント設定の見直しイベントに設定されているアクションを確認し、追加・削除・順序変更などを行います。「イベントを設定する」
アクションの修正実行したい処理（例：メッセージ表示、変数操作、画面遷移、API呼び出しなど）の内容を調整します。「通常の処理を設定する」
「IM-BloomMakerのアクション」
「エラーが発生したとき」タブを確認し、失敗時のエラー表示やロールバック処理の追加・変更などを行います。「通常処理にエラー処理を追加する」

関連リソースへの影響を確認する​

画面コンテンツを修正した場合は、その変更がほかの画面や処理に影響していないかを確認します。特に、関連するデータモデルや変数、連携しているロジックなど、周辺リソースとの整合性をチェックすることが重要です。

関連リソースの確認例​

ここでは、関連リソースの確認例として、ケース別に説明します。

＜レイアウト・表示制御を見直した場合＞​

画面部品の追加・削除、配置やサイズの調整、表示・非表示の制御、ステータスに応じた表示切替などを行った場合、データモデルやロジックフローへ影響が及ぶ可能性があります。変更内容に応じて、次の項目を確認してください。

確認項目確認内容参照先
画面部品に紐づく変数やデータモデルIM-Repositoryの辞書項目やエンティティと正しく連携しているか、削除・追加した部品による不整合が発生していないかを確認します。必要に応じて、辞書項目やエンティティを修正してください。「辞書項目やエンティティを修正する」
表示制御やステータスによる表示切替の条件式ステータスによる表示切替や条件付き表示が、ロジックフロー（IM-LogicDesigner）や他処理の条件と矛盾していないかを確認します。必要に応じて、ロジックフローを修正してください。「ロジックフローを修正する」
＜変数設定とデータ連携を更新した場合＞​

入力フォームやラベルなどの更新、変数やデータモデルとのバインド設定、入力チェックやバリデーションの設定などを行った場合、データモデルへ影響が及ぶ可能性があります。変更内容に応じて、次の項目を確認してください。

確認項目確認内容参照先
入力フォームやラベルの変数バインドIM-BloomMakerの変数が、IM-Repositoryの辞書項目やエンティティと正しく連携しているかを確認します。IM-Repositoryのタスク一覧を活用してください。「タスク一覧を表示する」
入力チェックやバリデーション処理IM-BloomMakerの入力規則が、IM-Repositoryのエンティティや辞書項目の制約に合致しているか、また変数の型や初期値の変更が、他画面や処理に影響を及ぼさないかを確認します。「値の型と設定の詳細」
「制約を設定する」
＜アクション・イベントを見直した場合＞​

ボタンや入力操作に紐づくアクション、画面遷移や処理実行のイベント設定を変更した場合、ロジックフローへ影響が及ぶ可能性があります。変更内容に応じて、次の項目を確認してください。

確認項目確認内容参照先
ボタンや操作イベントに紐づくアクションボタンや操作イベントで呼び出すIM-LogicDesignerのフローやサーバ処理が、正しいバージョンやルーティング設定になっているかを確認します。「フロールーティング定義を確認する」
「バージョンを確認する」
画面遷移先や処理実行先のロジックフロー削除・変更したアクションを参照していた画面やイベントで、アクションが未設定になっていないか、画面遷移・処理実行が正常に設定されているかを確認します。「画面変数の使用箇所を確認する」

修正した画面コンテンツをデバッグする​

画面コンテンツを修正したら、意図通りに動作するかをデバッグで確認します。

画面コンテンツのデバッグ例​

ここでは、画面コンテンツのデバッグ例として、ケース別に説明します

＜画面変数を確認する場合＞​

プレビュー画面を表示し、実際に操作しながら変数の値が意図した通りに動作しているかを確認します。

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

プレビュー画面を表示し、その画面で使用されているアクションを一覧で確認します。

  1. ［アクション］タブをクリックします。
  2. ［アクションが呼ばれたとき］または［エラーが発生したとき］のタブをクリックします。
参考

必要に応じて、画面変数の値を変更したり、検証したいアクションアイテムにブレークポイントを設定したりすることで、意図通りに動作するかを検証します。詳細は「画面のプレビューとデバッグ > デバッグを実行する」を参照してください。

バージョンを確認する​

ルーティング定義（画面のURL）のバージョンを更新する前に、修正した画面コンテンツのバージョンを確認します。

  1. ［画面］タブをクリックします。
  2. ［ ］をクリックします。
    └ リソースに関するメニューが表示されます。
  3. ［コンテンツ編集］をクリックします。
    └ 「IM-BloomMakerコンテンツ編集」画面が表示されます。
  1. ［バージョン一覧］をクリックします。
    └ 「バージョン一覧」ダイアログが表示されます。
  2. 表示されているバージョンを確認します。
コラム

ここでは、次の状態で画面が保存されています。

  • バージョン3：編集した画面が新しいバージョンとして保存されています。
  • バージョン2：ルーティング（画面URL）と紐づき、アプリケーションで利用されています。
  • バージョン1：初回作成時の画面が保存されています。

ルーティング（画面URL）に紐づいている画面のバージョンを、バージョン2から修正済みのバージョン3に変更することで、編集内容をアプリケーションで利用できるようになります。

参考

前のバージョンと現在のバージョンの変更内容を確認したい場合は、「画面コンテンツの編集 > バージョン間の差分を確認する」を参照してください。

ルーティング定義を修正する​

ルーティング（画面URL）に紐づいている画面コンテンツのバージョンを、修正済みのバージョンに変更します。

  1. ［公開URL］タブをクリックします。
  2. 「画面URL」にチェックを入れます。
    └ 画面のルーティング定義のみが表示されます。
  3. 関連するルーティング定義をクリックします。
    └ 「IM-BloomMakerルーティング定義編集」画面が表示されます。
  1. 「利用バージョン」を入力します。
    └ 編集後の画面のバージョンを入力します。
  2. ［更新］をクリックします。
    └ 「確認」ダイアログで［決定］をクリックします。
    └ 編集した画面をアプリケーションで利用できるようになります。

アプリケーションの動作を確認する​

IM-BloomMakerの画面を開き、入力値や表示内容が正しく反映されているかを確認します。

  1. 修正した画面コンテンツに関連する画面URLの［画面URLをコピー］または［ ］をクリックします。
    └ クリップボードにURLがコピーされます。
  2. WebブラウザのアドレスバーにURLを貼り付けます。
  3. 修正した画面コンテンツの挙動を確認します。
参考

画面コンテンツの挙動に問題がある場合は、必要に応じて以下の内容を参照してください。