ブロックコレクション

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

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

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

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

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

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

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

ボイラープレート

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

<h3>見出し</h3>

デフォルトコンテンツ

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

<h3>テキスト</h3>

デフォルトコンテンツ

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

<h3>画像</h3>

デフォルトコンテンツ

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

<h3>リスト</h3>

デフォルトコンテンツ

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

<h3>リンク</h3>

デフォルトコンテンツ

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

<h3>ボタン</h3>

デフォルトコンテンツ

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

<h3>コード</h3>

デフォルトコンテンツ

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

<h3>セクション</h3>

デフォルトコンテンツ

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

<h3>アイコン</h3>

デフォルトコンテンツ

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

<h3>ヒーロー</h3>

ブロック

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

<h3></h3>

ブロック

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

<h3>カード</h3>

ブロック

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

<h3>ヘッダー</h3>

ブロック

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

<h3>フッター</h3>

ブロック

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

<h3>メタデータ</h3>

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

<h3>セクションメタデータ</h3>

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

ブロックコレクション

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

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

<h3>埋め込み</h3>

ブロック

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

<h3>フラグメント</h3>

ブロック

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

<h3>テーブル</h3>

ブロック

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

<h3>ビデオ</h3>

ブロック

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

<h3>アコーディオン</h3>

ブロック

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

<h3>パンくずリスト</h3>

ブロックのアドオン

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

<h3>カルーセル</h3>

ブロック

オプションのテキストコンテンツを含む一連の画像をスムーズに切り替えることができる動的表示ツール

<h3>フォーム</h3>

ブロック

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

<h3>引用</h3>

ブロック

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

<h3>検索</h3>

ブロック

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

<h3>タブ</h3>

ブロック

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

<h3>モーダル</h3>

自動ブロック

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

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

  • 同意バナー

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

パーティーの禁止

Block Party では、私たちの情熱的なデベロッパーコミュニティに、AEM サイトで構築したものを紹介する場を提供したいと考えています。 また、他のユーザーがホイールを再発明するのを避け、コミュニティが作成したこれらのブロック/コードスニペット/統合を再利用し、必要に応じてコードを調整して独自のプロジェクトに合わせることもできます。

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

AEM開発者がクールなブロック/コードスニペットまたは統合機能を送信する場合は、送信内容を入力してください このフォームの使用.

コードスニペット
ハネッソロ

モーダル

プレビュー

<small>フランクリンページにモーダルを追加するスクリプト。 新しい(ish) ネイティブダイアログ要素を使用します。

このアクションは、次の場所で確認できます。

リンク

</small>

コードスニペット
msagolj

ビデオ自動再生

<small>異なるブラウザーでビデオを自動再生するには、一連の属性を設定する必要があります。 videoTag.muted = true を設定することが重要です。そうしないと、Chrome で再生されません。 例: setAttribute ('muted', true)が機能しません。</small>

Sidekickプラグイン
ディランデパス

Sidekick ライブラリ

プレビュー

<small>Sidekickライブラリは、開発者がコンテンツ作成者向けの UI 駆動型ツールを作成できるようにするAEM Sidekickの拡張機能です。 作成者にすべてのブロックのリストを直感的な方法で表示できる組み込みのブロックプラグインが含まれているので、作成者はブロックのあらゆるバリエーションを覚えたり検索したりする必要がなくなります。開発者は、サイドキックライブラリ用に独自のプラグインを作成することもできます。</small>

コードスニペット
davidnuescheler

メタタグ/JSON ベースの CSP

<small>このアプローチでは、CSP を設定します。CSP は、ワイヤを介して 1 回だけ転送され、クライアント上でキャッシュされます。 読みやすい JSON ファイルで CSP を管理できます</small>

ツールの作成
サキオーロス

SASS とAEMの統合

<small>AEMでのローカル開発時の CSS の SASS コンパイル</small>

コードスニペット
ブフー

