画面コンテンツの編集

ここでは、作成済みの画面コンテンツを後から編集する方法について説明します。

編集作業とバージョン管理の活用

画面コンテンツを編集する際には、バージョン管理の仕組みを活用することで、変更内容を効率的に記録・管理できます。編集作業ごとにバージョンを分けて保存すれば、いつ・誰が・どこを変更したのかを明確に追跡でき、複数人での開発や後からの見直しにも対応しやすくなります。

また、新しいバージョンとして保存しておくことで、編集前後の差分を比較でき、変更内容の妥当性の確認やバグの原因特定にも役立ちます。

変更内容を保存する際には、次の点を意識するとよいでしょう。

• 現在のバージョンに、変更を上書き保存するのか（差分を記録しない）
• 新しいバージョンを追加して、変更を保存するのか（差分を記録する）

基本操作

画面コンテンツの基本情報の変更方法やバージョン管理、編集方法について説明します。

画面コンテンツの基本情報を変更する

必要に応じて、画面コンテンツの基本情報の各項目を修正します。ただし、コンテンツIDは一度設定すると変更できません。変更が必要な場合は、新しくコンテンツを作成し直してください。

1. ［ ］をクリックします。
   └ リソースに関するメニューが表示されます。
2. ［コンテンツ編集］をクリックします。
   └ 「IM-BloomMakerコンテンツ編集」画面が表示されます。

3. 「コンテンツ名」にある「標準」の欄に名称を入力します。
4. ［更新］をクリックします。
   └ 「更新確認」ダイアログで［決定］をクリックします。

その他の操作

コンテンツ名または備考の多言語を追加・変更したい場合は、［ ］をクリックすると、入力欄が表示されます。

保存するバージョンを選択する

同じバージョンに上書き保存する

1. 編集したいコンテンツ定義をクリックします。
   └ デザイナ画面が表示されます。
2. 必要に応じて、編集作業を行います。

3. ［ ］をクリックします。
   └ 前回と同じバージョンに保存されます。

その他の操作

変更箇所の表示や動作を確認したい場合は、「画面のプレビューとデバッグ」を参照してください。

新しいバージョン番号を追加して保存する

1. ［ ］をクリックします。
   └ リソースに関するメニューが表示されます。
2. ［コンテンツ編集］をクリックします。
   └ 「IM-BloomMakerコンテンツ編集」画面が表示されます。
3. ［新バージョン追加］をクリックします。
   └ 「バージョン追加」ダイアログが表示されます。

4. 必要に応じて、コメントを入力します。
5. ［バージョン追加］をクリックします。
   └ 「バージョン追加確認」ダイアログで［決定］をクリックします。
   └ 「IM-BloomMakerコンテンツ編集」画面に戻ります。
   └ 「最新バージョン番号」が新しいバージョンに更新されます。

6. ［デザイン編集］をクリックします。
   └ 新しいバージョンのデザイナ画面が表示されます。
7. 必要に応じて、編集作業を行います。

8. ［ ］をクリックします。
   └ 新しいバージョンに保存されます。

その他の操作

• 過去バージョンを確認したい場合は、［バージョン一覧］をクリックしてください。
• 画面コンテンツに紐づいているルーティング定義を確認したい場合は、［紐づいているルーティング定義一覧］をクリックしてください。アプリケーション全体のルーティング定義については、「アプリケーション管理」画面の「公開URL」タブをクリックすると一覧で表示されます。ルーティング定義については、「画面のルーティング設定」を参照してください。

画面コンテンツを編集する

画面コンテンツの編集では、配置されているエレメントの追加や変更、設定値の調整を行います。必要に応じて、画面変数やアクションも修正します。編集を始める前に画面全体の構成を把握しておくことで、効率的かつ正確に作業を進められます。さらに、IM-BloomMakerが提供する変数の仕組みや自動型変換について理解しておくと、編集時のトラブル防止や作業の効率化に役立ちます。

画面デザインの編集

