Adobe学習マネージャーリファレンスサイト(ALM リファレンスサイト)AEM Sites用パッケージ

Adobeラーニングマネージャー (ALM) はAdobe Experience Manager(AEM) サイトと統合します。 これにより、コーディングの労力を最小限に抑えながら、独自の Web サイトとレスポンシブなモバイルAdobeインターフェイスを作成して Learning Manager にアクセスできます。 この統合により、ユーザー向けにカスタマイズされた学習体験を作成できます。

このようなエクスペリエンスを構築するために、ALM では、AEM Sitesインスタンスにインストールできる ZIP ファイル形式のAEM Sites用AdobeLearning Manager 参照サイトパッケージ(ALM 参照サイトパッケージ)を提供しています。

パッケージには、学習カタログ、埋め込みウィジェット、カレンダーなどの埋め込みウィジェットとともに、AEM Sites Web ページテンプレートと Web サイトコンポーネントが含まれます。

ALM 参照サイトパッケージをインストールしたら、AEM SitesインスタンスでホストできるAdobeラーニングマネージャー用 Web サイトの構築を開始できます。 その後、ユーザーは Web サイトにコンポーネントをドラッグ&ドロップできます。

ALM 参照サイトパッケージのインストール

前提条件

  • AEM SitesとAdobe Commerceのライセンス

  • AEM on-premise 6.5 またはAEM Skyline

  • Adobe Commerce 2.4.3

AEM Sitesの環境を保護したら、ALM リファレンスサイトパッケージをインストールする必要があります。 このパッケージには、学習プラットフォームの構築に役立つAEM Web ページと Web サイトコンポーネントが含まれています。

参照サイトパッケージは GitHub リポジトリを選択します。

詳しくは README をご覧ください。

Application Learning Manager でのAdobeの作成

AEMサイトパッケージをインストールしたら、学習ポータルをAEMサイトに接続するために ALM アプリケーションを設定する必要があります。

このシナリオは、AEMをAdobeLearning Manager で使用する場合に適用されます。

以下の手順を実行します。

  1. 統合管理者として、「 Applicationsを選択します。
  2. 新しいアプリケーションを作成する場合は、ページの右上隅に表示されている「登録」をクリックします。
  3. 新規アプリケーションを登録画面で、次の詳細を入力します。
    1. アプリケーション名:作成するアプリケーションの名前。
    2. URL:組織の URL。
    3. リダイレクトドメイン:AEM Web サイトのホスティングドメイン。 ワイルドカードを指定することもできます。
    4. 説明:アプリケーションの説明。
    5. スコープ:「学習者ロールの読み取りアクセス権」と「学習者ロールの書き込みアクセス権」を選択します。
    6. このアカウントのみ:既存の ALM アカウントにアプリケーションを使用する場合は、「はい」を選択します。
  4. 変更が完了したら、「保存」をクリックします。

画面からアプリケーションの資格情報をメモします。

アプリケーション. 資格情報
アプリケーション. 資格情報

アプリケーションを承認するには、「 承認を選択します。

トークンを取得

  1. 「開発者向けリソース」タブで、「 テストおよび開発用のアクセストークンを選択します。 

  2. 次の情報を入力します。

    1. OAuth コードを取得:前のセクションのクライアント ID を入力し、範囲を変更します。 「送信」をクリックして、Oauth コードを取得します。
    2. 更新トークンの取得:前のセクションのクライアント ID とシークレットを入力します。 また、前の手順で取得した OAuth コードを入力します。 「送信」をクリックします。
    3. アクセストークンの取得:前のセクションのクライアント ID とシークレットを入力します。 また、前の手順で取得した更新トークンも入力します。 「送信」をクリックします。
    4. アクセストークンの詳細の取得:前の手順で取得したアクセストークンを入力します。 「送信」をクリックします。
  3. 次の JSON 応答から詳細を取得できます。 応答は、アクセストークン、更新トークン、ユーザーロール、アカウント ID、ユーザー ID、有効期限で構成されます。 更新トークンは再利用するので、注意してください。 

