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

最終更新日: 2023-12-05

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

はじめに

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

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

ヒント

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

メモ

ユニバーサルエディターはまだ開発中です。 現在は、すべてのコンテンツタイプを編集できません。

アプリの準備

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

ヒント

ユニバーサルエディターと連携する AEM アプリの設定方法の例は、AEM でのユニバーサルエディターの概要ドキュメントを参照してください。

ログイン

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

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

UI について

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

ユニバーサルエディター UI

Experience Cloud ヘッダー

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

Experience Cloud ヘッダー

Experience Manager

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

グローバルナビゲーションボタン

組織

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

組織インジケーター

ソリューション

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

ソリューションスイッチャー

ヘルプ

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

ヘルプ

通知

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

通知

ユーザープロパティ

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

ユーザープロパティ

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

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

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

「ホーム」ボタン

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

ハンバーガーメニュー

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

開始ページ

メモ

ユニバーサルエディターで編集するページは、次の条件を満たす必要があります。 ユニバーサルエディタをサポートするために実装されました。

ロケーションバー

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

ロケーションバー

ヒント

ホットキー L を使用して、アドレスバーを開きます。

メモ

ユニバーサルエディターで編集するページは、次の条件を満たす必要があります。 ユニバーサルエディタをサポートするために実装されました。

認証ヘッダーの設定

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

認証ヘッダー設定ボタン

エミュレーターの設定

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

エミュレーターアイコン

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

エミュレーションオプション

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

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

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

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

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

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

ヒント

ホットキーを使用 O (「O」) をクリックして、アプリのプレビューを開きます。

公開

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

「公開」ボタン

ヒント

ドキュメントを見る ユニバーサルエディターを使用したコンテンツの公開 を参照してください。

モードレール

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

モードレール

プレビューモード

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

プレビューモード

ヒント

ホットキー P を使用してプレビューモードに切り替えます。

コンポーネントモード

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

コンポーネントモード

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

ヒント

ホットキーを使用 C をクリックして、コンポーネントモードに切り替えます。

エディター

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

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

編集者

プロパティレール

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

プロパティレール

プロパティモード

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

プロパティモード

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

コンポーネントの詳細

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

ヒント

ホットキーを使用 D をクリックして、プロパティモードに切り替えます。

コンテンツツリーモード

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

コンテンツツリーモード

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

コンテンツツリー

ヒント

ホットキーを使用 F コンテンツツリーモードに切り替えます。

編集

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

編集アイコン

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

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

ヒント

ホットキーを使用 E 選択したコンポーネントを編集します。

追加

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

追加アイコン

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

コンテキストメニューを追加

ヒント

ホットキーを使用 A をクリックして、選択したコンテナコンポーネントにコンポーネントを追加します。

削除

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

削除アイコン

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

ヒント

ホットキーを使用 Shift+Backspace をクリックして、選択したコンポーネントをコンテナから削除します。

コンテンツの編集

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

編集可能コンテンツが青いボックスでハイライト表示される

ヒント

コンポーネントモードでは、コンテンツをタップまたはクリックすると、編集対象として選択されます。 リンクをたどってコンテンツを移動する場合は、 プレビューモード。

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

プレーンテキストの編集

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

コンテンツの編集

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

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

プロパティレールでのテキストの編集

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

リッチテキストの編集

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

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

リッチテキストコンポーネントの編集

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

メディアの編集

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

メディアの編集

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

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

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

ヒント

ホットキーを使用 R をクリックして、選択した画像を置き換えるアセットセレクターを開きます。

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

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

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

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

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

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

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

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

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

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

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

    コンテナに追加するコンポーネントの選択

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

ヒント

ホットキーを使用 A をクリックして、選択したコンテナにコンポーネントを追加します。

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

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

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

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

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

    コンポーネントの削除

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

ヒント

ホットキーを使用 Shift+Backspace をクリックして、選択したコンポーネントをコンテナから削除します。

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

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

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

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

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

    コンポーネントの並べ替え

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

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

コンテンツのプレビュー

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

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

その他のリソース

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

このページ