ページオーサリング用コンポーネント components-for-page-authoring

次のコンポーネントは、標準の web ページ用のコンテンツをオーサリングする際に使用することを目的としています。 コンポーネントは、AEM の標準インストールですぐに使用できるコンポーネントのサブセットを形成します。

サイドキックからすぐに使用できるものもあれば、デザインモードで有効と無効を切り替えることで使用できるものもあります。

CAUTION
ここでは、標準の AEM インストールでそのまま使用できるコンポーネントについてのみ説明します。
インスタンスによっては、要件に合わせて明示的に開発されたカスタムコンポーネントが存在する場合があります。 これらのカスタムコンポーネントは、ここで説明するいくつかのコンポーネントと名前が同じ場合があります。

コンポーネントは、サイドキックの「コンポーネント」タブと「新規コンポーネントを挿入」セレクターでページを編集するときに(「コンポーネントまたはアセットをここにドラッグ」領域でダブルクリックしたとき)使用できます。

コンポーネントを選択してページ上の必要な場所にドラッグしてから、コンテンツとプロパティを編集します。

コンポーネントは、次のような様々なカテゴリ(コンポーネントグループ)に従って並べ替えられます(ページオーサリング用)。

  • 一般:テキスト、画像、テーブル、グラフなどの基本的なコンポーネントが含まれます。
  • 列:コンテンツのレイアウトの設定に必要なコンポーネントが含まれます。
  • フォーム:フォームの作成に必要なすべてのコンポーネントが含まれます。

一般 general

一般コンポーネントは、コンテンツの作成に使用する基本的なコンポーネントです。

アカウント項目 account-item

タイトルと説明を含むリンクを定義できます。

リンク

アダプティブ画像 adaptive-image

アダプティブ画像基盤コンポーネントは、web ページを開いたウィンドウに合うようにサイズが調整される画像を生成します。 このコンポーネントを使用するには、ファイルシステムか DAM のどちらかの画像リソースを指定します。 Web ページを開くと、現在のウィンドウに適したサイズに変更された画像のコピーが、web ブラウザーによってダウンロードされます。

ウィンドウのサイズは、次の特性によって決まります。

  • デバイス画面:モバイルデバイスは通常、web ページを画面全体に展開して表示します。
  • Web ブラウザーのウィンドウサイズ:ノート PCとデスクトップコンピューターのユーザーは、web ブラウザーのウィンドウサイズを変更できます。

例えば、このコンポーネントは、web ページがスマートフォンで開かれた場合には小さな画像を生成し、タブレットで開かれた場合には中程度のサイズの画像を生成します。 ノート PC では、最大化された web ブラウザーでページを開くと、コンポーネントは大きな画像を作成して提供します。 Web ブラウザーが画面の一部に合わせてサイズ変更されると、コンポーネントは小さな画像を提供することで適応し、表示を更新します。

サポートされている画像形式 supported-image-formats

アダプティブ画像コンポーネントでは、次のファイル名拡張子を持つ画像ファイルを使用できます。

  • .jpg
  • .jpeg
  • .png
  • .gif **
CAUTION
**アダプティブレンディション用のアニメーション .gif ファイルは AEM でサポートされていません。

画像のサイズと画質 images-sizes-and-quality

特定のビューポート幅に対して生成される画像の幅を次の表に示します。 生成される画像の高さは、一定の縦横比を保つように計算され、画像のエッジ内に空白は挿入されません。 空白の挿入を避けるために、切り抜きを使用できます。

JPEG 画像の場合は、ビューポートのサイズも JPEG の画質に影響します。 次の JPEG 画質になる可能性があります。

  • 低(0.42)
  • 中(0.82)
  • 高(1.00)
ビューポート幅の範囲(ピクセル)
画像の幅(ピクセル)
JPEG 画質
ターゲットデバイスタイプ
幅が 319 以下
320
低
幅が 320
320
中
携帯電話(縦)
幅が 320 より大きく 481 より小さい
480
中
携帯電話(横)
幅が 480 より大きく 769 より小さい
476
高
タブレット(縦置き)
幅が 768 より大きく 1025 より小さい
620
高
タブレット(横置き)
幅が 1025 以下
フル(元のサイズ)
高
デスクトップ

プロパティ properties

ダイアログを使用すると、アダプティブ画像コンポーネントのインスタンスのプロパティを編集できます。プロパティの多くは、基本となる画像コンポーネントと共通しています。 プロパティは、次の 2 つのタブで使用できます。

  • 画像

    • 画像
      コンテンツファインダーから画像をドラッグするか、クリックして参照ウィンドウを開き、画像を読み込むことができます。 画像を読み込んだ後、画像を切り抜いたり、回転したり、削除したりできます。 画像のズームインおよびズームアウトを行うには、画像の下(「OK」および「キャンセル」ボタンの上)のスライドバーを使用します。

    • トリミング
      画像の一部を切り抜くことができます。 境界線をドラッグすると、画像が切り抜かれます。

    • 回転
      「回転」を繰り返しクリックして、画像を必要に応じて回転させます。

    • クリア
      現在の画像を削除します。

  • アドバンス

    • タイトル
      アダプティブ画像コンポーネントでは、このプロパティは使用されません。

    • 代替テキスト
      画像に使用する代替テキスト。

    • リンク先
      アダプティブ画像コンポーネントでは、このプロパティは使用されません。

    • 説明
      アダプティブ画像コンポーネントでは、このプロパティは使用されません。

