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

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

フレームワークの利点：

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

概要 overview

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

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

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

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

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

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

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

サーバー側フレームワーク 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

GET Request

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

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

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

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

POST Request

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

ストレージリソースプロバイダー (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" />

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 クラスを定義および使用する際の推奨規則を次に示します。

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

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

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

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

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

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

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