現在表示中:

ContextHub は、コンテキストデータを保存、操作および表示するためのフレームワークです。ContextHub について詳しくは、開発者ドキュメントを参照してください。ContextHub は、タッチ UI の ClientContext に置き換わるものです。

ContextHub ツールバーを設定して、プレビューモードで表示する、ContextHub ストアを作成するおよびタッチ操作向け UI を使用して UI モジュールを追加するかどうかを制御します。

ContextHub の無効化

ContextHub は、AEM のインストールで、デフォルトで有効になります。ContextHub を無効にすると、js/css の読み込みと初期化を回避できます。ContextHub を無効にする方法は 2 つあります。

  • ContextHub の設定を編集し、「ContextHub を無効にする」チェックボックスをオンにします。
    1. レールで、ツール/サイト/ContextHub をクリックまたはタップします。
    2. デフォルトの「設定コンテナ」をクリックまたはタップします。
    3. ContextHub 設定」を選択し、「選択した要素を編集」をクリックまたはタップします。
    4. ContextHub を無効にする」をクリックまたはタップし、「保存」をクリックまたはタップします。

または

  • CRXDE Lite を使用して、/etc/cloudsettings/default/contexthub のプロパティ disabledtrue に設定します。

ContextHub UI の表示と非表示

Adobe Granite ContextHub OSGi サービスを設定して、ページに ContextHub UI を表示または非表示にします。このサービスの PID は、com.adobe.granite.contexthub.impl.ContextHubImpl です。

サービスを設定するには、Web コンソールを使用するか、リポジトリの JCR ノードを使用します。

  • Web コンソール: UI を表示するには、Show UI プロパティを選択します。UI を非表示にするには、Hide UI プロパティを消去します。
  • JCR ノード:UI を表示するには、com.adobe.granite.contexthub.show_ui ブール値プロパティを true に設定します。UI を非表示にするには、プロパティを false に設定します。

ContextHub UI を表示に設定すると、AEM オーサーインスタンスのページにのみ表示されます。UI はパブリッシュインスタンスのページには表示されません。

ContextHub UI モードとモジュールの追加

ContextHub ツールバーに表示される UI のモードとモジュールをプレビューモードで設定します。

  • UI モード:関連モジュールのグループ。
  • モジュール:ストアからのコンテキストデータを公開し、作成者がそのコンテキストを操作できるようにするウィジェット。

UI モードはツールバーの左側に一連のアイコンとして表示されます。選択すると、UI モードのモジュールが右側に表示されます。

chlimage_1

アイコンは、Coral UI ライブラリからの参照です。

UI モードの追加

UI モードをグループ関連の ContextHub モジュールに追加します。UI モードを作成する際に、ContextHub ツールバーに表示されるタイトルとアイコンを指定します。

  1. Experience Manager レールで、ツール/サイト/Context Hub をクリックまたはタップします。

  2. デフォルトの設定コンテナをクリックまたはタップします。

  3. 「ContextHub 設定」をクリックまたはタップします。

  4. 「作成」ボタンをクリックまたはタップして、「ContextHub UI モード」をクリックまたはタップします。

    chlimage_1
  5. 次のプロパティの値を指定します。

    • UI モードのタイトル:UI モードを識別するタイトル。
    • モードアイコン:使用する Coral UI アイコンのセレクター(例:coral-Icon--user)。
    • 有効:オンにすると ContextHub ツールバーに UI モードが表示されます。
  6. 「保存」をクリックまたはタップします。

UI モジュールの追加

ContextHub UI モジュールを UI モードに追加し、それを ContextHub ツールバーに表示して、ページコンテンツをプレビューできるようにします。UI モジュールを追加するときは、ContextHub に登録されるモジュールタイプのインスタンスを作成します。UI モジュールを追加するには、関連するモジュールタイプの名前が必要です。

AEM には、基本の UI モジュールタイプと、UI モジュールのベースにできる複数のサンプル UI モジュールタイプが用意されています。次の表で、各モジュールタイプについて簡単に説明します。カスタム UI モジュールの開発について詳しくは、ContextHub UI モジュールの作成を参照してください。

UI モジュールのプロパティには、モジュール固有のプロパティの値を指定できる詳細設定が含まれています。詳細設定は JSON 形式で指定します。表の「モジュールタイプ」列は、各 UI モジュールタイプに必要な JSON コードに関する情報へのリンクを示します。

