ページへの ContextHub の追加とストアへのアクセス adding-contexthub-to-pages-and-accessing-stores

CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

ContextHub 機能を有効にし、ContextHub JavaScript ライブラリにリンクするには、ContextHub をページに追加します。

ContextHub JavaScript API を使用すると、ContextHub が管理するコンテキストデータにアクセスできます。このページでは、コンテキストデータにアクセスして操作するための API の主な機能について簡単に説明します。 詳細情報とコードのサンプルは、API リファレンスドキュメントへのリンクから確認できます。

ページコンポーネントへの ContextHub の追加 adding-contexthub-to-a-page-component

ContextHub 機能を有効にし、ContextHub JavaScript ライブラリにリンクするには、 head 」セクションに追加します。 ページコンポーネントの JSP コードは、次の例のようになります。

<head>
   <sling:include path="contexthub" resourceType="granite/contexthub/components/contexthub" />
</head>

また、ContextHub ツールバーをプレビューモードで表示するかどうかを設定する必要があります。 詳しくは、 ContextHub UI の表示と非表示.

ContextHub ストアについて about-contexthub-stores

ContextHub ストアを使用して、コンテキストデータを保持します。 ContextHub には、すべてのストアタイプの基盤となる次のタイプのストアが用意されています。

すべてのストアタイプは、ContextHub.Store.Core クラスの拡張です。新しいストアタイプの作成について詳しくは、 カスタムストアの作成. サンプルのストアタイプについて詳しくは、 ContextHub ストア候補のサンプル.

永続モード persistence-modes

ContextHub ストアでは、次の永続モードのいずれかを使用します。

  • ローカル: HTML5 localStorage を使用してデータを保持します。 ローカルストレージは、セッションをまたいでブラウザーに保持されます。
  • セッション: HTML5 sessionStorage を使用してデータを保持します。 セッションストレージは、ブラウザーセッションの間保持され、すべてのブラウザーウィンドウで使用できます。
  • cookie: データストレージに対するブラウザーの cookie のネイティブサポートを使用します。 Cookie データは、HTTP リクエストでサーバーとの間で送信されます。
  • Window.name: window.name プロパティを使用してデータを保持します。
  • メモリ: JavaScript オブジェクトを使用してデータを保持します。

デフォルトでは、Context Hub はローカル永続化モードを使用します。 ブラウザーが localStorage5 をサポートしていない場合、または許可していない場合は、HTMLの永続性が使用されます。 ブラウザーが sessionStorage をサポートしていないか、許可していない場合は、Window.name persistence が使用されます。

ストアデータ store-data

内部的には、データをツリー構造に格納し、値をプライマリ型または複雑なオブジェクトとして追加できます。 複雑なオブジェクトをストアに追加すると、オブジェクトプロパティはデータツリー内にブランチを形成します。 例えば、次の複合オブジェクトを location という名前の空のストアに追加します。

Object {
   number: 321,
   data: {
      city: "Basel",
      country: "Switzerland",
      details: {
         population: 173330,
         elevation: 260
      }
   }
}

ストアデータのツリー構造は、次のように概念化できます。

/
|- number
|- data
      |- city
      |- country
      |- details
            |- population
            |- elevation

ツリー構造は、ストア内のデータ項目をキーと値のペアとして定義します。 上記の例では、キー /number が値 321 に対応し、キー /data/country が値 Switzerland に対応しています。

オブジェクトの操作 manipulating-objects

ContextHub には、JavaScript オブジェクトを操作するための ContextHub.Utils.JSON.tree クラスが用意されています。JavaScript オブジェクトをストアに追加する前またはストアから取得した後に、このクラスの関数を使用して JavaScript オブジェクトを操作します。

さらに、ContextHub.Utils.JSON クラスには、オブジェクトを文字列にシリアライズしたり、文字列をオブジェクトにデシリアライズしたりするための関数があります。JSON.parse 関数および JSON.stringify 関数をネイティブに含まないブラウザーをサポートするには、このクラスを使用して JSON データを処理します。

ContextHub ストアとのやり取り interacting-with-contexthub-stores

ストアを JavaScript オブジェクトとして取得するには、ContextHub JavaScript オブジェクトを使用します。ストアオブジェクトを取得したら、そのストアに格納されているデータを操作できます。ストアを取得するには、getAllStores 関数または getStore 関数を使用します。

ストアデータへのアクセス accessing-store-data

ContexHub.Store.Core JavaScript クラスは、ストアデータとやり取りするための関数を定義します。次の関数は、オブジェクトに格納されている複数のデータ項目を保存および取得します。

個々のデータ項目は、キーと値のペアのセットとして保存されます。 値を保存および取得するには、対応するキーを指定します。

カスタムストア候補は、ストアデータへのアクセスを提供する追加の関数を定義できます。

NOTE
ContextHub は、デフォルトでは、パブリッシュサーバーで現在ログインしていることを認識せず、そのようなユーザーは ContextHub では「匿名」と見なされます。
ContextHub で We.Retail 参照サイト. 詳しくは、 GitHub で関連するコードはこちら.

ContextHub のイベンティング contexthub-eventing

ContextHub には、ストアイベントに自動的に対処できるようにするイベントフレームワークが含まれています。各ストアオブジェクトには、ストアの ContextHub.Utils.Eventing プロパティとして使用できる eventing オブジェクトが含まれています。JavaScript 関数をストアイベントにバインドするには、on 関数または once 関数を使用します。

ContextHub JavaScript API には、ブラウザー cookie を処理するためのクロスブラウザーサポートがあります。ContextHub.Utils.Cookie 名前空間は、Cookie を作成、操作、削除するための関数を定義します。

解決された ContextHub セグメントの特定 determining-resolved-contexthub-segments

ContextHub のセグメントエンジンを使用して、現在のコンテキストで解決された登録済みセグメントを特定できます。解決されたセグメントを取得するには、ContextHub.SegmentEngine.SegmentManager クラスの getResolvedSegments 関数を使用します。その後で、getName クラスの getPath 関数または ContextHub.SegmentEngine.Segment 関数を使用して、セグメントをテストします。

インストール済みセグメント installed-segments

ContextHub のセグメントは、/conf/we-retail/settings/wcm/segments ノードの下にインストールされます。

  • 女性
  • 30 歳以上の女性
  • 30 歳未満の女性
  • 男性
  • 30 歳以上の男性
  • male-under-30(30 歳より下の男性)
  • order-value-75-to-100
  • order-value-over-100
  • 30 を超える
  • summer(夏)
  • summer-female
  • summer-female-over-30(夏 — 30 歳より上の女性)
  • summer-female-under-30(夏 — 30 歳より下の女性)
  • summer-male
  • summer-male-over-30(夏 — 30 歳より上の男性)
  • summer-male-under-30(夏 — 30 歳より下の男性)
  • 30 歳未満
  • winter(冬)
  • winter-female(冬 — 女性)
  • winter-female-over-30(冬 — 30 歳より上の女性)
  • winter-female-under-30(冬 — 30 歳より下の女性)
  • winter-male(冬 — 男性)
  • winter-male-over-30(冬 — 30 歳より上の男性)
  • winter-male-under-20(冬 — 20 歳より下の男性)

これらのセグメントの解決に使用されるルールを要約すると次のようになります。

  • 女性か男性かは、 gender データ項目 profile ストア。

  • 年齢は、プロファイルストアの年齢データ項目から判断されます。

  • シーズンは、 位置情報 store 、および surferinfo ストアの月のデータ項目です。

WARNING
インストールされたセグメントは、プロジェクト用の独自の専用設定を構築するのに役立つリファレンス設定として提供されています。直接使用しないでください。

ContextHub のデバッグメッセージのログ logging-debug-messages-for-contexthub

開発時に役立つ詳細なデバッグメッセージをログに記録するように、Adobe Granite ContextHub OSGi サービス(PID = com.adobe.granite.contexthub.impl.ContextHubImpl)を設定します。

このサービスは、Web コンソールまたはリポジトリ内の JCR ノードを使用して設定できます。

  • Web コンソール:デバッグメッセージをログに記録するには、Debug プロパティを選択します。
  • JCR ノード:デバッグメッセージをログに記録するには、com.adobe.granite.contexthub.debug ブールプロパティを true に設定します。

ContextHub フレームワークの概要の確認 see-an-overview-of-the-contexthub-framework

ContextHub には、ContextHub フレームワークの概要を確認できる診断ページがあります。

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e