現在表示中:

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

一部のコンポーネントはコンポーネントブラウザーからすぐに使用でき、様々な他のコンポーネントもデザインモード(ページが静的テンプレートに基づいている場合)またはテンプレートの編集(ページが編集可能テンプレートに基づいている場合)を使用して利用できます。

警告:

ここでは、標準の AEM インストールでそのまま使用できるコンポーネントについてのみ説明します。

インスタンスによっては、要件に合わせて明示的に開発されたカスタマイズコンポーネントが存在する場合があります。これらは、ここで説明するいくつかのコンポーネントと同じ名前の場合があります。

注意:

この節では、基盤コンポーネントについて説明します。基盤コンポーネントは、AEM の多くのバージョンで利用でき、AEM の標準インストール環境でそのまますぐに使用できます。

さらに新しく、拡張性が高いコアコンポーネントも使用できます。これらは We.Retail サンプルコンテンツの一部であり、管理者が個別にインストールして開発に使用することもできます。

コンポーネントは、ページの編集時にページエディターのサイドパネルの「コンポーネント」タブで使用できます。

コンポーネントを選択してページ上の必要な場所にドラッグできます。その後、次の機能を使用して編集できます。

コンポーネントは、コンポーネントグループ(次のグループを含む)と呼ばれる様々なカテゴリに従って並べ替えられます。

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

一般

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

アカウント項目

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

chlimage_1

アダプティブ画像

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

次の特徴により、ウィンドウのサイズを決定できます。

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

例えば、このコンポーネントは、Web ページが携帯電話で開かれた場合には小さな画像を生成し、タブレットで開かれた場合には中程度のサイズの画像を生成します。ラップトップでは、最大化された Web ブラウザーでページが開かれた場合に、大きな画像を配信します。Web ブラウザーが画面の一部に合わせてサイズ変更された場合には、小さな画像を配信して表示を更新することで、このサイズ変更に適応します。

サポートされる画像の形式

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

  • .jpg
  • .jpeg
  • .png
  • .gif **

警告:

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

画像のサイズと画質

以下の表に、特定の表示域の幅に対する、生成される画像の幅を示します。生成される画像の高さは、同じ縦横比を維持して計算され、画像のエッジ内に空白は挿入されません。空白の挿入を避けるために、切り抜きを使用できます。

JPEG 画像の場合は、表示域のサイズも JPEG の画質に影響します。次の JPEG 画質になる可能性があります。

  • 低(0.42)
  • 中(0.82)
  • 高(1.00)
ビューポートの幅の範囲(ピクセル単位) 画像の幅(ピクセル単位) JPEG 画質 対象デバイスタイプ
幅 <= 319 320  
幅 = 320 320 モバイルフォン(縦)
320 < 幅 < 481 480 モバイルフォン(横)
480 < 幅 < 769 476 タブレット(縦)
768 < 幅 < 1025 620 タブレット(横)
幅 <= 1025 フル(元のサイズ) デスクトップ

プロパティ

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

  • 画像
    • 画像
      コンテンツファインダーから画像をドラッグするか、クリックして画像を読み込む参照ウィンドウを開くことができます。画像を読み込んだ後は、画像の切り抜き、回転または削除をおこなうことができます。画像のズームインおよびズームアウトをおこなうには、画像の下(「OK」および「キャンセル」ボタンの上)のスライドバーを使用します。
    • 切り抜き
      画像を切り抜きます。ボーダーをドラッグすると、画像が切り抜かれます。
    • 回転
      画像が目的の向きになるまで「回転」を繰り返しクリックします。
    • 消去
      現在の画像を削除します。
  • 詳細
    • タイトル
      アダプティブ画像コンポーネントではこのプロパティは使用しません。
    • 代替テキスト
      画像に使用する代替テキストです。
    • リンク先
      アダプティブ画像コンポーネントではこのプロパティは使用しません。
    • 説明
      アダプティブ画像コンポーネントではこのプロパティは使用しません。

アダプティブ画像コンポーネントの拡張

アダプティブ画像コンポーネントのカスタマイズについて詳しくは、アダプティブ画像コンポーネントについてを参照してください。

