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 6.5 または Adobe Experience Manager - Cloud Service

  • Adobe Commerce 2.4.3

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

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

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

Adobe Learning Manager でのアプリケーションの作成

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. 設定を保存して閉じます。

ログインプロセス（Adobe Learning Manager、AEM、および Adobe Commerce）

  • Adobe Commerce でサポートされているのは、ユーザー名およびパスワードのみです。すぐに利用できる SAML ベースの SSO はサポートされていません。
  • AEM 用の Adobe Learning Manager リファレンスサイト実装は、Adobe Commerce のユーザー名とパスワードで作動します。
  • Adobe Commerce からトークンを取得すると、AEM クライアント js から AEM バックエンドにトークンが共有されます。 AEM バックエンドはこのトークンを使用して Adobe Commerce にアクセスし、ユーザーの電子メールを取得します。 電子メールと構成済みの ALM 管理者更新トークンをベースに、学習者に対して ALM アクセストークンが生成され、学習コンポーネントをレンダリングするために AEM クライアント js にトークンが送信されます。

ログインプロセス（Adobe Learning Manager および Adobe Commerce）

  • デフォルトでは、Commerce からの SSO サポートがないため、ALM と Commerce で 2 回ログインする必要があります。
  • ただし、ALM でサポートされているいずれかの SSO が（拡張またはカスタムコーディングにより）Commerce 側で有効な場合、SAML 2.0 ベースの Facebook、Twitter、LinkedIn、Microsoft、Adobe ID などのソーシャルログインでは、 ALM と Commerce で同じ IDP を使用できるため、ログイン情報を 2 回入力する必要がなくなります。

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

Adobe Learning Manager では、アカウントの作成やサインインを必要としない方法で、既存のお客様、将来のお客様およびパートナーに製品やトレーニングを紹介できるようになりました。この機能を使用して、製品とトレーニングの導入を学習者に勧めることができます。学習者自身が、トレーニングに関する素早く簡単なプレビューを行えるようにし、プレビューの中で製品の特徴を強調および宣伝します。そのようにして、製品やサービスを効果的に紹介することができます。特に将来のお客様やパートナーに対して紹介できるため、製品の認知度が高まります。 入手しやすく使いやすいことは、関心の向上およびトレーニングの登録と学習の普及につながります。 

学習者は、このワークフローを使用することで、Adobe Learning Manager にサインインせずに、トレーニングのプレビュー、トレーニング情報の入手やトレーニングの検索を行うことができます。このワークフローは、ネイティブの Learning Manager インターフェイスには適用されません（AEM サイトおよびその他のヘッドレスインターフェイスにのみ適用されます）。

学習プラットフォームコネクターの構成と有効化

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

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

このコネクターを使用すると、AEM サイトベースや別のカスタムメイドのヘッドレスユーザーインターフェイスで、トレーニング情報を取得し、学習者に対して情報をレンダリングできます。学習者は、ログイン状態に関わらずトレーニング情報をシームレスに検索できます。 

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

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

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

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

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

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

ユーザーは、既存の AEM アプリケーションを使用して承認することができます。新規作成する必要はありません。

  • 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 コンポーネントを追加できます。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

クイックリンク

すべてのプランを表示 プランを管理
クイックリンクを表示する
クイックリンクを非表示にする
Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る

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

Copyright © 2024 Adobe. All rights reserved.