ユニバーサルエディターへのアクセスとナビゲート navigating

ユニバーサルエディターへのアクセスと操作の基本について説明します。

はじめに introduction

ユニバーサルエディターを使用すると、あらゆる実装、あらゆるコンテンツ、あらゆる側面を編集できるため、優れたエクスペリエンスを提供し、コンテンツベロシティを向上させ、最新のデベロッパーエクスペリエンスを提供できます。

これを行うために、ユニバーサルエディターはコンテンツ作成者に、最小限のトレーニングで簡単にコンテンツの編集を開始できる直感的な UI を提供します。このドキュメントでは、ユニバーサルエディターの操作方法を説明します。

アプリを準備する prepare-app

ユニバーサルエディターを使用してアプリのコンテンツを作成するには、エディターをサポートするために、デベロッパーがアプリを実装する必要があります。

ユニバーサルエディターへのアクセス accessing

アプリをユニバーサルエディターと連携するように実装すると、ユニバーサルエディターでは、AEM as a Cloud Service 内からアクセスすることも、AEM にアクセスせずに直接アクセスすることもできます。

AEM as a Cloud Service 内でのアクセス accessing-aem

直接アクセス accessing-directly

UI について ui

UI は以下の主なエリアに分かれています。

Experience Cloud ヘッダー experience-cloud-header

Experience Cloud ヘッダーは、常に画面の上部に表示されます。Experience Cloud 内の位置を示し、他の Experience Cloud アプリへの移動に役立つアンカーです。

Experience Manager experience-manager

ヘッダーの左側にある Adobe Experience Cloud リンクを選択して Experience Manager ソリューションのルートに移動し、Cloud Manager、Cloud Acceleration Manager およびソフトウェア配布といったツールにアクセスします。

組織 organization

現在ログインしている組織が表示されます。Adobe ID が複数の組織に関連付けられている場合、別の組織に切り替えるには、選択します。

ソリューション solutions

ソリューション切り替えボタンをタップまたはクリックすると、他の Experience Cloud ソリューションに素早くジャンプすることができます。

ヘルプ help

ヘルプアイコンを使用すると、学習リソースやサポートリソースに素早くアクセスできます。

通知 notifications

このアイコンには、現在割り当てられている未完了の通知の数を示すバッジが付きます。

ユーザープロパティ user-properties

ユーザー設定にアクセスするには、ユーザーを表すアイコンを選択します。ユーザー画像が設定されていない場合、アイコンがランダムに割り当てられます。

ユニバーサルエディターのツールバー universal-editor-toolbar

ユニバーサルエディターのツールバーは、常に画面の上部、Experience Cloud ヘッダーのすぐ下に表示されます。このツールを使用すると、別のページに素早くアクセスして編集したり、現在のページを公開したりできます。

「ホーム」ボタン home-button

「ホーム」ボタンをクリックすると、ユニバーサルエディターの開始ページに戻ります。

開始ページで、ユニバーサルエディターで編集するサイトの URL を入力できます。

ロケーションバー location-bar

ロケーションバーに、編集中のページのアドレスが表示されます。別のページを編集するには、選択してアドレスを入力します。

認証ヘッダーの設定 authentication-settings

ローカル開発目的でカスタム認証ヘッダーを設定する必要がある場合は、認証ヘッダー設定アイコンを選択します。

エミュレーターの設定 emulator

エミュレーションアイコンを選択して、ユニバーサルエディターによるページのレンダリング方法を定義します。

エミュレーションアイコンをタップまたはクリックすると、オプションが表示されます。

デフォルトでは、エディターはデスクトップレイアウトで開き、高さと幅はブラウザーで自動的に定義されます。

また、ユニバーサルエディター内でモバイルデバイスをエミュレートすることもできます。

プレビューモード preview-mode

プレビューモードでは、ページは、公開されたサービスで表示されるとおりに、エディターでレンダリングされます。これにより、コンテンツ作成者は、リンクをクリックするなどしてコンテンツ内を移動できます。

アプリのプレビューを開く open-app-preview

「アプリのプレビューを開く」アイコンを選択すると、現在編集中のページをエディターなしで独自のブラウザーで開いて、内容をプレビューできます。

公開 publish

「公開」ボタンを選択すると、コンテンツへの変更がライブで公開され、読者が使用できるようにになります。

その他のボタン additional-toolbar-buttons

ユニバーサルエディターは、カスタマイズ可能で拡張性の高いオーサリングエクスペリエンスを提供します。 ツールバーに追加のボタンが表示される場合は、ユニバーサルエディターが拡張されています。

エディター editor

エディターはウィンドウのほとんどを占め、そこにロケーションバーで指定したページがレンダリングされます。

エディターがプレビューモードの場合、コンテンツに移動し、リンクをたどることはできますが、コンテンツを編集することはできません。

プロパティパネル properties-rail

プロパティパネルは、エディターの右側に常に表示されます。モードに応じて、コンテンツ内で選択されたコンポーネントの詳細またはページコンテンツの階層を表示できます。

プロパティモード properties-mode

プロパティモードでは、パネルには、エディターで現在選択されているコンポーネントのプロパティが表示されます。これは、ページが読み込まれたときのプロパティパネルのデフォルトのモードです。

選択するコンポーネントのタイプに応じて、プロパティパネルに詳細を表示して変更できます。

表示や編集が可能な詳細が含まれていないコンポーネントもあります。

コンテンツツリーモード content-tree-mode

コンテンツツリーモードでは、パネルにページコンテンツの階層が表示されます。

コンテンツツリー内の項目を選択する場合、エディターはそのコンテンツまでスクロールして選択します。

編集 edit

編集時に、選択したコンポーネントのオプションがプロパティパネルに表示され、選択したコンポーネントを編集できます。選択したコンポーネントがコンテンツフラグメントの場合は、「編集」ボタンを選択することもできます。

「編集」ボタンをタップまたはクリックすると、新しいタブでコンテンツフラグメントエディターが開きます。これにより、コンテンツフラグメントエディターを最大限に活用して、関連するコンテンツフラグメントを編集できます。

ワークフローのニーズに応じて、コンテンツフラグメントをユニバーサルエディターで編集することも、コンテンツフラグメントエディターで直接編集することもできます。

追加 add

コンテンツツリーまたはエディターでコンテナコンポーネントを選択した場合は、プロパティパネルに「追加」オプションが表示されます。

「追加」ボタンをタップまたはクリックすると、使用できるコンポーネントのドロップダウンメニューが開き、選択したコンテナに を追加します。

削除 delete

コンテンツツリーまたはエディターでコンテナコンポーネント内のコンポーネントを選択すると、プロパティパネルに削除オプションが表示されます。

「削除」ボタンをタップまたはクリックすると はコンポーネントを削除します。

その他のボタン additional-properties-rail-buttons

ユニバーサルエディターは、カスタマイズ可能で拡張性の高いオーサリングエクスペリエンスを提供します。 プロパティパネルに追加のボタンが表示される場合は、ユニバーサルエディターが拡張されています。

次の手順 next-steps

ユニバーサルエディターへのアクセスと操作の方法がわかったので、次は ユニバーサルエディターを使用してコンテンツを作成する準備が整いました。