概要
古い UI から新しいAEM Guides UI に移行する際には、ui_config の更新をより柔軟なモジュール型 UI 設定に変換する必要があります。 このフレームワークは、変更を editor_toolbar および other toolbar にシームレスに導入するのに役立ちます。 このプロセスは、アプリケーション内の他のビューやウィジェットの変更もサポートしています。
様々な画面での JSON の編集
様々な画面やウィジェット用に、JSON ファイルを XML エディター UI 設定セクションに追加できます。 広く使用されているウィジェットとその ID のリストを以下に示します。
-
editor_toolbar: ファイルアクションとコンテンツアクションで構成される webeditor ツールバー。
-
editor_tab_bar: webeditor 内の開いているファイルのタブ付きビューには、開いているファイルに対して実行できるアクションがあります。
-
file_mode_switcher:webeditor 内で開いたファイルに対して、使用可能な様々なモード（オーサー、ソース、プレビュー）を切り替えるのに役立ちます。
-
map_console_navigation_bar: マップコンソールで開くマップの情報バーです。 マップを変更したり、設定にアクセスしたりできます。
-
map_console_action_bar：出力プリセット、ベースライン、翻訳、レポートなどのマップコンソール項目のアクションバーで、関連情報とそれぞれのアクションボタンを提供します。
-
home_navigation_bar: ガイドのホームページのヘッダーバー。ウェルカムメッセージが選択したフォルダープロファイルと共に表示されます。
各 JSON の一般的な構造
各 JSON は、一貫した構造に従います。
-
id: コンポーネントをカスタマイズしているウィジェットを指定します。 -
targetEditor：エディターとモードのプロパティを使用して、ボタンを表示または非表示にするタイミングを定義します。targetEditorでは、次のオプションがサポートされています。modedisplayModeeditordocumentTypedocumentSubTypeflag
詳細については、「targetEditor プロパティについて を参照してください
note note NOTE Experience Manager Guidesの 2506 リリースでは、 displayMode、documentType、documentSubType、flagという新しいプロパティが導入されています。 これらのプロパティは、バージョン 2506 以降でのみサポートされます。 同様に、mode プロパティでのtocからlayoutへの変更も、このリリース以降に適用されます。既存の documentTypeフィールドと共に、新しいフィールドeditorを使用できるようになりました。 両方のフィールドがサポートされており、必要に応じて使用できます。 ただし、実装間の一貫性を確保するために、特にdocumentTypeプロパティを使用する場合は、documentSubTypeを使用することをお勧めします。editorフィールドは、後方互換性と既存の統合をサポートするために引き続き有効です。 -
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、kbdita: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"
}
}
]
}
}
プレビューモードでのボタンの追加
設計に従って、ボタンの表示はロックとロック解除（読み取り専用）モードで個別に管理され、明確で制御されたユーザーエクスペリエンスを維持します。 デフォルトでは、インターフェイスが読み取り専用モードの場合、新しく追加されたボタンは非表示になります。
ボタンを 読み取り専用 モードで表示するには、インターフェイスがロックされていてもアクセス可能なツールバーサブセクション内にボタンを配置するターゲットを指定する必要があります。
例えば、ターゲットを「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として書き出し ボタンは、以下のスニペットで確認できます。
エディターツールバーのメニュードロップダウンに表示されるオプションをカスタマイズします
次の例を使用して、メニューのドロップダウンでカスタムオプションの追加、非表示、置換、追加を行うことができます。
追加
メニュードロップダウンへのオプションの追加。 ここでは、メニューオプションに カスタムメニューボタン を追加します
{
"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 のアップロード方法
-
XML エディター設定 タブの上部バーにある 編集 をクリックします。
-
XML エディター UI 設定 サブセクションに「アップロード ボタンが表示されるようになりました。
-
変更した json をクリックしてアップロードできます。 （アップロードする json は、カスタマイズするウィジェットの ID と同じ名前にする必要があります）
-
アップロードが完了したら、上部のバーの 保存 をクリックします。
アップロードしたファイルごとに、JSON を 削除 して UI からカスタマイズを削除したり、ダウンロード して再び表示または変更したりすることもできます。
カスタマイズした 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"
}
}
-
XML エディター設定 タブの上部バーにある 編集 をクリックします。
-
XML エディターのページレイアウト サブセクションに「アップロード ボタンが表示されるようになりました。
-
をクリックして、変更した css をアップロードできます。 （css ファイルのみサポートされています）
-
アップロードが完了したら、上部のバーの 保存 をクリックします。
アップロードしたファイルごとに、CSS を 削除 して UI からカスタマイズを削除したり、ダウンロード して再び表示または変更したりすることもできます。
ボタン CSS のカスタマイズ例
ここでは、editor_toolbar に新しいボタン Insert Custom Table を追加して、プレビューモードでのみ表示されるシンプルなテーブルを追加し、そのテーブルにカスタム 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 に変換する手順
-
ナビゲーション画面で、「ツール」アイコンをクリックします。
-
左側のパネルで「ガイド」を選択します。
-
フォルダープロファイル タイルをクリックします。
-
フォルダープロファイルを選択します。
-
「XML エディター設定」タブをクリックします。
-
「UI 設定を JSON に変換」ボタンをクリックできます。 これにより、ui_config で行われた変更を含む editor_toolbar と map_console_action_bar json が生成されます。
-
エディターツールバー および マップコンソールのアクションバー用に、サンプルで生成されたジョブをチェックアウト きます。