カルーセル

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

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

クリックできるコントロールを使用して、ユーザーの操作に応じてリアルタイムで表示されるページを周期的に繰り返すこともできます。現在表示されているページ画像をクリックすると、そのページに移動します。つまり、カルーセルは、ナビゲーションコントロールとして機能します。

プロパティ

次の 2 つのタブに表示されます。

  • カルーセル
    ここでは、カルーセルの動作方法を指定します。
    • 再生速度
      次のスライドが表示されるまでの時間(ミリ秒単位)。
    • 遷移時間
      2 つのスライド間の遷移にかかる時間(ミリ秒単位)。
    • コントロールのスタイル
      プルダウンメニューから、「前へ / 次へボタン」、「上部右スイッチ」など、様々なオプションを選択可能。
  • リスト
    ページをカルーセルに含める方法を指定します。
    • リストを選択
      ページリストの構築には、後述の「子ページ」、「固定リスト」、「検索」、「詳細検索」など、いくつかの方法があります。
      どの方法を選択しても、リストに含めるページには、ページに関連する画像がそれぞれ 1 つずつ必要です。この画像が、カルーセルに表示されます。ページの「ページプロパティ」にそのページの画像がない場合、画像をページに関連付けてから開始します。そうしないと、カルーセルでは空(またはほとんど空)のページが表示されます。ページプロパティの編集を参照してください。
      選択する項目に応じて、新しいパネルが表示されます。
      • 子ページのオプション
        • 親ページ
          手動で、またはセレクターを使用して、パスを指定します。現在のページを親として使用するには、空のままにします。
      • 固定リストのオプション
        • ページ
          ページのリストを選択します。エントリを追加するには + を、順序を調整するには上下のボタンを使用します。
      • 検索のオプション
        • 開始
          手動で、またはセレクターを使用して、開始パスを入力します。
        • 検索クエリ
          プレーンテキストの検索クエリを入力できます。
      • 詳細検索のオプション
        • QueryBuilder 述語の表記
          「QueryBuilder 述語の表記」を使用して検索クエリを入力できます。例えば、「fulltext=Marketing」と入力すると、コンテンツに「Marketing」が含まれるすべてのページがカルーセルに表示されます。
          クエリ式とその他の例の詳細は、QueryBuilder API を参照してください。
    • 並べ替え順
      「並べ替え順」の横にあるドロップダウンメニューから、「jcr:title」、「jcr:created」、「cq:lastModified」または「cq:template」を選択します。
    • 制限
      カルーセルで使用する項目の最大数。これはオプションです。

注意:

AEM DAM にあるデジタルアセットを表示する Adobe Experience Manager のカスタムカルーセルコンポーネントを作成できます。詳しくは、Adobe Experience Manager のカスタムカルーセルコンポーネントの作成を参照してください。

グラフ

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

  • データ
    • チャートデータ
      グラフデータを入力するには、CSV(Comma Separated Values)形式を使用します。CSV 形式では、フィールドの区切り文字としてコンマ(「,」)を使用します。
  • 詳細
    • チャートのタイプ
      「円グラフ」、「折れ線グラフ」および「棒グラフ」から選択します。
    • 代替テキスト
      グラフの代わりに表示する代替テキスト。

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

以下は、グラフデータの例と、結果の棒グラフを示しています。

chlimage_1
dc_chart_use

注意:

AEM JCR にあるデータを表示する AEM チャートコントロールを作成できます。詳しくは、Adobe Experience Manager データのグラフでの表示を参照してください。

コンテンツフラグメント

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

デザインインポーター

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

ダウンロード

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

  • ダウンロード
    • 説明
      ダウンロードリンクに対して表示される短い説明。
    • ファイル
      生成される Web ページでダウンロードできるようにするファイル。Content Finder からアセットをドラッグするか、領域をクリックして、ダウンロードできるようにするファイルをアップロードします。

次に、Geometrixx でのダウンロードコンポーネントの例を示します。

DC_Download_Use