ここでは、作成済みの画面デザインを編集する方法について説明します。

画面変数の編集

ここでは、作成済みの画面変数を後から編集する方法について説明します。

応用操作

画面コンテンツの編集では、用途に応じて、次のような応用操作が可能です。基本的な操作とあわせて確認してみましょう。

画面コンテンツの差分を比較する

画面コンテンツを編集した際には、変更内容を差分として確認できます。差分の確認は、編集前後の状態や異なるバージョン間で行うことが可能です。

1. ［ ］をクリックします。
   └ 「差分比較」ダイアログが表示されます。
2. 比較・確認したい項目をそれぞれ設定します。
   └ 操作手順の詳細は、下記の各項目を参照してください。

3. 変更内容を確認します。
   └ 変更箇所が色別で表示されます。
4. ［閉じる］をクリックします。

編集中に差分を確認する

画面を保存する前に、編集前後で意図しない変更が含まれていないかを確認できます。

これにより、上書き保存を実行する前に、変更内容の妥当性を判断したり、誤った編集を早期に発見したりすることが可能となります。

注意

同じバージョン番号に上書き保存する場合、［ ］をクリックした後は差分を表示できません。

バージョン間の差分を確認する

画面を保存した後、前のバージョンと現在のバージョンの差分を確認できます。これにより、保存後の修正点を把握し、レビューや不具合の特定に役立てることができます。

1. バージョンにある［ ］をクリックします。
   └ バージョン選択メニューが表示されます。
2. 確認したいバージョンを選択します。
   └ 「差分比較」ダイアログの「比較元」に反映されます。
   └ 選択したバージョンとの比較結果が表示されます。

参考

バージョン一覧を確認したい場合は、「IM-BloomMakerコンテンツ編集」画面の［バージョン一覧］をクリックしてください。「IM-BloomMakerコンテンツ編集」画面の表示方法は、上記「新しいバージョン番号を追加して保存する」を参照してください。

別のコンテンツとの差分を確認する

現在のコンテンツと別のコンテンツとの差分を確認できます。これにより、共通化できる部分と、個別に管理すべき部分とを判断することができます。

1. コンテンツにある［ ］をクリックします。
   └ コンテンツ選択メニューが表示されます。
2. ［別のコンテンツ］をクリックします。
3. ［検索］をクリックします。
   └ 「コンテンツ検索」画面が表示されます。
4. 比較したいコンテンツを選択します。
5. ［決定］をクリックします。
   └ 「確定確認」ダイアログで［決定］をクリックします。
   └ 「差分比較」ダイアログの「比較元」に反映されます。

注意

差分を比較できるのは、同じコンテンツ種別のコンテンツのみです。別のコンテンツ種別を選択した場合、エラーメッセージが表示されます。BulmaとBulma Theme Coloredは同じコンテンツ種別と認識されます。コンテンツ種別については「画面コンテンツの作成 > コンテンツ種別について」を参照してください。

確認したい項目を選択する

1. 項目名にある［ ］をクリックします。
   └ 差分項目選択メニューが表示されます。
2. 「差分あり」から確認したい項目を選択します。
   └ 「差分比較」ダイアログの「比較元」に反映されます。
   └ 選択した項目における比較結果が表示されます。

表示される項目名は、以下のとおりです。

• 画面構成：コンテナ、コンテナページ、エレメントが対象
• CSS：CSSエディタの内容が対象
• 変数・定数・入力・多言語：各変数の値が対象
• エイリアス：変数のエイリアス名が対象
• アクション：アクションとアクションアイテムが対象

差分の詳細を確認する

1. 差分箇所にある［ ］をクリックします。
   └ 「差分詳細」ダイアログが表示されます。
2. 差分内容を確認します。
   └ 表示される内容は選択した項目によって異なります。
3. ［閉じる］をクリックします。
   └ 「差分詳細」ダイアログが閉じます。

その他の操作

