基盤コンポーネント foundation-components
基盤コンポーネントは、標準の web ページ用のコンテンツを作成するためのものです。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 **
画像のサイズと画質 images-sizes-and-quality
特定のビューポート幅に対して生成される画像の幅を次の表に示します。生成される画像の高さは、一定の縦横比を保つように計算され、画像のエッジ内に空白は挿入されません。空白の挿入を避けるために、切り抜きを使用できます。
JPEG 画像の場合は、ビューポートのサイズも JPEG の画質に影響します。次の JPEG 画質になる可能性があります。
- 低(0.42)
- 中(0.82)
- 高(1.00)
プロパティ properties
ダイアログを使用すると、アダプティブ画像コンポーネントのインスタンスのプロパティを編集できます。プロパティの多くは、基本となる画像コンポーネントと共通しています。プロパティは、次の 2 つのタブで使用できます。
-
画像
-
画像
コンテンツファインダーから画像をドラッグするか、クリックして画像を読み込む参照ウィンドウを開くことができます。画像を読み込んだ後は、画像の切り抜き、回転または削除を行うことができます。画像のズームインおよびズームアウトを行うには、画像の下(「OK」および「キャンセル」ボタンの上)のスライドバーを使用します。 -
切り抜き
画像の一部をクリップします。境界線をドラッグすると、画像が切り抜かれます。 -
回転
画像が目的の向きになるまで「回転」を繰り返しクリックします。 -
消去
現在の画像を削除します。
-
-
詳細
-
タイトル
アダプティブ画像コンポーネントではこのプロパティは使用しません。 -
代替テキスト
画像に使用する代替テキストです。 -
リンク先
アダプティブ画像コンポーネントではこのプロパティは使用しません。 -
説明
アダプティブ画像コンポーネントではこのプロパティは使用しません。
-
アダプティブ画像コンポーネントの拡張 extending-the-adaptive-image-component
アダプティブ画像コンポーネントのカスタマイズについて詳しくは、アダプティブ画像コンポーネントについてを参照してください。
カルーセル carousel
カルーセルコンポーネントを使用すると、個々のページに関連付けられている画像を次のように表示できます。
- 一度に 1 つずつ
- 短時間
- 指定した順序で
- 指定した遅延時間で
クリック可能なコントロールを使用して、リアルタイムで表示されるページをユーザーがオンデマンドで切り替えることもできます。現在表示されているページ画像を選択すると、そのページに移動します。つまり、カルーセルはナビゲーションコントロールとして機能します。
プロパティ properties-1
これらのプロパティは、次の 2 つのタブで使用できます。
-
カルーセル
ここでは、カルーセルの動作方法を指定します。- 再生速度
次のスライドが表示されるまでの時間(ミリ秒単位)。 - 遷移時間
2 つのスライド間の遷移にかかる時間(ミリ秒単位)。 - コントロールのスタイル
プルダウンメニューから様々なオプションを選択可能(「前へ/次へ」ボタン、右上のスイッチなど)。
- 再生速度
-
リスト
ページをカルーセルに含める方法を指定します。
-
次を使用してリストを作成
ページリストを作成する方法はいくつかあります。子ページ、固定リスト、検索または詳細検索です(いずれも以下で説明します)。
どの方法を選択した場合でも、リストに含めるページにはそれぞれ、ページに関連付けられている画像が既に存在する必要があります。カルーセルに表示されるのはこの画像です。指定のページのページプロパティにそのページの画像がない場合は、開始する前にそのページに画像を関連付ける必要があります。そうしない場合、カルーセルに表示されるページはほとんど空白になります。詳しくは、ページプロパティの編集を参照してください。
選択した項目に応じて、新しいパネルが表示されます。-
子ページのオプション
- 親ページ
手動で、またはセレクターを使用して、パスを指定します。現在のページを親として使用するには、空のままにします。
- 親ページ
-
固定リストのオプション
- ページ
ページのリストを選択します。エントリを追加するには+
を、順序を調整するには上下ボタンを使用します。
- ページ
-
検索のオプション
-
開始
手動で、またはセレクターを使用して、開始パスを入力します。 -
検索クエリ
プレーンテキストの検索クエリを入力できます。
-
-
詳細検索のオプション
- QueryBuilder 述語の表記
「QueryBuilder 述語の表記」を使用して検索クエリを入力できます。例えば、「fulltext=Marketing」と入力すると、コンテンツに「Marketing」が含まれる、すべてのページがカルーセルに表示されます。
クエリー式とその他の例の詳細は、QueryBuilder API を参照してください。
- QueryBuilder 述語の表記
-
-
並べ替え順
ドロップダウンメニューから、「jcr:title
」、「jcr:created
」、「cq:lastModified
」または「cq:template
」を選択します。 -
制限
オプション。カルーセルで使用する項目の最大数です。
-
グラフ chart
グラフコンポーネントを使用すると、棒グラフ、折れ線グラフまたは円グラフを追加できます。指定したデータから AEM によりグラフが作成されます。「データ」タブに直接入力するか、スプレッドシートをコピー&ペーストしてデータを指定します。
-
データ
- チャートデータ
チャートデータを入力するには、CSV(コンマ区切り値)形式を使用します。CSV 形式では、コンマ(「,」)をフィールドの区切り記号として使用します。
- チャートデータ
-
詳細
-
チャートのタイプ
「円グラフ」、「折れ線グラフ」および「棒グラフ」から選択します。 -
代替テキスト
グラフの代わりに代替テキストを表示します。 -
幅
グラフの幅(ピクセル単位)。 -
高さ
グラフの高さ(ピクセル単位)。
-
チャートデータの例と結果の棒グラフは次のとおりです。
コンテンツフラグメント content-fragment
コンテンツフラグメントは、ページに依存しないアセットとして作成および管理されます。その後、コンテンツページをオーサリングする際に、これらのフラグメントとそれらのバリエーションを使用できます。
デザインインポーター design-importer
このコンポーネントを使用すると、デザインパッケージを含む zip ファイルをアップロードできます。
ダウンロード download
ダウンロードコンポーネントは、選択した web ページに、特定のファイルをダウンロードするためのリンクを作成します。コンテンツファインダーからアセットをドラッグするか、ファイルをアップロードできます。
-
ダウンロード
-
説明
ダウンロードリンクに対して表示される短い説明。 -
ファイル
結果の web ページでダウンロード可能なファイル。コンテンツファインダーからアセットをドラッグするか、その領域を選択すると、ダウンロード可能にするファイルをアップロードできます。
-
Geometrixx でのダウンロードコンポーネントの例は次のとおりです。
外部 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
の対象アプリケーションを使用している場合は、次のようになります。
Flash flash
Flash コンポーネントを使用すると、Flash ムービーを読み込めます。コンテンツファインダーからコンポーネントに Flash アセットをドラッグするか、ダイアログを使用します。
-
Flash
-
Flash ムービー
Flash ムービーファイル。コンテンツファインダーからアセットをドラッグするか、クリックして参照ウィンドウを開きます。
-
サイズ
ムービーを保持する表示領域の寸法(ピクセル単位)。
-
-
代替イメージ
表示する代替画像。
-
詳細
-
コンテキストメニュー
コンテキストメニューを表示するか非表示にするかを示します。
-
ウィンドウモード
不透明、透明、枠付きウィンドウなど、ウィンドウの表示方法。
-
背景色
提示される色見本から選択した背景色。
-
最低バージョン
ムービーの実行に必要な Adobe Flash Player の最小バージョン。デフォルトは 9.0.0 です。
-
属性
その他の必要な属性。
-
画像 image
画像コンポーネントによって、指定したパラメーターに従って、画像とそれに付随するテキストが表示されます。
画像をアップロードした後に、編集および操作できます(切り抜き、回転、リンク/タイトル/テキストの追加など)。
画像は、アセットブラウザーから直接コンポーネントまたはコンポーネントの設定ダイアログにドラッグアンドドロップできます。設定ダイアログから画像をアップロードすることもできます。また、このダイアログボックスでは、画像のすべての定義と操作も制御します。
画像をアップロードした後に、インプレース編集を使用して、必要に応じて画像を切り抜いたり回転したりできます。
フルスクリーン編集モードで使用できる追加オプションがいくつか用意されています(マップ、ズームなど)。
画像を読み込む際は、次の設定が可能です。
-
マップ
画像をマップするには、「マップ」を選択します。画像マップの作成方法(長方形、多角形など)を指定し、領域が指す位置を指定します。
-
切り抜き
画像の一部を切り取るには、「切り抜き」を選択します。マウスを使用して画像を切り抜きます。
-
回転
画像を回転するには、「回転」を選択します。画像が目的の向きになるまで繰り返し使用します。
-
消去
現在の画像を削除します。
-
タイトル
画像のタイトル。
-
代替テキスト
アクセシブルなコンテンツを作成する際に使用する代替テキスト。
-
リンク先
web サイト内のアセットまたはその他のページへのリンクを作成します。
-
説明
画像の説明。
-
サイズ
画像の高さと幅を設定します。
最終的な画像(タイトル と 説明 を含む)は、次のように表示されます。
レイアウトコンテナ layout-container
このコンポーネントが提供するグリッド段落システムを使用すると、レスポンシブグリッド内にコンポーネントを追加して配置できるようになります。スマートフォン、タブレット、デスクトップなどのターゲットデバイスの幅に基づいて、様々なコンテンツレイアウトを定義できます。
リスト list
リストコンポーネントを使用すると、リストを表示するための検索条件を設定できます。
-
リスト
-
リストを選択
ここで、リストがコンテンツを取得する場所を指定します。複数の方法があります。
-
選択した項目に応じて、新しいパネルが表示されます。
-
子ページのオプション
-
(親ページ)の子
手動で、またはセレクターを使用して、パスを指定します。現在のページを親として使用するには、空のままにします。
-
-
固定リストのオプション
-
ページ
ページのリストを選択します。エントリを追加するには + を、順序を調整するには上下ボタンを使用します。
-
-
検索のオプション
-
開始
手動で、またはセレクターを使用して、開始パスを入力します。
-
検索クエリー
プレーンテキストの検索クエリーを入力できます。
-
-
詳細検索のオプション
-
Querybuilder 述語の表記
「QueryBuilder 述語の表記」を使用して検索クエリーを入力できます。例えば、「fulltext=Marketing」と入力すると、コンテンツに「Marketing」を含むすべてのページがカルーセルに表示されます。
クエリー式とその他の例の詳細は、QueryBuilder API を参照してください。
-
-
タグ
親ページ、タグ/キーワード および必要な一致条件を指定します。
-
-
表示方法
リンク、ティーザー、ニュースなどの項目のリストを表示する方法。
-
並べ替え順
リストを並べ替えるかどうかを指定し、並べ替える場合は、並べ替えに使用する条件も指定します。条件を入力するか、表示されるドロップダウンリストから条件を選択できます。
-
制限
リストに表示する項目の最大数を指定します。
-
フィードを有効にする
そのリストで RSS フィードを有効化するかどうかを示します。
-
1 ページに表示する数
一度に表示するリスト項目の数を指定できます。指定した数より多い項目を含むリストは、ページネーションを使用して複数に分割して表示されます。
-
次の例では、リスト コンポーネントで子ページのリストを表示する方法を示します(デザインは、サイトデザインのカスタム CSS 定義によって制御されます)。
ログイン login
「ユーザー名」フィールドと「パスワード」フィールドを提供します。
次の項目を設定できます。
-
ログイン
-
セクションラベル
入力フィールドの導入部テキスト。
-
ユーザー名ラベル
ユーザー名フィールドにラベルを付けるテキスト。
-
パスワードラベル
パスワードフィールドにラベルを付けるテキスト。
-
ログインボタンのラベル
ログインボタンのテキスト。
-
リダイレクト先
ユーザーがログインしたときに開く Web サイト上のページを指定できます。
-
-
ログイン済み
-
続行ボタンのラベル
ユーザーが既にログインしていることを示すテキスト。
-
注文ステータス order-status
-
タイトル
-
タイトル
表示するタイトルテキストを指定します。
-
リンク
どのページ(製品)の注文ステータスを表示するかを指定します。
-
種類/サイズ
用意された選択肢からを選択します。
-
参照 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
設定後、コンテンツは元のページと同じように表示されます。参照であるということは、編集用にコンポーネントを開いた場合にのみ確認できます。
検索 searching
検索コンポーネントで、ページに検索機能を追加します。
次の項目を設定できます。
-
検索
-
ノードタイプ
検索を特定のノードタイプに制限する場合は、ここにリストします(例:
cq:Page
)。 -
検索場所のパス
検索するブランチのルートページを指定します。
-
「検索」ボタンのテキスト
実際の検索ボタンに表示する名前。
-
統計テキスト
検索結果の上に表示するテキスト。
-
結果テキストがありません
結果がない場合、ここに入力したテキストが表示されます。
-
テキストをスペルチェック
誰かが類似の用語を入力すると、その用語の前にこのテキストが表示されます。
例えば、Geometrixxe
と入力すると、次のように表示されます。「もしかして:Geometrixx」 -
同様のページテキスト
類似のページの結果の横に表示されるテキスト。類似したコンテンツを持つページを表示するには、このリンクをクリックします。
-
関連する検索テキスト
検索の横に表示される、関連する用語とトピックのためのテキスト。
-
検索トレンドのテキスト
ユーザーが入力する検索語の上のタイトル。
-
結果ページラベル
このリストの下部に表示するテキスト。他の結果ページへのリンクが設定されます。
-
前のラベル
前の検索ページへのリンクに表示される名前。
-
次のラベル
次の検索ページへのリンクに表示される名前。
-
次の例は、検索コンポーネントで標準インストールのルートディレクトリから geometrixx
という単語を検索した後の状態を示しています。結果のページネーションも示しています。
次に、スペルミスがあり使用できない検索用語の例を示します。
サイトマップ sitemap
自動的なサイトマップのリスト表示。デフォルト設定では、現在の web サイトのすべてのページが、アクティブリンクとして表示されます。例えば、次のように表示されます。
必要に応じて、次の設定を行うことができます。
-
サイトマップ
-
ルートパス
リストを開始する場所のパス。
-
スライドショー slideshow
このコンポーネントを使用すると、一連の画像を読み込んで、ページにスライドショーとして表示できます。画像を追加または削除し、それぞれにタイトルを割り当てることができます。「詳細」では、表示領域のサイズも指定できます。
次の項目を設定できます。
-
スライド
-
新しいスライド
「追加」(および「削除」)ボタンを使用して、スライドを選択して指定できます。
-
タイトル
必要に応じてタイトルを指定します。タイトルは、該当するスライドに重ねて表示されます。
-
-
詳細
-
サイズ
幅と高さをピクセル単位で指定します。
-
その後、スライドショーコンポーネントは、各画像を順番に短時間表示し、次のスライドにフェードするという処理を繰り返します。
テーブル table
テーブル コンポーネントは、テーブルの作成、入力、書式設定を行うために事前設定されています。ダイアログを使用すると、次のいずれかの方法でテーブルを設定し、コンテンツを作成できます。
- 最初から作成
- 外部エディター(Excel、OpenOffice、メモ帳など)からスプレッドシートまたはテーブルをコピー&ペースト
インラインエディターを使用してコンテンツに対して基本的な変更を加えることができます。
フルスクリーンモードでテーブルレイアウトを設定できます。
次の画面ショットは、テーブルコンポーネントの例を示します。サイト専用の CSS でデザインを決定しています。
タグクラウド tag-cloud
タグクラウドは、web サイト内のコンテンツに適用されたタグの選択範囲をグラフィカルに表示します。
タグクラウドコンポーネントを設定する場合、次の情報を指定できます。
-
表示するタグ
表示するタグを収集する場所。ページ(すべての子またはすべてのタグを含むページ)から選択します。
-
ページ
参照するページを選択します。
-
タグにリンクがありません
表示するタグがリンクとして機能するかどうか。
タグの適用について詳しくは、タグの使用を参照してください。
テキスト text
テキストコンポーネントを使用すると、リッチテキストエディターの機能を備えた WYSIWYG エディターでテキストブロックを入力できます。フォントの文字、配置、リンク、リスト、インデントなど、多様なアイコンでテキストの書式を設定できます。
設定 ダイアログを開いて、次の項目を設定することもできます。
- スペーサー
- テキストスタイル
書式設定されたテキストがページに表示されます。実際のデザインはサイトの CSS に応じて異なります。
テキストコンポーネントおよびリッチテキストエディターの機能について詳しくは、リッチテキストエディターのページを参照してください。
インプレース編集 inplace-editing
ダイアログベースのリッチテキスト編集モードに加えて、AEM には、ページのレイアウトに表示されたとおりにテキストを直接編集できる、インプレース編集も用意されています。
テキストと画像 text-image
テキストコンポーネントと画像コンポーネントは、テキストブロックと画像を追加します。テキストと画像を個別に追加して編集することもできます。詳しくは、テキストコンポーネントと画像コンポーネントを参照してください。
次の項目を設定できます。
-
コンポーネントスタイル(スタイル)
ここで画像を左揃えまたは右揃えにすることができます。デフォルトは、画像を左に配置する「左」です。
-
画像のプロパティ(詳細画像プロパティ)
次の項目を設定できます。
-
画像アセット
必要な画像をアップロードします。
-
タイトル
マウスオーバーで表示される、ブロックのタイトル。
-
代替テキスト
画像を表示できない場合に表示する代替テキスト。空にすると、タイトルが使用されます。
-
リンク先
ターゲットパスを指定します。
-
説明
画像の説明。
-
サイズ
画像の高さと幅を設定します。
-
次に、画像を左揃えに表示するテキスト画像コンポーネントの例を示します。
タイトル title
タイトルコンポーネントには次の機能があります。
- 「タイトル」フィールドを空のままにして、現在のページ名を表示します。
- 「タイトル」フィールドに指定したテキストを表示します。
次の項目を設定できます。
-
タイトル
ページタイトル以外の名前を使用する場合は、ここに入力します。
-
リンク
タイトルがリンクとして動作する場合の URI。
-
種類/サイズ
ドロップダウンリストから「小」または「大」を選択します。「小」は画像として生成されます。「大」はテキストとして生成されます。
次に、タイトル コンポーネントを表示した例を示します。サイト固有の CSS でデザインを決定しています。
ビデオ video
ビデオ コンポーネントを使用すると、定義済みですぐに使用できるビデオ要素をページに配置できます。
HTML5 要素と共に使用する場合は、ビデオプロファイルの設定も参照してください。
ページにコンポーネントのインスタンスを配置した後、次の設定を行うことができます。
-
ビデオ
-
ビデオアセット
ビデオアセットをアップロードまたはドロップします。
-
サイズ
ビデオのネイティブサイズ(ピクセル単位の幅 × 高さ)が「サイズ」の横のボックスに表示されます(上の図を参照してください)。ビデオのネイティブ寸法を上書きする場合は、幅と高さの寸法をここに手動で入力します。「OK」を選択してダイアログを閉じます。
-
.mp4
Ogg
FLV
(Flash ビデオ)
列 columns
列は、AEM のコンテンツのレイアウトを制御するメカニズムです。標準のインストールでは、2 列または 3 列を作成するコンポーネントが提供されています。
次の例は、2 列のコンポーネントを使用している場合を示しています。新しいコンポーネントのプレースホルダーを使用できます。
2 列 columns-1
デフォルトが 2 つの同じ列に設定されている列制御コンポーネント。
3 列 columns-2
デフォルトが 3 つの同じ列に設定されている列制御コンポーネント。
列の制御 column-control
列制御コンポーネントを使用すると、web ページのメインパネルのコンテンツを複数の列に分割する方法を選択できます。ユーザーは、必要な列数を事前定義済みのリストから選択し、各列内でコンテンツを作成、削除または移動できます。
-
列の制御
-
列のレイアウト
レンダリングする列数を選択します。作成された各列には、コンテンツを追加する際にコンポーネントまたはアセットをドラッグするための独自のリンクが表示されます。
-
フォーム form
フォームコンポーネントを使用すると、訪問者が入力を送信するためのフォームを作成できます。フォームとフォームコンポーネントを使用すると、顧客満足度アンケートなどのユーザーフィードバックや、ユーザー登録などのユーザー情報などを収集できます。
フォームは、次のように多様なコンポーネントから構成されます。
-
フォーム
フォームコンポーネントで、ページ上の新しいフォームの始まりと終わりを定義します。その他のコンポーネントは、これらの要素の間に配置できます(テーブル、ダウンロードなど)。
-
フォームのフィールドと要素
フォームのフィールドと要素には、テキストボックス、ラジオボタン、画像を含めることができます。多くの場合、ユーザーは、テキストの入力などのアクションをフォームフィールドで行います。詳しくは、個々のフォーム要素を参照してください。
-
プロファイルコンポーネント
プロファイルコンポーネントは、訪問者に合わせた個人設定が必要なソーシャルコラボレーションや他の領域に使用する訪問者のプロファイルに関連しています。
フォームの例を以下に示します。 これは、フォーム コンポーネント(開始と終了)、入力に使用する 2 つの フォーム****テキスト フィールド、導入部のテキストに使用する 1 つの 一般****テキスト フィールド、および「送信」ボタンで構成されています。
(多くの)フォームコンポーネントに共通の設定 settings-common-to-many-form-components
フォームコンポーネントはそれぞれ目的が異なりますが、多くは類似するオプションおよびパラメーターで構成されています。
どのフォームコンポーネントを設定する場合も、ダイアログ内の次のタブを使用できます。
-
タイトルとテキスト
このタブでは、フォームのタイトルや付随するテキストなど、基本情報を指定する必要があります。適切な場合は、フィールドで複数選択が有効かどうかや、選択肢に使用できる項目など、その他の主要な情報を定義することもできます。
-
初期値
デフォルト値を指定できます。
-
制約
このタブでは、フィールドが必須かどうかを指定し、そのフィールドに制約を設定できます(数値でなければならない、など)。
-
スタイル設定
フィールドのサイズとスタイル設定を示します。
これらのタブには、必要なパラメーターが用意されています。タブは、個々のコンポーネントタイプによって異なりますが、次のようなものがあります。
-
タイトルとテキスト
-
要素名
フォーム要素の名前。リポジトリ内でデータが格納される場所を示します。
このフィールドは必須であり、次の文字のみを含めることができます。- 英数字
_ . / : -
-
タイトル
フィールドと共に表示されるタイトル。空白の場合、デフォルトのタイトルが表示されます。
-
説明
必要に応じて、ユーザーに追加情報を提供できます。フォームでは、フィールドの下に、タイトルよりも小さなフォントで表示されます。
-
表示/非表示
フィールドを表示するタイミングを指定します。
-
-
初期値
-
デフォルト値
フォームを開いたときにフィールドに表示される値。つまり、ユーザーが入力を行う前です。
-
-
制約
-
必須
制約はフォームコンポーネントの種類によって異なりますが、このフィールドまたはこのフィールドの特定の部分が必須かどうかを示す、1 つ以上のクリックボックスを提供します。
-
必須メッセージ
このフィールドが必須であることをユーザーに通知するメッセージです。必須フィールドにはアスタリスクも付いています。
-
制約
選択可能な制約は、フォームコンポーネントのタイプによって異なります。
-
制約メッセージ
どの入力が必須かをユーザーに知らせるメッセージ。
-
-
スタイル設定
-
サイズ
行数と列数。
-
幅
ピクセル数。
-
CSS
-
フォーム(コンポーネント) form-component
フォームコンポーネントは、フォーム開始 要素と フォーム終了 要素を使用して、フォームの開始と終了の両方を定義します。フォームが確実に正しく定義されるように、これらの要素は常にペアとして使用されます。
フォームの開始と終了の間に、ユーザーが実際に入力するフィールドを定義するフォームコンポーネントを追加できます。
フォームの開始 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
ユーザーがアカウント名を入力できます。
アドレス address
次のような形式の国際化対応のアドレスフィールドを追加できます。
このコンポーネントはすぐに使用できるように設定されていますが、必要に応じて設定を変更できます。例えば、アドレスの個々の要素に対して制約を追加できます。フィールドを空にすると、デフォルトの設定が使用されます。
Captcha captcha
Captcha コンポーネントでは、画面に表示される英数字の文字列を入力する必要があります。文字列は、更新するたびに変更されます。
このコンポーネントには様々なパラメーターを設定できます。例えば、Captcha 文字列が無効な場合に表示するメッセージを設定できます。
チェックボックスグループ checkbox-group
チェックボックスを使用すると、1 つまたは複数のチェックボックスのリストを構築できます。チェックボックスでは同時に複数の項目を選択できます。
タイトル、説明、要素名を含む、様々なパラメーターを指定できます。「+」ボタンや「-」ボタンを使用して項目の追加や削除を行い、上下の矢印ボタンで位置を変更します。
クレジットカードの詳細 credit-card-details
クレジットカードの詳細を入力するために必要なフィールドを指定できます。受け入れるカードのタイプと必要な情報(セキュリティコードなど)を指定するように設定できます。
ドロップダウンリスト dropdown-list
ドロップダウンリストは、使用する選択肢の値の範囲を設定できます。
リストに表示するタイトルと項目を指定できます。「+」ボタンや「-」ボタンを使用してリスト項目の追加や削除を行い、上下の矢印ボタンを使用して位置を変更します。ユーザーがリストから複数の項目を選択できるかどうか、およびリストを初めて開いたときに自動的に選択される項目(初期値)を指定できます。
ファイルのアップロード file-upload
ファイルのアップロードコンポーネントを使用すると、ユーザーがファイルを選択してアップロードできるようになります。
非表示のフィールド hidden-field
非表示のフィールドを作成できます。これらの非表示フィールドは、様々な目的で使用できます。例えば、フォーム送信後にアクションを実行する必要がある場合や、後処理で非表示のデータが必要な場合などです。
画像ボタン image-button
画像ボタンを使用すると、独自の画像やテキストのボタンを作成できます。
画像のアップロード image-upload
画像のアップロードコンポーネントを使用すると、ユーザーが画像ファイルを選択してアップロードできるようになります。
リンクフィールド link-field
リンクフィールドを使用すると、ユーザーが URL を指定できます。
最も一般的に使用されるのは、カレンダーイベントフォームで、イベントの URL/リンクフィールドに使用されます。
パスワードフィールド password-field
ユーザーにパスワードの入力を許可します。
パスワードリセット password-reset
このコンポーネントは、次の 2 つのフィールドをユーザーに提供します。
- パスワードの入力
- 入力が正しいことを確認するために、パスワードの繰り返し入力します。
デフォルト設定では、コンポーネントは次のように表示されます。
ラジオグループ radio-group
ラジオグループは、1 つ以上のラジオチェックボックスのリストを提供し、特定の時点で選択できるのは、そのうち 1 つのみです。
タイトルと説明と共に要素名を指定できます。必要に応じて、「+」ボタンと「-」ボタンを使用して、項目の追加や削除、上下の矢印による配置、デフォルト値の指定を行うことができます。
送信ボタン submit-button
このコンポーネントを使用すると、デフォルトのテキストを指定した送信ボタンを作成できます。
または、独自のテキストも指定できます。
タグフィールド tags-field
このフィールドでは、タグを選択できます。
専用のタブを使用して、名前空間を含む様々なパラメーターを指定できます。
-
タグフィールド
-
許可された名前空間
- Geometrixx Outdoors
- ワークフロー
- フォーラム
- 写真を保管
- Geometrixx Media
- 標準タグ
- マーケティング
- アセットのプロパティ
- ピクセル単位の幅
- ポップアップのサイズ
-
テキストフィールド text-field
標準テキストフィールドは、必要なサイズに設定し、独自のリードをメッセージに含めることができます。
ワークフロー送信ボタン workflow-submit-button-s
ワークフロー内で使用する送信ボタンを作成できます。