カルーセルコンポーネントを使用すると、個々のページに関連付けられている画像を次のように表示できます。

  • 一度に 1 つずつ
  • 短時間
  • 指定した順序で
  • 指定した遅延時間で

クリック可能なコントロールを使用して、リアルタイムで表示されるページをユーザーがオンデマンドで切り替えることもできます。 現在表示されているページ画像を選択すると、そのページに移動します。 つまり、カルーセルはナビゲーションコントロールとして機能します。

プロパティ properties-1

プロパティは次の 2 つのタブに表示されます。

  • カルーセル
    ここでは、カルーセルの操作方法を指定します。

    • 再生速度
      次のスライドが表示されるまでの時間(ミリ秒単位)。
    • 遷移時間
      2つのスライド間の移行の時間(ミリ秒単位)。
    • コントロールのスタイル
      プルダウンメニューから、様々なオプションを使用できます。例えば、「前/次ボタン」、「右上スイッチ」などです。
  • リスト
    ここでは、ページをカルーセルに含める方法を指定します。

    • を使用してリストを作成
      ページリストを作成するには、子ページ、固定リスト、検索または詳細検索の方法がいくつかあります(以下に説明します)。
      どの方法を選択しても、リストに含めるページには、ページに関連付けられた画像がそれぞれ既に含まれている必要があります。 カルーセルに表示されるのはこの画像です。 そのページのページプロパティにページの画像がない場合は、開始する前にページに画像を関連付ける必要があります。 そうでない場合は、カルーセルに空白のページが表示されます。 詳しくは、ページプロパティの編集を参照してください。
      選択した項目に応じて、新しいパネルが表示されます。

      • 子ページのオプション

        • 親ページ
          手動またはセレクターを使用してパスを指定します。 現在のページを親として使用するには、空のままにします。
      • 固定リストのオプション

        • ページ
          ページのリストを選択します。 エントリを追加するには + を、順序を調整するには上下ボタンを使用します。
      • 検索のオプション

        • で開始
          開始パスを手動またはセレクターを使用して入力します。

        • 検索クエリ
          プレーンテキスト検索クエリを入力することもできます。

      • 詳細検索のオプション

        • Querybuilder述語表記法
          Querybuilder述語表記法を使用して検索クエリを入力できます。 例えば、「fulltext=Marketing」と入力すると、コンテンツに「Marketing」を含むすべてのページがカルーセルに表示されます。
          クエリー式とその他の例の詳細は、QueryBuilder API を参照してください。
    • 並べ替え順
      ドロップダウンメニューからjcr:title、jcr:created、cq:lastModifiedまたはcq:templateを選択します。

    • 制限
      オプション。 カルーセルで使用する項目の最大数です。

NOTE
AEM DAM にあるデジタルアセットを表示する、Adobe Experience Manager のカスタムカルーセルコンポーネントを作成できます。

グラフ chart

グラフコンポーネントを使用すると、棒グラフ、折れ線グラフまたは円グラフを追加できます。 指定したデータから AEM によりグラフが作成されます。 「データ」タブに直接入力するか、スプレッドシートをコピー&ペーストしてデータを指定します。

  • データ

    • チャートデータ
      CSV形式を使用してチャートデータを入力します。コンマ区切り値形式では、フィールド区切り文字としてコンマ(“,”)が使用されます。
  • アドバンス

    • グラフの種類
      円グラフ、折れ線グラフ、棒グラフから選択します。

    • 代替テキスト
      グラフの代わりに表示されるテキスト。

    • 幅
      グラフの幅(ピクセル単位)。

    • 高
      グラフの高さ(ピクセル単位)。

グラフデータと結果の棒グラフの例は次のとおりです。

chlimage1-6 dcchartuse

コンテンツフラグメント content-fragment

CAUTION
コンテンツフラグメント管理のすべての機能は、タッチ操作向け UI でのみ使用できます。
クラシック UI のサイドキックにはコンテンツフラグメントコンポーネントが表示されますが、それ以上の機能は使用できません。

コンテンツフラグメントは、ページに依存しないアセットとして作成および管理されます。 その後、コンテンツページをオーサリングする際に、これらのフラグメントとそれらのバリエーションを使用できます。

デザインインポーター design-importer

デザインパッケージを含む zip ファイルをアップロードできます。

ダウンロード download

ダウンロードコンポーネントは、選択した web ページに、特定のファイルをダウンロードするためのリンクを作成します。 コンテンツファインダーからアセットをドラッグするか、ファイルをアップロードできます。

  • ダウンロード

    • 説明
      ダウンロードリンクと共に表示される簡単な説明。

    • ファイル
      ダウンロード可能なファイルが結果のweb ページに表示されます。 コンテンツファインダーからアセットをドラッグするか、ダウンロード可能にするファイルをアップロードできる領域を選択します。

Geometrixx でのダウンロードコンポーネントの例は次のとおりです。

dcdownloaduse

外部 web アプリケーション external

外部アプリケーション統合コンポーネント(External)を使用すると、iframe を使用して外部アプリケーションを AEM ページに埋め込むことができます。

  • 外部 web アプリケーション

    • 対象アプリケーション

      統合する web アプリケーションの URL を指定します。次に例を示します。

      code language-none
      https://en.wikipedia.org/wiki/Main_Page
      
    • パラメーターを渡す

      パラメーターをアプリケーションに渡す必要がある場合は、チェックボックスをオンにします。

    • 幅と高さ

      iframe のサイズを定義します。

