画面コンテンツの編集
ここでは、作成済みの画面コンテンツを後から編集する方法について説明します。
編集作業とバージョン管理の活用
画面コンテンツを編集する際には、バージョン管理の仕組みを活用することで、変更内容を効率的に記録・管理できます。編集作業ごとにバージョンを分けて保存すれば、いつ・誰が・どこを変更したのかを明確に追跡でき、複数人での開発や後からの見直しにも対応しやすくなります。
また、新しいバージョンとして保存しておくことで、編集前後の差分を比較でき、変更内容の妥当性の確認やバグの原因特定にも役立ちます。
変更内容を保存する際には、次の点を意識するとよいでしょう。
- 現在のバージョンに、変更を上書き保存するのか（差分を記録しない）
- 新しいバージョンを追加して、変更を保存するのか（差分を記録する）
基本操作
画面コンテンツの編集および保存方法について説明します。
画面コンテンツを編集する
該当するコンテンツ定義の編集画面を開き、必要な修正を行います。主に次のような項目を見直します。
- レイアウト・表示制御の見直し：画面部品の追加・削除、配置やサイズの調整、表示・非表示の制御、ステータスに応じた表示切替など
- 変数設定とデータ連携の更新：入力フォームやラベルなどの更新、変数やデータモデルとのバインド設定、入力チェックやバリデーションの設定など
- アクション・イベントの見直し：ボタンや入力操作に紐づくアクション、画面遷移や処理実行のイベント設定など
「画面コンテンツの修正 > 画面コンテンツの修正例」では、アプリケーション完成後の画面コンテンツの修正例を、ケース別に紹介しています。画面を修正する際の参考として参照してください。
- 編集したい画面コンテンツをクリックします。
└ デザイナ画面が表示されます。 - 画面デザインまたは画面変数を編集します。
└ 操作手順の詳細は、下記の各項目を参照してください。
画面デザインの編集
編集を始める前に画面全体の構成を把握しておくことで、効率的かつ正確に作業を進められます。必要に応じて、配置されているエレメントの追加や変更、設定値の調整を行います。
画面変数の編集
IM-BloomMakerが提供する変数の仕組みや自動型変換について理解しておくと、編集時のトラブル防止や作業の効率化に役立ちます。
編集した画面コンテンツを保存する
編集した画面コンテンツは、用途や変更内容に応じて、以下の4種類から保存方法を選択できます。
- 同じバージョンに上書き保存する：軽微な修正時に利用
- 新しいバージョンとして追加保存する：変更履歴を残したい場合に利用
- 基本情報を変更して保存する：コンテンツ名やカテゴリを変更したい場合に利用
- 別のコンテンツIDで保存する：同じ内容で別のコンテンツを追加したい場合に利用
同じバージョンに上書き保存する
同じバージョンに上書き保存すると、バージョン番号を変更せずに編集内容を反映できます。主に軽微な修正時に利用します。
- ［
］をクリックします。
└ 編集中であることを示す
の表示が消えます。
└ コンテンツは最新バージョンとして上書き保存されます。
新しいバージョンとして追加保存する
新しいバージョンを追加して保存すると、変更内容を新たなバージョンとして管理できます。履歴を残しながら更新したい場合に利用します。
- ［▼］をクリックします。
└ 保存メニューが表示されます。 - ［基本情報を変更して保存］をクリックします。
└ 「基本情報を変更して保存」ダイアログが表示されます。
- 「新しいバージョンで保存」にチェックを入れます。
└ 「バージョン番号」と「コメント」が表示されます。 - 必要に応じて「コメント」を入力します。
- ［保存］をクリックします。
基本情報を変更して保存する
基本情報を変更して保存すると、コンテンツ名やカテゴリなどの基本情報を更新できます（コンテンツIDは一度設定すると変更できません）。保存時には、同じバージョンへの上書き保存、または新しいバージョンを追加保存のいずれかを選択できます。
- ［▼］をクリックします。
└ 保存メニューが表示されます。 - ［基本情報を変更して保存］をクリックします。
└ 「基本情報を変更して保存」ダイアログが表示されます。 - 新しいバージョンで保存したい場合は、チェックを入れます。
└ チェックを入れないと、同じバージョンへ上書き保存されます。 - 変更したい「コンテンツ名」を入力します。
└ 多言語の名称を追加・変更したい場合は、［
］をクリックすると、入力欄が表示されます。
- カテゴリを変更したい場合は、［
］をクリックします。
└ 「コンテンツカテゴリ検索」画面が表示されます。 - 変更したいカテゴリを選択します。
- ［決定］をクリックします。
└ 「コンテンツカテゴリ検索」画面が閉じます。 - 必要に応じて「備考」を入力します。
└ 多言語の備考を追加・変更したい場合は、［ ］をクリックすると、入力欄が表示されます。 - ［保存］をクリックします。
別のコンテンツIDで保存する
別のコンテンツIDで保存すると、編集内容を新しいコンテンツとして登録できます。既存のコンテンツとは独立して管理したい場合や、流用して別の用途で新しい画面を作成する場合に適した保存方法です。
- ［▼］をクリックします。
└ 保存メニューが表示されます。 - ［別のコンテンツIDで保存］をクリックします。
└ 「別のコンテンツIDで保存」ダイアログが表示されます。 - 新しい「コンテンツID」を入力します。
- 新しい「コンテンツ名」を入力します。
└ 多言語の名称を追加・変更したい場合は、［ ］をクリックすると、入力欄が表示されます。 - カテゴリを変更したい場合は、［ ］をクリックします。
└ 「コンテンツカテゴリ検索」画面が表示されます。
- 変更したいカテゴリを選択します。
- ［決定］をクリックします。
└ 「コンテンツカテゴリ検索」画面が閉じます。 - 必要に応じて「備考」を入力します。
└ 多言語の備考を追加・変更したい場合は、［ ］をクリックすると、入力欄が表示されます。 - ［保存］をクリックします。
応用操作
画面コンテンツの編集では、用途に応じて、次のような応用操作が可能です。基本的な操作とあわせて確認してみましょう。
画面コンテンツの差分を比較する
画面コンテンツを編集した際には、変更内容を差分として確認できます。差分の確認は、編集前後の状態や異なるバージョン間で比較できます。
- ［
］をクリックします。
└ 「差分比較」ダイアログが表示されます。 - 比較・確認したい項目をそれぞれ設定します。
└ 操作手順の詳細は、下記の各項目を参照してください。
- 変更内容を確認します。
└ 変更箇所が色別で表示されます。 - ［閉じる］をクリックします。
編集中に差分を確認する
画面を保存する前に、編集前後の内容を比較し、意図しない変更が含まれていないかを確認できます。
これにより、上書き保存を実行する前に変更内容の妥当性を判断したり、誤った編集を早期に発見したりできます。
同じバージョン番号に上書き保存する場合、［ ］をクリックした後は差分を表示できません。
バージョン間の差分を確認する
画面を保存した後、前のバージョンと現在のバージョンの差分を確認できます。これにより、保存後の修正点を把握し、レビューや不具合の特定に役立てることができます。
- バージョンにある［
］をクリックします。
└ バージョン選択メニューが表示されます。 - 確認したいバージョンを選択します。
└ 「差分比較」ダイアログの「比較元」に反映されます。
└ 選択したバージョンとの比較結果が表示されます。
バージョン一覧を確認したい場合は、「IM-BloomMakerコンテンツ編集」画面の［バージョン一覧］をクリックしてください。「IM-BloomMakerコンテンツ編集」画面の表示方法は、上記「基本操作 > 新しいバージョン番号を追加して保存する」を参照してください。
別のコンテンツとの差分を確認する
現在のコンテンツと別のコンテンツとの差分を確認できます。これにより、共通化できる部分と、個別に管理すべき部分とを判断しやすくなります。
- コンテンツにある［ ］をクリックします。
└ コンテンツ選択メニューが表示されます。 - ［別のコンテンツ］をクリックします。
- ［検索］をクリックします。
└ 「コンテンツ検索」画面が表示されます。 - 比較したいコンテンツを選択します。
- ［決定］をクリックします。
└ 「確定確認」ダイアログで［決定］をクリックします。
└ 「差分比較」ダイアログの「比較元」に反映されます。
差分を比較できるのは、同じコンテンツ種別のコンテンツのみです。別のコンテンツ種別を選択した場合、エラーメッセージが表示されます。BulmaとBulma Theme Coloredは同じコンテンツ種別と認識されます。コンテンツ種別については「画面コンテンツの作成 > コンテンツ種別について」を参照してください。
確認したい項目を選択する
- 項目名にある［ ］をクリックします。
└ 差分項目選択メニューが表示されます。 - 「差分あり」から確認したい項目を選択します。
└ 「差分比較」ダイアログの「比較元」に反映されます。
└ 選択した項目における比較結果が表示されます。
表示される項目名は、以下のとおりです。
- 画面構成：コンテナ・コンテナページ・エレメントが対象
- CSS：CSSエディタの内容が対象
- 変数・定数・入力・多言語：各変数の値が対象
- エイリアス：変数のエイリアス名が対象
- アクション：アクションとアクションアイテムが対象
差分の詳細を確認する
- 差分箇所にある［
］をクリックします。
└ 「差分詳細」ダイアログが表示されます。 - 差分内容を確認します。
└ 表示される内容は選択した項目によって異なります。 - ［閉じる］をクリックします。
└ 「差分詳細」ダイアログが閉じます。
「差分詳細」画面の［ 
］をクリックすると、関連するエディタが表示され、設定値などを直接編集できます。詳細は、下記「差分の該当箇所の設定値を編集する」を参照してください。
差分結果をもとに画面コンテンツを修正する
差分を確認しながら、効率的に修正する方法について説明します。
差分箇所をフォーカスした状態で修正する
差分箇所をすぐに修正したい場合は、「宣言箇所へジャンプ」機能を利用すると便利です。
修正したい項目名に表示されている［ 
］をクリックすると、宣言箇所にフォーカスした状態で、対象の設定に応じたタブや画面が表示されます。
| 対象 | 表示されるタブ・ダイアログ | 選択・フォーカスされる内容 |
|---|---|---|
| 画面構成（コンテナ・コンテナページ・エレメント） | 「画面構成」タブ | エレメントツリー上で対象のエレメントが選択される |
| 変数・定数・入力変数 | 「変数」タブの各変数エリア | 変数ツリー上で対象の画面変数が選択される |
| 多言語変数 | 「変数」タブの「多言語」エリア | 対象の多言語キー名のテキストボックスがフォーカスされる |
| エイリアス | 「変数」タブ | 対象のエイリアス名のテキストボックスがフォーカスされる |
| アクション | 「アクション」タブ | アクション一覧で対象のアクションが選択される |
| アクションアイテム・実行条件 | 「アクションエディタ」ダイアログ | 対象のアクションアイテムまたは実行条件がハイライトされる |
たとえば「パンくずリストコンテナ」を修正したい場合、［ ］をクリックすると、「画面構成」タブが表示され、宣言箇所にフォーカスが移動します。さらに「差分比較」ダイアログを閉じると、宣言箇所以外にもエレメントにもフォーカスが残るため、すぐに修正作業を開始できます。
差分の該当箇所の設定値を編集する
画面変数やCSS、アクションの場合は、「差分詳細」ダイアログから直接設定値を修正できます。
- ［ ］をクリックします。
└ 「差分詳細」ダイアログが表示されます。 - ［ ］をクリックします。
└ 対象の設定に応じたエディタが表示されます。
| 対象 | 表示されるエディタ | 表示される内容 |
|---|---|---|
| 変数・定数・入力変数 | 「変数エディタ」ダイアログ | 対象の変数の設定内容が表示される |
| 多言語変数 | 「変数」タブの「多言語」エリア | 対象の多言語キー名のテキストボックスがフォーカスされ、入力フォームが表示される |
| アクションアイテム、実行条件 | 「アクションエディタ」ダイアログ | 対象のアクションアイテムまたは実行条件がハイライトされる |
コンテンツを複製する
コンテンツ一覧から既存のコンテンツの内容をコピーして、新しいコンテンツを作成できます。
- ［
］をクリックします。
└ 「サイトマップ」画面が表示されます。 - 「BloomMaker」にある［コンテンツ一覧］をクリックします。
└ 「IM-BloomMakerコンテンツ一覧」画面が表示されます。 - 複製したいコンテンツを選択します。
- ［コンテンツコピー作成］をクリックします。
└ 複製されたコンテンツの編集画面が表示されます。
└ 一覧には、編集中であることを示す
マークが表示されます。
- 「コンテンツID」に任意のIDを入力します。
- 「コンテンツ名」にある「標準」の欄に名称を入力します。
└ 多言語対応では、「標準」以外の欄にも入力してください。 - ［登録］をクリックします。
└ 「登録確認」ダイアログで、再度［決定］をクリックします。
└ 一覧のコンテンツ名からの表示が消えます。
- コピー元のコンテンツのバージョンは引き継がれず、複製したコンテンツは最新バージョン番号「1」として採番されます。
- コンテンツ種別は変更できません。ただし、Bulma⇔Bulma Theme Coloredの変更は可能です。
デザイナタイプは、同じモード同士でコピーしてください。異なるモードでコピーした場合、コンテンツ表示の不具合やデータの不整合、編集内容の制限などが発生する恐れがあります。デベロップモードとレイアウトモードの違いについては、「新規コンテンツ定義の追加 > デザイナの種類」を参照してください。