オーサリング環境とツール

AEM のオーサリング環境は、コンテンツを編成および編集するための様々なメカニズムを提供しています. 提供されるツールには、様々なコンソールおよびページエディターからアクセスします。

サイトの管理

Sites コンソールでは、ヘッダーバー、ツールバー、アクションアイコン(選択されたリソースに対して適用)、パンくず、選択時のセカンダリレール(例:タイムラインや参照)を使用して Web サイト内を移動および管理できます。

例えば、列表示では次のようになります。

列表示

ページのコンテンツの編集

ページエディターでページを編集できます。 次に例を示します。

http://<host>:<port>/editor.html/content/wknd/en/sports/la-skateparks.html

ページエディター

メモ

初めてページを開いて編集する際に、一連のスライドで機能に関するツアーが表示されます。

必要がない場合は、このツアーをスキップすることができます。このツアーは、ページ情報​メニューからいつでも表示できます。

ヘルプへのアクセス

ページの編集中、ヘルプ​には次の場所からアクセスできます。

  • ページ情報​セレクター。(エディターに初めてアクセスしたときに表示される)紹介用のスライドが表示されます。
  • 特定のコンポーネントの設定ダイアログ(ダイアログツールバーの「?」アイコンを使用)。コンテキスト依存のヘルプが表示されます。

それ以外のヘルプ関連リソースは、コンソールから表示できます

コンポーネントブラウザー

コンポーネントは AEM コンテンツの構成要素です。AEM でコンテンツページを作成するには、ページ上に複数のコンポーネントを配置し、そのオプションを設定します。

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

コンポーネントブラウザーはサイドパネル内のタブです(アセットブラウザーコンテンツツリーも同じ場所にあります)。サイドパネルを開く(または閉じる)には、ツールバーの左上にある次のアイコンを使用します。

サイドパネルの切り替え

