ソーシャルコンポーネントフレームワーク social-component-framework

CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

ソーシャルコンポーネントフレームワーク (SCF) を使用すると、サーバー側とクライアント側の両方で Communities コンポーネントを設定、カスタマイズ、拡張するプロセスが簡単になります。

フレームワークの利点:

  • 機能:80%の使用例に対するカスタマイズがほとんどあるいはまったく行われず、すぐに使用できる簡単な統合
  • スキン可能:CSS スタイル設定でのHTML属性の一貫した使用
  • 拡張可能:コンポーネントの実装は、オブジェクト指向でビジネスロジックが軽量で、サーバー上に増分的なビジネスログインを簡単に追加できます。
  • 柔軟:簡単にオーバーレイおよびカスタマイズできる、単純なロジックのない JavaScript テンプレート
  • アクセス可能:HTTP API は、任意のクライアント(モバイルアプリを含む)からの投稿をサポートしています
  • ポータブル:あらゆるテクノロジーで構築された Web ページに統合/埋め込み

インタラクティブを使用してオーサーインスタンスまたはパブリッシュインスタンスで参照する コミュニティコンポーネントガイド.

概要 overview

SCF では、コンポーネントは、SocialComponent POJO、Handlebars JS テンプレート(コンポーネントをレンダリングする)、および CSS(コンポーネントのスタイルを設定する)で構成されます。

Handlebars JS テンプレートは、モデル/ビュー JS コンポーネントを拡張して、クライアント上のコンポーネントとのユーザーインタラクションを処理できます。

データの変更をサポートする必要があるコンポーネントの場合は、従来の Web アプリケーションのモデル/データオブジェクトと同様に、データの編集/保存をサポートするように、SocialComponent API の実装を記述できます。 また、操作リクエストの処理、ビジネスロジックの実行、およびモデル/データオブジェクトでの API の呼び出しを行うために、操作(コントローラー)と操作サービスを追加できます。

SocialComponent API を拡張して、ビューレイヤーまたは HTTP クライアントに対してクライアントが必要とするデータを提供できます。

クライアント用のページのレンダリング方法 how-pages-are-rendered-for-client

chlimage_1-25

コンポーネントのカスタマイズと拡張 component-customization-and-extension

コンポーネントをカスタマイズまたは拡張するには、オーバーレイと拡張のみを/apps ディレクトリに書き込み、将来のリリースへのアップグレードプロセスを簡素化します。

  • スキニング用

  • 外観と操作性

    • JS テンプレートと CSS の変更
  • 外観、操作性、UX

  • JS テンプレートまたはGETエンドポイントで使用可能な情報を変更するには

  • 操作中にカスタム処理を追加するには

  • 新しいカスタム操作を追加するには

    • 新しい Sling Post 操作
    • 既存を使用 OperationServices 必要に応じて
    • 必要に応じてクライアント側から操作を呼び出す JavaScript コードを追加します

サーバー側フレームワーク server-side-framework

このフレームワークは、サーバー上の機能にアクセスし、クライアントとサーバーの間のインタラクションをサポートする API を提供します。

Java API java-apis

Java API は、簡単に継承またはサブクラス化される抽象クラスおよびインターフェイスを提供します。

メインクラスは、 サーバー側のカスタマイズ ページ。

訪問 ストレージリソースプロバイダの概要 を参照してください。

HTTP API http-api

HTTP API は、PhoneGap アプリ、ネイティブアプリ、その他の統合やマッシュアップ用に、カスタマイズの容易さとクライアントプラットフォームの選択をサポートします。 さらに、HTTP API を使用すると、コミュニティサイトをクライアントなしでサービスとして実行できるので、フレームワークコンポーネントを任意のテクノロジーで構築された任意の Web ページに統合できます。

HTTP API -GETリクエスト http-api-get-requests

すべての SocialComponent に対して、フレームワークは HTTP ベースの API エンドポイントを提供します。 このエンドポイントにアクセスするには、「.social.json」セレクターと拡張子を使用してGETリクエストをリソースに送信します。 Sling を使用して、要求が DefaultSocialGetServlet.


DefaultSocialGetServlet

  1. リソース (resourceType) を SocialComponentFactoryManagerとは、 SocialComponentリソースを表しています。

  2. ファクトリを呼び出し、を受け取ります。 SocialComponentリソースとリクエストを処理できる

  3. を呼び出します。 SocialComponent:リクエストを処理し、結果の JSON 表現を返します。

  4. JSON 応答をクライアントに返します。

GET Request

デフォルトのGETサーブレットは、SocialComponent がカスタマイズ可能な JSON を使用して応答する.social.json 要求をリッスンします。

chlimage_1-26

HTTP API -POSTリクエスト http-api-post-requests

GET(読み取り)操作に加えて、フレームワークは、作成、更新、削除など、コンポーネントに対する他の操作を有効にするエンドポイントパターンを定義します。 これらのエンドポイントは、入力を受け入れ、HTTP ステータスコードまたは JSON 応答オブジェクトを使用して応答する HTTP API です。

このフレームワークエンドポイントパターンにより、CUD 操作が拡張可能で、再利用可能で、テスト可能になります。

POST Request

SlingPOST:operation は、すべての SocialComponent 操作に対して存在します。 各操作のビジネスロジックとメンテナンスコードは、HTTP API を通じて、または OSGi サービスとして他の場所からアクセスできる OperationService にラップされます。 前/後のアクションに対するプラグ可能な操作拡張をサポートするフックが提供されます。

chlimage_1-27

ストレージリソースプロバイダー (SRP) storage-resource-provider-srp

に保存された UGC の処理について学ぶには、以下を実行します。 コミュニティコンテンツストアを参照してください。

サーバー側のカスタマイズ server-side-customizations

