Show Menu
トピック×

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

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

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

To enable the ContextHub features and to link to the ContextHub Javascript libraries, include the contexthub component in the head section of your page. ページコンポーネントのHTLコードは、次の例のようになります。
<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>

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 では「匿名」と見なされます。
プロファイルストアを読み込むことで、ContextHubにログインユーザーを認識させることができます。 Refer to sample code on GitHub here .

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 セグメント

ContextHub segments are installed below the /conf/<site>/settings/wcm/segments node.
  • summer(夏)
  • winter(冬)
これらのセグメントの解決に使用されるルールを要約すると次のようになります。
インストールされたセグメントは、プロジェクト用の独自の専用設定を構築するのに役立つリファレンス設定として提供されます。したがって、直接使用しないでください。

ContextHub のデバッグ

ログの生成を含め、ContextHubをデバッグするための多くのオプションがあります。 See Configuring ContextHub for more information.

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

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