ページへの 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 オブジェクトを使用してデータを保持します。

デフォルトでは、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 データを処理します。

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 フレームワークの概要を確認できる診断ページがあります。

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now