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

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

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

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

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

<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>

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

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

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

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

永続モード persistence-modes

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

デフォルトでは、ContextHub はローカル永続モードを使用します。ブラウザーが HTML5 localStorage をサポートまたは許可していない場合は、セッション永続モードが使用されます。ブラウザーが HTML5 sessionStorage をサポートまたは許可していない場合は、Window.name 永続モードが使用されます。

ストアデータ 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 クラスは、ストアデータとやり取りするための関数を定義します。次の関数は、オブジェクトに格納されている複数のデータ項目を保存および取得します。

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

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

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

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

ContextHub を使用した cookie の操作 using-context-hub-to-manipulate-cookies

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

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

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

ContextHub セグメント contexthub-segments

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

次のセグメントは、WKND チュートリアルサイトでインストールされます。

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

ContextHub のデバッグ debugging-contexthub

ログの生成を含め、ContextHub をデバッグするためにはいくつかのオプションがあります。詳しくは、ContextHub の設定を参照してください。

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

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