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

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

はじめに

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

これをおこなうために、ユニバーサルエディターを使用すると、コンテンツ作成者は直感的な UI を使用できます。この UI では、最小限のトレーニングで、単にコンテンツをジャンプして編集を開始できます。 このドキュメントでは、ユニバーサルエディターのオーサリングエクスペリエンスについて説明します。

アプリの準備

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

ログイン

アプリがユニバーサルエディターと連携するように実装されたら、ユニバーサルエディターにログインします。 ログインして は、ユニバーサルエディターにアクセスできます。

サインインしたら、編集するページの URL を ロケーションバー。 次のようなコンテンツの編集を開始できます。 テキストコンテンツ または メディアコンテンツ。

UI について

UI は 5 つの主な領域に分かれています。

• Experience Cloud ヘッダー
• ユニバーサルエディターのヘッダー
• モードレール
• エディター
• プロパティレール

Experience Cloud ヘッダー

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

Experience Manager

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

組織

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

ソリューション

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

ヘルプ

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

通知

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

ユーザープロパティ

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

ユニバーサルエディターのヘッダー

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

「ホーム」ボタン

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

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

ロケーションバー

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

認証ヘッダーの設定

認証シークレットを設定する必要がある場合は、認証ヘッダー設定アイコンを選択します。

エミュレーターの設定

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

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

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

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

• 向きを定義
• 幅と高さを定義する
• 向きを変更

アプリのプレビューを開く

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

公開

「公開」ボタンを選択して、読者が使用するコンテンツをライブに公開できるようにします。

モードレール

モードレールはホームボタンのすぐ下にあり、エディターの左側に常に表示されます。 異なる使用モード間でエディターを簡単に切り替えることができます。

プレビューモード

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

コンポーネントモード

コンポーネントモードでは、コンテンツ作成者はコンポーネントを選択して編集できます。以下に例を示します。

• プレーンテキストの編集 適切な場所に
• リッチテキストの編集 その場で、プロパティレールに表示される追加の書式設定オプションを使用します。
• メディアコンテンツの編集
• コンテンツフラグメントの編集

コンポーネントを選択すると、その内容の詳細が プロパティパネル。 コンテンツタイプに応じて、インプレースまたはプロパティパネルで編集できます。

エディター

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

• エディターが コンポーネントモード コンテンツは編集可能になりますが、リンクをたどることはできません。
• エディターが プレビューモード、 コンテンツに移動し、リンクをたどることはできますが、コンテンツを編集することはできません。

プロパティレール

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

プロパティモード

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

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

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

コンテンツツリーモード

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

コンテンツツリー内の項目を選択すると、そのコンテンツまでスクロールして選択します。

編集

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

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

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

追加

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

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

削除

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

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

コンテンツの編集

コンテンツの編集はシンプルで直感的です。In コンポーネントモード編集画面でコンテンツにマウスを合わせると、編集可能なコンテンツが青いボックスでハイライト表示されます。

選択したコンテンツに応じて、異なるインプレース編集オプションが設定されている場合や、 プロパティパネル。

プレーンテキストの編集

次の場所にいる場合： コンポーネントモード プレーンテキストコンポーネントを選択し、コンポーネントをダブルクリックまたはダブルタップして、その場でテキストを編集できます。

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

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

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

リッチテキストの編集

次の場所にいる場合： コンポーネントモード リッチテキストコンポーネントを選択し、コンポーネントをダブルクリックまたはダブルタップして、その場でテキストを編集できます。

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

また、プロパティパネルでは、テキストの書式設定オプションと詳細を使用できます。 変更は、フォーカスが編集されたフィールドをプロパティパネルに残すと、自動的に保存されます。

メディアの編集

次の場所にいる場合： コンポーネントモード 画像を選択すると、その詳細がプロパティパネルに表示されます。

を選択します。 置換 ボタンをクリックして、アセットライブラリ内の別の画像に置き換えます。

1. The アセットセレクター ウィンドウが開き、アセットを選択できます。
2. 「 」を選択して、新しいアセットを選択します。
3. 選択 選択 をクリックして、アセットが置き換えられたプロパティレールに戻ります。

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

コンテンツフラグメントの編集

次の場所にいる場合： コンポーネントモード をクリックし、 コンテンツフラグメント 詳細は、プロパティパネルで編集できます。

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

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

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

コンテンツフラグメントを コンテンツフラグメントエディター 代わりに、 編集ボタン 」をクリックします。

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

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

1. コンテンツツリーまたはエディターでコンテナコンポーネントを選択します。

2. 次に、プロパティパネルで追加アイコンを選択します。

   

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

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

1. コンテンツツリーまたはエディターでコンテナコンポーネントを選択します。

2. コンテナの山形アイコンを選択して、コンテンツツリーでコンテンツを展開します。

3. 次に、コンテンツツリーで、コンテナ内のコンポーネントを選択します。

4. プロパティパネルで削除アイコンを選択します。

   

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

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

1. コンテンツツリーまたはエディターでコンテナコンポーネントを選択します。

2. まだ コンテンツツリーモード それに切り替えます。

3. コンテナの山形アイコンを選択して、コンテンツツリーでコンテンツを展開します。

4. コンテナ内のコンポーネントの横にあるハンドルアイコンをドラッグすると、それらを並べ替えることができます。 コンポーネントをドラッグして、コンテナ内で並べ替えます。

   

5. ドラッグしたコンポーネントがコンポーネントツリー内でグレーに変わり、挿入ポイントは青い線で表されます。 コンポーネントを解放して、新しい場所に配置します。

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

コンテンツのプレビュー

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

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

その他のリソース

ユニバーサルエディターの詳細については、次のドキュメントを参照してください。

• ユニバーサルエディターの概要 - ユニバーサルエディターを使用して、優れたエクスペリエンスを提供し、コンテンツベロシティを向上させ、最新のデベロッパーエクスペリエンスを提供するために、あらゆる実装、あらゆるコンテンツ、あらゆる側面の編集を可能にする方法を説明します。
• ユニバーサルエディターを使用したコンテンツの公開 — ユニバーサルエディターでコンテンツを公開する方法と、アプリで公開されたコンテンツを処理する方法を説明します。
• AEM のユニバーサルエディターの概要 - ユニバーサルエディターへのアクセス権を取得する方法と、これを使用するために最初の AEM アプリのインストルメントを開始する方法について説明します。
• ユニバーサルエディターのアーキテクチャ - ユニバーサルエディターのアーキテクチャと、そのサービスとレイヤー間でのデータのフローについて説明します。
• 属性とタイプ - ユニバーサルエディターで必要なデータ属性とデータ型について説明します。
• ユニバーサルエディターの認証 - ユニバーサルエディターの認証方法について説明します。