Show Menu
トピック×

ソーシャルコンポーネントフレームワーク

ソーシャルコンポーネントフレームワーク(SCF)によって、サーバー側とクライアント側の両方で、コミュニティコンポーネントの設定、カスタマイズおよび拡張のプロセスが簡素化されます。
フレームワークの利点
  • 機能 :すぐに使用できる統合が容易で、使用事例の80 %をカスタマイズする必要はほとんどない、またはまったくカスタマイズしない。
  • スキナブル :CSSスタイルでのHTML属性の一貫した使用。
  • 拡張可能 :コンポーネントの実装は、オブジェクト指向でビジネスロジックが軽減され、サーバにビジネスログインを増やしやすくなっています。
  • 柔軟 :簡単にオーバーレイおよびカスタマイズできる、シンプルなロジックのないJavaScriptテンプレート。
  • アクセス :HTTP APIは、モバイルアプリを含む任意のクライアントからの投稿をサポートします。
  • ポータブル :任意のテクノロジーに基づいて構築されたWebページに統合/埋め込みを行います。
インタラクティブな コミュニティコンポーネントガイド を使用して、オーサーまたはパブリッシュインスタンスについて確認してください。

概要

SCF では、コンポーネントは SocialComponent POJO、Handlebars JS テンプレート(コンポーネントをレンダリングするため)および CSS(コンポーネントのスタイルを設定するため)で構成されます。
Handlebars JS テンプレートでは、モデル/ビュー JS コンポーネントを拡張して、クライアントでのコンポーネントとのユーザーインタラクションを処理できます。
コンポーネントがデータの変更をサポートする必要がある場合は、従来の Web アプリケーションでのモデル/データオブジェクトと同様のデータの編集/保存をサポートするために、SocialComponent API の実装を記述できます。さらに、操作(コントローラー)および操作サービスを追加して、操作要求を処理し、ビジネスロジックを実行し、モデル/データオブジェクトでAPIを呼び出すことができます。
クライアントが必要とするデータをビューレイヤーまたは HTTP クライアントに提供するために、SocialComponent API を拡張できます。

クライアントに対するページのレンダリング方法

コンポーネントのカスタマイズおよび拡張

コンポーネントをカスタマイズまたは拡張するには、今後のリリースへのアップグレードプロセスを簡素化する /apps ディレクトリに対してオーバーレイおよび拡張のみを記述します。
  • スキン表示の場合:
  • 外観と操作性:
    • JSテンプレートとCSSの変更を参照してください。
  • For Look, Feel and UX:
  • JSテンプレートまたはGETエンドポイントで使用できる情報を変更するには:
  • 操作中にカスタム処理を追加するには:
  • 新しいカスタム操作を追加するには:

サーバー側フレームワーク

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

Java API

Java API では、継承またはサブクラス化が容易な抽象クラスおよびインターフェイスが提供されます。
メインクラスについては、 サーバー側のカスタマイズ ページで説明します。
Visit Storage Resource Provider Overview to learn about working with UGC.

HTTP API

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

HTTP API - GET 要求

すべての SocialComponent に対して、フレームワークによって HTTP ベースの API エンドポイントが提供されます。エンドポイントにアクセスするには、「.social.json」セレクター+拡張子を使用してGETリクエストをリソースに送信します。 Using Sling, the request is handed to the DefaultSocialGetServlet .
DefaultSocialGetServlet
  1. Passes the resource (resourceType) to the SocialComponentFactoryManager and receives a SocialComponentFactory capable of selecting a SocialComponent representing the resousrce.
  2. Invokes the factory and receives a SocialComponent capable of handling the resource and request.
  3. Invokes the SocialComponent , which process the request and returns a JSON representation of the results.
  4. クライアントに対するJSON応答を返します。
GET Request
デフォルトの GET Servlet が、SocialComponent がカスタマイズ可能な JSON で応答する .social.json 要求をリスニングします。

HTTP API - POST 要求

GET(読み取り)操作に加え、コンポーネントに対するその他の操作(作成、更新、削除など)を可能にするエンドポイントパターンがフレームワークによって定義されます。これらのエンドポイントは、入力を受け取って、HTTPステータスコードまたはJSON応答オブジェクトで応答するHTTP APIです。
このフレームワークエンドポイントパターンにより、CUD 操作は拡張、再利用およびテストが可能になります。
POST Request
SocialComponent 操作ごとに Sling POST :operation があります。各操作のビジネスロジックとメンテナンスコードは、HTTP API経由で、またはOSGiサービスとして他の場所からアクセスできるOperationServiceに含まれています。 フックは、前/後のアクションのプラグ可能な操作拡張をサポートするように提供されます。