外部アプリケーションは AEM ページの段落システムに統合されます。例えば、https://en.wikipedia.org/wiki/Main_Page の対象アプリケーションを使用している場合は、次のようになります。

chlimage1-7

NOTE
ユースケースに応じて、外部アプリケーションの統合に他のオプションを使用できます(例:ポートレットの統合)。

Flash flash

Flash コンポーネントを使用すると、Flash ムービーを読み込めます。 コンテンツファインダーからコンポーネントに Flash アセットをドラッグするか、ダイアログを使用します。

  • Flash

    • Flash ムービー

      Flash ムービーファイル。 コンテンツファインダーからアセットをドラッグするか、クリックして参照ウィンドウを開きます。

    • サイズ

      ムービーを保持する表示領域の寸法(ピクセル単位)。

  • 代替イメージ

    表示する代替画像。

  • 詳細

    • コンテキストメニュー

      コンテキストメニューを表示するか非表示にするかを示します。

    • ウィンドウモード

      不透明、透明、枠付きウィンドウなど、ウィンドウの表示方法。

    • 背景色

      提示される色見本から選択した背景色。

    • 最低バージョン

      ムービーの実行に必要な Adobe Flash Player の最小バージョン。 デフォルトは 9.0.0 です。

    • 属性

      その他の必要な属性。

画像 image

画像コンポーネントによって、指定したパラメーターに従って、画像とそれに付随するテキストが表示されます。

画像をアップロードした後に、編集および操作できます(切り抜き、回転、リンク/タイトル/テキストの追加など)。

画像は、コンテンツファインダーから直接コンポーネントまたはコンポーネントの編集ダイアログにドラッグアンドドロップできます。 また、編集ダイアログの中央領域をダブルクリックして、ローカルのファイルシステムを参照し、画像をアップロードすることもできます。 編集ダイアログの 2 つのタブでは、画像の定義および操作もすべて制御します。

dcimage

NOTE
Internet Explorer では、アップロードの進行状況を監視できません。
Internet Explorer を使用する場合、アップロードした画像ファイルをプレビューに表示して変更(切り抜きなど)を実行できるようにするには、画像をアップロードし「OK」をクリックしてから画像を再度開く必要があります。
AEM で使用される HTML5 の機能について詳しくは、認定プラットフォームを参照してください。

画像を読み込む際は、次の設定が可能です。

  • マップ

    画像をマップするには、「マップ」を選択します。 画像マップの作成方法(長方形、多角形など)を指定し、領域が指す位置を指定します。

  • 切り抜き

    「切り抜き」を選択すると、画像の一部をクリップできます。 マウスを使用して画像を切り抜きます。

  • 回転

    画像を回転するには、「回転」を選択します。 画像が目的の向きになるまで繰り返し使用します。

  • 消去

    現在の画像を削除します。

  • ズームバー

    画像のズームインおよびズームアウトを行うには、画像の下(「OK」および「キャンセル」ボタンの上)のスライドバーを使用します。

  • タイトル

    画像のタイトル。

  • 代替テキスト

    アクセシブルなコンテンツを作成する際に使用する代替テキスト。

  • リンク先

    web サイト内のアセットまたはその他のページへのリンクを作成します。

  • 説明

    画像の説明。

  • サイズ

    画像の高さと幅を設定します。

最終的な画像(タイトル​と​ 説明 ​を含む)は、次のように表示されます。

chlimage1-8

レイアウトコンテナ layout-container

CAUTION
レイアウトコンテナコンポーネントはクラシック UI で使用できますが、完全な機能はタッチ操作対応 UI でのみ使用できます。 詳しくは、レスポンシブレイアウトを参照してください。

リスト list

リストコンポーネントを使用すると、リストを表示するための検索条件を設定できます。

  • リスト

    • リストを選択

      ここで、リストがコンテンツを取得する場所を指定します。 複数の方法があります。

    • 選択した項目に応じて、新しいパネルが表示されます。

      • 子ページのオプション

        • (親ページ)の子
          手動で、またはセレクターを使用して、パスを指定します。 現在のページを親として使用するには、空のままにします。
      • 固定リストのオプション

        • ページ

          ページのリストを選択します。 エントリを追加するには + を、順序を調整するには上下ボタンを使用します。

      • 検索のオプション

        • 開始

          手動で、またはセレクターを使用して、開始パスを入力します。

        • 検索クエリー

          プレーンテキストの検索クエリーを入力できます。

      • 詳細検索のオプション

        • Querybuilder 述語の表記

          「QueryBuilder 述語の表記」を使用して検索クエリーを入力できます。 例えば、「fulltext=Marketing」と入力すると、コンテンツに「Marketing」を含むすべてのページがカルーセルに表示されます。

          クエリー式とその他の例の詳細は、QueryBuilder API を参照してください。

      • タグ

        親ページ、タグ/キーワード​および必要な一致条件を指定します。

    • 表示方法

      リンク、ティーザー、ニュースなどの項目のリストを表示する方法。

    • 並べ替え順

      リストを並べ替えるかどうかを指定し、並べ替える場合は、並べ替えに使用する条件も指定します。 条件を入力するか、表示されるドロップダウンリストから条件を選択できます。

    • 制限

      リストに表示する項目の最大数を指定します。

    • フィードを有効にする

      そのリストで RSS フィードを有効化するかどうかを示します。

    • 1 ページに表示する数

      一度に表示するリスト項目の数を指定できます。 指定した数より多い項目を含むリストは、ページネーションを使用して複数に分割して表示されます。

リスト​コンポーネントで子ページのリストがどのように表示されるかを次の例で示します(デザインは、サイトデザインのカスタム CSS 定義で制御されています)。

dclistuse

ログイン login

「ユーザー名」フィールドと「パスワード」フィールドを提供します。

chlimage1-9

次の項目を設定できます。

  • ログイン

    • セクションラベル

      入力フィールドの導入部テキスト。

    • ユーザー名ラベル

      ユーザー名フィールドにラベルを付けるテキスト。

    • パスワードラベル

      パスワードフィールドにラベルを付けるテキスト。

    • ログインボタンのラベル

      ログインボタンのテキスト。

    • リダイレクト先

      ユーザーがログインしたときに開く Web サイト上のページを指定できます。

  • ログイン済み

    • 続行ボタンのラベル

      ユーザーが既にログインしていることを示すテキスト。

注文ステータス order-status

  • タイトル

    • タイトル

      表示するタイトルテキストを指定します。

    • リンク

      どのページ(製品)の注文ステータスを表示するかを指定します。

    • 種類/サイズ

      用意された選択肢からを選択します。

chlimage1-10

参照 reference

参照​コンポーネントを使用すると、(現在のインスタンス内にある)AEM web サイトの別のページからテキストを参照できます。 参照された段落のコンテンツは、現在のページ上にあるかのように表示されます。 このコンテンツは、元の段落が変更されると更新されます(ページの更新が必要になる場合があります)。

  • 段落参照

    • 参照

      参照するページと段落のパスを指定します(コンテンツを含む)。

段落のパスを指定するには、ページのパスに次のような接尾辞を付ける必要があります。

.../jcr:content/par/<paragraph-ID>

例:

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par/similar-products

特定の段落を参照するほかに、パスを変更して、par-system 全体を指定することもできます。 パスに次の接尾辞を付けます。

/jcr:content/par

例:

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par

設定後、コンテンツは元のページと同じように表示されます。 参照であるということは、編集用にコンポーネントを開いた場合にのみ確認できます。

chlimage1-11

検索 searching

検索コンポーネントで、ページに検索機能を追加します。

次の項目を設定できます。

  • 検索

    • ノードタイプ

      検索を特定のノードタイプに制限する場合は、ここにリストします(例:cq:Page)。

    • 検索場所のパス

      検索するブランチのルートページを指定します。

    • 「検索」ボタンのテキスト

      実際の検索ボタンに表示する名前。

    • 統計テキスト

      検索結果の上に表示するテキスト。

    • 結果テキストがありません

      結果がない場合、ここに入力したテキストが表示されます。

    • テキストをスペルチェック

      誰かが類似の用語を入力すると、その用語の前にこのテキストが表示されます。
      例えば、Geometrixxe と入力すると、次のように表示されます。「もしかして: Geometrixx」

    • 同様のページテキスト

      類似のページの結果の横に表示されるテキスト。 画像の一部を切り取るには、このリンクをクリックします。

    • 関連する検索テキスト

      検索の横に表示される、関連する用語とトピックのためのテキスト。

    • 検索トレンドのテキスト

      ユーザーが入力する検索語の上のタイトル。

    • 結果ページラベル

      このリストの下部に表示するテキスト。他の結果ページへのリンクが設定されます。

    • 前のラベル

      前の検索ページへのリンクに表示される名前。

    • 次のラベル

      次の検索ページへのリンクに表示される名前。

次の例は、検索コンポーネントで標準インストールのルートディレクトリから geometrixx という単語を検索した後の状態を示しています。 結果のページネーションも示しています。

dcsearchuse

次に、スペルミスがあり使用できない検索語の例を示します。

dcsearchusenotfound

サイトマップ sitemap

自動的なサイトマップのリスト表示。デフォルト設定では、現在の web サイトのすべてのページが、アクティブリンクとして表示されます。 例えば、次のように表示されます。

dcsitemapuse

必要に応じて、次の項目を設定できます。

  • サイトマップ

    • ルートパス

      リストを開始する場所のパス。

スライドショー slideshow

このコンポーネントを使用すると、一連の画像を読み込んで、ページにスライドショーとして表示できます。 画像を追加または削除し、それぞれにタイトルを割り当てることができます。 「詳細」では、表示領域のサイズも指定できます。

次の項目を設定できます。

  • スライド

    • 新しいスライド

      「追加」(および「削除」)ボタンを使用して、スライドを選択して指定できます。

    • タイトル

      必要に応じてタイトルを指定します。 このタイトルは、該当するスライドに重ねて表示されます。

  • 詳細

    • サイズ

      幅と高さをピクセル単位で指定します。

その後、スライドショーコンポーネントは、各画像を順番に短時間表示したあと、次のスライドにフェードインするという処理を繰り返します。

dcslideshowuse

テーブル table

NOTE
テーブル​コンポーネントは、テキスト​コンポーネントと同様に、リッチテキストエディターをベースにしています。
テーブルには​ テーブル ​コンポーネントを使用することをお勧めしますが、テキスト​コンポーネントでも作成できます。

テーブル​コンポーネントは、テーブルの作成、入力および書式設定ができるように事前設定されています。 このダイアログを使用すると、テーブルを設定してコンテンツを最初から作成したり、Excel、OpenOffice、メモ帳などの外部エディターからスプレッドシートやテーブルをコピー&ペーストしたりできます。