訪問 サーバー側のカスタマイズ サーバー側のコミュニティコンポーネントのビジネスロジックと動作のカスタマイズに関する情報。

Handlebars JS テンプレート言語 handlebars-js-templating-language

新しいフレームワークの顕著な変更の 1 つは、 Handlebars JS テンプレート言語 (HBS):サーバークライアントレンダリング用の一般的なオープンソーステクノロジーです。

HBS スクリプトはシンプルでロジックがなく、サーバーとクライアントの両方でコンパイルし、オーバーレイとカスタマイズが容易で、HBS はクライアント側のレンダリングをサポートしているので、クライアント UX と自然にバインドされます。

このフレームワークには、次のような機能が用意されています。 Handlebars ヘルパー これは、SocialComponents を開発する際に役立ちます。

サーバー上で、Sling がGETリクエストを解決すると、そのリクエストの応答に使用されるスクリプトが識別されます。 スクリプトが HBS テンプレート (.hbs) の場合、Sling は要求を Handlebars エンジンに委任します。 次に、Handlebars Engine は、適切な SocialComponentFactory から SocialComponent を取得し、コンテキストを構築し、HTMLをレンダリングします。

アクセス制限なし no-access-restriction

Handlebars(HBS) テンプレートファイル (.hbs) は、.jsp および.html テンプレートファイルに似ていますが、クライアントブラウザーとサーバーの両方でレンダリングに使用できます。 したがって、クライアント側テンプレートを要求するクライアントブラウザーは、サーバーから.hbs ファイルを受け取ります。

これには、Sling 検索パス内のすべての HBS テンプレート(/libs/または/apps 下の任意の.hbs ファイル)を、オーサーまたはパブリッシュから任意のユーザーが取得できる必要があります。

.hbs ファイルへの HTTP アクセスは禁止されていない可能性があります。

コミュニティコンポーネントの追加または追加 add-or-include-a-communities-component

ほとんどのコミュニティコンポーネントは、 追加済み Sling アドレス可能リソースとして。 一部のコミュニティコンポーネントは、 含む を既存のリソース以外としてテンプレートに追加し、ユーザー生成コンテンツ (UGC) を書き込む場所を動的に組み込み、カスタマイズできるようにします。

どちらの場合も、コンポーネントの 必要なクライアントライブラリ は、も存在する必要があります。

コンポーネントを追加

コンポーネントの追加とは、コンポーネントブラウザー(サイドキック)から作成者編集モードでページにドラッグした場合など、リソース(コンポーネント)のインスタンスを追加するプロセスを指します。

結果は、par ノードの下の JCR 子ノード(Sling アドレス可能)になります。

コンポーネントを含める

コンポーネントを含めると、 「存在しない」リソース (JCR ノードなし)をテンプレート内に追加します(スクリプト言語の使用など)。

AEM 6.1 以降では、コンポーネントが追加される代わりに動的に含まれる場合、コンポーネントのプロパティをオーサー デザイン モードで編集できます。

動的に含めることができるのは、一部のAEM Communitiesコンポーネントのみです。 次のようになります。

この コミュニティコンポーネントガイド を使用すると、インクルード可能なコンポーネントを追加からインクルードに切り替えることができます。

Handlebars を使用する場合 テンプレート言語、存在しないリソースは ヘルパーを含める resourceType を指定する。

{{include this.id path="comments" resourceType="social/commons/components/hbs/comments"}}

JSP を使用する場合 ​の場合、リソースはタグを使用して cq:include:

<cq:include path="votes"
 resourceType="social/tally/components/voting" />
NOTE
テンプレートにコンポーネントを追加または追加する代わりに、ページに動的に追加するには、 コンポーネントのサイドロード.

Handlebars ヘルパー handlebars-helpers

詳しくは、 SCF Handlebars ヘルパー SCF で使用可能なカスタムヘルパーの一覧と説明。

クライアント側フレームワーク client-side-framework

Model-View JavaScript フレームワーク model-view-javascript-framework

フレームワークには、 Backbone.js:モデル表示の JavaScript フレームワークで、リッチでインタラクティブなコンポーネントの開発を容易にします。 オブジェクト指向の特性は、拡張可能/再利用可能なフレームワークをサポートします。 クライアントとサーバー間の通信は、HTTP API を使用して簡単になります。

このフレームワークでは、サーバー側の Handlebars テンプレートを利用して、クライアント用にコンポーネントをレンダリングします。 モデルは、HTTP API によって生成された JSON 応答に基づいています。 ビューは、Handlebars テンプレートによって生成されるHTMLに結合され、インタラクティビティを提供します。

CSS の規則 css-conventions

CSS クラスを定義および使用する際の推奨規則を次に示します。

  • 明確に名前空間化された CSS クラスセレクター名を使用し、「heading」、「image」などの汎用名を使用しないでください。
  • 特定のクラスセレクタースタイルを定義して、CSS スタイルシートがページ上の他の要素やスタイルとうまく連携するようにします。 例:.social-forum .topic-list .li { color: blue; }
  • スタイル設定用の CSS クラスを、JavaScript によって駆動される UX 用の CSS クラスとは別に保持する

クライアント側のカスタマイズ client-side-customizations

クライアント側のコミュニティコンポーネントの外観と動作をカスタマイズするには、 クライアント側のカスタマイズ(次の情報を含む):

機能とコンポーネントの基本事項 feature-and-component-essentials

開発者向けの重要な情報については、 機能とコンポーネントの基本事項 」セクションに入力します。

開発者に関する追加情報については、 コーディングのガイドライン 」セクションに入力します。

トラブルシューティング troubleshooting

一般的な問題と既知の問題については、 トラブルシューティング 」セクションに入力します。

recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6