ユニバーサルエディターへのアクセスと操作 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 Platformの上部ナビゲーションバー experience-cloud-header

Experience Platformの上部ナビゲーションバーは、常に画面の上部に表示されます。 Experience Cloud 内の位置を示し、他の Experience Cloud アプリへの移動に役立つアンカーです。

Experience Platformの上部ナビゲーションバーについて詳しくは、Adobe Experience Platform UI ガイドを参照してください ​

アカウント user-properties

アカウントアイコンをタップまたはクリックすると、ユーザー設定を含むメニューが開きます。

ユニバーサルエディターの場合、見出し 製品設定 の下に、ユニバーサルエディターの現在の実稼動バージョンと今後のプレビューバージョンを切り替えるオプションがあります。

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

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

プログラムの設定に応じて、管理者によって拡張機能として有効にされた追加機能も表示される場合があります。

「ホーム」ボタン home-button

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

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

「クイックリンク」セクションにはヘルプリソースが表示され、「最近使用したもの」セクションにはユニバーサルエディターで最近開いたページへのリンクが表示されます。

ロケーションバー location-bar

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

取り消しとやり直し undo-redo

エディターで最後に行った編集を取り消すまたはやり直すには、「取り消し」ボタンまたは「やり直し」ボタンを選択します。詳しくは、ユニバーサルエディターを使用したコンテンツのオーサリングドキュメントを参照してください。

認証ヘッダー authentication-settings

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

ローカル開発者ログイン local-developer-login

​ ローカルで開発する場合 ​、ローカルのAEM SDKを簡単に認証する必要がある場合は、「ローカル開発者ログイン」アイコンを選択します。

レスポンシブモード emulator

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

レスポンシブモードアイコンをタップまたはクリックすると、オプションが表示されます。

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

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

プレビュー preview-mode

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

ページを開く open-page

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

公開 publish

「公開」ボタンを選択すると、コンテンツへの変更を消費者が利用できるようライブに公開したり、レビュー用にプレビュー環境に公開したりできます。

省略記号 ellipsis

省略記号ボタンを使用すると、その他の標準オプションにアクセスできます。

例えば、ページを非公開にする機能（つまり、「公開」ボタンのアクションを元に戻す）には、省略記号ボタンからアクセスできます。

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

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

エディター editor

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

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

プロパティパネル properties-rail

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

プログラムの設定に応じて、管理者によって拡張機能として有効にされた追加機能も表示される場合があります。

プロパティモード properties-mode

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

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

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

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

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

CF エディターで開く edit

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

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

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

追加 add

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

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

複製 duplicate

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

「複製」ボタンをタップまたはクリックすると、選択したコンポーネントが複製されます。

削除 delete

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

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

コピー＆ぺースト copy-paste

コンテナ内にあるコンポーネントをコピー＆ペーストできます。

詳しくは、ユニバーサルエディターを使用したコンテンツのオーサリングドキュメントを参照してください。

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

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

次の手順 next-steps

ユニバーサルエディターにアクセスして操作する方法について理解したので、これを使用してコンテンツを作成する準備が整いました。