AEMでの ALM アカウントの設定

  1. AEMインスタンスを起動します。

  2. 設定/オプションをCloud Servicesします。 

  3. 「Adobe学習マネージャーの設定」をクリックします。

  4. 作成/設定フォルダーをクリックします。 フォルダーに名前を付けます。

  5. 学習プロジェクトで、作成した構成を選択します。

  6. 構成の詳細を入力します。 

    1. Adobe学習マネージャーモード:ログインしている学習者とログインしていない学習者の両方に対する学習体験の表示方法を選択します。
    2. Adobe学習マネージャーの URL:学習サービスがホストされている ALM インスタンスの URL を入力します。
    3. アカウント ID:ALM アカウントの ID。
    4. クライアント ID、クライアントシークレット、作成者更新トークン:ALM でのアプリケーションの作成時に取得した資格情報を入力します。 
    5. ウィジェットのカスタマイズ:詳しくは、「 AEMとの統合を選択します。
  7. 設定を保存して閉じます。

AEM + Adobe学習マネージャー(ログインしているユーザーとログインしていないユーザー)

Adobeラーニングマネージャーでは、アカウントの作成やログインを必要とせずに、既存および潜在的な顧客やパートナーに製品やトレーニングを紹介できるようになりました。 この機能は、トレーニングの簡単なプレビューを受講者に提供することで、製品とトレーニングの導入を促進するのに役立ちます。これにより、製品機能が強調され、促進されます。 そのため、製品やサービスを効果的に紹介することができます。特に見込み客やパートナーに対して紹介できるため、製品の認知度が高まります。 アクセスが容易で到達性が高いことから、関心が高まり、トレーニングの登録と学習の採用が促進されます。 

学習者はこのワークフローを使用して、Adobeラーニングマネージャーにログインしなくても、トレーニングのプレビュー、トレーニング情報へのアクセス、トレーニングの検索を行うことができます。 このワークフローは、ネイティブの Learning Manager インターフェイスには適用されません (AEM Sitesなどのヘッドレスインターフェイスにのみ適用されます )。

学習プラットフォームコネクタを構成して有効にする

このセクションでは、次のコネクタを構成して有効にするために必要な手順について説明します。

トレーニングデータアクセス

このコネクタを使用すると、AEM Sitesベースのヘッドレスユーザーインターフェイスやその他のカスタムインターフェイスで、学習者のトレーニング情報を取得して表示でき、学習者のログイン前後を問わずシームレスなトレーニング情報検索が可能になります。 

このコネクタは、AEM Sitesベースのインターフェイスやその他のヘッドレスインターフェイスを使用している場合にのみ必要です。 

コネクタは、トレーニングメタデータをデータ保存および検索ソリューションと検索有効化システムにエクスポートします。 したがって、AEM Sitesベースまたはその他のカスタムメイドのヘッドレスユーザーインターフェイスを設定して、これらの 2 つのサービスを使用してトレーニングデータを取得し、Web ページをレンダリングして、受講者に最適化されたトレーニング検索機能を提供することができます。 例えば、書き出されたメタデータを使用して、AEM Sitesベースの非ログインインターフェイスで学習者はトレーニング情報を表示するトレーニングページを検索、参照、アクセスすることができます。 

このコネクタを有効にすると、AEM Sitesベースの Web ページを作成してレンダリングし、ログイン前後の両方の学習者にカスタマイズされたエクスペリエンスを提供できます。 このコネクタを有効にすると、AEM Sitesベースの Web ページを作成してレンダリングし、ログイン前後の両方の学習者にカスタマイズされたエクスペリエンスを提供できます。

  • Adobe学習マネージャーの cdn ベース URL - 「トレーニングデータアクセス」接続ページからのデータ取得 CDN サービスパスのベース URL を入力します。
  • 管理者更新トークン — 前のセクションで決定した更新トークンを入力します。 
  • トレーニングメタデータのベース URL - 「トレーニングデータアクセス」接続ページから、検索有効化および検索データ取得サービスパスのベース URL を入力します。
  • Adobe学習マネージャーの URL を登録 — アカウントの統合管理者が生成したセルフ登録 URL を入力します。学習者はこの URL を使用してトレーニングに登録します。

