ツールバーのカスタマイズ id172FB00L0V6

UI 設定ファイルをダウンロードするには、管理者としてAdobe Experience Managerにログインします。

上部の「Adobe Experience Manager」リンクをクリックし、「ツール」を選択します。

ツールのリストから「ガイド」を選択し、「フォルダープロファイル」をクリックします。

グローバルプロファイル タイルをクリックします。

「XML エディター設定」タブを選択し、上部の「編集 アイコンをクリックします

ダウンロード アイコンをクリックして、ui_config.json ファイルをローカルシステムにダウンロードします。 その後、ファイルに変更を加えて、同じものをアップロードできます。

ui_config.json ファイルのツールバーセクションに新しいフィーチャーの定義を追加します。 ファイルを保存してアップロードします。

通常は、新しいツールバーボタン グループを作成し、そのグループに 1 つまたは複数のツールバーボタンを追加します。 または、既存のツールバーグループ内に新しいツールバーボタンを追加できます。 新しいツールバーグループを作成するには、次の詳細が必要です。

タイプ: type 値として blockGroup を指定します。 この値は、1 つまたは複数のツールバーグループを含むブロック グループを作成していることを示しています。

エクストラクラス: クラスまたはクラスの名前（スペース区切り）。

items: ツールバーですべてのグループの定義を指定します。 各グループには、1 つまたは複数のツールバーアイコンを含めることができます。 ツールバーグループ内でアイコンを定義するには、items ールバー内で type 属性を再度定義し、その値を buttonGroup に設定する必要があります。 extraclass プロパティに 1 つ以上のクラス名を指定します。 label プロパティでフィーチャー名を指定します。 ui_config.json ファイルの次のスニペットは、メインのツールバーブロックの定義と、buttonGroup の定義を示しています。

```
"ツールバー": {
"type": "blockGroup",
"extraclass":
"ツールバー操作",
"items": [
{
"type": "buttonGroup",
"extraclass": "left-controls",
"label": "Left Controls",
"items": [
```

items コレクション内で、1 つ以上のツールバーアイコンの定義を指定する必要があります。

ツールバーアイコンを追加するには、次のプロパティを定義する必要があります。

タイプ: type 値として button を指定します。 この値は、ツールバーボタンを追加していることを示します。

アイコン: ツールバーで使用する Coral アイコンの名前を指定します。

バリアント: variant 値として quiet を指定します。

タイトル: アイコンのツールチップを指定します。

クリック時: フィーチャーに定義したコマンド名をJavaScript ファイルで指定します。 コマンドに入力パラメーターが必要な場合は、コマンド名を次のように指定します。

```Javascript
"on-click": {"name": "AUTHOR_INSERT_ELEMENT", "args": "simpletable"}
```

表示/非表示: show プロパティを定義する場合は、アイコンを表示するモードを指定します。 使用可能な値は、- @isAuthorMode、@isSourceMode、@isPreviewMode、true \（すべてのモードで表示\）、または false \（すべてのモードで非表示\）です。

show の代わりに、hide プロパティを定義することもできます。 使用できる値は、プロパティの場合と同じ show すが、指定したモードではアイコンが表示されないという違いしかありません。

次の例では、ツールバーの「バージョンを表示」アイコンをクリックしたときに表示されるAEM Guidesのバージョン番号を示しています。

JavaScript ファイルに次のコードを追加します。

$(document).ready(setTimeout(function() {
                        fmxml.commandHandler.subscribe({
                        key: 'user.alert',
                        next: function() {
                        alert("AEM Guides version x.x")
                        }
                        })
                        }, 1000))

この機能を ui_config.json ファイルに次のように追加します。

"type": "button",
"icon": "alert","variant": "quiet","title": "About AEM Guides","show": "true","on-click": "user.alert"

clientlib フォルダーを作成し、JavaScriptをこのフォルダーに追加します。

apps.fmdita.xml_editor.page_overrides の値を割り当てて、clientlib フォルダーのカテゴリプロパティを更新します。

ui_config.json ファイルを保存し、web エディターをリロードします。

UI 設定ファイルをダウンロードするには、管理者としてAdobe Experience Managerにログインします。

上部の「Adobe Experience Manager」リンクをクリックし、「ツール」を選択します。

ツールのリストから「ガイド」を選択し、「フォルダープロファイル」をクリックします。

グローバルプロファイル タイルをクリックします。

「XML エディター設定」タブを選択し、上部の「編集 アイコンをクリックします

ダウンロード アイコンをクリックして、ui_config.json ファイルをローカルシステムにダウンロードします。 その後、ファイルに変更を加えて、同じものをアップロードできます。

ui_config.json ファイルには次の 3 つのセクションがあります。

1. ツールバー: このセクションには、番号付きリストの挿入/削除、\（file\）閉じる、保存、コメントなど、エディターのツールバーで使用できるすべての機能の定義が含まれます。

2. ショートカット: このセクションでは、エディタの特定の機能に割り当てられたキーボード ショートカットの定義について説明します。

3. テンプレート: このセクションには、文書で使用できる DITA エレメントの構造が事前に定義されています。 既定では、[ テンプレート ] セクションには、段落、簡易テーブル、テーブル、および本文の各要素に対するテンプレート定義が含まれています。 目的の要素に対して有効な XML 構造を追加することで、任意の要素のテンプレート定義を作成できます。 例えば、リスト内の新しい li 要素ごとに p 要素を追加する場合は、「テンプレート」セクションの最後に次のコードを追加して、これを行うことができます。

"li": "<li><p></p></li>"

ツールバーセクションから、ユーザーに公開しない機能のエントリを削除します。

ui_config.json ファイルを保存し、web エディターをリロードします。