モジュールタイプ 説明 ストア
contexthub.base 汎用 UI モジュールタイプ。 UI モジュールプロパティで設定
contexthub.browserinfo ブラウザーに関する情報を表示します。 surferinfo
contexthub.datetime 日時情報を表示します。 datetime
contexthub.device クライアントデバイスを表示します。 emulators
contexthub.location クライアントの緯度と経度、地図上での位置を表示します。位置は変更できます。 geolocation
contexthub.screen-orientation デバイスの画面の向きを表示します(横置きまたは縦置き)。 emulators
contexthub.season クライアントの位置の季節を表示します。季節を選択できます。 datetime
contexthub.tagcloud ページタグに関する統計を表示します。 tagcloud
granite.profile authorizableID、displayName、familyName など、現在のユーザーのプロファイル情報を表示します。displayName と familyName の値は変更できます。 profile
  1. Experience Manager レールで、ツール/サイト/ContextHub をクリックまたはタップします。

  2. UI モジュールを追加する設定コンテナをクリックまたはタップします。

  3. UI モジュールを追加する ContextHub 設定コンテナをクリックまたはタップします。

  4. UI モジュールを追加する UI モードをクリックまたはタップします。

  5. 「作成」ボタンをクリックまたはタップして、「ContextHub UI モジュール (汎用)」をクリックまたはタップします。

    chlimage_1
  6. 次のプロパティの値を指定します。

    • UI モジュールのタイトル:UI モジュールを識別するタイトル。
    • モジュールタイプ:そのモジュールのタイプ。
    • 有効:オンにすると ContextHub ツールバーに UI モジュールが表示されます。
  7. (オプション)デフォルトのストアの設定をオーバーライドするには、UI モジュールを設定する JSON オブジェクトを入力します。

  8. 「保存」をクリックまたはタップします。

ContextHub ストアの作成

ContextHub ストアを作成してユーザーデータを保持し、必要に応じてそのデータにアクセスします。ContextHub ストアは、登録済みのストア候補に基づきます。ストアを作成する際には、ストア候補が登録された storeType の値が必要です(カスタムストア候補の作成を参照してください)。

ストアの詳細設定

ストアを設定すると、詳細設定プロパティによりストア固有のプロパティの値を指定できます。値は、ストアの init 関数の config パラメーターに基づきます。このため、この値を指定する必要があるかどうかと、指定する値の形式はストアによって変わります。

詳細設定プロパティの値は、JSON 形式の config オブジェクトです。

サンプルのストア候補

AEM には、ストアのベースにできる次のサンプルのストア候補が用意されています。

ストアタイプ 説明
aem.segmentation 解決済みおよび未解決の ContextHub セグメントのストア。ContextHub SegmentManager からセグメントを自動的に取得します。
aem.resolvedsegments 現在解決されているセグメントを保存します。ContextHub SegmentManager サービスをリッスンして、ストアを自動的に更新します。
contexthub.geolocation ブラウザーの位置の緯度と経度を保存します。
contexthub.datetime ブラウザーの位置の現在の日付、時刻および季節を保存します。
granite.emulators いくつかのデバイスのプロパティと機能を定義し、現在のクライアントデバイスを検出します。
contexthub.generic-jsonp JSONP サービスからデータを取得して保存します。
granite.profile 現在のユーザーのプロファイルデータを保存します。
contexthub.surferinfo デバイス情報、ブラウザーのタイプ、ウィンドウの向きなど、クライアントに関する情報を保存します。
contexthub.tagcloud ページタグとタグ数を保存します。
  1. Experience Manager レールで、ツール/サイト/ContextHub をクリックまたはタップします。

  2. デフォルトの設定コンテナをクリックまたはタップします。

  3. 「Contexthub 設定」をクリックまたはタップします。

  4. ストアを追加するには、「作成」アイコンをクリックまたはタップして、「ContextHub ストア設定」をクリックまたはタップします。

    chlimage_1
  5. 次の基本設定のプロパティの値を指定して「次へ」をクリックまたはタップします。

    • 設定のタイトル:ストアを識別するタイトル。
    • ストアの種類:ストアのベースとなるストア候補の storeType プロパティの値。
    • 必須:オン。
    • 有効:オンにするとストアが有効になります。
  6. (オプション)デフォルトのストアの設定をオーバーライドするには、「詳細設定(JSON)」ボックスに JSON オブジェクトを入力します。

  7. 「保存」をクリックまたはタップします。

JSONP サービスの使用例

この例は、ストアを設定して UI モジュールにデータを表示する方法を示します。 この例では、ストアのデータソースとして jsontest.com サイトの MD5 サービスが使用されています。サービスが指定の文字列の MD5 ハッシュコードを JSON 形式で返します。

contexthub.generic-jsonp ストアがサービスコール http://md5.jsontest.com/?text=%22text%20to%20md5%22 のデータを格納するように設定されます。サービスが UI モジュールに表示される次のデータを返します。

