ユニバーサルエディターを使用したコンテンツのオーサリング authoring

コンテンツ作成者がユニバーサルエディターを使用してコンテンツを作成する際に、簡単で直感的な方法を説明します。

はじめに 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

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

エディター editor

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

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

プロパティパネル properties-rail

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

プロパティモード properties-mode

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

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

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

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

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

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

編集 edit

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

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

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

追加 add

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

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

削除 delete

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

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

コンテンツの編集 editing-content

コンテンツの編集はシンプルで直感的です。エディターでコンテンツにマウスカーソルを重ねると、編集可能なコンテンツが青いボックスでハイライト表示されます。

選択したコンテンツに応じて、異なるインプレース編集オプションが設定されている場合や、プロパティパネルにコンテンツの追加情報やオプションが表示される場合があります。

プレーンテキストの編集 edit-plain-text

コンポーネントをダブルクリックまたはダブルタップすると、その場でテキストを編集できます。

Enter キーまたは Return キーを押すか、テキストボックスの外側を選択して、変更を保存します。

テキストコンポーネントを選択すると、その詳細がプロパティパネルに表示されます。パネル内のテキストを編集することもできます。

また、テキストの詳細はプロパティパネルで確認できます。フォーカスがプロパティパネルの編集されたフィールドを離れると、変更は自動的に保存されます。

リッチテキストの編集 edit-rich-text

コンポーネントをダブルクリックまたはダブルタップすると、その場でテキストを編集できます。

利便性のために、テキストの書式設定オプションと詳細は、2 か所で利用できます。

フォーカスが編集されたフィールドを離れると、変更は自動的に保存されます。

メディアの編集 edit-media

詳細は、プロパティパネルで確認できます。

変更はコンテンツに自動的に保存されます。

コンテンツフラグメントの編集 edit-content-fragment

コンテンツフラグメントを選択した場合、詳細は、プロパティパネルで編集できます。

選択したコンテンツフラグメントのコンテンツモデルで定義されたフィールドが、プロパティパネルに表示され編集可能になります。

コンテンツフラグメントに関連するフィールドを選択した場合、コンポーネントパネルにコンテンツフラグメントが読み込まれ、フィールドが自動的にスクロールされます。

フォーカスがプロパティパネルの編集されたフィールドを離れると、変更は自動的に保存されます。

代わりにコンテンツフラグメントをコンテンツフラグメントエディターで編集する場合、モードパネルの「編集ボタン」をクリックします。

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

コンテナへのコンポーネントの追加 adding-components

コンポーネントがコンテナに挿入され、エディターで編集できます。

コンテナからのコンポーネントの削除 deleting-components

選択したコンポーネントが削除されました。

コンテナ内のコンポーネントの並べ替え reordering-components

コンポーネントは、コンテンツツリーおよびエディターの両方で並べ替えられます

コンテンツのプレビュー previewing-content

コンテンツの編集が完了したら、他のページのコンテンツでコンテンツがどのように表示されるかを確認するためにコンテンツ内を移動したい場合がよくあります。プレビューモードでリンクをクリックして、読者と同じようにコンテンツ内を移動できます。コンテンツは、公開されるときと同じように、エディターでレンダリングされます。

プレビューモードでは、コンテンツをタップまたはクリックすると、コンテンツの読者に対するように反応します。編集するコンテンツを選択する場合は、プレビューモードから切り替えます。

その他のリソース additional-resources

ユニバーサルエディターを使用してコンテンツを公開する方法については、このドキュメントを参照してください。

ユニバーサルエディターの技術的な詳細について詳しくは、次の開発者向けドキュメントを参照してください。