外部 Web アプリケーション

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

  • 外部 Web アプリケーション
    • 対象アプリケーション
      統合する Web アプリケーションの URL を指定します。次に例を示します。
          http://en.wikipedia.org/wiki/Main_Page
    • パスパラメーター
      パラメーターをアプリケーションに渡す必要がある場合は、チェックボックスをオンにします。
    • 幅と高さ
      iframe のサイズを定義します。

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

chlimage_1

注意:

使用事例によっては、その他のオプションが外部アプリケーションの統合で有効になります(例:ポートレットの統合)。

Flash

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

  • Flash
    • Flash ムービー
      Flash ムービーファイル。コンテンツファインダーからアセットをドラッグするか、クリックして参照ウィンドウを開きます。
    • サイズ
      ムービーを保持する表示領域の寸法(ピクセル単位)。
  • 代替イメージ
    表示する代替画像。
  • 詳細
    • コンテキストメニュー
      コンテキストメニューを表示するか非表示にするかを示します。
    • ウィンドウモード
      不透明、透明、枠付きウィンドウなど、ウィンドウの表示方法。
    • 背景色
      提示される色見本から選択した背景色。
    • 最低バージョン
      ムービーの実行に必要な Adobe Flash Player の最低バージョン。デフォルトは 9.0.0 です。
    • 属性
      必要なその他の属性。

画像

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

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

画像は、アセットブラウザーから直接コンポーネントまたはコンポーネントの設定ダイアログにドラッグアンドドロップできます。設定ダイアログから画像をアップロードすることもできます。このダイアログでは、画像の定義および操作もすべて制御します。

chlimage_1

画像がアップロードされて初めて、インプレース編集を使用して、必要に応じて画像の切り抜きや回転が可能になります。

chlimage_1

注意:

インプレースエディターでは、編集時に、画像の元のサイズと縦横比を使用します。高さと幅のプロパティも指定できます。プロパティで定義したサイズや縦横比の制限は、編集の変更内容を保存するときに適用されます。

インスタンスによっては、ページのデザインによって最小、最大の制限が課される場合もあります。これらは、プロジェクト実装時に開発されます。

フルスクリーン編集モードで使用できる追加オプションがいくつか用意されています(マップ、ズームなど)。

chlimage_1

注意:

Internet Explorer では、アップロードの進行状況を監視できません。

Internet Explorer を使用する場合、アップロードした画像ファイルをプレビューに表示して変更(切り抜きなど)を実行できるようにするには、画像をアップロードし、「OK」をクリックしてから、画像を再度開く必要があります。

AEM で使用される HTML5 の機能について詳しくは、認定プラットフォームを参照してください。

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

  • マップ
    画像をマップするには、「マップ」を選択します。画像マップの作成方法(長方形、多角形など)を指定し、領域が指す位置を指定します。
  • 切り抜き
    「切り抜き」をクリックして画像を切り抜きます。マウスを使用して画像を切り抜きます。
  • 回転
    画像を回転するには、「回転」を選択します。画像が目的の向きになるまで繰り返し使用します。
  • 消去
    現在の画像を削除します。
  • タイトル
    画像のタイトル。
  • 代替テキスト
    アクセス可能なコンテンツを作成する際に使用する代替テキスト。
  • リンク先
    Web サイト内のアセットまたはその他のページへのリンクを作成します。
  • 説明
    画像の説明。
  • サイズ
    画像の高さと幅を設定します。

注意:

一部のオプションはフルスクリーンエディターでのみ使用できます。

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

chlimage_1

レイアウトコンテナ

このコンポーネントは、レスポンシブグリッド内にコンポーネントを追加および配置できるグリッド段落システムを提供します。これにより、電話、タブレット、デスクトップを含むターゲットデバイスの幅に基づいて、様々なコンテンツレイアウトを定義できます。

chlimage_1

注意:

このコンポーネントは HTML テンプレート言語(HTL)を使用して実装されています。

