ClientContext の詳細

メモ

ClientContext は、タッチ UI の ContextHub に変更されました。詳しくは、関連ドキュメントを参照してください。

ClientContext はユーザーデータを動的にまとめたコレクションを表します。このデータに基づいて、特定の状況で Web ページ上に表示するコンテンツを決定できます(コンテンツのターゲティング)。このデータは、Web サイト分析や、ページ上のあらゆる JavaScript にも使用できます。

ClientContext は、主として次の要素で構成されます。

  • ユーザーデータを格納するセッションストア。
  • ユーザーデータを表示し、ユーザーエクスペリエンスをシミュレートするツールを提供する UI。
  • セッションストアとやり取りするための JavaScript API

スタンドアロンのセッションストアを作成して ClientContext に追加するか、コンテキストストアコンポーネントに関連付けられたセッションストアを作成するために、すぐに使用可能なコンテキストストアコンポーネントが AEM によっていくつかインストールされています。これらのコンポーネントは、作成するコンポーネントの基礎として使用できます。

クライアントコンテキストを開き、表示する情報を設定し、ユーザーエクスペリエンスをシミュレートする方法については、クライアントコンテキストを参照してください。

セッションストア

ClientContext には、ユーザーデータを格納する様々なセッションストアが含まれます。ストアデータは次のソースから得られます。

  • クライアント Web ブラウザー
  • サーバー(サードパーティソースからの情報の保存については JSONP ストアを参照)

ClientContext フレームワークが提供する JavaScript API は、ユーザーデータの読み取りおよび書き込みや、ストアイベントのリッスンおよび対処のためのセッションストアとのやり取りに使用できます。コンテンツターゲティングなどに使用するユーザーデータ用のセッションストアを作成することもできます。

セッションストアのデータはクライアント上に残ります。ClientContext はデータをサーバーに書き戻しません。データをサーバーに送信するには、フォームを使用するか、カスタム JavaScript を作成してください。

各セッションストアは、プロパティと値のペアのコレクションです。 セッションストアは、(あらゆる種類の)データのコレクション、すなわちデザイナーや開発者が決める概念的意味を表します。次の例のjavascriptコードは、セッションストアに含まれるプロファイルデータを表すオブジェクトを定義します。

{
  age: 20,
  authorizableId: "aparker@geometrixx.info",
  birthday: "27 Feb 1992",
  email: "aparker@geometrixx.info",
  formattedName: "Alison Parker",
  gender: "female",
  path: "/home/users/geometrixx/aparker@geometrixx.info/profile"
}

セッションストアは、ブラウザーセッションをまたがって保持することも、そのストアが作成されたブラウザーセッションに対してのみ持続させることもできます。

メモ

ストアの保持には、ブラウザーストレージまたは cookie(SessionPersistence cookie)を使用します。ブラウザーストレージのほうが一般的です。

ブラウザーを閉じて再度開いたときに、保持されているストアの値を使用してセッションストアを読み込むことができます。古い値を削除するには、ブラウザーキャッシュのクリアが必要です。

コンテキストストアコンポーネント

コンテキストストアコンポーネントは、クライアントコンテキストに追加できるAEMコンポーネントです。 一般的に、コンテキストストアコンポーネントは、関連付けられているセッションストアのデータを表示します。ただし、コンテキストストアコンポーネントが表示する情報は、セッションストアのデータに限定されません。

コンテキストストアコンポーネントには、次のアイテムを含めることができます。

  • ClientContext での表示を定義する JSP スクリプト。
  • サイドキックにコンポーネントを一覧表示するためのプロパティ。
  • コンポーネントインスタンスを設定するための編集ダイアログ。
  • セッションストアを初期化する JavaScript。

コンテキストストアに追加できる、インストール済みのコンテキストストアコンポーネントについては、使用可能な ClientContext コンポーネントを参照してください。

メモ

ページデータは、ClientContext のデフォルトのコンポーネントではなくなりました。必要に応じて、ClientContext を編集し、汎用ストアのプロパティ​コンポーネントを追加して、ストア​を pagedata として定義するように設定することにより、ページデータを追加できます。

ターゲット設定されたコンテンツの配信