ストレージリソースプロバイダー(SRP)

To learn about handling UGC stored in the community content store , see:

サーバー側のカスタマイズ

サーバー側のコミュニティコンポーネントのビジネスロジックおよび動作のカスタマイズについて詳しくは、 サーバー側のカスタマイズ を参照してください。

Handlebars JS テンプレート言語

One of the more noticeable changes in the new framework is the use of the Handlebars JS templating language (HBS) , a popular open-source technology for server-client rendering.
HBS スクリプトは、単純で、ロジックがなく、サーバーとクライアントの両方でコンパイルされ、オーバーレイやカスタマイズが容易であり、HBS ではクライアント側のレンダリングがサポートされているのでクライアント UX と自然にバインドします。
このフレームワークでは、SocialComponent の開発に便利な複数の Handlebars ヘルパー が提供されます。
サーバーで、Sling は GET 要求を解決するときに、要求への応答に使用されるスクリプトを識別します。スクリプトがHBSテンプレート(.hbs)の場合、Slingは要求をHandlebars Engineに委任します。 次に、Handlebars Engineは、適切なSocialComponentFactoryからSocialComponentを取得し、コンテキストを構築し、HTMLをレンダリングします。

アクセス制限なし

Handlebars(HBS)テンプレートファイル(.hbs)は、.jsp および .html テンプレートファイルに似ていますが、クライアントブラウザーとサーバーの両方でレンダリングに使用できる点が異なります。そのため、クライアント側テンプレートを要求するクライアントブラウザーは、.hbs ファイルをサーバーから受け取ります。
これには、sling 検索パス内のすべての HBS テンプレート(/libs/ または /apps の下の .hbs ファイル)を、オーサーまたはパブリッシュから任意のユーザーが取得できる必要があります。
.hbs ファイルへの HTTP アクセスは禁止できません。

コミュニティコンポーネントの追加またはインクルード

ほとんどのコミュニティコンポーネントは、Sling アドレス可能リソースとして追加する必要があります。** A select few of the Communities components may be included in a template as a non-existing resource to allow for dynamic inclusion and customization of the location at which to write user generated content (UGC).
In either case, the component's required client libraries must also be present.
コンポーネントの追加
コンポーネントの追加は、コンポーネントブラウザー(サイドキック)からページにオーサー編集モードでドラッグされたときなどに、リソース(コンポーネント)のインスタンスを追加するプロセスです。
結果は、同位ノードの下の JCR 子ノードであり、これは Sling アドレス可能です。
コンポーネントのインクルード
Including a component refers to the process of adding a reference to a "non-existing" resource (no JCR node) within the template, such as using a scripting language.
AEM 6.1以降では、コンポーネントを追加する代わりに動的に追加する場合、コンポーネントのプロパティをauthor *design *modeで編集できます。
一部の AEM Communities コンポーネントのみを動的にインクルードできます。次の機能があります。
The Community Components Guide allows includable components to be toggled from being added to being included.
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 ヘルパー

SCF で使用できるカスタムヘルパーのリストおよび説明については、 SCF Handlebars ヘルパー を参照してください。

クライアント側フレームワーク

モデル - ビュー JavaScript フレームワーク

このフレームワークには、リッチでインタラクティブなコンポーネントの開発を促進するために、 Backbone.js (モデル - ビュー JavaScript フレームワーク)という拡張が含まれています。オブジェクト指向の特性は、拡張可能/再利用可能なフレームワークをサポートします。 HTTP APIを使用すると、クライアントとサーバー間の通信が簡単になります。
フレームワークは、サーバー側のハンドルテンプレートを利用して、クライアントのコンポーネントをレンダリングします。 モデルは、HTTP APIによって生成されたJSON応答に基づいています。 表示は、Handlebarsテンプレートによって生成されるHTMLに連結され、インタラクティブ機能を提供します。

CSS の規則

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

クライアント側のカスタマイズ

クライアント側でのコミュニティコンポーネントの外観と動作をカスタマイズするには、以下に関する情報が含まれている クライアント側のカスタマイズ を参照してください。

機能とコンポーネントの基本事項

開発者にとっての基本情報が、 機能とコンポーネントの基本事項 の節で説明されています。
開発者向けの追加情報については、 コーディングのガイドライン の節を参照してください。

トラブルシューティング

一般的な課題および既知の問題が、 トラブルシューティング の節で説明されています。