ドキュメントAEM GuidesAEM Guides のチュートリアル

概要

Last update: Wed Aug 20 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • ユーザー

古い UI から新しいAEM Guides UI に移行する際には、ui_config の更新をより柔軟なモジュール型 UI 設定に変換する必要があります。 このフレームワークは、変更を editor_toolbar および other toolbar にシームレスに導入するのに役立ちます。 このプロセスは、アプリケーション内の他のビューやウィジェットの変更もサポートしています。

NOTE
特定のボタンに適用されるカスタマイズは、拡張機能フレームワークへの移行中に問題が発生する場合があります。 この場合、このページを参照してサポートチケットを発行すると、迅速なサポートと解決が可能になります。

様々な画面での JSON の編集

様々な画面やウィジェット用に、JSON ファイルを XML エディター UI 設定セクションに追加できます。 広く使用されているウィジェットとその ID のリストを以下に示します。

  1. editor_toolbar: ファイルアクションとコンテンツアクションで構成される webeditor ツールバー。

  2. editor_tab_bar: webeditor 内の開いているファイルのタブ付きビューには、開いているファイルに対して実行できるアクションがあります。

  3. file_mode_switcher:webeditor 内で開いたファイルに対して、使用可能な様々なモード（オーサー、ソース、プレビュー）を切り替えるのに役立ちます。

    editor_toolbar

  4. map_console_navigation_bar: マップコンソールで開くマップの情報バーです。 マップを変更したり、設定にアクセスしたりできます。

  5. map_console_action_bar：出力プリセット、ベースライン、翻訳、レポートなどのマップコンソール項目のアクションバーで、関連情報とそれぞれのアクションボタンを提供します。

    map_console

  6. home_navigation_bar: ガイドのホームページのヘッダーバー。ウェルカムメッセージが選択したフォルダープロファイルと共に表示されます。

    home_navigation_bar

各 JSON の一般的な構造

各 JSON は、一貫した構造に従います。

  1. id: コンポーネントをカスタマイズしているウィジェットを指定します。

  2. targetEditor：エディターとモードのプロパティを使用して、ボタンを表示または非表示にするタイミングを定義します。

    targetEditor では、次のオプションがサポートされています。

    • mode
    • displayMode
    • editor
    • documentType
    • documentSubType
    • flag

    詳細については、「targetEditor プロパティについて を参照してください

    note note
    NOTE
    Experience Manager Guidesの 2506 リリースでは、displayMode、documentType、documentSubType、flag という新しいプロパティが導入されています。 これらのプロパティは、バージョン 2506 以降でのみサポートされます。 同様に、mode プロパティでの toc から layout への変更も、このリリース以降に適用されます。
    既存の documentType フィールドと共に、新しいフィールド editor を使用できるようになりました。 両方のフィールドがサポートされており、必要に応じて使用できます。 ただし、実装間の一貫性を確保するために、特に documentType プロパティを使用する場合は、documentSubType を使用することをお勧めします。 editor フィールドは、後方互換性と既存の統合をサポートするために引き続き有効です。

  3. target：新しいコンポーネントの追加先を指定します。 一意の識別にキーと値のペアまたはインデックスを使用します。 ビューの状態は次のとおりです。

    • 追加：最後にを追加します。

    • prepend：先頭にを追加します。

    • 置換：既存のコンポーネントを置換します。

JSON 構造の例：

{
  "id" : "editor_toolbar",
  "view": {
    "items": [
      {
        ...,
        "targetEditor": {
          "mode": [
            "preview"
          ],
          "editor": [
            "xml"
          ]
        },
        "target": {
          "key": "label",
          "value": "Table",
          "viewState": "prepend"
        },
        ...
      },
    ]
  }
}

targetEditor プロパティについて

各プロパティの分類、目的、サポートされている値を次に示します。

mode

エディターの操作モードを定義します。

サポートされている値:author、source、preview、layout （以前は toc）、split

displayMode （オプション）

UI コンポーネントの表示またはインタラクティブ機能をコントロールします。 指定しない場合、デフォルト値は show に設定されます。