dctable

次の画面ショットは、テーブルコンポーネントの例を示します。サイト専用の CSS でデザインを決定しています。

dctableuse

タグクラウド tag-cloud

タグクラウドは、web サイト内のコンテンツに適用されたタグの選択範囲をグラフィカルに表示します。

dctagclouduse

タグクラウドコンポーネントを設定する場合、次の情報を指定できます。

  • 表示する​タグ
    表示するタグが収集される場所。 ページ(すべての子またはすべてのタグを含むページ)から選択します。

  • ページ
    参照するページを選択します。

  • タグにリンクがありません
    表示されるタグがリンクとして機能するかどうかを確認します。

タグの適用について詳しくは、タグの使用を参照してください。

テキスト text

NOTE
テキスト​コンポーネントは、テーブル​コンポーネントと同様に、リッチテキストエディターをベースにしています。
テーブルには​ テーブル ​コンポーネントを使用することをお勧めしますが、テキスト​コンポーネントでも作成できます。

テキストコンポーネントを使用すると、リッチテキストエディターの機能を備えた WYSIWYG エディターでテキストブロックを入力することができます。 フォントの文字、配置、リンク、リスト、インデントなど、多様なアイコンでテキストの書式を設定できます。

dctext

編集​ダイアログの「スタイル」タブを開くと、以下を設定することもできます。

  • スペーサー
  • テキストスタイル

書式設定されたテキストがページに表示されます。 実際のデザインはサイトの CSS に応じて異なります。

dctextuse

テキストコンポーネントおよびリッチテキストエディターの機能について詳しくは、リッチテキストエディターのページを参照してください。

インプレース編集 inplace-editing

ダイアログベースのリッチテキスト編集モードに加えて、AEM には、ページのレイアウトに表示されたとおりにテキストを直接編集できる、インプレース編集も用意されています。

テキストと画像 text-image

テキストコンポーネントと画像コンポーネントは、テキストブロックと画像を追加します。 テキストと画像を個別に追加して編集することもできます。 詳しくは、テキストコンポーネントおよび画像コンポーネントを参照してください。

chlimage1-12 chlimage1-13

次の項目を設定できます。

  • コンポーネントスタイル(スタイル)

    ここで画像を左揃えまたは右揃えにすることができます。 デフォルトは、画像を左に配置する「左」です。

  • 画像のプロパティ(詳細画像プロパティ)

    次の項目を設定できます。

    • 画像アセット

      必要な画像をアップロードします。

    • タイトル

      ブロックのタイトル。 マウスオーバーで表示されます。

    • 代替テキスト

      画像を表示できない場合に表示する代替テキスト。 空にすると、タイトルが使用されます。

    • リンク先

      ターゲットパスを指定します。

    • 説明

      画像の説明。

    • サイズ

      画像の高さと幅を設定します。

次に、画像を左揃えに表示するテキスト画像コンポーネントの例を示します。

dctextimageuse

タイトル title

タイトルコンポーネントには次の機能があります。

  • 「タイトル」フィールドを空のままにして、現在のページ名を表示します。
  • 「タイトル」フィールドに指定したテキストを表示します。

次の項目を設定できます。

  • タイトル

    ページタイトル以外の名前を使用する場合は、ここに入力します。

  • リンク

    タイトルがリンクとして動作する場合の URI。

  • 種類/サイズ

    ドロップダウンリストから「小」または「大」を選択します。 「小」は画像として生成されます。 「大」はテキストとして生成されます。

次に、タイトル​コンポーネントを表示した例を示します。サイト固有の CSS でデザインを決定しています。

dctitleuse

ビデオ video

ビデオ​コンポーネントでは、定義済みの標準ビデオ要素をページに配置できます。

HTML5 要素と共に使用する場合は、ビデオプロファイルの設定も参照してください。

ページにコンポーネントのインスタンスを配置した後、次の設定を行うことができます。

  • ビデオ

    • ビデオアセット

      ビデオアセットをアップロードまたはドロップします。

    • サイズ

      ビデオのネイティブサイズ(ピクセル単位の幅 × 高さ)が「サイズ」の横のボックスに表示されます(上の図を参照してください)。 ビデオのネイティブ寸法を上書きする場合は、幅と高さの寸法をここに手動で入力します。 「OK」を選択してダイアログを閉じます。

NOTE
サポートされている形式は次のとおりです。
  • .mp4
  • Ogg
  • FLV (Flash ビデオ)

列 columns

列は、AEM のコンテンツのレイアウトを制御するメカニズムです。 標準インストールでは、2 列、3 列のいずれかまたは両方を作成するコンポーネントが提供されています。

次の例では、2 列と 3 列のコンポーネントが使用されています。 新しいコンポーネントのプレースホルダーを使用できます。

chlimage1-14

2 列 columns-1

デフォルトが 2 つの同じ列に設定されている列制御コンポーネント。

3 列 columns-2

デフォルトが 3 つの同じ列に設定されている列制御コンポーネント。

列の制御 column-control

列制御コンポーネントを使用すると、web ページのメインパネルのコンテンツを複数の列に分割する方法を選択できます。 ユーザーは、必要な列数を事前定義済みのリストから選択し、各列内でコンテンツを作成、削除または移動できます。

  • 列の制御

    • 列のレイアウト

      レンダリングする列数を選択します。 作成された各列には、コンテンツを追加する際にコンポーネントまたはアセットをドラッグするための独自のリンクが表示されます。

