カスタムクラウドサービスの作成

デフォルトのクラウドサービスを、カスタムクラウドサービスタイプで拡張することができます。これにより、カスタムマークアップを構造的な方法でページに挿入できます。この手法は、Google Analytics や Chartbeat など、主としてサードパーティの分析プロバイダーに使用されます。クラウドサービスは、親ページから子ページに継承されますが、任意のレベルで継承を中断できます。

メモ

ここで紹介する手順は、Google Analytics を使用して新しいクラウドサービスを作成する場合の例です。この内容がそのまま実際のユースケースに当てはまるとは限りません。

  1. CRXDE Liteで、/appsの下に新しいノードを作成します。

    • 名前acs
    • nt:folder
  2. /apps/acsの下に新しいノードを作成します。

    • 名前analytics
    • sling:Folder
  3. /apps/acs/analyticsの下に2つの新しいノードを作成:

    • 名前:コンポーネント
    • sling:Folder

    および

    • 名前:templates
    • sling:Folder
  4. /apps/acs/analytics/componentsを右クリックします。 「作成…」を選択し、「コンポーネントを作成…」をクリックします。表示されるダイアログで、以下の項目を指定します。

    • ラベル: googleanalyticspage
    • タイトル: Google Analytics Page
    • スーパータイプ: cq/cloudserviceconfigs/components/configpage
    • グループ: .hidden
  5. 次へ」を2回クリックし、次を指定します。

    • 許可された親: acs/analytics/templates/googleanalytics

    次へ」を2回クリックし、「OK」をクリックします。

  6. <a0/追加>に対するプロパティ:googleanalyticspage

    • 名前:cq:defaultView
    • 値: html
  7. /apps/acs/analytics/components/googleanalyticspageの下にcontent.jspという名前の新しいファイルを作成し、次の内容を入力します。

    <%@page contentType="text/html"
                pageEncoding="utf-8"%><%
    %><%@include file="/libs/foundation/global.jsp?lang=ja"%><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>
    
  8. /apps/acs/analytics/components/googleanalyticspage/の下に新しいノードを作成します。

    • 名前dialog

    • cq:Dialog

    • プロパティ

      • 名前title
      • String
      • : Google Analytics Config
      • 名前xtype
      • String
      • : dialog
  9. /apps/acs/analytics/components/googleanalyticspage/dialogの下に新しいノードを作成します。

    • 名前items

    • cq:Widget

    • プロパティ

      • 名前xtype
      • String
      • : tabpanel
  10. /apps/acs/analytics/components/googleanalyticspage/dialog/itemsの下に新しいノードを作成します。

    • 名前items
    • cq:WidgetCollection
  11. /apps/acs/analytics/components/googleanalyticspage/dialog/items/itemsの下に新しいノードを作成します。

    • 名前:tab1

    • cq:Panel

    • プロパティ

      • 名前title
      • String
      • : Config
  12. /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

  13. /libs/cq/cloudserviceconfigs/components/configpage/body.jsp/apps/acs/analytics/components/googleanalyticspage/body.jspにコピーし、libsappsに変更して、行34に対するスクリプト参照を完全修飾パスにします。

  14. /apps/acs/analytics/templates/の下に新しいテンプレートを作成:

    • リソースタイプ = acs/analytics/components/googleanalyticspage
    • ラベル = googleanalytics
    • タイトル= Google Analytics Configuration
    • allowedPath = /etc/cloudservices/googleanalytics(/.*?lang=ja)?
    • allowedChildren = /apps/acs/analytics/templates/googleanalytics
    • sling:resourceSuperType = cq/cloudserviceconfigs/templates/configpage(テンプレートノードで、jcr:contentノードではなく)
    • と​cq:designPath = /etc/designs/cloudservices/googleanalytics(jcr:content)
  15. 新しいコンポーネントの作成:/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?lang=ja" %><%
    
    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><%
        }
    }
    %>
    

    これによって、設定のプロパティに基づいたカスタムマークアップが出力されます。

  16. http://localhost:4502/miscadmin#/etc/cloudservicesに移動し、新しいページを作成します。

    • タイトル: Google Analytics
    • 名前googleanalytics

    CRXDE Liteに戻り、/etc/cloudservices/googleanalyticsの下で次のプロパティをjcr:contentに追加します。

    • 名前componentReference
    • String
    • : acs/analytics/components/googleanalytics
  17. 新しく作成したサービスページ(http://localhost:4502/etc/cloudservices/googleanalytics.html)に移動し、+​をクリックして、新しい設定を作成します。

    • 親設定: /etc/cloudservices/googleanalytics
    • タイトル: My First GA Config

    Google Analytics 設定」を選択し、「作成」をクリックします。

  18. アカウント ID(例:AA-11111111-1)を入力します。「OK」をクリックします。

  19. ページに移動し、「クラウドサービス」タブで、新たに作成された設定をページプロパティに追加します。

  20. このページにカスタムマークアップが追加されます。

このページ

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