AEM + Adobeラーニングマネージャー+ Adobe Commerce(ログインしている/ログインしていないユーザー)

Adobe学習マネージャーは、学習プラットフォームとAdobe Commerceをシームレスに統合するためのソリューションを提供します。 このリリースでは、ネイティブ、AEMサイトベース、またはその他のヘッドレス Learning Manager インターフェイスをAdobe Commerceに簡単に接続できます。 この統合により、学習プラットフォーム内で e コマース機能を実現できます。 顧客やビジネスパートナーに有料トレーニングを提供できるようになったほか、ネイティブと非ネイティブの両方の Learning Manager インターフェイスでトレーニングを簡単に購入できるようになりました。 学習者は、Adobe学習マネージャーにログインしなくても、トレーニングのプレビュー、トレーニング情報へのアクセス、トレーニングの検索を行うことができます。

  • Adobe学習マネージャーの cdn ベース URL - Adobe Commerce接続ページからのデータ取得 CDN サービスパスのベース URL を入力します。
  • Adobe Commerce URL — 使用しているAdobe Commerceインスタンスの URL を入力します。 
  • GraphQL プロキシパス — クライアント側の Learning Manager コンポーネントはAdobe Commerce GraphQL エンドポイントに直接アクセスするため、CORS エラーが発生する場合があります。 このエラーを回避するには、すべてのコールをAEMと同じエンドポイントから処理するか、CORS ヘッダーを追加するプロキシを介して処理する必要があります。
  • Adobe Commerceストア名 — 前のセクションで指定したAdobe Commerceストア名を入力します。 
  • Adobe Commerceの顧客トークン有効期間(秒単位) — ログインセッションの事前決定期間を示す顧客トークン有効期間を入力します。 
  • 管理者更新トークン — 前のセクションで決定した更新トークンを入力します。

Web ページのカスタマイズ

AEMの参照サイトとウィジェットを使用して、Web ページをカスタマイズします。 

  1. AEMインスタンスを起動します。

  2. 「サイト」をクリックし、設定ページを開きます。

  3. クリック 学習サイト/言語マスター/英語を選択します。 プロジェクト内のすべての Web ページがフォルダーに含まれます。 

  4. 任意のテンプレートを選択し、「 編集を選択します。

  5. ページで、コンポーネント設定ボタンをクリックし、コンポーネントのプロパティを変更します。

  6. 変更をプレビューするか、ページを公開します。 

Web ページの作成

参照サイトパッケージによって提供されるテンプレートとは別に、AEMのテンプレートに基づいて Web ページを作成することもできます。

  1. メインのAEMページで、作成/ページをクリックします。 

  2. カスタマイズするテンプレートを選択します。 「次へ」をクリックします。

  3. ページプロパティを入力します。 

  4. ページを作成するには、「 作成を選択します。

  5. 新しいページを選択し、「編集」をクリックします。

  6. ページにコンポーネントを挿入します。例: 学習コンテンツを選択します。

  7. ページに表示される必要なカタログフィルターを選択します。

Blueprint からのサイトの作成

ALM 参照サイトパッケージには、学習プラットフォーム用の Web サイトを作成できる「学習サイトの青写真」が用意されています。 AEM blueprints を使用すると、AEM Sitesコンポーネントから直接 web ページを構築できます。 テンプレートを使用する必要はありません。 

  1. AEMスタートページで、「 Sitesを選択します。

  2. クリック 作成/サイトを選択します。 

  3. 「Learning Site Blueprint」をクリックします。 

  4. 「次へ」をクリックします。

  5. プロパティページで、ページメタデータを入力します。「作成」をクリックします。

  6. ホームハイパーリンクをクリックして、作成したサイトのホームページに移動します。 このページでは、ウィジェットとカタログコンポーネントをカスタマイズできます。

Web サイトのコーディング

組み込みのテンプレートを使用し、WYSIWYG コンポーネントを使用して Web サイトを一から作成するだけでなく、コードを記述してサイトを構築することもできます。

コードは、 参照サイトの GitHub リポジトリ 始めるために

テンプレートの主な部分は次のとおりです。 

  • コア:OSGi サービス、リスナーまたはスケジューラなどのすべてのコア機能と、サーブレットや要求フィルタなどのコンポーネント関連の Java コードを含む Java バンドル。
  • ui.apps:プロジェクトの/apps(および/etc)部分、つまり JS&CSS クライアントライブラリ、コンポーネント、テンプレートが含まれます。
  • ui.content:ui.apps のコンポーネントを使用したサンプルコンテンツが含まれています
  • ui.frontend:react コンポーネントが含まれます。

すべてのコードはリポジトリ内に格納され、作業を開始できます。 

既存の Web ページまたはテンプレートへの Learning Manager コンポーネントの読み込みと追加

AEM参照サイトパッケージをインストールすると、Learning Manager コンポーネントがAEM Sitesインスタンスに追加されます。 デフォルトでは、これらのコンポーネントを、すぐに使用できる Web プロジェクト(Web サイト)学習サイトに追加できます。 これらのコンポーネントは、Learning Site Blueprint から作成した Web サイトでも使用できます。

ただし、新しく追加したこれらの Learning Manager コンポーネントを既存の Web プロジェクトまたは Web サイトで使用する場合は、次の手順に従って読み込む必要があります。

  1. ALM 参照サイトパッケージをインストールします。

  2. Web プロジェクトを開き、HTMLファイル(Learning Manager コンポーネントを追加する Web ページまたは Web テンプレート用)に移動します。

  3. 会議への参加

    HTMLファイルを開き、次のコードスニペットをページコンポーネントに追加して、ページに存在する学習コンポーネントがレンダリングされる前にコードが実行されるようにします。

    <sly data-sly-use.configModel="com.adobe.learning.core.models.GlobalConfigurationModel"/>

    <meta name="cp-config" content="${configModel.config}" />

    上記のコードは、ページの meta タグにマッピングされた設定を追加します。これは、学習コンポーネントがレンダリングするために必要です。 詳しくは、「 https://github.com/adobe/adobe-learning-manager-reference-site/blob/master/ui.apps/src/main/content/jcr_root/apps/learning/components/page/customheaderlibs.htmlを選択します。

  4. Web プロジェクトに構成がマッピングされていることを確認します。

  5. Learning Manager コンポーネントを読み込むAEM Sitesテンプレートを開きます。

  6. テンプレートページエディターで、「許可されたコンポーネント」コンテナに移動し、「 Policyを選択します。

  7. ポリシーページで、プロパティ/許可されたコンポーネントに移動し、「学習 — コンテンツ」、「学習 — フォーム」および「学習 — 構造」の各コンポーネントを選択します

次の手順で、テンプレートは読み込まれた Learning Manager コンポーネントのクライアントライブラリ依存関係を満たすことができます。

これらのコンポーネントを含む Web ページでは、コンポーネントを正常にレンダリングして使用するために、これらのライブラリを読み込む必要があります。

  1. テンプレートページエディタで、[ ページ情報 ] をクリックし、[ ページポリシー ] をクリックします。
  2. ポリシーページで、プロパティ/クライアントライブラリに移動し、これらをテンプレートページに追加します。
    1. learning.site
    2. learning.ui
    3. learning.commerce

このテンプレートを保存すると、このテンプレートから派生したすべての Web ページに Learning Manager コンポーネントを追加できます。

アドビのロゴ

アカウントにログイン