フォーム form

フォームコンポーネントを使用すると、訪問者が入力を送信するためのフォームを作成できます。 フォームとフォームコンポーネントを使用すると、顧客満足度アンケートなどのユーザーフィードバックや、ユーザー登録などのユーザー情報などを収集できます。

NOTE
AEM Forms について詳しくは、AEM Forms のヘルプを参照してください。

フォームは、次のように多様なコンポーネントから構成されます。

  • フォーム

    フォームコンポーネントで、ページ上の新しいフォームの始まりと終わりを定義します。 その他のコンポーネントは、これらの要素の間に配置できます(テーブル、ダウンロードなど)。

  • フォームのフィールドと要素

    フォームのフィールドと要素には、テキストボックス、ラジオボタン、画像を含めることができます。 多くの場合、ユーザーは、テキストの入力などのアクションをフォームフィールドで行います。 詳しくは、個々のフォーム要素を参照してください。

  • プロファイルコンポーネント

    プロファイルコンポーネントは、訪問者に合わせた個人設定が必要なソーシャルコラボレーションや他の領域に使用する訪問者のプロファイルに関連しています。

フォームの例を以下に示します。 これは、フォーム​コンポーネント(開始と終了)、入力に使用する 2 つの​ フォーム ​ テキスト ​フィールド、導入部のテキストに使用する 1 つの​ 一般 ​ テキスト ​フィールド、および「送信」ボタンで構成されています。

dcform

NOTE
フォームの開発およびカスタマイズについて詳しくは、フォームの開発のページを参照してください。 このフォームのカスタマイズには、アクションや制約の追加、フィールドのプリロード、スクリプトを使用したサービスのアクション実施の呼び出しなどが含まれます。

(多くの)フォームコンポーネントに共通の設定 settings-common-to-many-form-components

フォームコンポーネントはそれぞれ目的が異なりますが、多くは類似するオプションおよびパラメーターで構成されています。

どのフォームコンポーネントを設定する場合も、ダイアログ内の次のタブを使用できます。

  • タイトルとテキスト

    このタブでは、フォームのタイトルや付随するテキストなど、基本情報を指定する必要があります。 適切な場合は、フィールドで複数選択が有効かどうかや、選択肢に使用できる項目など、その他の主要な情報を定義することもできます。

  • 初期値

    デフォルト値を指定できます。

  • 制約

    ここでは、フィールドが必須かどうかを指定し、数値などの制約をそのフィールドに設定できます。

  • スタイル設定

    フィールドのサイズとスタイル設定を示します。

NOTE
表示されるフィールドは、個々のコンポーネントによって大きく異なります。

これらのタブには、必要なパラメーターが用意されています。 タブは、個々のコンポーネントタイプに応じて異なりますが、次のタブが含まれる場合があります。

  • タイトルとテキスト

    • 要素名

      フォーム要素の名前。 リポジトリ内でデータが格納される場所を示します。
      このフィールドは必須であり、次の文字のみを含めることができます。

      • 英数字
      • _ . / : -
    • タイトル

      フィールドと共に表示されるタイトル。 空白の場合、デフォルトのタイトルが表示されます。

    • 説明

      必要に応じて、ユーザーに追加情報を提供できます。 この説明はフォームのフィールドの下に、タイトルよりも小さいフォントで表示されます。

    • 表示/非表示

      フィールドを表示するタイミングを指定します。

  • 初期値

    • デフォルト値

      フォームを開いたときにフィールドに表示される値。 つまり、ユーザーが入力を行う前です。

  • 制約

    • 必須

      この制約はフォームコンポーネントの種類によって異なりますが、このフィールドまたはこのフィールドの特定の部分が必須かどうかを示す 1 つ以上のクリックボックスが表示されます。

    • 必須メッセージ

      このフィールドが必須であることをユーザーに通知するメッセージです。 必須フィールドにはアスタリスクが付いています。

    • 制約

      選択可能な制約は、フォームコンポーネントのタイプによって異なります。

    • 制約メッセージ

      どの入力が必須かをユーザーに知らせるメッセージ。

  • スタイル設定

    • サイズ

      行数と列数。

    • 幅

      ピクセル数。

    • CSS

フォーム(コンポーネント) form-component

フォームコンポーネントは、フォーム開始​要素および​ フォーム終了 ​要素を使用してフォームの開始と終了の両方を定義します。 フォームが確実に正しく定義されるように、これらの要素は常にペアとして使用されます。

dcform-1

フォームの開始と終了の間に、ユーザーが実際に入力するフィールドを定義するフォームコンポーネントを追加できます。

フォームの開始 start-of-form