サポートされている値:show、hide、enabled、disabled

例：

 {
        "icon": "textBulleted",
        "title": "Custom Insert Bulleted",
        "on-click": "$$AUTHOR_INSERT_REMOVE_BULLETED_LIST",
        "key": "$$AUTHOR_INSERT_REMOVE_BULLETED_LIST",
        "targetEditor": {
          "documentType": [
            "ditamap"
          ],
          "mode": [
            "author"
          ],
          "displayMode": "hide"
        }
      },

editor

エディターでプライマリドキュメントタイプを指定します。

サポートされている値:ditamap、bookmap、subjectScheme、xml、css、translation、preset、pdf_preset

documentType

プライマリドキュメントタイプを示します。

サポートされている値:dita、ditamap、bookmap、subjectScheme、css、preset、ditaval、reports、baseline、translation、html、markdown、conditionPresets

特定の使用例では、追加の値がサポートされている場合があります。

例：

 {
        "icon": "textNumbered",
        "title": "Custom Numbered List",
        "on-click": "$$AUTHOR_INSERT_REMOVE_NUMBERED_LIST",
        "key": "$$AUTHOR_INSERT_REMOVE_NUMBERED_LIST",
        "targetEditor": {
          "documentType": [
            "dita",
            "ditamap"
          ],
          "mode": [
            "author",
            "source"
          ]

        }
      },

documentSubType

documentType に基づいてドキュメントをさらに分類します。

  • preset:pdf、html5、aemsite、nativePDF、json、custom、kb
  • dita:topic、reference、concept、glossary、task、troubleshooting

特定の使用例では、追加の値がサポートされている場合があります。

例：

 {
        "icon": "rename",
        "title": "Custom Rename",
        "on-click": "$$PUBLISH_PRESETS_RENAME",
        "label": "Custom Rename",
        "key": "$$PUBLISH_PRESETS_RENAME",
        "targetEditor": {
          "documentType": [
            "preset"
          ],
          "documentSubType": [
            "nativePDF",
            "aemsite",
            "json"
          ]

        }
      },

flag

ドキュメントの状態または機能のブール値インジケーター。

サポートされている値:isOutputGenerated、isTemporaryFileDownloadable、isPDFDownloadable、isLocked、isUnlocked、isDocumentOpen

さらに、extensionMap でフラグとして利用されるカスタムフラグを targetEditor 内に作成することもできます。 ここで、extensionMap はカスタムキーまたは観察可能な値を追加するために使用されるグローバル変数です。

例：

 {
        "icon": "filePDF",
        "title": "Custom Export pdf",
        "on-click": "$$DOWNLOAD_TOPIC_PDF",
        "key": "$$DOWNLOAD_TOPIC_PDF",
        "targetEditor": {
          "documentType": [
            "markdown"
          ],
          "mode": [
            "preview"
          ],
          "flag": ["isPDFDownloadable"]

        }
      },

例

次に、エディターツールバーでボタンを追加、削除、置換する方法の例を示します。

ボタンの追加

editor_toolbar に新しいボタン Insert Custom Table を追加して、プレビューモードでのみ表示される単純なテーブルを追加します。

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "table",
        "title": "Insert Custom Table",
        "on-click": {
          "name": "$$AUTHOR_INSERT_ELEMENT",
          "args": [
            "simpletable",
            "table",
            "choicetable"
          ]
        },
        "key": "$$AUTHOR_INSERT_ELEMENT",
        "targetEditor": {
          "mode": [
            "preview"
          ],
        },
        "target": {
          "key": "label",
          "value": "Table",
          "viewState": "prepend"
        }
      }
    ]
  }
}

カスタムテーブルの挿入

ボタンの削除

ツールバーからボタンを削除する。 ここでは、エディターツールバーから「画像を追加」ボタンを削除します。

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "hide": true,
        "target": {
          "key": "label",
          "value": "Image",
          "viewState": "replace"
        }
      }
    ]
  }
}

ボタンの置き換え