サイドパネルを開く際、パネルは左側からスライドして開きます ( コンポーネント タブ(必要に応じて)をクリックします。 開いたら、ページで使用可能なすべてのコンポーネントを閲覧できます。

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

  • モバイルデバイス(例:iPad)

    コンポーネントブラウザーは、編集中のページを完全にカバーします。

    ページにコンポーネントを追加する場合は、必要なコンポーネントをタッチ&ホールドして右側に移動すると、コンポーネントブラウザーが閉じてページが再度表示され、コンポーネントの配置先になります。

    モバイル版のコンポーネントブラウザー

  • デスクトップデバイス

    ウィンドウの左側にコンポーネントブラウザが開きます。

    ページにコンポーネントを追加するには、必要なコンポーネントをクリックし、必要な場所にドラッグします。

    デスクトップデバイス上のコンポーネントブラウザー

    コンポーネントは、

    • コンポーネント名
    • コンポーネントグループ(グレー)
    • アイコンまたは省略形
      • 標準コンポーネントのアイコンはモノクロです。
      • 略語は常にコンポーネント名の最初の 2 文字です。

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

    • コンポーネントを名前でフィルターします。
    • ドロップダウンから選択して特定のグループのみを表示します。

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

    コンポーネントブラウザーに表示される情報

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

メモ

モバイルデバイスは、幅が 1,024 px 未満の場合に検出されます。 これは、小さなデスクトップウィンドウの場合にも該当します。

アセットブラウザー

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

アセットブラウザーはサイドパネル内のタブであり、コンポーネントブラウザーコンテンツツリーも同じ場所にあります。サイドパネルを開く(または閉じる)には、ツールバーの左上にある次のアイコンを使用します。

サイドパネルの切り替え

サイドパネルを開く際、パネルは(左側から)スライドして開きます。必要に応じて「アセット」タブを選択します。

アセットブラウザーボタン

アセットブラウザーが開いている場合は、ページで使用可能なすべてのアセットを参照できます。 必要に応じて、無限スクロールを使用してリストを展開します。

アセットブラウザー

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

  • 適切なタイプの既存のコンポーネント。
    • 例えば、画像タイプのアセットを画像コンポーネントにドラッグできます。
  • 適切なタイプの新しいコンポーネントを作成するための段落システム内のプレースホルダー
    • 例えば、画像タイプのアセットを段落システムにドラッグして画像コンポーネントを作成できます。
メモ

これは、特定のアセットおよびコンポーネントタイプで使用できます。 詳しくは、 アセットブラウザーを使用したコンポーネントの挿入 を参照してください。

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

  • 名前
  • パス
  • アセットタイプ(画像、ビデオ、ドキュメント、段落、コンテンツフラグメント、エクスペリエンスフラグメントなど)
  • アセットの特性(向きやスタイルなど)
    • 特定のアセットタイプに対してのみ使用可能

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

  • モバイルデバイス

    アセットブラウザーは、編集中のページの上に完全に表示されます。

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

    モバイル版のアセットブラウザー

  • デスクトップデバイス

    アセットブラウザーがウィンドウの左側に開きます。

    ページにアセットを追加するには、目的のアセットをクリックし、必要なコンポーネントまたは場所にドラッグします。

    デスクトップ版のアセットブラウザー

メモ

モバイルデバイスは、幅が 1,024 px 未満の場合に検出されます。つまり、画面の小さいデスクトップも検出されます。

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

アセット編集ボタン

コンテンツツリー

この コンテンツツリー では、ページ上のすべてのコンポーネントの概要を階層で表示し、ページの構成を一目で確認できます。

コンテンツツリーはサイドパネル内のタブです(コンポーネントとアセットブラウザーも同じ場所にあります)。 サイドパネルを開く(または閉じる)には、ツールバーの左上にある次のアイコンを使用します。

コンテンツツリーボタン

サイドパネルを開く際、パネルは(左側から)スライドして開きます。必要に応じて「コンテンツツリー」タブを選択します。開くと、ページやテンプレートのツリービュー表示が表示され、コンテンツが階層的にどのように構造化されているかを理解しやすくなります。 さらに、複雑なページでは、ページのコンポーネント間をジャンプしやすくなります。

コンテンツツリー

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

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

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

山形アイコンを使用したコンテンツツリーの展開

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

  • 基本ページの例を以下に示します。

    強調表示されたコンテンツツリー

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

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

    コンテンツツリー編集ボタン

  • または、ライブコピーの一部を構成するページが開かれます。ここではコンポーネントが別のページから継承されます。

メモ

ページをモバイルデバイス(ブラウザーの幅が 1,024 px より小さい場合)で編集している場合、コンテンツツリーは表示されません。

フラグメント - 関連コンテンツブラウザー

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

参照

参照 選択したページへの接続を表示します。

  • ブループリント
  • ローンチ
  • ライブコピー
  • 言語コピー
  • 被リンク
  • 参照コンポーネントの使用:借りたコンテンツと貸したコンテンツ

必要なコンソールを開いたら、必要なリソースに移動し、次を使用して「参照」を開きます。

参照オプション

必要なリソースを選択し、そのリソースに関連する参照タイプのリストを表示します。

参照の詳細

詳細は、適切な参照タイプを選択してください。 特定の状況では、特定の参照を選択すると、次のような追加のアクションを使用できます。

  • 被リンク(当該ページを参照するページのリストと、特定のリンクを選択したときにそれらのページのいずれかを​編集​できる直接アクセスを提供)
  • 参照​コンポーネントを使用した借りたコンテンツおよび貸したコンテンツのインスタンス(ここから参照元/参照先ページに移動可能)
  • ローンチ(関連するローンチへのアクセスを提供)
  • ライブコピー(選択したリソースに基づくすべてのライブコピーのパスを表示)
  • ブループリント(詳細と各種アクションを提供)
  • 言語コピー(詳細と各種アクションを提供)

イベント - タイムライン

適切なリソース(例:Sites コンソールからのページ、アセット​コンソールからのアセット)では、タイムラインを使用して、選択した項目に対する最近のアクティビティを表示できます

必要なコンソールを開いたら、必要なリソースに移動し、次を使用して「タイムライン」を開きます。

タイムラインオプション

必要なリソースを選択し、「すべて表示」または「アクティビティ」を選択すると、選択したリソースに対する最近のアクションが一覧表示されます。

タイムラインの詳細

ページ情報

ページ情報(イコライザーアイコン)をクリックするとメニューが開き、最後の編集および最後の公開に関する詳細も表示されます。ページ、そのページのサイト、使用しているインスタンスの特性に応じて、使用できるオプションの数は異なります。

ページ情報オプション

該当する場合、ページ情報​から分析や推奨を確認することもできます。

ページモード

ページの編集時には様々なモードがあり、異なるアクションを行うことができます。

  • 編集 — ページコンテンツの編集時に使用するモード。
  • レイアウト - デバイスに応じたレスポンシブレイアウトを作成および編集できます(ページがレイアウトコンテナに基づいている場合)
  • ターゲット設定 — すべてのチャネルでターゲティングと測定をおこない、コンテンツの関連性を高めます。
  • タイムワープ :特定の時点のページの状態を表示できます。
  • ライブコピーステータス — ライブコピーのステータスと継承される(または継承されない)コンポーネントの概要をすばやく確認できます。
  • 開発者モード
  • プレビュー - パブリッシュ環境とまったく同じ形式でページを表示する、またはコンテンツ内のリンクを使用して移動するために使用します。
  • 注釈 - ページで注釈の追加または表示を行う場合に使用するモード。

これらのモードには右上のアイコンを使用してアクセスできます。実際のアイコンは、現在利用中のモードに合わせて変化します。

ページモード

メモ
  • ページの特性によっては、一部のモードを使用できない場合があります。
  • 一部のモードにアクセスするには、適切な権限または特権が必要です。
  • モバイルデバイスでは、スペースが制限されているので、開発者モードを使用できません。
  • キーボードショートカットCtrl-Shift-M)で、プレビュー​と、現在選択されているモード(編集モードレイアウトモード​など)を切り替えることができます。