{
   "md5": "919a56ab62b6d5e1219fe1d95248a2c5",
   "original": "\"text to md5\""
}

contexthub.generic-jsonp ストアの作成

contexthub.generic-jsonp のサンプルのストア候補を使用すると、JSON データを返す JSONP サービスや Web サービスからデータを取得できます。このストア候補では、そのストア設定を使用して、使用する JSONP サービスに関する詳細を指定します。

ContextHub.Store.JSONPStore Javascript クラスの init 関数は、このストア候補を初期化する config オブジェクトを定義します。config オブジェクトには JSONP サービスに関する情報が含まれる service オブジェクトが含まれています。ストアを設定するには、詳細設定プロパティの値として service オブジェクトを JSON 形式で指定します。

jsontest.com サイトの MD5 サービスからのデータを保存するには、次のプロパティを使用して ContextHub ストアの作成の手順に従います。

  • 設定のタイトル:md5
  • ストアの種類:contexthub.generic-jsonp
  • 必須:オン
  • 有効:オン
  • 詳細設定(JSON):
    {
       "service": {
          "jsonp": false,
          "timeout": 1000,
          "ttl": 1800000,
          "secure": false,
          "host": "md5.jsontest.com",
          "port": 80,
          "params":{
             "text":"text to md5"
          }
       }
    }

md5 データの UI モジュールの追加

ContextHub ツールバーに UI モジュールを追加して、サンプルの md5 ストアに格納されているデータを表示します。この例では、contexthub.base module が次の UI モジュールの生成に使用されています。

chlimage_1

UI モジュールの追加の手順に従って、既存の UI モジュールに、サンプルのペルソナ UI モードなどの UI モジュールを追加します。UI モジュールには、次のプロパティ値を使用します。

  • UI モジュールのタイトル:MD5
  • モジュールの種類:contexthub.base
  • 詳細設定(JSON):
    {
       "icon": "coral-Icon--data",
       "title": "MD5 Converstion",
       "storeMapping": { "md5": "md5" },
       "template": "<p>
    {{md5.original}}</p>
                    <p>{{md5.md5}}</p>"
    }

ContextHub のデバッグ

ContextHub のデバッグモードを有効にして、トラブルシューティングに対応できます。デバッグモードは、ContextHub 設定または CRXDE のいずれかを利用して有効にできます。

設定による有効化

ContextHub の設定を編集し、「デバッグ」チェックボックスをオンにします。

  1. レールで、ツール/サイト/ContextHub をクリックまたはタップします。

  2. デフォルトの「設定コンテナ」をクリックまたはタップします。

  3. ContextHub 設定」を選択し、「選択した要素を編集」をクリックまたはタップします。

  4. デバッグ」をクリックまたはタップし、「保存」をクリックまたはタップします。

CRXDE による有効化

CRXDE Lite を使用して、/etc/cloudsettings/default/contexthub のプロパティ debugtrue に設定します。

サイレントモード

サイレントモードでは、すべてのデバッグ情報が無効になります。各 ContextHub 設定に対して個別に設定可能な通常のデバッグオプションとは異なり、サイレントモードは、ContextHub 設定レベルのあらゆるデバッグ設定より優先されるグローバル設定です。

これは、デバッグ情報をまったく必要としないパブリッシュインスタンスに便利なモードです。これはグローバル設定なので、OSGi を介して有効にします。

  1. Adobe Granite ContextHub を検索します。

  2. 設定「Adobe Granite ContextHub」をクリックして、そのプロパティを編集します。

  3. サイレントモード」チェックボックスをオンにし、「保存」をクリックします。

アップグレード後の ContextHub の設定の復元

AEM へのアップグレードが実行されると、ContextHub の設定がバックアップされて安全な場所に格納されます。アップグレード中、デフォルトの ContextHub の設定がインストールされ、既存の設定が置換されます。加えられた変更や追加を保持するにはバックアップが必要です。

ContextHub の設定は、/etc/cloudsettings/default ノードの下にある contexthub という名前のフォルダーに格納されます。アップグレード後、バックアップは /etc/cloudsettings/default-pre-upgrade_yyyymmdd_xxxxxxx ノードの下にある contexthub という名前のフォルダーに格納されます。ノード名の yyyymmdd の部分は、アップグレードが実行された日付になります。

chlimage_1

ContextHub の設定を復元するには、CRXDE Lite を使用してストア、UI モードおよび UI モジュールを表すノードを default-pre-upgrade_yyyymmdd_xxxxxx ノードの下から /etc/cloudsettings/default ノードの下にコピーします。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー