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

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

このフレームワークのメリットは次のとおりです。

インタラクティブな コミュニティコンポーネントガイドを使用して、オーサーインスタンスまたはパブリッシュインスタンスを探索します。

概要 overview

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

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

コンポーネントがデータの変更をサポートする必要がある場合、SocialComponent API の実装を書き込んで、従来の web アプリケーションのモデル/データオブジェクトに類似したデータの編集/保存をサポートできます。 さらに、操作（コントローラー）と操作サービスを追加して、操作リクエストの処理、ビジネスロジックの実行、モデル/データオブジェクトの 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 は、容易に継承またはサブクラス化できる抽象クラスおよびインターフェイスを提供します。

メインクラスについては、 サーバーサイドのカスタマイズページを参照してください。

UGC の操作については、 ストレージリソースプロバイダーの概要を参照してください。

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

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

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

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

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

サーバーサイドでの Communities コンポーネントのビジネスロジックと動作のカスタマイズについては、 サーバーサイドのカスタマイズを参照してください。

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

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

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

このフレームワークは、SocialComponents を開発するときに役立ついくつかの Handlebars ヘルパーを提供します。

サーバーで Sling がGETリクエストを解決すると、リクエストの応答に使用されるスクリプトが特定されます。 スクリプトが HBS テンプレート（.hbs）の場合、Sling はリクエストを Handlebars エンジンに委任します。 次に、Handlebars エンジンは、適切な 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

ほとんどの Communities コンポーネントは、Sling のアドレス可能なリソースとして 追加 する必要があります。 一部の Communities コンポーネントは、既存のリソース以外としてテンプレートに 含める ことができます。これにより、ユーザー生成コンテンツ（UGC）を書き込む場所を動的に含めたりカスタマイズしたりできます。

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

コンポーネントを追加

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

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

コンポーネントを含める

コンポーネントの追加とは、スクリプト言語を使用するなど 🔗 テンプレート内に 「存在しない」リソース（JCR ノードなし）への参照を追加するプロセスを指します。

Adobe Experience Manager（AEM） 6.1 以降では、コンポーネントを追加するのではなく、動的に含めると、そのコンポーネントのプロパティをオーサー デザイン モードで編集できます。

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

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

Handlebars テンプレート言語を使用する場合、resourceType を指定することにより、include ヘルパーを使用して既存のリソースが含まれます。

{{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 で使用可能なカスタムヘルパーのリストと説明については、SCF Handlebars ヘルパーを参照してください。

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

モデルビューJavaScriptフレームワーク model-view-javascript-framework

このフレームワークには、機能豊富なインタラクティブコンポーネントの開発を容易にするモデルビューJavaScriptフレームワークである Backbone.js の拡張機能が含まれています。 オブジェクト指向の特性により、拡張可能で再利用可能なフレームワークがサポートされます。 HTTP API を使用すると、クライアントとサーバー間の通信が簡略化されます。

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

CSS 規則 css-conventions

CSS クラスを定義および使用する場合は、次の規則を使用することをお勧めします。

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

クライアントサイドでの Communities コンポーネントの外観と動作をカスタマイズするには、以下の情報を含む クライアントサイドのカスタマイズを参照してください。

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

開発者にとって不可欠な情報については、 機能とコンポーネントの基本事項の節で説明します。

開発者向けの追加情報については、 コーディングのガイドラインの節を参照してください。

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

一般的な問題と既知の問題については、 トラブルシューティングの節を参照してください。