パスの選択

オーサリング時に、別のリソースを選択する必要が生じる場合がよくあります(別のページまたはリソースへのリンクを定義する場合、画像を選択する場合など)。パスを簡単に選択するには、次の手順に従います。 パスフィールド オファーのオートコンプリートと パスブラウザー では、より堅牢な選択が可能です。

パスフィールド

ここで例として使用する例は、画像コンポーネントです。 コンポーネントの使用と編集について詳しくは、 ページオーサリング用コンポーネント.

パスフィールドには、オートコンプリート機能とルックアヘッド機能があり、リソースを見つけやすくなりました。

パスフィールドで「選択ダイアログを開く」ボタンをクリックすると、パスブラウザーダイアログが開き、より詳細な選択オプションが表示されます。

「選択ダイアログを開く」ボタン

または、パスフィールドで入力を開始すると、入力した内容と一致するパスが表示されます。

「選択ダイアログを開く」ボタン

パスブラウザー

パスブラウザーは、サイトコンソールの列表示のように整理されており、リソースをより詳細に選択できます。

パスブラウザー

  • リソースを選択すると、 選択 ボタンがアクティブになります。 クリックまたはタップして選択を確定するか、 キャンセル を中止します。

  • コンテキストで複数のリソースを選択できる場合、リソースを選択すると「選択」ボタンがアクティブ化され、選択したリソースの数がウィンドウの右上に表示されます。すべての選択を解除するには、数字の横にある X をクリックします。

  • ツリー内を移動すると、ダイアログの上部にあるパンくずリストに場所が反映されます。 これらのパンくずリストは、リソース階層内をすばやくジャンプするためにも使用できます。

  • ダイアログの上部にある検索フィールドは、いつでも使用できます。 次をクリック: X をクリックして、検索をクリアします。

  • 検索を絞り込むには、フィルターオプションを表示して、特定のパスに基づいて結果をフィルターできます。

    フィルターオプション

キーボードショートカット

様々なキーボードショートカットを利用できます。

このページ