ツールバーの マルチメディア ボタンを、オーサーモードでのみ表示される Youtube リンク挿入ボタンに置き換えます。

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "s2youtube",
        "title": "Youtube",
        "on-click": {
          "name": "$$AUTHOR_INSERT_ELEMENT",
          "args": "<object data='http://youtube.com'></object>"
        },
        "targetEditor": {
          "mode": [
            "author"
          ]
        },
        "target": {
          "key": "elementId",
          "value": "toolbar-multimedia",
          "viewState": "replace"
        }
      }
    ]
  }
}

Youtube ボタン

プレビューモードでのボタンの追加

設計に従って、ボタンの表示はロックとロック解除（読み取り専用）モードで個別に管理され、明確で制御されたユーザーエクスペリエンスを維持します。 デフォルトでは、インターフェイスが読み取り専用モードの場合、新しく追加されたボタンは非表示になります。
ボタンを 読み取り専用 モードで表示するには、インターフェイスがロックされていてもアクセス可能なツールバーサブセクション内にボタンを配置するターゲットを指定する必要があります。
例えば、ターゲットを「PDFとしてダウンロード」として指定すると、ボタンが既存の表示可能なボタンと同じセクションに表示され、ロックが解除された状態でアクセスできるようになります。

"target": {
  "key": "label",
  "value": "Download as PDF",
  "viewState": "prepend"
}

プレビュー モードで「PDFとして書き出し ボタンを追加すると、ロックモードとアンロックモードの両方で表示されます。

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "filePDF",
        "title": "Export as PDF",
        "on-click": "$$DOWNLOAD_TOPIC_PDF",
        "key": "$$DOWNLOAD_TOPIC_PDF",
        "targetEditor": {
          "editor": [
            "ditamap",
            "xml"
          ],
          "mode": [
            "preview"
          ]
        },
        "target": {
          "key": "label",
          "value": "Download as PDF",
          "viewState": "prepend"
        }
      },
      {
        "icon": "filePDF",
        "title": "Export as PDF",
        "on-click": "$$DOWNLOAD_TOPIC_PDF",
        "key": "$$DOWNLOAD_TOPIC_PDF",
        "targetEditor": {
          "editor": [
            "ditamap",
            "xml"
          ],
          "mode": [
            "preview"
          ]
        }
      }
    ]
  }
}

次のスニペットは、ロックのシナリオを使用した PDFとして書き出し ボタンを示しています。

PDFとしてエクスポート

また、ロック解除シナリオを含む PDFとして書き出し ボタンは、以下のスニペットで確認できます。

PDFとしてエクスポート

エディターツールバーのメニュードロップダウンに表示されるオプションをカスタマイズします

次の例を使用して、メニューのドロップダウンでカスタムオプションの追加、非表示、置換、追加を行うことができます。

追加

メニュードロップダウンへのオプションの追加。 ここでは、メニューオプションに カスタムメニューボタン を追加します

{
        "icon": "specialCharacter",
        "title": "Custom menu button",
        "on-click": "$$AUTHOR_INSERT_SYMBOL",
        "targetEditor": {
          "editor": [
            "ditamap"
          ],
          "mode": [
            "author"
          ]
        },
        "target": {
          "key": "label",
          "value": "Version label",
          "viewState": "append"
        }
      }

置換中

メニューのドロップダウンに表示されるオプションの置換。 ここでは、レビュータスクを作成 を カスタムメニューボタン 3 に置き換えます。

{
        "icon": "specialCharacter",
        "title": "Custom menu button 3",
        "on-click": "$$AUTHOR_INSERT_SYMBOL",
        "target": {
          "key": "label",
          "value": "Create review task",
          "viewState": "replace"
        }

      }

非表示

メニューのドロップダウンに表示されるオプションを非表示にします。 ここでは、メニューの 検索と置換 オプションを非表示にしています。

{
        "hide": true,
        "target": {
          "key": "label",
          "value": "Find and replace",
          "viewState": "replace"
        }
      }

サブメニューへのカスタムオプションの追加

メニュードロップダウン内のサブメニューへのオプションの追加。

