SCORM教材のデバッグ方法——ブラウザ開発者ツールとSCORM Cloudの活用

1. SCORM教材のデバッグに使えるツール一覧

SCORM教材のデバッグには、目的に応じて複数のツールを使い分けることが重要です。以下に主要なツールとその用途をまとめます。

2. ブラウザ開発者ツールでのデバッグ

ブラウザ開発者ツール（DevTools）は、SCORM教材のデバッグにおいて最も基本的で強力なツールです。Chrome / Edge / Firefox いずれでもほぼ同じ手順で利用できます。

2-1. Console タブ——JavaScript エラーの確認

1. LMS上で教材を起動した状態で F12キー（またはCtrl+Shift+I）を押して開発者ツールを開く
2. Console タブを選択する
3. 赤色のエラーメッセージが表示されていないか確認する

SCORM教材でよく見るコンソールエラーの例を挙げます。

• TypeError: Cannot read properties of null — SCORM API オブジェクトが見つからない（API の検索処理に問題がある）
• SecurityError: Blocked a frame with origin — クロスオリジン制約によりiframe内の教材がLMSのAPIにアクセスできない
• ReferenceError: API is not defined — SCORM 1.2 の API オブジェクトが未定義（LMS側の問題の可能性）

2-2. Network タブ——通信状況の確認

Network タブでは、教材とLMS間の通信状態を確認できます。

1. 開発者ツールの Network タブを開く
2. 教材を操作して、通信が発生するアクションを実行する
3. ステータスコードが 4xx / 5xx のリクエストがないか確認する

特に注目すべきポイントは以下のとおりです。

• ステータス 403（Forbidden）: セッション切れやCSRF（クロスサイトリクエストフォージェリ）トークンの不一致
• ステータス 500（Internal Server Error）: LMS サーバー側のエラー。LMS 管理者への問い合わせが必要
• リクエストが発生しない: SCORM API の Commit（LMSCommit / Commit）が呼ばれていない可能性

3. SCORM Cloud でのテスト手順

SCORM Cloudは、Rustici Software が提供するクラウド型のSCORMテスト環境です。特定のLMSに依存せず、教材が SCORM 規格に準拠しているかを検証できます。

ステップ 1: アカウント作成

SCORM Cloud にアクセスし、無料アカウントを作成します。メールアドレスの確認後、すぐにダッシュボードが利用可能になります。

ステップ 2: 教材のアップロード

1. ダッシュボード右上の 「Add Content」 ボタンをクリック
2. 「Import a SCORM, AICC, xAPI or cmi5 package」 を選択
3. SCORM 教材の ZIP ファイルをドラッグ＆ドロップでアップロード
4. アップロード完了後、インポート結果画面でエラーや警告がないか確認

ステップ 3: 教材の起動とテスト

1. アップロードした教材の詳細ページを開く
2. 「Launch」 ボタンをクリックして教材を起動
3. 教材を最初から最後まで操作し、すべてのページ遷移・テスト問題・完了処理を確認

ステップ 4: API ログの確認

1. 教材の詳細ページに戻り 「Activity Details」 タブを開く
2. Runtime Data セクションで、SCORM APIを通じてセット・取得された全データを確認
3. ステータス、スコア、学習時間などが期待どおりの値になっているか検証

SCORM Cloud でエラーなく動作するのにLMSで動作しない場合は、LMS側の設定や実装の問題であると判断できます。

4. デバッグ用 JavaScript コード例

SCORM APIの呼び出しを自動的にコンソールへ記録するロガースクリプトを紹介します。教材のHTMLファイルに追加することで、すべてのAPI通信を可視化できます。

SCORM 1.2 用ロガー

(function() {
  var originalAPI = window.API;
  if (!originalAPI) {
    console.warn('[SCORM Logger] API object not found');
    return;
  }

  var methods = [
    'LMSInitialize', 'LMSFinish', 'LMSGetValue',
    'LMSSetValue', 'LMSCommit', 'LMSGetLastError',
    'LMSGetErrorString', 'LMSGetDiagnostic'
  ];

  methods.forEach(function(method) {
    var original = originalAPI[method];
    originalAPI[method] = function() {
      var args = Array.prototype.slice.call(arguments);
      var result = original.apply(originalAPI, args);
      console.log(
        '%c[SCORM 1.2] ' + method,
        'color: #2563eb; font-weight: bold;',
        '| args:', args, '| result:', result
      );
      return result;
    };
  });

  console.log('%c[SCORM Logger] SCORM 1.2 API monitoring started',
    'color: #16a34a; font-weight: bold;');
})();

SCORM 2004 用ロガー

(function() {
  var originalAPI = window.API_1484_11;
  if (!originalAPI) {
    console.warn('[SCORM Logger] API_1484_11 object not found');
    return;
  }

  var methods = [
    'Initialize', 'Terminate', 'GetValue',
    'SetValue', 'Commit', 'GetLastError',
    'GetErrorString', 'GetDiagnostic'
  ];

  methods.forEach(function(method) {
    var original = originalAPI[method];
    originalAPI[method] = function() {
      var args = Array.prototype.slice.call(arguments);
      var result = original.apply(originalAPI, args);
      console.log(
        '%c[SCORM 2004] ' + method,
        'color: #9333ea; font-weight: bold;',
        '| args:', args, '| result:', result
      );
      return result;
    };
  });

  console.log('%c[SCORM Logger] SCORM 2004 API monitoring started',
    'color: #16a34a; font-weight: bold;');
})();

上記コードを教材の起動HTMLの内に