ターゲット設定されたコンテンツの配信にはプロファイル情報も使用します。

clientcontext_ targetdcontentdeliveryclientcontext_targetdeliverydetail

ページへの ClientContext の追加

ClientContext を有効にするには、ClientContext コンポーネントを Web ページの body セクションに含めます。Client Contextコンポーネントノードのパスは/libs/cq/personalization/components/clientcontextです。 このコンポーネントを含めるには、次のコードをページコンポーネントの JSP ファイルに追加します。場所は、ページの body 要素のすぐ下です。

<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>

ClientContext コンポーネントによって、ClientContext を実装するクライアントライブラリをページが読み込みます。

  • ClientContext JavaScript API。
  • セッションストア、イベント管理などをサポートする ClientContext フレームワーク。
  • 定義されているセグメント。
  • ClientContext に追加されているコンテキストストアコンポーネントごとに生成される init.js スクリプト。
  • (オーサーインスタンスのみ)ClientContext UI。

ClientContext UI は、オーサーインスタンス上でのみ使用可能です。

ClientContext の拡張

ClientContext を拡張するには、次のようなセッションストアを作成し、オプションでストアデータを表示します。

  • コンテンツターゲティングおよび Web 分析に必要なユーザーデータ用のセッションストアを作成します。
  • コンテキストストアコンポーネントを作成して、管理者が関連付けられたセッションストアを設定したり、テスト目的で ClientContext にストアデータを表示したりできるようにします。
メモ

データを提供できる JSONP サービスがある(または作成する)場合は、JSONP コンテキストストアコンポーネントを使用して、その JSONP サービスにマップするだけです。JSONP サービスがセッションストアを処理します。

セッションストアの作成

ClientContext に追加または ClientContext から取得する必要があるデータ用のセッションストアを作成します。一般的に、セッションストアを作成するには、次の手順を実行します。

  1. categories プロパティの値が personalization.stores.kernel のクライアントライブラリフォルダーを作成します。ClientContext は、このカテゴリのクライアントライブラリを自動的に読み込みます。

  2. personalization.core.kernel クライアントライブラリフォルダーに対して依存関係を持つように、クライアントライブラリフォルダーを設定します。personalization.core.kernel クライアントライブラリは ClientContext JavaScript API を提供します。

  3. セッションストアを作成して初期化する JavaScript を追加します。

この JavaScript を personalization.stores.kernel クライアントライブラリに含めると、ClientContext フレームワークが読み込まれたときにストアが作成されます。

メモ

コンテキストストアコンポーネントの一部としてセッションストアを作成する場合は、代わりに JavaScript をコンポーネントの init.js.jsp ファイル内に配置できます。この場合は、コンポーネントが ClientContext に追加された場合にのみセッションストアが作成されます。

セッションストアのタイプ

セッションストアは、ブラウザーセッション中に作成され、使用できるか、ブラウザーストレージまたは cookie に保持されます。ClientContext JavaScript API によって、次の 2 つのタイプのデータストアを表すクラスが定義されます。

  • CQ_Analytics.SessionStore:これらのオブジェクトはページDOMにのみ存在します。データはページが存続する間、作成され、保持されます。
  • CQ_Analytics.PerstistedSessionStore:このタイプのオブジェクトはページ DOM 内に存在し、ブラウザーストレージまたは cookie に保持されます。データは、ページおよびユーザーセッションをまたがって使用できます。

また、JSONデータまたはJSONPデータの格納に特化した次のクラスの拡張も提供します。

セッションストアオブジェクトの作成

クライアントライブラリフォルダーの JavaScript によってセッションストアを作成し、初期化します。その後、Context Store Manager を使用して、セッションストアを登録する必要があります。次の例では、CQ_Analytics.SessionStoreオブジェクトを作成して登録します。

//Create the session store
if (!CQ_Analytics.MyStore) {
    CQ_Analytics.MyStore = new CQ_Analytics.SessionStore();
    CQ_Analytics.MyStore.STOREKEY = "MYSTORE";
    CQ_Analytics.MyStore.STORENAME = "mystore";
    CQ_Analytics.MyStore.data={};
}
//register the session store
if (CQ_Analytics.ClientContextMgr){
    CQ_Analytics.ClientContextMgr.register(CQ_Analytics.MyStore)
}

