Show Menu
トピック×

ページへの ContextHub の追加とストアへのアクセス

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

ページコンポーネントへの ContextHub の追加

ContextHub 機能を有効にし、ContextHub JavaScript ライブラリにリンクするには、ページの head セクションに ContextHub コンポーネントを含めます。ページコンポーネントの JSP コードは、次の例のようになります。
<head>
   <sling:include path="contexthub" resourceType="granite/contexthub/components/contexthub" />
</head>

ContextHub ツールバーをプレビューモードで表示するかどうかも設定する必要があります。 ContextHub UI の表示/非表示 を参照してください。

ContextHub ストアについて

コンテキストデータを保持するには、ContextHub ストアを使用します。ContextHub には、すべてのストアタイプの基礎となる次のタイプのストアが用意されています。
すべてのストアタイプは、 ContextHub.Store.Core クラスの拡張です。新しいストアタイプの作成については、 カスタムストアの作成 を参照してください。ストアタイプのサンプルについては、 ContextHub ストア候補のサンプル を参照してください。

永続モード

ContextHub ストアは、次のいずれかの永続モードを使用します。
  • ローカル: HTML5 localStorage を使用してデータを保持します。ローカルストレージは、セッションをまたがってブラウザー上に保持されます。
  • セッション: HTML5 sessionStorage を使用してデータを保持します。セッションストレージは、ブラウザーセッションが持続する間、保持され、すべてのブラウザーウィンドウで使用可能です。
  • Cookie: ​ブラウザーのデータストレージ用 cookie のネイティブサポートを使用します。cookie データは、HTTP 要求としてサーバーとの間で送受信されます。
  • ​Window.name:window.nameプロパティを使用してデータを永続化します。
  • ​メモリ:JavaScriptオブジェクトを使用してデータを永続化します。
デフォルトでは、ContextHub は「ローカル」永続モードを使用します。ブラウザーが HTML5 localStorage をサポートまたは許可していない場合は、「セッション」永続モードが使用されます。ブラウザーが HTML5 sessionStorage をサポートまたは許可していない場合は、「Window.name」永続モードが使用されます。

ストアデータ

ストアデータは内部的にツリー構造を形成しており、値をプライマリタイプまたは複合オブジェクトとして追加できます。複合オブジェクトをストアに追加すると、オブジェクトのプロパティがデータツリーにブランチを形成します。例えば、次の複雑なオブジェクトは、locationという名前の空のストアに追加されます。
Object {
   number: 321,
   data: {
      city: "Basel",
      country: "Switzerland",
      details: {
         population: 173330,
         elevation: 260
      }
   }
}

ストアデータのツリー構造は、次のように概念化できます。
/
|- number
|- data
      |- city
      |- country
      |- details
            |- population
            |- elevation

ツリー構造は、ストア内のデータ項目をキーと値のペアとして定義します。In the above example, the key /number corresponds with the value 321 , and the key /data/country corresponds with the value Switzerland .

オブジェクトの操作

ContextHub provides the ContextHub.Utils.JSON.tree class for manipulating Javascript objects. JavaScript オブジェクトをストアに追加する前またはストアから取得した後に、このクラスの関数を使用して JavaScript オブジェクトを操作します。
Additionally, the ContextHub.Utils.JSON class provides functions for serializing objects to stings, and deserializing strings to objects. Use this class for handling JSON data to support browsers that do not natively include the JSON.parse and JSON.stringify functions.

ContextHub ストアとのやり取り

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

ストアデータへのアクセス

The ContexHub.Store.Core Javascript class defines several functions for interacting with store data. 次の関数は、オブジェクトに格納されている複数のデータ項目を保存および取得します。
個々のデータ項目は、一連のキーと値のペアとして保存されます。値を保存および取得するには、対応するキーを指定します。
カスタムストア候補は、ストアデータへのアクセスを提供する追加の関数を定義できます。
ContextHub は、デフォルトでは、パブリッシュサーバーを使用した現在のログインを認識しません。そうしたユーザーは ContextHub では「匿名」と見なされます。
We.Retail 参照サイト に実装したプロファイルストアを読み込むことで、ContextHub でログインユーザーを識別できます。 GitHub で関連するコード を参照してください。

ContextHub のイベンティング

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

ContextHub を使用した cookie の操作

ContextHub JavaScript API には、ブラウザー cookie を処理するためのクロスブラウザーサポートがあります。The ContextHub.Utils.Cookie namespace defines several functions for creating, manipulating, and deleting cookies.

解決された ContextHub セグメントの特定

ContextHub のセグメントエンジンを使用して、現在のコンテキストで解決された登録済みセグメントを特定できます。解決されたセグメントを取得するには、 ContextHub.SegmentEngine.SegmentManager クラスの getResolvedSegments 関数を使用します。Then, use the getName or getPath function of the ContextHub.SegmentEngine.Segment class to test for a segment.

インストール済みのセグメント

ContextHub segments are installed below the /conf/we-retail/settings/wcm/segments node.
  • female(女性)
  • female-over-30(30 歳より上の女性)
  • female-under-30(30 歳より下の女性)
  • male(男性)
  • male-over-30(30 歳より上の男性)
  • male-under-30(30 歳より下の男性)
  • order-value-75-to-100(注文額が 75 ~ 100)
  • order-value-over-100(注文額が 100 より上)
  • over-30(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 歳より下の男性)
  • under-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 ストアの データ項目から判断されます。
  • 年齢は、profile ストアの age データ項目から判断されます。
  • Season is determined from the latitude data item of the geolocation store, and the month data item of the surferinfo store.
インストールされたセグメントは、プロジェクト専用の設定を構築するのに役立つ参照設定として提供されます。したがって、直接使用しないでください。

ContextHub のデバッグメッセージのログ

Configure the Adobe Granite ContextHub OSGi service (PID = com.adobe.granite.contexthub.impl.ContextHubImpl ) to log detailed Debug messages that are useful when developing.
To configure the service you can either use the Web Console or use a JCR node in the repository :
  • Web コンソール:デバッグメッセージをログに記録するには、Debug プロパティを選択します。
  • JCR node: To log Debug messages, set the boolean com.adobe.granite.contexthub.debug property to true .

ContextHub フレームワークの概要の確認

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