ContextHub 機能を有効にし、ContextHub JavaScript ライブラリにリンクするには、ContextHub をページに追加します。
ContextHub JavaScript API を使用すると、ContextHub が管理するコンテキストデータにアクセスできます。このページでは、コンテキストデータにアクセスおよび操作するための API の主な機能について簡単に説明します。詳細情報とコードのサンプルは、API リファレンスドキュメントへのリンクから確認できます。
ContextHub 機能を有効にし、ContextHub JavaScript ライブラリにリンクするには、ページの head
セクションに contexthub
コンポーネントを含めます。ページコンポーネントの HTL コードは、次の例のようになります。
<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>
ContextHub ツールバーをプレビューモードで表示するかどうかも設定する必要があります。ContextHub UI の表示/非表示を参照してください。
コンテキストデータを保持するには、ContextHub ストアを使用します。ContextHub には、すべてのストアタイプの基礎となる次のタイプのストアが用意されています。
すべてのストアタイプは、ContextHub.Store.Core
クラスの拡張です。新しいストアタイプの作成については、カスタムストアの作成を参照してください。ストアタイプのサンプルについては、ContextHub ストア候補のサンプルを参照してください。
ContextHub ストアは、次のいずれかの永続モードを使用します。
デフォルトでは、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
ツリー構造は、ストア内のデータ項目をキーと値のペアとして定義します。上記の例では、キー /number
が値 321
に対応し、キー /data/country
が値 Switzerland
に対応しています。
ContextHub には、JavaScript オブジェクトを操作するための ContextHub.Utils.JSON.tree
クラスが用意されています。JavaScript オブジェクトをストアに追加する前またはストアから取得した後に、このクラスの関数を使用して JavaScript オブジェクトを操作します。
さらに、ContextHub.Utils.JSON
クラスには、オブジェクトを文字列にシリアライズしたり、文字列をオブジェクトにデシリアライズしたりするための関数があります。JSON.parse
関数および JSON.stringify
関数をネイティブに含まないブラウザーをサポートするには、このクラスを使用して JSON データを処理します。
ストアを JavaScript オブジェクトとして取得するには、ContextHub
JavaScript オブジェクトを使用します。ストアオブジェクトを取得したら、そのストアに格納されているデータを操作できます。ストアを取得するには、getAllStores
関数または getStore
関数を使用します。
ContexHub.Store.Core
JavaScript クラスは、ストアデータとやり取りするための関数を定義します。次の関数は、オブジェクトに格納されている複数のデータ項目を保存および取得します。
個々のデータ項目は、一連のキーと値のペアとして保存されます。値を保存および取得するには、対応するキーを指定します。
カスタムストア候補は、ストアデータへのアクセスを提供する追加の関数を定義できます。
ContextHub は、デフォルトでは、パブリッシュサーバーを使用した現在のログインを認識しません。そうしたユーザーは ContextHub では「匿名」と見なされます。
プロファイルストアを読み込むことで、ContextHub にログインユーザーを認識させることができます。GitHub でサンプルコードを参照してください。
ContextHub には、ストアイベントに自動的に対処できるようにするイベントフレームワークが含まれています。各ストアオブジェクトには、ストアの ContextHub.Utils.Eventing
プロパティとして使用できる eventing
オブジェクトが含まれています。JavaScript 関数をストアイベントにバインドするには、on
関数または once
関数を使用します。
ContextHub JavaScript API には、ブラウザー cookie を処理するためのクロスブラウザーサポートがあります。ContextHub.Utils.Cookie
名前空間は、Cookie を作成、操作、削除するための関数を定義します。
ContextHub のセグメントエンジンを使用して、現在のコンテキストで解決された登録済みセグメントを特定できます。解決されたセグメントを取得するには、ContextHub.SegmentEngine.SegmentManager
クラスの getResolvedSegments 関数を使用します。その後で、getName
クラスの getPath
関数または ContextHub.SegmentEngine.Segment
関数を使用して、セグメントをテストします。
ContextHub のセグメントは、/conf/<site>/settings/wcm/segments
ノードの下にインストールされます。
次のセグメントは、WKND チュートリアルサイトでインストールされます。
これらのセグメントの解決に使用されるルールを要約すると次のようになります。
インストールされたセグメントは、プロジェクト用の独自の専用設定を構築するのに役立つリファレンス設定として提供されています。直接使用しないでください。
ログの生成を含め、ContextHub をデバッグするためには多くのオプションがあります。詳しくは、「ContextHub の設定」を参照してください。
ContextHub には、ContextHub フレームワークの概要を確認できる診断ページがあります。