JSONデータを格納するために、次の例ではCQ_Analytics.JSONStoreオブジェクトを作成して登録します。

if (!CQ_Analytics.myJSONStore) {
    CQ_Analytics.myJSONStore = CQ_Analytics.JSONStore.registerNewInstance("myjsonstore",{});
}

コンテキストストアコンポーネントの作成

ClientContext でセッションストアデータをレンダリングするには、コンテキストストアコンポーネントを作成します。コンテキストストアコンポーネントを作成したら、ClientContext にドラッグして、セッションストアのデータをレンダリングできます。コンテキストストアコンポーネントは、次のアイテムで構成されます。

  • データをレンダリングするための JSP スクリプト。
  • 編集ダイアログ。
  • セッションストアを初期化するための JSP スクリプト。
  • (オプション)セッションストアを作成するクライアントライブラリフォルダー。コンテキストストアコンポーネントが既存のセッションストアを使用する場合、クライアントライブラリフォルダーを含める必要はありません。

提供されているコンテキストストアコンポーネントの拡張

AEM が提供する genericstore および genericstoreproperties コンテキストストアコンポーネントは拡張できます。ストアデータの構造によって、拡張するコンポーネントが決まります。

  • プロパティと値のペア:GenericStoreProperties コンポーネントを拡張します。このコンポーネントは、プロパティと値のペアのストアを自動的にレンダリングします。次のインタラクションポイントが提供されています。

    • prolog.jspepilog.jsp:コンポーネントをレンダリングする前または後にサーバー側ロジックを追加できるコンポーネントインタラクション。
  • 複合データ:GenericStore コンポーネントを拡張します。セッションストアには、コンポーネントをレンダリングする必要があるたびに呼び出される「レンダラー」メソッドが必要になります。レンダラー関数は、次の 2 つのパラメーターと一緒に呼び出されます。

    • @param {String} store

      レンダリングするストア

    • @param {String} divId

      ストアをレンダリングする必要があるdivのID。

メモ

すべての ClientContext コンポーネントは、汎用ストアコンポーネントまたは汎用ストアのプロパティコンポーネントの拡張です。/libs/cq/personalization/components/contextstoresフォルダーにいくつかの例がインストールされます。

サイドキックでの表示の設定

ClientContext の編集時、コンテキストストアコンポーネントがサイドキックに表示されます。すべてのコンポーネントと同様に、ClientContext コンポーネントの componentGroup プロパティと jcr:title プロパティによって、コンポーネントのグループと名前が決まります。

componentGroupプロパティ値Client Contextを持つすべてのコンポーネントは、デフォルトでサイドキックに表示されます。 componentGroupプロパティに別の値を使用する場合は、デザインモードを使用して手動でサイドキックにコンポーネントを追加する必要があります。

コンテキストストアコンポーネントインスタンス

コンテキストストアコンポーネントをクライアントコンテキストに追加すると、コンポーネントインスタンスを表すノードが/etc/clientcontext/default/content/jcr:content/storesの下に作成されます。 このノードには、コンポーネントの編集ダイアログを使用して設定するプロパティ値が格納されます。

ClientContext が初期化されると、これらのノードが処理されます。

関連付けられたセッションストアの初期化

init.js.jsp ファイルをコンポーネントに追加して、コンテキストストアコンポーネントが使用するセッションストアを初期化する JavaScript コードを生成します。例えば、初期化スクリプトを使用して、コンポーネントの設定プロパティを取得し、それらを使用してセッションストアを設定します。

生成された JavaScript は、オーサーインスタンスおよびパブリッシュインスタンス上でのページの読み込み時に ClientContext が初期化されると、ページに追加されます。この JSP は、コンテキストストアコンポーネントインスタンスが読み込まれ、レンダリングされる前に実行されます。

コードでは、ファイルのMIMEタイプをtext/javascriptに設定する必要があります。設定しないと、実行されません。

注意

init.js.jsp スクリプトは、オーサーインスタンスおよびパブリッシュインスタンス上で実行されますが、コンテキストストアコンポーネントが ClientContext に追加されている場合だけです。

