ページエディターのサイドパネル side-panel

AEM サイトエディターのサイドパネルを使用して、ページにコンポーネントやアセットを追加する方法を説明します。

サイドパネルモード modes

ページエディターのツールバーにある「サイドパネルを切り替え」アイコンをタップまたはクリックすると、ページエディター内でサイドパネルに常にアクセスできます。

サイドパネルを開くと、パネルは左側からスライドして開き、次の 3 つの重要なタブから選択できます。

コンポーネントブラウザー components-browser

コンポーネントは、AEM ページエディターでコンテンツを作成するために使用される構築ブロックです。コンテンツページを作成するには、ページ上に複数のコンポーネントを配置し、そのオプションを設定します。

コンポーネントブラウザーには、現在のページで使用可能なすべてのコンポーネントが表示されます。これらのコンポーネントを適切な場所にドラッグして編集することで、コンテンツを追加できます。

サイドパネルの「コンポーネント」タブをタップまたはクリックして、コンポーネント ​ブラウザーにアクセスします。

実際の外観や処理は、使用しているデバイスの種類によって異なります。

モバイルデバイス mobile-device-components-browser

モバイルデバイスでコンポーネントブラウザーを開くと、編集中のページ全体が表示されます。

ページにコンポーネントを追加するには、コンポーネントを選択してドラッグし、右側に移動します。コンポーネントブラウザーが閉じて、コンポーネントを配置できるページが再度表示されます。

デスクトップデバイス desktop-device-components-browser

デスクトップデバイスでコンポーネントブラウザーを開くと、ウィンドウの左側に表示されます。

ページにコンポーネントを追加するには、目的のコンポーネントをクリックして、必要な位置までドラッグします。

コンポーネントブラウザーの使用 using-component-browser

コンポーネント ​ブラウザー内のコンポーネントは、次のように表されます。

コンポーネント ​ブラウザーの上部のツールバーでは、次の操作を実行できます。

コンポーネントについて詳しくは、コンポーネント ​ブラウザー内のコンポーネントの横にある情報アイコンを選択してください（使用可能な場合）。例えば、コンテンツフラグメント ​の場合は、次のようになります。

使用可能なコンポーネントについて詳しくは、コンポーネントコンソールを参照してください。

アセットブラウザー assets-browser

アセット ​ブラウザーには、現在のページで直接使用可能なすべてのアセットが表示されます。

サイドパネルの「Assets」タブをタップまたはクリックし、アセットを参照します。

必要に応じて、スクロールしながらアセットのリストを展開するには、無限スクロールを使用します。

実際の表示方法や処理は、使用しているデバイスの種類によって異なります。

モバイルデバイス mobile-device-assets-browser

モバイルデバイスでアセットブラウザーを開くと、編集中のページ全体が表示されます。

ページにアセットを追加するには、必要なアセットを選択してドラッグし、右側に移動します。アセットブラウザーが閉じてページが再び表示されると、必要なコンポーネントにアセットを追加できます。

デスクトップデバイス desktop-device-assets-browser

デスクトップデバイスでアセットブラウザーを開くと、ウィンドウの左側に開きます。

ページにアセットを追加するには、必要なアセットを選択して、必要なコンポーネントまたは場所までドラッグします。

アセットブラウザーの使用 using-assets-browser

ページにアセットを追加するには、アセットを選択して必要な場所までドラッグします。次のことが考えられます。

アセットブラウザーの上部のツールバーでは、アセットを次の項目でフィルタリングできます。

アセットをすばやく変更する必要がある場合は、アセット名の横にある編集アイコンをクリックして、アセットブラウザーから直接アセットエディターを開始できます。

コンテンツツリー content-tree

コンテンツツリー ​では、ページ上のすべてのコンポーネントの概要が階層形式で表示されるので、ページの構成を一目で確認できます。

「コンテンツツリー」タブをタップまたはクリックし、コンテンツツリーにアクセスします。

このタブを開くと、ページやテンプレートがツリー形式で表示されるので、コンテンツの階層構造を理解しやすくなります。さらに、複雑なページでは、ページのコンポーネント間を簡単にジャンプできるようになります。

ページは同じタイプの多数のコンポーネントで簡単に構成できます。コンテンツツリーには、コンポーネントタイプの名前（黒色）の後に説明テキスト（グレー）が表示されます。説明テキストは、コンポーネントの一般的なプロパティ（タイトルやテキストなど）から得られます。

コンポーネントタイプがユーザーの言語で表示されるのに対して、コンポーネントの説明テキストはページの言語で表示されます。

コンポーネントの横にある山形をクリックすると、そのレベルが折りたたまれたり展開されたりします。

コンポーネントをクリックすると、ページエディターでそのコンポーネントがハイライト表示されます。使用可能なアクションは、ページの状態によって異なります。次に例を示します。

基本ページ basic-page

基本ページのコンポーネントには通常のオプションがあります。

ツリー内でクリックしたコンポーネントが編集可能な場合は、レンチアイコンが名前の右側に表示されます。このアイコンをクリックすると、コンポーネントの編集ダイアログボックスが開始されます。

ライブコピー live-copy

コンポーネントが別のページから継承されているライブコピーの一部のページには、異なるオプションが表示されます。

関連コンテンツブラウザー associated-content-browser

ページにコンテンツフラグメントが含まれている場合、関連コンテンツのブラウザーにもアクセスできます。