リスト

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

  • リスト
    • リストを選択
      ここでリストのコンテンツを取得する場所を指定します。複数の方法があります。
    • 選択する項目によって、新しいパネルが表示されます。
      • 子ページのオプション
        • (親ページ)
          手動で、またはセレクターを使用して、パスを指定します。現在のページを親として使用するには、空のままにします。
      • 固定リストのオプション
        • ページ
          ページのリストを選択します。エントリを追加するには + を、順序を調整するには上下のボタンを使用します。
      • 検索のオプション
        • 開始
          手動で、またはセレクターを使用して、開始パスを入力します。
        • 検索クエリ
          プレーンテキストの検索クエリを入力できます。
      • 詳細検索のオプション
        • QueryBuilder 述語の表記
          「QueryBuilder 述語の表記」を使用して検索クエリを入力できます。例えば、「fulltext=Marketing」と入力すると、コンテンツに「Marketing」が含まれるすべてのページがカルーセルに表示されます。
          クエリ式とその他の例の詳細は、QueryBuilder API を参照してください。
      • タグ
        親ページ」、「タグ / キーワード」および必要な一致条件を指定します。
    • 表示方法
      リンク、ティーザー、ニュースなどの項目のリストを表示する方法。
    • 並べ替え順
      リストを並べ替えるかどうか。並べ替える場合は、並べ替えに使用する条件。条件を入力するか、表示されるドロップダウンリストから選択できます。
    • 制限
      リストに表示する項目の最大数を指定します。
    • フィードを有効にする
      そのリストで RSS フィードを有効化するかどうかを示します。
    • 1 ページに表示する数
      ここで同時に表示するリスト項目の数を指定できます。指定した数よりも項目数が多いリストの場合、ページネーションで複数に分割して表示されます。

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

dc_list_use

ログイン

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

chlimage_1

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

  • ログイン
    • セクションラベル
      入力フィールドの導入テキスト。
    • ユーザー名ラベル
      ユーザー名フィールドのラベルに使用するテキスト。
    • パスワードラベル
      パスワードフィールドのラベルに使用するテキスト。
    • ログインボタンのラベル
      ログインボタン用のテキスト。
    • リダイレクト先
      ユーザーがログインしたときに開く Web サイト上のページを指定できます。
  • ログイン済み
    • 続行ボタンのラベル
      ユーザーが既にログインしていることを示すテキスト。

注文ステータス

  • タイトル
    • タイトル
      表示するタイトルテキストを指定します。
    • リンク
      どのページ(商品)の注文ステータスを表示するかを指定します。
    • 種類/サイズ
      選択肢から選択します。
chlimage_1

リファレンス

参照コンポーネントを使用すると、(現在のインスタンス内にある)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

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

chlimage_1

検索

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

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

  • 検索
    • ノードタイプ
      検索を特定のノードタイプに制限する場合は、ここに一覧にします(例:cq:Page)
    • 検索場所のパス
      検索対象のブランチのルートページを指定します。
    • 「検索」ボタンのテキスト
      実際の検索ボタンに表示する名前。
    • 統計テキスト
      検索結果の上に表示するテキスト。
    • 結果なしのテキスト
      結果がない場合、ここに入力したテキストが表示されます。
    • テキストをスペルチェック
      誰かが類似の用語を入力すると、その用語の前にこのテキストが表示されます。
      例えば、geometrixxe と入力すると、「もしかして : geometrixx」と表示されます。
    • 同様のページテキスト
      結果の横に表示される、類似のページに対するテキスト。このリンクをクリックすると、類似のコンテンツのページが表示されます。
    • 関連する検索テキスト
      検索の横に表示される、関連する用語とトピックのためのテキスト。
    • 検索トレンドのテキスト
      ユーザーが入力する検索用語の上のタイトル。
    • 結果ページラベル
      このリストの下部に表示するテキスト。他の結果ページへのリンクが設定されます。
    • 前のラベル
      前の検索ページへのリンクに表示される名前。
    • 次のラベル
      次の検索ページへのリンクに表示される名前。

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

dc_search_use

次に、誤入力があり使用できない検索用語の例を示します。

DC_Search_UseNotFound

サイトマップ

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

dc_sitemap_use

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

  • サイトマップ
    • ルートパス
      リストを開始するパス。

スライドショー

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

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

  • スライド
    • 新しいスライド
      追加」(および「削除」)ボタンを使用して、スライドを選択して指定できます。
    • タイトル
      必要に応じてタイトルを指定します。これは該当するスライド上にオーバーレイされます。
  • 詳細
    • サイズ
      幅と高さをピクセル単位で指定します。

