Client Context は、ContextHub に変更されました。詳しくは、 関連ドキュメント 」を参照してください。
クライアントコンテキストは、ユーザーデータを動的にまとめたコレクションを表します。このデータに基づいて、特定の状況で web ページ上に表示するコンテンツを決定できます(コンテンツのターゲティング)。このデータは、web サイト分析や、ページ上のあらゆる JavaScript にも使用できます。
ClientContext は、主として次の要素で構成されます。
スタンドアロンのセッションストアを作成して ClientContext に追加するか、コンテキストストアコンポーネントに関連付けられたセッションストアを作成するために、Adobe Experience Manager(AEM) では、すぐに使用できる複数のコンテキストストアコンポーネントがインストールされます。 これらのコンポーネントは、作成するコンポーネントの基礎として使用できます。
ClientContext の起動、表示する情報の設定、ユーザーエクスペリエンスのシミュレーションについて詳しくは、ClientContext を参照してください。
ClientContext には、ユーザーデータを格納する様々なセッションストアが含まれます。ストアデータは以下のソースから得られます。
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)を使用します。ブラウザーストレージのほうが一般的です。
ブラウザーを閉じて再度開いたときに、保持されているストアの値を使用してセッションストアを読み込むことができます。古い値を削除するには、ブラウザーのキャッシュをクリアする必要があります。
コンテキストストアコンポーネントは、ClientContext に追加できる CQ コンポーネントです。一般的に、コンテキストストアコンポーネントは、関連付けられているセッションストアのデータを表示します。ただし、コンテキストストアコンポーネントが表示する情報は、セッションストアのデータに限定されません。
コンテキストストアコンポーネントには、次のアイテムを含めることができます。
コンテキストストアに追加できる、インストール済みのコンテキストストアコンポーネントについては、使用可能な ClientContext コンポーネントを参照してください。
ページデータは、ClientContext のデフォルトのコンポーネントではなくなりました。必要に応じて、ページデータを追加するには、Client Context を編集し、汎用ストアのプロパティコンポーネントを追加して、ストアを pagedata
として定義するように設定します。
ターゲット設定されたコンテンツの配信にはプロファイル情報も使用します。
ClientContext を有効にするには、ClientContext コンポーネントを eb ページの body セクションに含めます。ClientContext コンポーネントノードのパスは /libs/cq/personalization/components/clientcontext
です。このコンポーネントを含めるには、次のコードをページコンポーネントの JSP ファイルに追加します。場所は、ページの body
要素のすぐ下です。
<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>
ClientContext コンポーネントによって、ClientContext を実装するクライアントライブラリをページが読み込みます。
ClientContext UI は、オーサーインスタンス上でのみ使用可能です。
ClientContext を拡張するには、次のようなセッションストアを作成し、オプションでストアデータを表示します。
データを提供できる JSONP
サービスがある(または作成する)場合は、JSONP
コンテキストストアコンポーネントを使用して、その JSONP サービスにマップするだけです。これにより、セッションストアが処理されます。
ClientContext に追加し、ClientContext から取得する必要のあるデータのセッションストアを作成します。 一般的に、セッションストアを作成するには次の手順を実行します。
categories
プロパティの値が personalization.stores.kernel
のクライアントライブラリフォルダーを作成します。Client Context は、このカテゴリのクライアントライブラリを自動的に読み込みます。
personalization.core.kernel
クライアントライブラリフォルダーに対して依存関係を持つように、クライアントライブラリフォルダーを設定します。personalization.core.kernel
クライアントライブラリは Client Context JavaScript API を提供します。
セッションストアを作成して初期化する JavaScript を追加します。
この JavaScript を personalization.stores.kernel クライアントライブラリに含めると、ClientContext フレームワークが読み込まれたときにストアが作成されます。
コンテキストストアコンポーネントの一部としてセッションストアを作成する場合は、代わりに JavaScript をコンポーネントの init.js.jsp ファイル内に配置できます。この場合は、コンポーネントが 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 にドラッグして、セッションストアのデータをレンダリングできます。コンテキストストアコンポーネントは、以下のアイテムで構成されます。
AEM が提供する genericstore および genericstoreproperties コンテキストストアコンポーネントは拡張できます。ストアデータの構造によって、拡張するコンポーネントが決まります。
プロパティと値のペア:GenericStoreProperties
コンポーネントを拡張します。このコンポーネントは、プロパティと値のペアのストアを自動的にレンダリングします。次のインタラクションポイントが提供されています。
prolog.jsp
および epilog.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
プロパティに異なる値を使用する場合は、デザインモードを使用して、手動でコンポーネントをサイドキックに追加する必要があります。
コンテキストストアコンポーネントを ClientContext に追加すると、コンポーネントインスタンスを表すノードが /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 タイプを設定するコードが追加されます。ストアの初期化を実行するコードがその後に追加されます。
コンテキストストアコンポーネントノードを右クリックし、作成/ファイルを作成をクリックします。
「名前」フィールドに「init.js.jsp
」と入力して「OK」をクリックします。
ページの上部に次のコードを追加して、「すべて保存」をクリックします。
<%@page contentType="text/javascript" %>
一貫性ある形式を使用して、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"/>
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*
クラスは、英数字データを次のようにフォーマットします。
genericstore コンポーネントを使用してストアデータをレンダリングするには、次の手順を実行する必要があります。
パーソナライズタグライブラリが、セッションストアのプロパティの値を表示する personalization:storePropertyTag
タグを提供します。このタグを使用するには、JSP ファイルに次のコード行を含めます。
<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>
タグの形式は次のとおりです。
<personalization:storeRendererTag store="store_name"/>
セッションストアには、コンポーネントをレンダリングするたびに呼び出される「レンダラー」メソッドが必要です。 レンダラー関数は、次の 2 つのパラメーターと一緒に呼び出されます。
セッションストアとのやり取りには、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);
}
セッションストアは、データを使用して読み込まれ、初期化されるまでは使用可能になりません。セッションストアが使用可能になるタイミングに影響を与える可能性がある要素としては、次のものがあります。
使用可能な場合にのみセッションストアにアクセスするには、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;
}
}
プロパティを防ぐには 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"
]
};
この例では、外部サービスからデータを取得してセッションストアに保存するコンテキストストアコンポーネントを次のように作成します。
CQ アプリケーションを作成し、ジオロケーションコンポーネントを追加します。
Web ブラウザーで CRXDE Lite を開きます(https://localhost:4502/crx/de)。
/apps
フォルダーを右クリックして、作成/フォルダーを作成をクリックします。「myapp
」の名前を指定して、「OK」をクリックします。
同様に、myapp
の下に contextstores
というフォルダーを作成します。
/apps/myapp/contextstores
フォルダーを右クリックして、作成/コンポーネントを作成をクリックします。次のプロパティ値を指定して、「次へ」をクリックします。
コンポーネントを作成ダイアログで、「OK」が有効になるまで各ページ上で「次へ」をクリックしてから、「OK」をクリックします。
「すべて保存」をクリックします。
コンテキストストアコンポーネントには編集ダイアログが必要です。ジオロケーション編集ダイアログには、設定するプロパティがないことを示す静的メッセージが含まれます。
/libs/cq/personalization/components/contextstores/genericstoreproperties/dialog
ノードを右クリックして、「コピー」をクリックします。
/apps/myapp/contextstores/geoloc
ノードを右クリックして、ペーストをクリックします。
/apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items ノードの下にあるすべての子ノードを削除します。
/apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items
ノードを右クリックして、作成/ノードを作成をクリックします。以下のプロパティ値を指定して、「OK」をクリックします。
このノードに次のプロパティを追加します。
名前 | タイプ | 値 |
---|---|---|
cls | 文字列 | x-form-fieldset-description |
text | 文字列 | ジオロケーションコンポーネントでは設定する必要がありません。 |
xtype | 文字列 | static |
「すべて保存」をクリックします。
init.js.jsp ファイルをジオロケーションコンポーネントに追加し、これを使用してセッションストアを作成し、ロケーションデータを取得してストアに追加します。
init.js.jsp ファイルは、ClientContext がページによって読み込まれると実行されます。この時点までに、ClientContext JavaScript API が読み込まれ、スクリプトで使用できるようになっています。
/apps/myapp/contextstores/geoloc ノードを右クリックし、作成/ファイルを作成をクリックします。init.js.jsp の名前を指定して、「OK」をクリックします。
以下のコードをページの上部に追加して、「すべて保存」をクリックします。
<%@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 ファイルにコードを追加します。
CRXDE Lite で /apps/myapp/contextstores/geoloc/geoloc.jsp
ファイルを開きます。
次の 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>
「すべて保存」をクリックします。
ページの読み込み時に初期化されるように、場所ストアコンポーネントを ClientContext に追加します。
オーサーインスタンス上で Geometrixx Outdoors のホームページを開きます(https://localhost:4502/content/geometrixx-outdoors/en.html)。
Ctrl + Alt + C キー(Windows)または Control + Option + C キー(Mac)を押して、ClientContext を開きます。
ClientContext の上部にある編集アイコンをクリックして、ClientContext デザイナーを開きます。
場所ストアコンポーネントを ClientContext にドラッグします。
編集モードで Geometrixx Outdoors のホームページを開き、ClientContext を開いて場所ストアコンポーネントのデータを表示します。
2 つ目の ClientContext を作成するには、次のブランチを複製します。
/etc/clientcontext/default
サブフォルダー:
/content
カスタマイズされた ClientContext の内容が含まれます。
フォルダー:
/contextstores
では、コンテキストストアに対して様々な設定を定義できます。
カスタマイズされた ClientContext を使用するには、ClientContext コンポーネントのデザインスタイルの
path
プロパティを、ページテンプレートに含まれているものと同じように編集します。例えば、標準的な場所は次のようになります。
/libs/cq/personalization/components/clientcontext/design_dialog/items/path