次の手順を実行すると、init.js.jsp スクリプトファイルが作成され、適切な MIME タイプを設定するコードが追加されます。ストアの初期化を実行するコードがその後に追加されます。

  1. コンテキストストアコンポーネントノードを右クリックし、作成/ファイルを作成をクリックします。

  2. 「名前」フィールドに「init.js.jsp」と入力して「OK」をクリックします。

  3. ページの上部に次のコードを追加して、「すべて保存」をクリックします。

    <%@page contentType="text/javascript" %>
    

genericstoreproperties コンポーネントのセッションストアデータのレンダリング

一貫性ある形式を使用して、ClientContext にセッションストアデータを表示します。

プロパティデータの表示

パーソナライズタグライブラリが、セッションストアのプロパティの値を表示する personalization:storePropertyTag タグを提供します。このタグを使用するには、JSP ファイルに次のコード行を含めます。

<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>

タグの形式は次のとおりです。

<personalization:storePropertyTag propertyName="property_name" store="session_store_name"/>

propertyName 属性は、表示するストアプロパティの名前です。store 属性は、登録されたストアの名前です。次のサンプルのタグでは、authorizableId ストアの profile プロパティの値が表示されます。

<personalization:storePropertyTag propertyName="authorizableId" store="profile"/>

HTML 構造

personalization.ui クライアントライブラリフォルダー(/etc/clientlibs/foundation/personalization/ui/themes/default)は、ClientContext が HTML コードの書式設定に使用する CSS スタイルを提供します。次のコードは、ストアデータの表示で使用が推奨される構造を説明したものです。

<div class="cq-cc-store">
   <div class="cq-cc-thumbnail">
      <div class="cq-cc-store-property">
           <!-- personalization:storePropertyTag for the store thumbnail image goes here -->
      </div>
   </div>
   <div class="cq-cc-content">
       <div class="cq-cc-store-property cq-cc-store-property-level0">
           <!-- personalization:storePropertyTag for a store property goes here --> 
       </div>
       <div class="cq-cc-store-property cq-cc-store-property-level1">
           <!-- personalization:storePropertyTag for a store property goes here --> 
       </div>
       <div class="cq-cc-store-property cq-cc-store-property-level2">
           <!-- personalization:storePropertyTag for a store property goes here --> 
       </div>
       <div class="cq-cc-store-property cq-cc-store-property-level3">
           <!-- personalization:storePropertyTag for a store property goes here --> 
       </div>
   </div>
   <div class="cq-cc-clear"></div>
</div>

/libs/cq/personalization/components/contextstores/profiledataコンテキストストアコンポーネントは、この構造を使用してプロファイルセッションストアのデータを表示します。 cq-cc-thumbnail クラスは、サムネール画像を配置します。cq-cc-store-property-level*x*クラスは、英数字のデータを次のようにフォーマットします。

  • level0、level1 および level2 は垂直方向に配置され、白いフォントを使用します。
  • level3 およびその他すべてのレベルは水平方向に配置され、白いフォントと濃い色の背景を使用します。

chlimage_1-222

genericstore コンポーネント用のセッションストアデータのレンダリング

genericstore コンポーネントを使用してストアデータをレンダリングするには、以下を実行する必要があります。

  • session store追加の名前を識別するためのコンポーネントJSPスクリプトへのpersonalization:storeRendererTagタグ。
  • セッションストアクラスにレンダラーメソッドを実装します。

genericstore セッションストアの識別

パーソナライズタグライブラリが、セッションストアのプロパティの値を表示する personalization:storePropertyTag タグを提供します。このタグを使用するには、JSP ファイルに次のコード行を含めます。

<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>

タグの形式は次のとおりです。

<personalization:storeRendererTag store="store_name"/>

セッションストアのレンダラーメソッドの実装

セッションストアには、コンポーネントをレンダリングする必要があるたびに呼び出される「レンダラー」メソッドが必要になります。レンダラー関数は、次の 2 つのパラメーターと一緒に呼び出されます。

  • @param {String} store

    レンダリングするストア

  • @param {String} divId

    ストアをレンダリングする必要があるdivのID。

