埋め込み型 Fluidic プレーヤー

警告:

Learning Manager 学習プログラムの名称が、学習パスに変更となります。 この変更は 2021 年 10 月のリリースから適用され、学習パスの用語がすべての役割に反映されます。

この記事では、カスタムアプリケーションに Fluidic プレーヤーを埋め込む方法について説明します。

企業は Learning Manager の外部でも、学習者にカスタムエクスペリエンスを提供できるようになりました。パブリック API を使用して、学習目標、学習者の登録および学習の進捗状況に関連するすべての情報を取得し、web サイトに表示できます。 さらに重要な点として、Learning Manager の Fluidic プレーヤーを web サイトに埋め込めるようになりました。これにより、学習者は、コンテンツを web サイト内で利用できるようになります。Fluidic プレーヤーは、Learning Manager がサポートするあらゆるコンテンツを再生できます。他の Web サイトに埋め込んだ場合も、Learning Manager 内で使用するときとまったく同じ機能を利用できます。

e ラーニングコンテンツの再生

Fluidic プレーヤーは、プラグインやダウンロードを必要とせずに、ほぼすべてのタイプの e ラーニングコンテンツを、一貫した直感的な方法で再生できます。 コンテンツファイルの種類に関わらず、学習者がコンテンツを起動すると再生が始まります。

メモとブックマーク

ファイルの種類に関わらず、任意のコンテンツにメモしたり、ブックマークしたりすることができます。 長いファイルやビデオから特定の項目を選択する場合、再び確認したい情報を見つけた場所に直接ブックマークすることができます。 ノートとブックマークは、検索したり、 電子メールとして 送信したりできます。 ノートとブックマークをクリックすると、Fluidic プレーヤーでビデオやドキュメントページの該当する部分に移動します。

Fluidic プレーヤーの 詳細については 「Fluidic プレーヤー」を参照してください。

埋め込み型 Fluidic プレーヤーを使用できる例を次に示します。

  • web サイトに埋め込み型 Fluidic プレーヤーを使用して、従業員の登録コースをリストアウトしたり、同じページでトレーニングを開始するためのリンクを提供したりできます。 このようにして、学習者はイントラネットの web サイト上で トレーニングを  利用できるようになります。
  • トレーニングをビジネスとして行っている方たちの中には、自分たちの顧客がサイト上でコースを購入できるような web サイトを運営している場合があります。 組み込み型プレーヤーをそうした web サイトに統合すると、顧客は、購入したコンテンツをその web サイト内で直接利用できるようになります。

web サイトに埋め込み型 Fluidic プレーヤーを埋め込む手順

web サイトに Fluidic プレーヤーを埋め込むためのカスタムアプリケーションを構築するには、次の 3 つの基本的な手順が必要です。

  1. Learning Manager の統合管理アプリでアプリケーションを作成します。
  2. アクセストークンを取得します。
  3. パブリック API を使用して Learning Manager からリソースを取得するために、アクセストークンを使用します。

1. 統合管理者としてのアプリケーションの作成

この手順は、更新トークンとアクセストークンの取得に使用する、アプリケーション/クライアント ID とアプリケーション/クライアントシークレットを作成する場合に必要です。 アプリケーションの作成の詳細については「アプリケーション開発プロセス」を参照してください。

  1. 統合管理アプリに移動してアプリケーションを開きます。

  2. ページの右上隅から「登録」を選択します。

  3. 新規アプリケーションを登録ウィンドウが開きます。 必須フィールドに入力します。

  4. もし カスタム アプリケーションを複数のアカウントで共有する必要がある場合はこのアカウントのみですか?の オプションフィールドで 「いいえ」を選択します。

  5. アプリケーションを保存して、アプリケーション ID とシークレットを生成するには「保存」をクリックします。

2. アクセストークンの取得

Learning Manager は OAUTH2.0 を使用するため、 パブリック API を使用してリソースを取得するにはアクセストークンが 必要です。 アクセストークンは、更新トークン、クライアント ID またはクライアントシークレットを使用して取得できます。

2.1 更新トークン

  • OAuth コードの取得

更新トークンを取得するには、OAuth コードが必要です。 次の URL を使用してサインインすると、Learning Manager は OAuth コードを使用してリダイレクト URL にユーザーをリダイレクトします(サンプルアプリケーションの「oauthredirect.html」ファイルでは、OAuth コードの抽出が例示されています)。

https://learningmanager.adobe.com/oauth/o/authorize
client_id= <application_id>
&redirect_uri=<redirect_uri>
&state=<dummy_data>
&scope=learner:read,learner:write
&response_type=CODE
&account=<account_id>
&email=<email_id>

ここで、クライアント ID は、手順 1 で取得したアプリケーション ID になります。
redirect_url は、手順 1 で設定した redirect_url です。
state は、任意のダミーデータです。OAuth コードを取得するためのリダイレクト URL をフィルタリングする必要があります。scope は、手順 1 で設定した学習者のスコープです。
response_type は常に「CODE」です。
account はオプションのフィールドです。
email はオプションのフィールドです。
*アカウント ID と電子メールの両方を指定した場合は、上の URL を使用して同じアカウントにログインできます。このエンドポイントの例は、サンプルアプリケーションの「index.html」ファイルに表示されるものです。

  • 更新トークンの取得

OAuth コードを受信した後、受信した OAuth コード、クライアント ID およびクライアントシークレットを使用して、次のエンドポイントから更新トークンを取得できます。

https://learningmanager.adobe.com/oauth/token

POST リクエストへの応答として、次の情報が提供されます。

i. refresh_token
ii. access_token
iii. user_id
iv. expires_in
v. user_role
vi. account_id

2.2 更新トークンからのアクセストークンの取得

アクセストークンを取得するには、refresh_token、client_id および client_secret を POST 本文とした別のリクエストを次の URL に送信します。

https://learningmanager.adobe.com/oauth/token/refresh

POST リクエストへの応答として、次の情報が提供されます。
i. refresh_token
ii. access_token
iii. user_id
iv. expires_in
v. user_role
vi. account_id

3. パブリック API を使用したリソースの取得

3 番目の手順として、アクセストークンを使用する必要があります。その後、パブリック API を使用して、Learning Manager から リソースを取得します 。  アクセストークンは、 パブリック API 呼び出しを行うのに必要であり、 サンプルアプリケーションに例示されているように ヘッダーに追加する必要があります。

埋め込み型プレーヤー

サードパーティのアプリケーションでも、埋め込み型プレーヤーを使用して、学習目標のコンテンツを再生できます。

埋め込み型プレーヤーでのコースの開始

  1. 埋め込み URL の作成

埋め込み型プレーヤーを使用してコースを開くには、以下のような埋め込み URL を作成する必要があります。

https://learningmanager.adobe.com/app/player?lo_id=<v2-api course id>&access_token=<access_token>

ここで、lo_id は V2 API のコース ID 形式に適合している必要があります。

例:https://learningmanager.adobe.com/app/player?lo_id=course:123456&access_token=45b269b75ac65d6696d53617f512450f

埋め込みプレーヤーでは、資格認定、学習プログラム、作業計画書も再生できます。

例:https://learningmanager.adobe.com/app/player?lo_id=certification:12345&access_token=c1a4847dfbf4007826a027d481b93c1e

https://learningmanager.adobe.com/app/player?lo_id=learningProgram:12345&access_token=c1a4847dfbf4007826a027d481b93c1e

https://learningmanager.adobe.com/app/player?lo_id=jobAid:1234&access_token=c1a4847dfbf4007826a027d481b93c1e

     2. この URL を iframe の「src」属性に設定します。

埋め込み型プレーヤーの終了

window.addEventListener("message", function closePlayer(){
   if(event.data === "status:close"){
     //handle closing event
   }
});

サンプルアプリケーションチュートリアル

添付の pdf ドキュメントには、サンプルアプリケーションチュートリアルが含まれています。

ダウンロード

 Adobe

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

新規ユーザーの場合

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン