ブロックコレクション

これは、AEM 製品の一部と見なされるブロックのコレクションで、プロジェクト内のブロックのブループリントとして推奨されます。

これらのブロックは、実際の実稼動AEM プロジェクトから取得されます。 このコレクションの一部になるには、ブロックが多数のプロジェクトで広く使用され、十分な抽象機能を提供し、一般的なものである必要があります。これにより、基になるコンテンツモデルを変更せずに再利用できます。

Web サイトのニーズやデザインが変わると、ブロックコレクションも変わります。 プロジェクトの新たなニーズを反映して追加が行われますが、十分に頻繁に使用されないブロックも削除されます(非推奨)。

コレクション内のブロックには、次のような技術的な原則があります。

  • 直観的: 直観的で作成しやすいコンテンツ構造
  • 使用可能: 依存関係なし、ボイラープレートと互換性あり
  • レスポンシブ: すべてのブレークポイントで機能します
  • コンテキスト対応: テキストや背景色などの CSS コンテキストを継承します
  • Localizable: ハードコーディングされたコンテンツなし
  • 高速: パフォーマンスへの悪影響なし
  • SEO と A11y: SEO フレンドリーでアクセス可能

すべてのブロックは、独自のブロック開発の基礎と見なすことができます。 独自のプロジェクトのニーズに合わせて、すべての .css.js コードを変更する可能性が非常に高くなります。 これらのブロックの主な価値は、提供されるコンテンツ構造です。

ブロックのコードがプロジェクトに完全に適応することを考慮すると、コレクション内のブロックをそれぞれの古いバージョンに下位互換性を持たせたり、アップグレード可能にしたりする意図はありません。

ボイラープレート

最も一般的に使用されるブロック(およびデフォルトのコンテンツタイプ)は、AEM ボイラープレートでキュレーションされ、すべてのAEM プロジェクトの一部です。 ブロックがボイラープレートの一部になるには、AEMのプロジェクトの大多数がブロックを使用する必要があります。

AEM Boilerplate のすべてのブロックのコードベースはオープンソースで、GitHub adobe/aem-boilerplate にあります。

AEM Boilerplate のブロックは、次の サイドキックライブラリを使用して検出できます。下の「copy」ボタンを使用して、対応するコンテンツ構造をクリップボードにコピーし、ドキュメントに貼り付けて、コンテンツ構造を表示します。

見出し

デフォルトコンテンツ

様々なレベルの見出しを使用して、ドキュメントのセマンティックのバックボーンを確認できます

テキスト

デフォルトコンテンツ

豊富なセマンティック書式設定オプションを使用した本文またはコピー

画像

デフォルトコンテンツ

写真はコンテンツを生き生きとさせます

リスト

デフォルトコンテンツ

必要な場所での順序付きリストと順不同リスト

リンク

デフォルトコンテンツ

他の Web サイトまたは独自のコンテンツの参照

ボタン

デフォルトコンテンツ

コールトゥアクションボタンなど

コード

デフォルトコンテンツ

コンテンツ内のフォーマット済みコードスニペットをハイライト表示

セクション

デフォルトコンテンツ

ページ上のコンテンツをセクションにグループ化します

アイコン

デフォルトコンテンツ

アイコンを使用してコンテンツの関心を高める

ヒーロー

ブロック

ページ上部でのヒーロートリートメント

ブロック

複数列のレイアウトをレスポンシブに柔軟に処理する方法

カード

ブロック

画像やリンクを含む/含まないカードのリスト

ヘッダー

ブロック

柔軟なヘッダーとナビゲーションの例

フッター

ブロック

シンプルで拡張可能なフッターブロック

メタデータ

必要に応じて、ページにメタデータを追加します

セクションメタデータ

セクション内のすべてのコンテンツをハイライト表示または構造化する

ブロックコレクション

ブロックコレクションには、一般的に使用されるブロックが含まれていますが、ボイラープレートと見なされるほど一般的ではありません。 経験則として、ブロックコレクションに含めるには、すべてのAEM プロジェクトの半分以上でブロックを使用する必要があります。

ブロックコレクションは、ボイラープレートコードへのエントリパスになります。 同様に、ボイラープレート内のブロックがそれほど使用されなくなった場合は、このコレクションに移動できます。

AEM ブロックコレクション内のすべてのブロックのコードベースはオープンソースで、GitHub adobe/aem-block-collection にあります。

AEMのブロック ブロックコレクションは、 サイドキックライブラリを使用して検出できます。以下の「copy」ボタンを使用して、対応するコンテンツ構造をクリップボードにコピーし、ドキュメントに貼り付けて、コンテンツ構造を表示します。

埋め込み

ブロック

ソーシャルメディアコンテンツをAEM ページに簡単に埋め込む方法

フラグメント

ブロック

複数のページにわたるコンテンツの共有

テーブル

ブロック

表形式のデータを行と列に整理する方法

ビデオ

ブロック

AEMから直接ビデオを表示および再生

アコーディオン

ブロック

関連するフルコンテンツを表示するように切り替えることができる説明ラベルのスタック

パンくずリスト

ブロックのアドオン

の現在のページの場所を示すページタイトルと関連リンクのリスト ナビゲーション階層

カルーセル

ブロック

一連の画像を任意でスムーズに切り替えられるダイナミック表示ツール テキストコンテンツ

モーダル

自動ブロック

他のサイトコンテンツの上に表示されるポップアップ

引用

ブロック

内の引用の表示または特定の一節のハイライト(または「引き出し引用符」) 文書

検索

ブロック

検索語句を入力してサイトのコンテンツを検索できるようにします

タブ

ブロック

情報を複数のラベル付き(「タブ付き」)パネルにセグメント化

フォーム

ブロック (非推奨)

ユーザーが情報を送信できるようにグループ化された一連の入力コントロール

ブロックコレクションは、AEM コミュニティからのフィードバックに基づいて継続的に進化しています。 ブロックコレクションに含める必要があるブロックがあると思われる場合は、AEMの連絡先にお問い合わせください。 ブロックコレクションに含める現在の候補は次のとおりです。

  • 同意バナー

まだコレクションに含まれていないブロックがすぐに必要な場合は、上記のすべての候補のサンプル実装があるAEM プロジェクトを GitHub で見つけるのは比較的簡単です。

パーティーの禁止

ブロックパーティーは、AEM開発者コミュニティが、AEM サイトで構築したものを紹介する場所です。 また、他のユーザーがホイールを再発明するのを避け、コミュニティが作成したこれらのブロック/コードスニペット/統合を再利用し、必要に応じてコードを調整して独自のプロジェクトに合わせることもできます。 提供するすべてのものについては、 ブロックパーティーを参照してください。

メモ:アドビはAEM デベロッパーコミュニティを愛し、サポートしていますが、Adobeは、ブロックパーティーで表示されるコードのメンテナンスや更新に対して責任を負いません。 このコードは、ご自身の判断で使用してください。

recommendation-more-help
10a6ce9d-c5c5-48d9-8ce1-9797d2f0f3ec