その後、スライドショーコンポーネントによって、各画像が短時間、順に表示された後に次のスライドにフェードするという処理が繰り返されます。

dc_slideshow_use

テーブル

注意:

テーブルコンポーネントは、テキストコンポーネントと同様に、リッチテキストエディターをベースとしています。

テーブルにはテーブルコンポーネントを使用することを推奨しますが、テキストコンポーネントでも作成できます。

テーブルコンポーネントは、テーブルの作成、入力および書式設定ができるように事前設定されています。ダイアログを使用して、テーブルを設定し、次のいずれかの方法でコンテンツを作成できます。

  • 最初から
  • 外部エディター(Excel、OpenOffice、メモ帳など)からスプレッドシートまたはテーブルをコピーして貼り付け

インラインエディターを使用してコンテンツに対して基本的な変更を加えることができます。

dc_table

フルスクリーンモードでテーブルレイアウトを設定できます。

chlimage_1

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

dc_table_use

タグクラウド

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

dc_tagclouduse

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

  • 表示するタグ
    表示するタグを収集する場所。ページ(すべての子またはすべてのタグを含むページ)から選択します。
  • ページ
    参照するページを選択します。
  • タグにリンクがありません
    表示するタグがリンクとして機能するかどうかを指定します。

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

テキスト

注意:

テキストコンポーネントは、テーブルコンポーネントと同様に、リッチテキストエディターをベースとしています。

テーブルにはテーブルコンポーネントを使用することを推奨しますが、テキストコンポーネントでも作成できます。

テキストコンポーネントでは、リッチテキストエディターによって提供される機能により、WYSIWYG エディターを使用してテキストブロックを入力できます。各種のアイコンを使用して、テキストを書式設定できます(フォントの特性、整列、リンク、リストおよびインデントを含む)。

chlimage_1

設定ダイアログを開いて、次の項目を設定することもできます。

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

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

dc_text_use

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

インプレース編集

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

テキストと画像

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

chlimage_1

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

  • コンポーネントのスタイルスタイル
    ここで画像を左揃えまたは右揃えにすることができます。 デフォルトは、画像を左に配置する「」です。
  • 画像のプロパティ詳細画像プロパティ
    次の項目を指定できます。
    • 画像アセット
      必要な画像をアップロードします。
    • タイトル
      ブロックのタイトル。マウスポインターを置くと表示されます。
    • 代替テキスト
      画像を表示できない場合に表示する代替テキスト。空にすると、タイトルが使用されます。
    • リンク先
      ターゲットパスを指定します。
    • 説明
      画像の説明。
    • サイズ
      画像の高さと幅を設定します。

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

dc_textimage_use

タイトル

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

  • タイトルフィールドを空のままにすることで、現在のページ名を表示します。
  • または、タイトルフィールドで指定するテキストを表示します。

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

  • タイトル
    ページタイトル以外の名前を使用する場合は、ここに入力します。
  • リンク
    タイトルがリンクとして動作する場合の URI。
  • 種類 / サイズ
    ドロップダウンリストから「小」または「大」を選択します。「小」は画像として生成されます。「大」はテキストとして生成されます。

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

dc_title_use

ビデオ

ビデオコンポーネントを使用すると、定義済みですぐに使用できるビデオ要素をページに配置できます。

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

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

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

注意:

サポートされている形式は次のとおりです。

  • .mp4
  • Ogg
  • FLV(Flash ビデオ)

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

次の例は、2 列のコンポーネントを使用している場合を示しています。新しいコンポーネントのプレースホルダーを使用できます。

dc_columncontroluse

2 列

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

3 列

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

列の制御

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

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

フォーム

フォームコンポーネントは、訪問者が入力を送信するフォームを作成するために使用されます。フォームおよびフォームコンポーネントは、ユーザーからのフィードバック(例えばお客様満足度アンケート)やユーザー情報(例えばユーザー登録)などの情報を収集するのに使用できます。

注意:

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

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

  • フォーム
    フォームコンポーネントでは、ページ上の新しいフォームの開始と終了を定義します。その他のコンポーネントは、これらの要素の間に配置できます(テーブル、ダウンロードなど)。 
  • フォームのフィールドと要素
    フォームのフィールドと要素には、テキストボックス、ラジオボタン、画像などを含めることができます。多くの場合、ユーザーは、テキストの入力などのアクションをフォームフィールドで完了します。詳しくは、個々のフォーム要素を参照してください。
  • プロファイルコンポーネント
    プロファイルコンポーネントは、訪問者に合わせたパーソナライゼーションが必要な Social Collaboration や他の領域に使用する訪問者のプロファイルに関連しています。

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

dc_form

注意:

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

(多くの)フォームコンポーネントに共通の設定

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

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

  • タイトルとテキスト
    このタブでは、フォームのタイトルや付随するテキストなど、基本情報を指定する必要があります。適切な場合は、フィールドで複数選択が有効かどうかや、選択肢に使用できる項目など、その他の主要な情報を定義することもできます。
  • 初期値
    デフォルト値を指定できます。
  • 制約
    このタブでは、フィールドが必須かどうかを指定し、そのフィールドに制約を設定することができます(例えば、数値であることが必要など)。
  • スタイル設定
    フィールドのサイズとスタイル設定を示します。

注意:

表示されるフィールドはコンポーネントによって大きく変わります。

これらのタブには必要なパラメーターが表示されます。必要なパラメーターは個々のコンポーネントのタイプによって異なりますが、次のようなものがあります。

  • タイトルとテキスト
    • エレメント名
      フォーム要素の名前。リポジトリ内でデータが格納される場所を示します。
      これは必須のフィールドであり、次の文字のみを含めることができます。
      • 英数字
      • _ . / : -
    • タイトル
      フィールドと共に表示されるタイトル。空白にした場合、デフォルトのタイトルが表示されます。
    • 説明
      必要な場合、追加の情報をユーザーに示すことができます。この説明はフォーム上のフィールドの下に、タイトルよりも小さいフォントで表示されます。
    • 表示/非表示
      フィールドをいつ表示するかを特定します。
  • 初期値
    • デフォルト値
      フォームが開かれたとき(ユーザーが入力をおこなう前)にフィールドに表示される値。
  • 制約
    • 必須
      フォームコンポーネントの種類によって異なりますが、このフィールドまたはこのフィールドの特定の部分が必須かどうかを示す 1 つ以上のクリックボックスが表示されます。
    • 必須メッセージ
      このフィールドが必須であることをユーザーに通知するメッセージ。必須フィールドには、アスタリスクのフラグも付けられます。
    • 制約
      選択可能な制約は、フォームコンポーネントの種類によって異なります。
    • 制約メッセージ
      どの入力が必須かをユーザーに知らせるメッセージ。
  • スタイル設定
    • サイズ
      行数と列数。

    • ピクセル単位で設定します。
    • CSS

フォーム(コンポーネント)

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

dc_form

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

フォームの最初

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

  • フォーム
    • ありがとうページ
      訪問者の入力を歓迎するために参照されるページ。空にすると、送信後にフォームが再表示されます。
    • ワークフローを開始
      フォームが送信されるとトリガーされるワークフローを決定します。
  • 詳細
    • アクションタイプ
      フォームにはアクションが必要です。アクションは、ユーザーから送信されたデータによってトリガーされ、実行される処理を定義するものです(HTML の action= に似ています)。対応するアクションの設定が必要な場合もあります。
      標準の AEM インストールに含まれているアクションタイプは次のとおりです。
      • アカウント要求
      • コンテンツを作成
      • リードを作成
      • アカウントを作成および更新
      • 電子メールサービス : 購読者を作成してリストに追加
      • 電子メールサービス : 自動応答の電子メールを送信
      • 電子メールサービス : リストのユーザーの購読を解除
      • コミュニティを編集
      • リソースを編集
      • ワークフロー制御リソースを編集
      • メール
      • 注文の詳細
      • プロファイルの更新
      • パスワードをリセット
      • パスワードを設定
      • コンテンツを格納
        デフォルトのアクションタイプです。
      • コンテンツをアップロードデータと共に保存
      • 注文を送信
      • 購読者の購読を解除
      • 注文を更新
    • フォーム識別子
      フォーム識別子は、フォームを一意に識別するものです。 1 つのページに複数のフォームがある場合、フォーム識別子を使用します。フォームごとに異なる識別子が使用されていることを確認します。
    • 読み込み元パス
      事前に定義された値をフォームフィールドに読み込むために使用されるノードプロパティのパスです。
      これは、リポジトリ内のノードへのパスを指定するオプションのフィールドです。このノードに、フィールド名と一致するプロパティがある場合、フォーム上の適切なフィールドがそのプロパティの値が設定された状態でプリロードされます。一致が存在しない場合、フィールドにはデフォルト値が使用されます。
      読み込み元パスを使用して、フォームの必須フィールドに値をプリロードすることができます。フォーム値のプリロードを参照してください。
    • クライアントの検証
      このフォームでクライアントの検証が必須かどうかを示します(サーバーの検証は常におこなわれます)。この処理を実行するには、フォームキャプチャコンポーネントと組み合わせる必要があります。
    • 検証リソースタイプ
      (個々のフィールドではなく)フォーム全体を検証する場合、フォームの検証リソースのタイプを定義します。フォーム全体を検証する場合、さらに次のいずれかを含めます。
      • クライアントの検証用のスクリプト:
          /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp
      • サーバー側での検証用のスクリプト:
           /apps/<myApp>/form/<myValidation>/formservervalidation.jsp
    • アクションの設定
      アクションの設定」で使用可能なオプションは、選択したアクションタイプによって異なります。
      • アカウント要求
        • アカウントページを作成
          新規アカウントの作成時に使用されるページ。
      • コンテンツを作成
        • コンテンツのパス
          フォームがダンプするコンテンツのコンテンツパス。スラッシュ(/)で終わるパスを入力します。スラッシュは、フォームのポートごとに、特定の場所に新しいノードが作成されることを意味します。次に例を示します。
             /forms/feedback/
        • 種類
          必要な種類を選択します。
        • フォーム
          フォームを指定します。
        • 次を使用してレンダリング
          リストから必要なオプションを選択します。
        • リソースタイプ
          設定すると、各コメントに sling:resourceType として追加されます。
        • 表示セレクター
      • リードを作成
        • このリストにリードが追加されます
          必要なリードリストを指定します。
      • アカウントを作成および更新
        • 初期グループ
          新しいユーザーを割り当てるグループ。
        • ホーム
          ログインに成功した後に表示されるページ。
        • パス
          新規アカウントを作成して格納する(相対)パス。
        • データを表示
          このボタンをクリックして、バルクエディターのフォームの結果に関する情報にアクセスします。ここから、情報を(Excel スプレッドシートなどで使用するために).tsv(タブ区切り)ファイルに書き出すことができます。
      • メール
        • フォーム
          電子メールの送信元の電子メールアドレスを入力します。
        • 宛先
          フォームの送信先の電子メールアドレス(複数可)を入力します。
        • CC
          CC の電子メールアドレス(複数可)を入力します。
        • BCC
          BCC の電子メールアドレス(複数可)を入力します。
        • 件名
          電子メールの件名を入力します。
      • パスワードをリセット
        • パスワード変更ページ
          パスワードの変更時に使用するページ。
      • コンテンツを格納
        • コンテンツのパス
          フォームがダンプするコンテンツのコンテンツパス。スラッシュ(/)で終わるパスを入力します。スラッシュは、フォームのポートごとに、特定の場所に新しいノードが作成されることを意味します。次に例を示します。
             /forms/feedback/
        • データを表示
          このボタンをクリックして、バルクエディターのフォームの結果に関する情報にアクセスします。ここから、情報を(Excel スプレッドシートなどで使用するために).tsv(タブ区切り)ファイルに書き出すことができます。
      • コンテンツをアップロードデータと共に保存
        コンテンツを格納」と同じオプションが含まれます。
      • 購読者の購読を解除
        • このリストからリードが削除されます
          必要なリードリストを指定します。

フォームの終わり

フォームの終了をマークします。次の項目を設定できます。

  • フォーム終了
    • 「送信」ボタンを表示
      「送信」ボタンを表示するかどうかを示します。
    • 名前を送信
      1 つのフォームに複数の「送信」ボタンを使用する場合の識別子。
    • タイトルを送信
      「送信」や「送る」など、ボタンに表示される名前。
    • 「リセット」ボタンを表示
      「リセット」ボタンを表示するには、このチェックボックスを選択します。
    • タイトルをリセット
      「リセット」ボタンに表示する名前。
    • 説明
      ボタンの下に表示する情報。

アカウント名

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

dc_form_accountname

アドレス

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

dc_form_addressfield

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

Captcha

キャプチャコンポーネントを画面に表示する場合、ユーザーは英数字を入力する必要があります。更新するごとに、文字列は変わります。

dc_form_captcha

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

チェックボックスグループ

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

dc_form_checkboxgroupuse

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

注意:

項目読み込みパスを使用して、チェックボックスグループのリストと値をプリロードすることができます。

フォームフィールドへの複数値のプリロードを参照してください。

クレジットカードの詳細

クレジットカードの詳細を入力するために必要なフィールドを提供できます。使用可能なカードの種類や、必要な情報(セキュリティコードなど)を指定するように設定できます。

chlimage_1

ドロップダウンリスト

ドロップダウンリストは、選択肢の値を提供するように設定できます。

dc_form_dropdownlistuse

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

注意:

項目読み込みパスを使用して、ドロップダウンリストと値をプリロードすることができます。

フォームフィールドへの複数値のプリロードを参照してください。

ファイルのアップロード

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

dc_form_fileupload

注意:

Sling サーブレットにファイルをアップロードするためのカスタムアップロードコンポーネントを作成できます。詳しくは、Adobe Experience Manager へのファイルのアップロードを参照してください。

非表示のフィールド

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

DC_Form_HiddenField

注意:

フォームをカスタマイズして、フォーム内の他のフィールドの値に基づき特定のファイルコンポーネントを表示または非表示にすることができます。フォームフィールドの表示の変更は、フィールドが特定の条件のみで必要となる場合に便利です。

詳しくは、フォームコンポーネントの表示と非表示を参照してください。

画像ボタン

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

dc_form_imagebutton

画像のアップロード

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

dc_form_imageupload

リンクフィールド

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

dc_form_link

よく使用されるのはカレンダーイベントフォームです。このようなフォームでは、イベントの URL やリンクのフィールドに使用されます。

パスワードフィールド

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

dc_form_password

パスワードリセット

このコンポーネントには、次の 2 つのフィールドがあります。

  • パスワードの入力用フィールド
  • パスワードが正しく入力されていることを確認する繰り返し入力用フィールド

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

dc_password_reset

ラジオグループ

ラジオグループを使用すると、1 つ以上のラジオボタンのチェックボックスのリストを構築できます。このチェックボックスでは 1 つの項目のみを選択できます。

タイトルおよび説明と共に要素名を指定できます。「+」ボタンと「-」ボタンを使用して項目の追加または削除をおこない、上下の矢印ボタンを使用して位置を変更します。また、必要に応じてデフォルト値を指定します。

dc_form_radiogroupuse

注意:

項目読み込みパスを使用して、ラジオグループと値をプリロードすることができます。

フォームフィールドへの複数値のプリロードを参照してください。

送信ボタン

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

dc_form_submitbutton

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

dc_form_submitbuttonuse

タグフィールド

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

dc_form_tags_use

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

  • タグフィールド
    • 許可された名前空間
      • Geometrixx Outdoors
      • ワークフロー
      • フォーラム
      • 写真を保管
      • Geometrixx Media
      • 標準タグ
      • マーケティング
      • アセットのプロパティ
    • ピクセル単位の幅
    • ポップアップのサイズ

テキストフィールド

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

dc_form_text

ワークフロー送信ボタン

このコンポーネントを使用すると、ワークフロー内で使用する送信ボタンを作成できます。

chlimage_1

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー