ClientContext の詳細

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

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

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

スタンドアロンのセッションストアを作成して ClientContext に追加するか、コンテキストストアコンポーネントに関連付けられたセッションストアを作成するために、Adobe Experience Manager(AEM) では、すぐに使用できる複数のコンテキストストアコンポーネントがインストールされます。 これらのコンポーネントは、作成するコンポーネントの基礎として使用できます。

ClientContext の起動、表示する情報の設定、ユーザーエクスペリエンスのシミュレーションについて詳しくは、ClientContext を参照してください。

セッションストア

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"
}

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

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

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

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

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

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

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

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

ページへの ClientContext の追加

ClientContext を有効にするには、ClientContext コンポーネントを eb ページの body セクションに含めます。ClientContext コンポーネントノードのパスは /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 にストアデータを表示したりできるようにします。

セッションストアの作成

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

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

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

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

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

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

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

• [CQ_Analytics.SessionStore](/docs/experience-manager-65/developing/personlization/client-context/ccjsapi.html?lang=ja#cq-analytics-sessionstore)：これらのオブジェクトはページ DOM 内にのみ存在します。データが作成され、ページが存続する間保持されます。
• [CQ_Analytics.PerstistedSessionStore](/docs/experience-manager-65/developing/personlization/client-context/ccjsapi.html?lang=ja#cq-analytics-persistedsessionstore)：これらのオブジェクトはページ DOM 内に存在し、ブラウザーストレージまたは cookie に保持されます。データは、ページやユーザーセッションをまたがって使用できます。

また、API は JSON データまたは JSONP データの格納に特化したこれらのクラスを拡張します。

• セッション限定オブジェクト：CQ_Analytics.JSONStore および CQ_Analytics.JSONPStore。

• 永続オブジェクト：CQ_Analytics.PersistedJSONStore および CQ_Analytics.PersistedJSONPStore。

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

クライアントライブラリフォルダーの 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.jsp および epilog.jsp：コンポーネントのレンダリングの前または後にサーバー側ロジックを追加できるコンポーネントのインタラクション。

• 複合データ：GenericStore コンポーネントを拡張します。セッションストアには、コンポーネントをレンダリングするたびに呼び出される「レンダラー」メソッドが必要です。 レンダラー関数は、次の 2 つのパラメーターと一緒に呼び出されます。

  • @param {String} store
    レンダリングするストア

  • @param {String} divId
    ストアをレンダリングする必要がある div の ID。

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

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

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

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

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

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

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

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

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

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

次の手順を実行すると、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 属性は、登録されたストアの名前です。次のサンプルのタグでは、profile ストアの authorizableId プロパティの値が表示されます。

<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 およびその他すべてのレベルは水平方向に配置され、白いフォントと濃い色の背景を使用します。

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

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

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

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 パターンを基盤として作成されています。セッションストアは CQ_Analytics.Observable メソッドを提供する [addListener](/docs/experience-manager-65/developing/personlization/client-context/ccjsapi.md#addlistener-event-fct-scope) を拡張します。

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

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 メソッドを使用します。これらのメソッドを使用すると、セッション登録イベントおよびセッション初期化イベントに対処するイベントリスナーを登録できます。

次の例では、profile セッションストアの onStoreRegistered イベントを使用しています。ストアが登録されると、リスナーがセッションストアの 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;
    }
}

sessionpersistence Cookie からのプロパティの除外

プロパティを防ぐには PersistedSessionStore 持続的になる ( つまり、 sessionpersistence cookie)、永続化されたセッションストアの非永続化プロパティリストにプロパティを追加します。

参照先 [CQ_Analytics.PersistedSessionStore.setNonPersisted(propertyName)](/docs/experience-manager-65/developing/personlization/client-context/ccjsapi.md#setnonpersisted-name)

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.toLowerCase に mobile が含まれる）場合のみです。

設定

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

• モバイルページの 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 を開きます（https://localhost:4502/crx/de）。

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

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

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

   • ラベル：geoloc
   • タイトル：場所ストア
   • スーパータイプ：cq/personalization/components/contextstores/genericstoreproperties
   • グループ：ClientContext

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」をクリックします。

   • 名前：static
   • タイプ：cq:Widget

5. このノードに次のプロパティを追加します。

   名前	タイプ	値
   cls	文字列	x-form-fieldset-description
   text	文字列	ジオロケーションコンポーネントでは設定する必要がありません。
   xtype	文字列	static

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

   

初期化スクリプトの作成

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"%><%
   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 ファイルにコードを追加します。

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 のホームページを開きます（https://localhost:4502/content/geometrixx-outdoors/en.html）。

2. Ctrl + Alt + C キー（Windows）または Control + Option + C キー（Mac）を押して、ClientContext を開きます。

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

   

4. 場所ストアコンポーネントを ClientContext にドラッグします。

ClientContext で場所情報を見る

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

1. Geometrixx Outdoors サイトの英語ページを開きます。（https://localhost:4502/content/geometrixx-outdoors/en.html）
2. ClientContext を開くには、Ctrl + Alt + C キー（Windows）または Control + Option + C キー（Mac）を押します。

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

2 つ目の ClientContext を作成するには、次のブランチを複製します。

/etc/clientcontext/default

• サブフォルダー：
  /content
  カスタマイズされた ClientContext の内容が含まれます。

• フォルダー：
  /contextstores
  では、コンテキストストアに対して様々な設定を定義できます。

カスタマイズされた ClientContext を使用するには、ClientContext コンポーネントのデザインスタイルの
path
プロパティを、ページテンプレートに含まれているものと同じように編集します。例えば、標準的な場所は次のようになります。
/libs/cq/personalization/components/clientcontext/design_dialog/items/path