セッションストアとのやり取り

セッションストアとやり取りするには、JavaScript を使用します。

セッションストアへのアクセス

ストアに対してデータを読み取りまたは書き込むためのセッションストアオブジェクトを取得します。CQ_Analytics.ClientContextMgr を使用すると、ストア名に基づいてストアにアクセスできます。取得したら、CQ-Analytics.SessionStoreまたはCQ-Analytics.PersistedSessionStoreのメソッドを使用してストアデータを操作します。

次の例では、profile ストアを取得し、このストアから formattedName プロパティを取得しています。

function getName(){
   var profilestore = CQ_Analytics.ClientContextMgr.getRegisteredStore("profile");
   if(profilestore){
      return profilestore.getProperty("formattedName", false);
   } else {
      return null;
   }
} 

セッションストアの更新に対処するリスナーの作成

セッションストアはイベントを発生させるので、リスナーを追加して、これらのイベントに基づいてイベントを発生させることができます。

セッションストアはObservableパターンに基づいて構築されています。 addListenerメソッドを提供するCQ_Analytics.Observableを拡張します。

次の例では、update セッションストアの profile イベントにリスナーを追加しています。

var profileStore = ClientContextMgr.getRegisteredStore("profile");
if( profileStore ) {
  //callback execution context
  var executionContext = this;

  //add "update" event listener to store
  profileStore.addListener("update",function(store, property) {
    //do something on store update

  },executionContext);
}

セッションストアの定義および初期化の確認

セッションストアは、データを使用して読み込まれ、初期化されるまでは使用可能になりません。セッションストアが使用可能になるタイミングに影響を与える可能性がある要素としては、次のものがあります。

  • ページの読み込み
  • JavaScript の読み込み
  • JavaScript の実行時間
  • XHR 要求の応答時間
  • セッションストアに対する動的な変更

CQ_Analytics.ClientContextUtilsオブジェクトのonStoreRegisteredメソッドとonStoreInitializedメソッドを使用して、セッションストアが使用可能な場合にのみアクセスします。 これらのメソッドを使用すると、セッション登録イベントおよびセッション初期化イベントに対処するイベントリスナーを登録できます。

注意

別のストアを使用する場合は、そのストアが登録されない場合を考慮する必要があります。

次の例では、onStoreRegistered セッションストアの profile イベントを使用しています。ストアが登録されると、リスナーがセッションストアの update イベントに追加されます。ストアが更新されると、ページ上の<div class="welcome">要素の内容がprofileストアの名前で更新されます。

//listen for the store registration
CQ_Analytics.ClientContextUtils.onStoreRegistered("profile", listen);

//listen for the store's update event
function listen(){
 var profilestore = CQ_Analytics.ClientContextMgr.getRegisteredStore("profile");
    profilestore.addListener("update",insertName);
}

//insert the welcome message
function insertName(){
 $("div.welcome").text("Welcome "+getName());
}

//obtain the name from the profile store
function getName(){
 var profilestore = CQ_Analytics.ClientContextMgr.getRegisteredStore("profile");
 if(profilestore){
  return profilestore.getProperty("formattedName", false);
    } else {
        return null;
    }
}

PersistedSessionStore プロパティを永続化しないようにする(つまり、sessionpersistence cookie から除外する)には、永続セッションストアの非永続プロパティリストにプロパティを追加します。

参照先 CQ_Analytics.PersistedSessionStore.setNonPersisted(propertyName)

CQ_Analytics.ClientContextUtils.onStoreRegistered("surferinfo", function(store) {
  //this will exclude the browser, OS and resolution properties of the surferinfo session store from the 
  store.setNonPersisted("browser");
  store.setNonPersisted("OS");
  store.setNonPersisted("resolution");
});

デバイススライダーの設定

条件

現在のページに対応するモバイルページがあることが必要です。この条件が満たされるのは、そのページに、モバイルロールアウト設定で設定されたライブコピーがある(rolloutconfig.path.toLowerCasemobile が含まれる)場合のみです。

設定

デスクトップページから対応するモバイルページに切り替える場合:

  • モバイルページの DOM が読み込まれます。

  • コンテンツを含むメインの div(必須)が抽出され、現在のデスクトップページに挿入されます。

  • 読み込む必要がある CSS クラスと body クラスを手動で設定する必要があります。

次に例を示します。

window.CQMobileSlider["geometrixx-outdoors"] = {
  //CSS used by desktop that need to be removed when mobile
  DESKTOP_CSS: [
    "/etc/designs/${app}/clientlibs_desktop_v1.css"
  ],
  
  //CSS used by mobile that need to be removed when desktop
  MOBILE_CSS: [
    "/etc/designs/${app}/clientlibs_mobile_v1.css"
  ],
  
  //id of the content that needs to be removed when mobile
  DESKTOP_MAIN_ID: "main",
  
  //id of the content that needs to be removed when desktop
  MOBILE_MAIN_ID: "main",
  
  //body classes used by desktop that need to be removed when mobile
  DESKTOP_BODY_CLASS: [
    "page"
  ],
  
  //body classes used by mobile that need to be removed when desktop
  MOBILE_BODY_CLASS: [
    "page-mobile"
  ]
};

例:カスタムコンテキストストアコンポーネントの作成

この例では、外部サービスからデータを取得してセッションストアに保存するコンテキストストアコンポーネントを次のように作成します。

  • genericstoreproperties コンポーネントを拡張します。
  • CQ_Analytics.JSONPStore javascriptオブジェクトを使用してストアを初期化します。
  • JSONP サービスを呼び出してデータを取得し、ストアに追加します。
  • ClientContext でデータをレンダリングします。

ジオロケーションコンポーネントの追加

CQ アプリケーションを作成し、ジオロケーションコンポーネントを追加します。

  1. Web ブラウザーで CRXDE Lite を開きます(http://localhost:4502/crx/de)。

  2. /appsフォルダーを右クリックし、「作成/フォルダーを作成」をクリックします。 「myapp」という名前を指定して、「OK」をクリックします。

  3. 同様に、myappの下にcontextstoresという名前のフォルダーを作成します。 "

  4. /apps/myapp/contextstoresフォルダーを右クリックし、作成/コンポーネントを作成をクリックします。 次のプロパティ値を指定して、「次へ」をクリックします。

    • ラベル:geoloc
    • タイトル:ロケーションストア
    • スーパータイプ:cq/personalization/components/contextstores/genericstoreproperties
    • グループ:クライアントコンテキスト
  5. コンポーネントを作成ダイアログで、「OK」が有効になるまで各ページ上で「次へ」をクリックしてから、「OK」をクリックします。

  6. 「すべて保存」をクリックします。

ジオロケーション編集ダイアログの作成

コンテキストストアコンポーネントには編集ダイアログが必要です。ジオロケーション編集ダイアログには、設定するプロパティがないことを示す静的メッセージが表示されます。

  1. /libs/cq/personalization/components/contextstores/genericstoreproperties/dialogノードを右クリックし、「コピー」をクリックします。

  2. /apps/myapp/contextstores/geolocノードを右クリックし、「貼り付け」をクリックします。

  3. /apps/myapp/contextstores/geoloc/dialog/items/items/tab1/itemsノードの下のすべての子ノードを削除します。

    • store
    • properties
    • thumbnail
  4. /apps/myapp/contextstores/geoloc/dialog/items/items/tab1/itemsノードを右クリックし、「作成/ノードを作成」をクリックします。 次のプロパティ値を指定して、「OK」をクリックします。

    • 名前:静的
    • タイプ:cq:Widget
  5. この ノードに次のプロパティを追加します。

    名前 タイプ
    cls String x-form-fieldset-description
    text 文字列 ジオロケーションコンポーネントでは設定する必要がありません。
    xtype 文字列 static
  6. 「すべて保存」をクリックします。

    chlimage_1-223

初期化スクリプトの作成

init.js.jsp ファイルをジオロケーションコンポーネントに追加し、これを使用してセッションストアを作成し、ロケーションデータを取得してストアに追加します。

init.js.jsp ファイルは、ClientContext がページによって読み込まれると実行されます。この時点までに、ClientContext JavaScript API が読み込まれ、スクリプトで使用できるようになっています。

  1. /apps/myapp/contextstores/geolocノードを右クリックし、「作成 —>ファイルを作成」をクリックします。 init.js.jsp の名前を指定して、「OK」をクリックします。

  2. 次のコードをページの上部に追加して、「すべて保存」をクリックします。

    <%@page contentType="text/javascript;charset=utf-8" %><%
    %><%@include file="/libs/foundation/global.jsp?lang=ja"%><%
    log.info("***** initializing geolocstore ****");
    String store = "locstore";
    String jsonpurl = "https://api.wipmania.com/jsonp?callback=${callback}";
    
    %>
    var locstore = CQ_Analytics.StoreRegistry.getStore("<%= store %>");
    if(!locstore){
     locstore = CQ_Analytics.JSONPStore.registerNewInstance("<%= store %>", "<%= jsonpurl %>",{});
    }
    <% log.info(" ***** done initializing geoloc ************"); %>
    

ジオロケーションセッションのストアデータのレンダリング

ClientContext でストアデータをレンダリングするには、ジオロケーションコンポーネントの JSP ファイルにコードを追加します。

chlimage_1-224

  1. CRXDE Liteで、/apps/myapp/contextstores/geoloc/geoloc.jspファイルを開きます。

  2. 次の HTML コードをスタブコードの下に追加します。

    <%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>
    <div class="cq-cc-store">
       <div class="cq-cc-content">
           <div class="cq-cc-store-property cq-cc-store-property-level0">
               Continent: <personalization:storePropertyTag propertyName="address/continent" store="locstore"/> 
           </div>
           <div class="cq-cc-store-property cq-cc-store-property-level1">
               Country: <personalization:storePropertyTag propertyName="address/country" store="locstore"/> 
           </div>
           <div class="cq-cc-store-property cq-cc-store-property-level2">
               City: <personalization:storePropertyTag propertyName="address/city" store="locstore"/> 
           </div>
           <div class="cq-cc-store-property cq-cc-store-property-level3">
               Latitude: <personalization:storePropertyTag propertyName="latitude" store="locstore"/> 
           </div>
           <div class="cq-cc-store-property cq-cc-store-property-level4">
               Longitude: <personalization:storePropertyTag propertyName="longitude" store="locstore"/> 
           </div>
       </div>
        <div class="cq-cc-clear"></div>
    </div>
    
  3. 「すべて保存」をクリックします。

ClientContext へのコンポーネントの追加

ページの読み込み時に初期化されるように、ロケーションストアコンポーネントを ClientContext に追加します。

  1. オーサーインスタンス上で Geometrixx Outdoors のホームページを開きます(http://localhost:4502/content/geometrixx-outdoors/en.html)。

  2. Ctrl-Alt-c(Windows)またはControl-Option-c(Mac)をクリックして、「クライアントコンテキスト」を開きます。

  3. ClientContext の上部にある編集アイコンをクリックして、ClientContext デザイナーを開きます。

  4. ロケーションストアコンポーネントを ClientContext にドラッグします。

ClientContext でのロケーション情報の表示

編集モードで Geometrixx Outdoors のホームページを開き、ClientContext を開いてロケーションストアコンポーネントのデータを表示します。

  1. Geometrixx Outdoors サイトの英語ページを開きます。(http://localhost:4502/content/geometrixx-outdoors/en.html
  2. クライアントコンテキストを開くには、Ctrl-Alt-c(Windows)またはControl-Option-c(Mac)を押します。

カスタマイズされた ClientContext の作成

2 つ目の ClientContext を作成するには、次のブランチを複製する必要があります。

/etc/clientcontext/default

  • サブフォルダ:

    /content

    には、カスタマイズしたクライアントコンテキストの内容が含まれます。

  • フォルダー:

    /contextstores

    コンテキストストアに対して異なる設定を定義できます。

カスタマイズしたクライアントコンテキストを使用するには、プロパティを編集します
path
(ページテンプレートに含まれる、クライアントコンテキストコンポーネントのデザインスタイル)。 例えば、次の場所の標準の場所として使用できます。
/libs/cq/personalization/components/clientcontext/design_dialog/items/path

このページ

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