{
        "icon": "viewAllTags",
        "title": "Toggle Tags View Goziamasu",
        "key": "AUTHOR_TOGGLE_TAG_VIEW",
        "target": {
          "key": "label",
          "value": "Track changes",
          "viewState": "replace"
        },
        "targetEditor": {
          "documentType": [
            "dita"
          ],
          "mode": [
            "author"
          ]
        }

      }

カスタマイズされた JSON のアップロード方法

  1. XML エディター設定 タブの上部バーにある 編集 をクリックします。

  2. XML エディター UI 設定 サブセクションに「アップロード ボタンが表示されるようになりました。

    アップロードボタン {width="400"}

  3. 変更した json をクリックしてアップロードできます。 （アップロードする json は、カスタマイズするウィジェットの ID と同じ名前にする必要があります）

  4. アップロードが完了したら、上部のバーの 保存 をクリックします。

    アップロードしたファイルごとに、JSON を 削除 して UI からカスタマイズを削除したり、ダウンロード して再び表示または変更したりすることもできます。

    ダウンロードボタン {width="400"}

カスタマイズした CSS のアップロード方法

また、css を追加して、カスタムで追加したボタンや、UI 上の既存のウィジェットまたはボタンのルックアンドフィールをカスタマイズすることもできます。

新しく追加されたカスタムボタンの場合は、JSON 内のカスタムボタンまたはコンポーネントに extraclass を追加します。
古いクラスでは、要素を検査し、既存のクラスも変更できます。

{
  "icon": "table",
  "title": "Insert Custom Table",
  "extraclass": "custom-css",
  "key": "$$AUTHOR_INSERT_ELEMENT",
  "targetEditor": {
    "mode": [
      "preview"
    ],
  },
  "target": {
    "key": "label",
    "value": "Table",
    "viewState": "prepend"
  }
}

  1. XML エディター設定 タブの上部バーにある 編集 をクリックします。

  2. XML エディターのページレイアウト サブセクションに「アップロード ボタンが表示されるようになりました。

    アップロードボタン {width="400"}

  3. をクリックして、変更した css をアップロードできます。 （css ファイルのみサポートされています）

  4. アップロードが完了したら、上部のバーの 保存 をクリックします。

    アップロードしたファイルごとに、CSS を 削除 して UI からカスタマイズを削除したり、ダウンロード して再び表示または変更したりすることもできます。

    ダウンロードボタン {width="400"}

ボタン CSS のカスタマイズ例

ここでは、editor_toolbar に新しいボタン Insert Custom Table を追加して、プレビューモードでのみ表示されるシンプルなテーブルを追加し、そのテーブルにカスタム CSS を適用します。
この css は、ボタンの背景とタイトルのフォントサイズを変更します。

CSS の例 

#editor_toolbar {
  .custom-css {
    background-color: burlywood;
    font-size: 2rem;
  }
}

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "table",
        "title": "Insert Custom Table",
        "extraclass": "custom-css",
        ...
      }
    ]
  }
}

ui 設定をモジュール型 Json に変換する手順

  1. ナビゲーション画面で、「ツール」アイコンをクリックします。

    ツールアイコン

  2. 左側のパネルで「ガイド」を選択します。

  3. フォルダープロファイル タイルをクリックします。

    フォルダープロファイル

  4. フォルダープロファイルを選択します。

  5. 「XML エディター設定」タブをクリックします。

  6. 「UI 設定を JSON に変換」ボタンをクリックできます。 これにより、ui_config で行われた変更を含む editor_toolbar と map_console_action_bar json が生成されます。

    UI 設定を JSON に変換

  7. エディターツールバーおよび マップコンソールのアクションバー用に、サンプルで生成されたジョブをチェックアウトきます。

NOTE
toolbar セクションと topbar セクションに加えられた変更は、editor_toolbar json に追加され、エディターページに表示されます。 ui_config でプリセットまたは翻訳に関連するボタンに加えられた変更は、map_console_action_bar json に追加され、マップコンソールページに表示されます。
recommendation-more-help
5d77304e-09c3-49ad-9381-b66e7cbd5f86