現在表示中:

ソーシャルコンポーネントフレームワーク(SCF)によって、サーバー側とクライアント側の両方で、コミュニティコンポーネントの設定、カスタマイズおよび拡張のプロセスが簡素化されます。

このフレームワークの利点は以下のとおりです。

  • 機能性:80%の使用例でカスタマイズがほとんどないかまったくない、そのまますぐに使用できる統合の容易さ
  • スキンの適用可能性:CSS スタイリングでの HTML 属性の一貫性のある使用
  • 拡張性:コンポーネント実装がオブジェクト指向であり、ビジネスロジックが軽量 - サーバーでの増分ビジネスログインの追加が容易
  • 柔軟性:オーバーレイやカスタマイズが容易な、ロジックを持たない単純な JavaScript テンプレート
  • アクセス可能性:HTTP API による任意のクライアント(モバイルアプリを含む)からの投稿のサポート
  • 移植性:任意のテクノロジーでビルドされた任意の Web ページへの統合/埋め込み

インタラクティブなコミュニティコンポーネントガイドを使用して、オーサーまたはパブリッシュインスタンスについて確認してください。

概要

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

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

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

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

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

chlimage_1

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

コンポーネントをカスタマイズまたは拡張するには、今後のリリースへのアップグレードプロセスを簡素化する /apps ディレクトリに対してオーバーレイおよび拡張のみを記述します。

  • スキンの適用
  • 外観と操作性
    • JS テンプレートおよび CSS の変更
  • 外観、操作性および UX
  • JS テンプレートまたは GET エンドポイントで使用可能な情報の変更
  • 操作中のカスタム処理の追加
  • 新しいカスタム操作の追加
    • 新しい Sling Post Operation の作成
    • 必要に応じた既存の OperationServices の使用
    • 必要に応じてクライアント側から操作を呼び出すための JavaScript コードの追加

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

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

Java API

Java API では、継承またはサブクラス化が容易な抽象クラスおよびインターフェイスが提供されます。

メインクラスについては、サーバー側のカスタマイズページで説明します。

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

HTTP API

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

HTTP API - GET 要求

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

DefaultSocialGetServlet によって以下のことが実行されます。

  1. リソース(resourceType)を SocialComponentFactoryManager に渡し、リソースを表す SocialComponent を選択できる SocialComponentFactory を受け取ります。
  2. ファクトリを呼び出し、リソースおよび要求を処理できる SocialComponent を受け取ります。
  3. 要求を処理して結果の JSON 表現を返す SocialComponent を呼び出します。
  4. JSON 応答をクライアントに返します。

GET 要求

デフォルトの GET Servlet が、SocialComponent がカスタマイズ可能な JSON で応答する .social.json 要求をリスニングします。

chlimage_1

HTTP API - POST 要求

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

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

POST 要求

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

chlimage_1

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

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

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

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

Handlebars JS テンプレート言語

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

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

このフレームワークでは、SocialComponent の開発に便利な複数の Handlebars ヘルパーが提供されます。

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

アクセス制限なし

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

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

.hbs ファイルへの HTTP アクセスは禁止できません。

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

ほとんどのコミュニティコンポーネントは、Sling アドレス可能リソースとして追加する必要があります。一部のコミュニティコンポーネントは、ユーザー生成コンテンツ(UGC)を書き込む場所の動的なインクルードおよびカスタマイズを可能にするために、存在しないリソースとしてテンプレートに含めることができます。

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

コンポーネントの追加

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

結果は、同位ノードの下の JCR 子ノードであり、これは Sling アドレス可能です。

コンポーネントのインクルード

コンポーネントのインクルードは、スクリプト言語の使用などにより、「存在しない」リソース(非 JCR ノード)の参照をテンプレート内に追加するプロセスです。

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 ヘルパー

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

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

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

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

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

CSS の規則

CSS クラスの定義と使用に推奨される規則を以下に示します。

  • 明確に名前空間が設定された CSS クラスセレクター名を使用し、「heading」や「image」などの一般的な名前は避けます。
  • CSS スタイルシートがページ上の他の要素およびスタイルと共に適切に機能するように、特定のクラスセレクタースタイルを定義します。例:
        .social-forum .topic-list .li { color: blue; }
  • スタイル設定用の CSS クラスを JavaScript に基づく UX 用の CSS クラスから分離します。

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

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

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

開発者にとっての基本情報が、機能とコンポーネントの基本事項の節で説明されています。

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

トラブルシューティング

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー