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

ソーシャルコンポーネントフレームワーク（SCF）は、サーバーサイドとクライアントサイドの両方で、コミュニティコンポーネントの設定、カスタマイズ、拡張のプロセスを簡素化します。

この枠組みの利点は次のとおりです。

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

概要 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 サーブレットは、カスタマイズ可能なJSONでSocialComponentが応答する.social.json リクエストをリッスンします。

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

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

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

POST Request

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

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

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

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

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

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

新しいフレームワークの最も顕著な変更の1つは、サーバーとクライアントのレンダリングに人気のあるオープンソース技術であるHandlebars JS （HBS）テンプレート言語の使用です。

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

このフレームワークには、SocialComponentsの開発に役立つHandlebars ヘルパーがいくつか用意されています。

サーバー上で、SlingがGET リクエストを解決すると、リクエストに応答するために使用されるスクリプトが識別されます。 スクリプトがHBS テンプレート（.hbs）の場合、Slingはハンドルバーエンジンにリクエストをデリゲートします。 次に、Handlebars エンジンは、適切なSocialComponentFactoryからSocialComponentを取得し、コンテキストを構築してHTMLをレンダリングします。

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

ハンドルバー（HBS）テンプレートファイル（.hbs）は、.jspおよび.html テンプレートファイルと似ていますが、クライアントブラウザーとサーバーの両方でレンダリングするために使用される場合があります。 そのため、クライアント側テンプレートを要求するクライアントブラウザーは、サーバーから.hbs ファイルを受け取ります。

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

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

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

ほとんどのCommunities コンポーネントは、Sling アドレス可能リソースとして​ 追加 ​されている必要があります。 一部のコミュニティコンポーネントは、UGCを記述する場所を動的に含めてカスタマイズできるように、テンプレート内に既存でないリソースとして​ 含まれる ​を含めることができます。

いずれの場合も、コンポーネントの必要なクライアントライブラリ ​も存在する必要があります。

コンポーネントを追加

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

結果は、パーノードの下の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 Helpers handlebars-helpers

SCFで使用可能なカスタムヘルパーのリストと説明については、SCF ハンドルバーヘルパーを参照してください。

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

Model-View JavaScript Framework model-view-javascript-framework

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

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

CSS規則 css-conventions

CSS クラスを定義および使用する際に推奨される規則は次のとおりです。

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

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

機能およびコンポーネントの基本 feature-and-component-essentials

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

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

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

よくある懸念と既知の問題については、​ トラブルシューティング ​の節を参照してください。