「差分詳細」画面の［ ］をクリックすると、関連するエディタが表示され、設定値などを直接編集できます。詳細は、下記「差分の該当箇所の設定値を編集する」を参照してください。

差分結果をもとに画面コンテンツを修正する

差分を確認しながら、効率的に修正する方法について説明します。

差分箇所をフォーカスした状態で修正する

差分箇所をすぐに修正したい場合は、「宣言箇所へジャンプ」機能を利用すると便利です。

修正したい項目名に表示されている［ ］をクリックすると、宣言箇所にフォーカスした状態で、対象の設定に応じたタブや画面が表示されます。

対象	表示されるタブ／ダイアログ	選択・フォーカスされる内容
画面構成（コンテナ、コンテナページ、エレメント）	「画面構成」タブ	エレメントツリー上で対象のエレメントが選択される
変数・定数・入力変数	「変数」タブの各変数エリア	変数ツリー上で対象の画面変数が選択される
多言語変数	「変数」タブの「多言語」エリア	対象の多言語キー名のテキストボックスがフォーカスされる
エイリアス	「変数」タブ	対象のエイリアス名のテキストボックスがフォーカスされる
アクション	「アクション」タブ	アクション一覧で対象のアクションが選択される
アクションアイテム、実行条件	「アクションエディタ」ダイアログ	対象のアクションアイテムまたは実行条件がハイライトされる

たとえば「見出しレベル3」を修正したい場合、［ ］をクリックすると、「画面構成」タブが表示され、宣言箇所にフォーカスが移動します。さらに「差分比較」ダイアログを閉じると、宣言箇所以外にもエレメントにもフォーカスが残るため、すぐに修正作業を開始できます。

差分の該当箇所の設定値を編集する

画面変数やCSS、アクションの場合は、「差分詳細」ダイアログから直接設定値を修正できます。

1. ［ ］をクリックします。
   └ 「差分詳細」ダイアログが表示されます。
2. ［ ］をクリックします。
   └ 対象の設定に応じたエディタが表示されます。

対象	表示されるエディタ	表示される内容
変数・定数・入力変数	「変数エディタ」ダイアログ	対象の変数の設定内容が表示される
多言語変数	「変数」タブの「多言語」エリア	対象の多言語キー名のテキストボックスがフォーカスされ、入力フォームが表示される
アクションアイテム、実行条件	「アクションエディタ」ダイアログ	対象のアクションアイテムまたは実行条件がハイライトされる

コンテンツを複製する

コンテンツ一覧から既存のコンテンツの内容をコピーして、新しいコンテンツを作成できます。

1. ［ ］をクリックします。
   └ サイトマップが表示されます。
2. 「BloomMaker」内にある［コンテンツ一覧］をクリックします。
   └ 「IM-BloomMakerコンテンツ一覧」画面が表示されます。
3. 複製したいコンテンツを選択します。
4. ［コンテンツコピー作成］をクリックします。
   └ 複製されたコンテンツの編集画面が表示されます。
   └ 一覧には、編集中であることを示すマークが表示されます。

5. 「コンテンツID」に、任意のIDを入力します。
6. 「コンテンツ名」にある「標準」の欄に名称を入力します。
   └ 多言語対応では、「標準」以外の欄にも入力してください。
7. ［登録］をクリックします。
   └ 「登録確認」ダイアログで、再度［決定］をクリックします。
   └ 一覧のコンテンツ名から の表示が消えます。

参考

• コピー元のコンテンツのバージョンは引き継がれず、複製したコンテンツは最新バージョン番号「1」として採番されます。
• コンテンツ種別は変更できません。ただし、Bulma⇔Bulma Theme Coloredの変更は可能です。

注意

デザイナタイプは、同じモード同士でコピーしてください。異なるモードでコピーした場合、コンテンツ表示の不具合やデータの不整合、編集内容の制限などが発生する恐れがあります。デベロップモードとレイアウトモードの違いについては、「新規コンテンツ定義の追加 > デザイナの種類」を参照してください。