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

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

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

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

ContextHub 機能を有効にし、ContextHub JavaScript ライブラリにリンクするには、ページの head セクションに contexthub コンポーネントを含めます。ページコンポーネントの 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 オブジェクトを使用してデータを保持します。

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

ストアデータ

内部的には、データをツリー構造に格納し、値をプライマリ型または複雑なオブジェクトとして追加できます。 複雑なオブジェクトをストアに追加すると、オブジェクトプロパティはデータツリー内にブランチを形成します。 例えば、次の複合オブジェクトを 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 データを処理します。

ContextHub ストアとのやり取り

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

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

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

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

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

メモ

ContextHub は、デフォルトでは、パブリッシュサーバーで現在ログインしていることを認識せず、そのようなユーザーは ContextHub では「匿名」と見なされます。

プロファイルストアを読み込むことで、ContextHub にログインユーザーを認識させることができます。GitHub でサンプルコードを参照してください。

ContextHub のイベンティング

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

ContextHub を使用した cookie の操作

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

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

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

ContextHub セグメント

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

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

  • summer（夏）
  • winter（冬）

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

警告

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

ContextHub のデバッグ

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

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

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

このページ