フェッチ

<small>fetch は JavaScript の fetch 関数の周りの小さなラッパーで、コンポーザブルアプリケーションを構築する際にAEM Content API を扱うのに役立ちます。 これにより、AEM インデックスからのコンテンツの取得、遅延ページネーションの適用、ページへのリンクのフォロー、ページのメタデータの取り込みなどを簡単に行うことができます。 Ffetch を使用すると、ヘッドレス SDK のパフォーマンスへの手荷物やヘッドレス API の複雑さなしで、ヘッドレスアプリケーションを簡単に作成できます。</small>

コードスニペット
シャイマー

動的に読み込まれるテンプレート

<small>テンプレートに固有の CSS および JS を読み込み、そのコードをグローバルスクリプト/スタイルに組み込むことなく、テンプレート固有のスタイル設定と自動ブロックを可能にします。

メモ:テンプレート js はブロックが読み込まれる前に読み込まれますが、セクション/ブロックがデコレートされた後で実行する必要があります(つまり、ブロックを作成してデコレートし、セクションに追加しますが、読み込まないでください)。</small>

コードスニペット
フカカチーエ

リンク付き画像

プレビュー

<small>このスニペットは、画像にハイパーリンクを追加します。 使用するには、リンクされたコードスニペットを参照してください。 また、Word/GDoc でオーサリングする際に、画像の直後にリンク URL を指定します。</small>

ブロック
ジャラガリ

フォームブロック

プレビュー

<small>様々な機能を持つフォームブロック

  • Google Recaptcha Integration

  • Formsでの添付ファイルのサポート。

  • 後処理

    • メール通知
    • データをMarketoまたは Salesforce に同期します。</small>

ブロック
niekraaijmaker

タブ

プレビュー

<small>Scripts.js で自動ブロックされるセクションに基づくタブブロックは、タブブロック内のブロックの「ネスト」と、スタイルなどのセクションメタデータをサポートします。

CSS で部分的に制御されたタブブロックロジック</small>

ブロック
デーブ・フィンク

Image-Compare

プレビュー

<small>これは、2 つの画像をスライダーで比較して、左右の画像を表示または非表示にするためのシンプルなコンテンツブロックです。</small>

ブロック
シャイマー

パンくず

<small>親ページのページタイトルに基づいてパンくずナビゲーションを作成します</small>

コードスニペット
andreituicu

DOM ヘルパー(React JSX と同様)

プレビュー

<small>React JSX からインスピレーションを受けた DOM ヘルパーを使用して、AEM JS コードをより簡潔で、書き込み、理解、レビューしやすくします。 コンパイルや外部の依存を必要とせずに、100% の Vanilla JS を使用してコードを表示する際に、結果のHTMLを簡単に視覚化する DOM のような構文構造。 100 個の LHS を維持し、文字列テンプレートを使用して DOM 操作を行う際の落とし穴を回避できる、最小限のオーバーヘッド(少数の ifs および関数呼び出し)。 シートからの動的データのレンダリングと、Word ドキュメントからのデータの両方に使用できます。</small>

Sidekickプラグイン
ヘルツォーク 31

ブロックおよび横断の集計

プレビュー

<small>このコードを使用すると、ブロックまたはセクションをスケジュールできます。 日付または日付範囲を行としてブロックまたはセクションのメタデータテーブルに追加するだけで、コンテンツは日付の後または範囲内にのみ表示されます。

これには、過去または将来のコンテンツをプレビューできるSidekick拡張機能が付属しています。

スケジュールされたコンテンツは引き続き DOM に含まれるので、機密データには適していません。</small>

その他
ボスハルト

docxtools: コマンドライン linux スタイルからの複数の.docx ファイルの操作

