デフォルトのクラウドサービスを、カスタムクラウドサービスタイプで拡張することができます。これにより、カスタムマークアップを構造的な方法でページに挿入できます。この手法は、Google Analytics や Chartbeat など、主としてサードパーティの分析プロバイダーに使用されます。Cloud Services は、親ページから子ページに継承されますが、任意のレベルで継承を中断できます。
ここで紹介する手順は、Google Analytics を使用して新しいクラウドサービスを作成する場合の例です。この内容がそのまま実際のユースケースに当てはまるとは限りません。
CRXDE Lite で、/apps
の下に新しいノードを作成します。
acs
nt:folder
/apps/acs
の下に新しいノードを作成します。
analytics
sling:Folder
/apps/acs/analytics
の下に新しいノードを 2 つ作成します。
sling:Folder
および
sling:Folder
「/apps/acs/analytics/components
」を右クリックします。「作成…」を選択し、「コンポーネントを作成…」をクリックします。表示されるダイアログで、以下の項目を指定します。
googleanalyticspage
Google Analytics Page
cq/cloudserviceconfigs/components/configpage
.hidden
「次へ」を 2 回クリックして、次の項目を指定します。
acs/analytics/templates/googleanalytics
「次へ」を 2 回クリックして、「OK」をクリックします。
プロパティを「googleanalyticspage
」に追加します。
cq:defaultView
html
以下の内容で、content.jsp
という新しいファイルを /apps/acs/analytics/components/googleanalyticspage
の下に作成します。
<%@page contentType="text/html"
pageEncoding="utf-8"%><%
%><%@include file="/libs/foundation/global.jsp"%><div>
<div>
<h3>Google Analytics Settings</h3>
<ul>
<li><div class="li-bullet"><strong>accountID: </strong><br><%= xssAPI.encodeForHTML(properties.get("accountID", "")) %></div></li>
</ul>
</div>
/apps/acs/analytics/components/googleanalyticspage/
の下に新しいノードを作成します。
名前:dialog
型:cq:Dialog
プロパティ:
title
String
Google Analytics Config
xtype
String
dialog
「/apps/acs/analytics/components/googleanalyticspage/dialog
」の下に新しいノードを作成します。
名前:items
型:cq:Widget
プロパティ:
xtype
String
tabpanel
「/apps/acs/analytics/components/googleanalyticspage/dialog/items
」の下に新しいノードを作成します。
items
cq:WidgetCollection
「/apps/acs/analytics/components/googleanalyticspage/dialog/items/items
」の下に新しいノードを作成します。
名前:tab1
型:cq:Panel
プロパティ:
title
String
Config
「/apps/acs/analytics/components/googleanalyticspage/dialog/items/items/tab1
」の下に新しいノードを作成します。
名前:items
型:nt:unstructured
プロパティ:
名前:fieldLabel
種類:string
値:アカウント ID
名前:fieldDescription
型:String
値:The account ID assigned by Google. Usually in the form UA-NNNNNN-N
名前:name
型:String
値:./accountID
名前:validateOnBlur
型:String
値:true
名前:xtype
型:String
値:textfield
/libs/cq/cloudserviceconfigs/components/configpage/body.jsp
を /apps/acs/analytics/components/googleanalyticspage/body.jsp
にコピーして、34 行目の libs
を apps
に変更し、79 行目のスクリプト参照を完全修飾パスにします。
「/apps/acs/analytics/templates/
」の下に新しいテンプレートを次のように作成します。
acs/analytics/components/googleanalyticspage
googleanalytics
Google Analytics Configuration
/etc/cloudservices/googleanalytics(/.*)?
/apps/acs/analytics/templates/googleanalytics
cq/cloudserviceconfigs/templates/configpage
(jcr:content ノードではなくテンプレートノード)/etc/designs/cloudservices/googleanalytics
(jcr:content)新しいコンポーネントを作成します: /apps/acs/analytics/components/googleanalytics
。
次の内容を googleanalytics.jsp
に追加します。
<%@page import="org.apache.sling.api.resource.Resource,
org.apache.sling.api.resource.ValueMap,
org.apache.sling.api.resource.ResourceUtil,
com.day.cq.wcm.webservicesupport.Configuration,
com.day.cq.wcm.webservicesupport.ConfigurationManager" %>
<%@include file="/libs/foundation/global.jsp" %><%
String[] services = pageProperties.getInherited("cq:cloudserviceconfigs", new String[]{});
ConfigurationManager cfgMgr = resource.getResourceResolver().adaptTo(ConfigurationManager.class);
if(cfgMgr != null) {
String accountID = null;
Configuration cfg = cfgMgr.getConfiguration("googleanalytics", services);
if(cfg != null) {
accountID = cfg.get("accountID", null);
}
if(accountID != null) {
%>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '<%= accountID %>']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script><%
}
}
%>
これによって、設定プロパティに基づいたカスタムマークアップが出力されます。
http://localhost:4502/miscadmin#/etc/cloudservices
に移動して、新しいページを作成します。
Google Analytics
googleanalytics
CRXDE Lite に戻り、/etc/cloudservices/googleanalytics
の下で、次のプロパティを jcr:content
に追加します。
componentReference
String
acs/analytics/components/googleanalytics
新規作成したサービスページ(http://localhost:4502/etc/cloudservices/googleanalytics.html
)に移動し、「+」をクリックして新しい設定を作成します。
/etc/cloudservices/googleanalytics
My First GA Config
「Google Analytics 設定」を選択し、「作成」をクリックします。
アカウント ID(例:AA-11111111-1
)を入力します。「OK」をクリックします。
ページに移動し、「クラウドサービス」タブで、新たに作成された設定をページプロパティに追加します。
このページにカスタムマークアップが追加されます。