この必須コンポーネントは、ページの新しいフォームの開始を定義します。 次の項目を設定できます。

  • フォーム

    • Thank You ページ

      訪問者による入力を歓迎するために参照されるページ。 空白の場合、フォームが送信後に再表示されます。

    • ワークフローを開始

      フォームが送信されるとトリガーされるワークフローを決定します。

  • 詳細

    • アクションタイプ

      フォームにはアクションが必要です。 アクションは、ユーザーから送信されたデータによってトリガーされ実行される処理を定義します(HTML の action= に似ています)。 対応する​ アクションの設定 ​が必要です。

      標準の AEM インストールには、次のアクションタイプが含まれます。

      • アカウントリクエスト

      • コンテンツを作成

      • リードを作成

      • アカウントを作成および更新

      • メールサービス : 購読者を作成してリストに追加

      • メールサービス : 自動応答のメールを送信

      • メールサービス : リストのユーザーの購読を解除

      • コミュニティを編集

      • リソースを編集

      • ワークフロー制御リソースを編集

      • メール

      • 注文の詳細

      • プロファイルの更新

      • パスワードをリセット

      • パスワードを設定

      • コンテンツを格納

        デフォルトのアクションタイプ。

      • コンテンツをアップロードデータと共に保存

      • 注文を送信

      • 購読者の登録を解除

      • 注文を更新

    • フォーム識別子

      フォーム識別子は、フォームを一意に識別します。 1 つのページに複数のフォームがある場合、フォーム識別子を使用します。フォームごとに異なる識別子が使用されていることを確認します。

    • 読み込み元パス

      フォームフィールドに定義済みの値を読み込むために使用されるノードプロパティへのパス。
      このフィールドはオプションで、リポジトリ内のノードへのパスを指定します。 このノードにフィールド名と一致するプロパティがある場合、フォーム上の該当フィールドには、これらのプロパティの値が事前に読み込まれます。 一致が存在しない場合、フィールドにはデフォルト値が使用されます。
      読み込み元パス​を使用して、フォームの必須フィールドに値をプリロードすることができます。 フォーム値のプリロードを参照してください。

    • クライアントの検証

      このフォームでクライアントの検証が必須かどうかを示します(サーバーの検証は常に行われます)。 検証は、フォーム Captcha コンポーネントを使用して行います。

    • 検証リソースタイプ

      (それぞれのフィールドではなく)フォーム全体を検証する場合、フォームの検証リソースのタイプを定義します。 フォーム全体を検証する場合は、次のいずれかも含めます。

      • クライアントの検証用スクリプト:

        /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp

      • サーバー側の検証用スクリプト:

        /apps/<myApp>/form/<myValidation>/formservervalidation.jsp

    • アクションの設定

      アクション設定​で利用できるオプションは、選択した​ アクションタイプ ​によって異なります。

      • アカウントリクエスト

        • アカウントページを作成
          アカウントの作成時に使用されるページ。
      • コンテンツを作成

        • コンテンツのパス
          フォームがダンプするコンテンツのコンテンツパス。 スラッシュ(/)で終了するパスを入力します。 スラッシュは、各フォームポートに対し、特定の場所に新しいノードが作成されることを意味します。次に例を示します。
          /forms/feedback/

        • 種類

          必要な種類を選択します。

        • フォーム

          フォームを指定します。

        • 次を使用してレンダリング

          リストから必要なオプションを選択します。

        • リソースタイプ

          設定すると、各コメントに sling:resourceType と追加されます。

        • 表示セレクター

      • リードを作成

        • リードがこのリストに追加されます
          必要なリードリストを指定します。
      • アカウントを作成および更新

        • 初期グループ

          新しいユーザーを割り当てるグループ。

        • ホーム

          ログイン成功後に表示するページ。

        • パス

          新しいアカウントが作成され、保存される場所の相対パス。

        • データを表示…

          ボタンを選択すると、バルクエディターでフォームの結果に関する情報にアクセスできます。 ここから情報を .tsv(タブ区切り)ファイルに書き出すことができます(このファイルは Excel スプレッドシートなどで使用することができます)。

      • メール

        • 送信元

          メールの送信元のメールアドレスを入力します。

        • 宛先

          フォームの送信先のメールアドレスを 1 つ以上入力します。

        • CC

          1 つ以上の CC メールアドレスを入力します。

        • BCC

          1 つ以上の BCC メールアドレスを入力します。

        • 件名

          メールの件名を入力します。

      • パスワードのリセット

        • パスワード変更ページ

          パスワードの変更時に使用するページ。

      • コンテンツの格納

        • コンテンツのパス

          フォームがダンプするコンテンツのコンテンツパス。 スラッシュ(/)で終了するパスを入力します。 スラッシュは、フォームのポートごとに、特定の場所に新しいノードが作成されることを意味します。例は次のとおりです。
          /forms/feedback/

        • データを表示…

          ボタンを選択すると、バルクエディターでフォームの結果に関する情報にアクセスできます。 ここから情報を .tsv(タブ区切り)ファイルに書き出すことができます(Excel スプレッドシートなどで使用するため)。

      • コンテンツをアップロードデータと共に保存

        これには、「コンテンツの保存」と同じオプションがあります。

      • サブスクライバーを登録解除

        • このリストからリードが削除されます

          必要なリードリストを指定します。

フォームの終わり end-of-form

フォームの終わりを示します。 次の項目を設定できます。

  • フォーム終了

    • 「送信」ボタンを表示

      「送信」ボタンを表示するかどうかを示します。

    • 送信名

      1 つのフォームに複数の「送信」ボタンを使用する場合の識別子。

    • 送信タイトル

      「送信」や「送る」など、ボタンに表示される名前。

    • 「リセット」ボタンを表示

      このチェックボックスを選択すると、リセットボタンが表示されます。

    • リセットタイトル

      リセットボタンに表示する名前。

    • 説明

      ボタンの下に表示する情報。

アカウント名 account-name

ユーザーがアカウント名を入力できます。

dcformaccountname

アドレス address

次のような形式の国際化対応のアドレスフィールドを追加できます。

dcformaddressfield