<small>このコマンドラインツールを使うと、linux の'grep'や'sed' コマンドと同じように、.docx ファイルのディレクトリツリー上でタスクを実行できます。 現在サポートされている内容は以下の通りです:* cat - コンソールへの docx ファイルのテキスト内容の出力* grep – 文書テキスト内の正規表現の検索* replace/replace-link 検索および.docx ファイル内のテキストまたはハイパーリンクの置換メモ:ツールは Rust で記述されており、リリースはプラットフォーム固有の実行可能ファイルを提供します。 別のプラットフォームが必要な場合は、David B に ping するか、PR に投稿します。</small>

その他
滑液

RSS フィードジェネレーターの Github ワークフロー

プレビュー

<small>この Github ワークフローは、新しいページが公開されるたびに RSS フィード XML を更新します。 ワークフロー:

リンク

スクリプト:

リンク

</small>

コードスニペット
ランボス

アイコン スプライトを作成する

プレビュー

<small>CSS からSVGのスタイルを直接設定できるように、文書内でアイコンを直接インライン化する機能(サイズ、色など)</small>

その他
vtsaplin

AEM式

プレビュー

<small>AEM式を使用すると、パラメーターを含む単純な式を追加することで、AEM ドキュメントをテンプレートに変換できます。 これらの式は、動的に取得されたコンテンツを表示するHTML要素になります。 また、式をデコレーターとして使用して、挿入ポイントを中心にコンテンツのスタイルを設定し拡張することもできます。 これにより、式が再利用可能なフラグメントになり、最上位のAEM ブロック内に配置できます。</small>

コードスニペット
sdmcraft

外部画像

プレビュー

<small>このコードスニペットは、外部システム(AEM AEMの外部)から取得されたAEM AEM web ページ上の画像を使用するメカニズムを示しています</small>

その他
滑液

Excel シートを使用してすべての.docx ファイル内のリンクを置換

<small>Word ドキュメント内の古いリンクを、マッピングされた Excel シートに基づく新しいリンク(通常は redirects.xlsx)に再帰的に置き換えます。</small>

その他
sdmcraft

Web ページのビジュアル比較ツール

プレビュー

<small>これは、web ページを比較するための視覚的な比較ツールです。 多くの場合、サイトのスタイル設定の変更に取り組んでいる際には、その変更がサイト全体に与える影響を評価したいと考えます。 すべてのページに対してこれを手動で行うのは、面倒なプロセスです。 このツールを使用すると、このタスクはかなり自動化されます。 視覚的なテスト用にブランチ参照と URL のリストが提供されると、「main」ブランチと「test」ブランチのすべての URL を調べ、プレイヤーベースのヘッドレスブラウザーに読み込み、スクリーンショットを撮って違いを記録します。 このツールは、ユーザーに違いを通知し、違いを確認できるスクリーンショットの場所を提供します。</small>

その他
アモール・アナンド

ログビューア

プレビュー

<small>AEM Edge 配信プロジェクトのログを簡単に表示する方法</small>

Sidekickプラグイン
ウスマン・カリド

アクセシビリティモード

プレビュー

<small>このプラグインは、サイドキックに、コンテンツの観点からページを監査し、画像上の代替テキストの欠落、読みやすさ、その他のアクセシビリティ項目についてレポートする、特定のフランクリングページの「アクセシビリティモード」を有効にするボタンを追加します。

また、カスタムチェックを作成して拡張することもできます。カスタムチェックを使用すると、ブロックの正しい使用とスタイルガイドラインへの準拠を促進することができます。 リポジトリにこの例があり、ページ上のブロックのインスタンスが多すぎるかどうかをチェックしてレポートします。

コンテンツ作成者がページを表示したり、公開前のプリフライトチェックとしてコンテンツやアクセシビリティに関する問題に対処したりするために使用できます。</small>

Sidekickプラグイン
シャイマー

参照チェック

<small>ページで使用されている参照(フォーム、フラグメント、リンクなど)を検索します。 作成者は、ワンクリックでアセットにアクセスして表示および編集できます。 また、着信参照をチェックできます。</small>

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