このコンポーネントはすぐに使用できるように設定されていますが、必要に応じて設定を変更できます。 例えば、アドレスの個々の要素に対して制約を追加できます。 フィールドを空にすると、デフォルトの設定が使用されます。

Captcha captcha

Captcha コンポーネントでは、画面に表示される英数字の文字列を入力する必要があります。 文字列は、更新するたびに変更されます。

dcformcaptcha

このコンポーネントには様々なパラメーターを設定できます。例えば、Captcha 文字列が無効な場合に表示するメッセージを設定できます。

チェックボックスグループ checkbox-group

チェックボックスを使用すると、1 つまたは複数のチェックボックスのリストを構築できます。チェックボックスでは同時に複数の項目を選択できます。

dcformcheckboxgroupuse

タイトル、説明、要素名を含む、様々なパラメーターを指定できます。 「+」ボタンや「-」ボタンを使用して項目の追加や削除を行い、上下の矢印ボタンで位置を変更します。

NOTE
項目読み込みパス​を使用すると、チェックボックスのグループリストにあらかじめ値を読み込んでおくことができます。
フォームフィールドへの複数値のプリロードを参照してください。

クレジットカードの詳細 credit-card-details

クレジットカードの詳細を入力するために必要なフィールドを指定できます。 受け入れるカードのタイプと必要な情報(セキュリティコードなど)を指定するように設定できます。

chlimage1-15

ドロップダウンリスト dropdown-list

ドロップダウンリストは、使用する選択肢の値の範囲を設定できます。

dcformdropdownlistuse

リストに表示するタイトルと項目を指定できます。 「+」ボタンや「-」ボタンを使用してリスト項目の追加や削除を行い、上下の矢印ボタンを使用して位置を変更します。 ユーザーがリストから複数の項目を選択できるかどうか、およびリストを初めて開いたときに自動的に選択される項目(初期値)を指定できます。

NOTE
項目読み込みパス​を使用すると、ドロップダウンリストにあらかじめ値を読み込んでおくことができます。
フォームフィールドへの複数値のプリロードを参照してください。

ファイルのアップロード file-upload

ファイルのアップロードコンポーネントを使用すると、ユーザーがファイルを選択してアップロードできるようになります。

dcformfileupload

非表示のフィールド hidden-field

このコンポーネントを使用すると、非表示のフィールドを作成できます。 これらの非表示フィールドは、様々な目的に使用できます。例えば、フォームの送信後にアクションを実行する必要がある場合や、後処理で非表示のデータが必要な場合などです。

dcformhiddenfield

NOTE
また、フォーム内の他のフィールドの値に応じて、特定のフォームコンポーネントの表示と非表示を切り替えるようにフォームをカスタマイズすることもできます。 特定の条件下でのみフィールドが必要とされる場合、フォームフィールドの表示を変更することは役立ちます。
詳しくは、フォームコンポーネントの表示と非表示を参照してください。

画像ボタン image-button

画像ボタンを使用すると、独自の画像やテキストのボタンを作成できます。

dcformimagebutton

画像のアップロード image-upload

画像のアップロードコンポーネントを使用すると、ユーザーが画像ファイルを選択してアップロードできるようになります。

dcformimageupload

リンクフィールドを使用すると、ユーザーが URL を指定できます。

dcformlink

最も一般的に使用されるのは、カレンダーイベントフォームで、イベントの URL/リンクフィールドに使用されます。

パスワードフィールド password-field

ユーザーが自分のパスワードを入力できるようになります。

dcformpassword

パスワードリセット password-reset

このコンポーネントは、次の 2 つのフィールドをユーザーに提供します。

  • パスワードの入力
  • 入力が正しいことを確認するために、パスワードの繰り返し入力します。

デフォルト設定では、コンポーネントは次のように表示されます。

dcpasswordreset

ラジオグループ radio-group

ラジオグループは、1 つ以上のラジオチェックボックスのリストを提供し、特定の時点で選択できるのは、そのうち 1 つのみです。

タイトルと説明と共に要素名を指定できます。 必要に応じて、「+」ボタンまたは「-」ボタンによる項目の追加または削除、上向き矢印と下向き矢印による項目の配置、デフォルト値の指定を行うことができます。

dcformradiogroupuse

NOTE
項目読み込みパス​を使用して、ラジオグループと値をプリロードすることができます。
フォームフィールドへの複数値のプリロードを参照してください。

送信ボタン submit-button

このコンポーネントを使用すると、デフォルトのテキストを指定した送信ボタンを作成できます。

dcformsubmitbutton

または、独自のテキストも指定できます。

dcformsubmitbuttonuse

タグフィールド tags-field

このフィールドでは、タグを選択できます。

dcformtagsuse

専用のタブを使用して、使用可能な名前空間など、様々なパラメーターを指定できます。

  • タグフィールド

    • 許可された名前空間

      • Geometrixx Outdoors
      • ワークフロー
      • フォーラム
      • 写真を保管
      • Geometrixx Media
      • 標準タグ
      • マーケティング
      • アセットのプロパティ
    • ピクセル単位の幅

    • ポップアップのサイズ

テキストフィールド text-field

標準テキストフィールドは、必要なサイズに設定し、独自のリードをメッセージに含めることができます。

dcformtext

ワークフロー送信ボタン workflow-submit-button-s

ワークフローで使用する送信ボタンを作成できます。

chlimage1-16

recommendation-more-help
experience-manager-65-lts-help-sites-classic-ui-authoring