HTML/CSS/JavaScriptで作成した既存のWeb教材は、マニフェストファイル(imsmanifest.xml)の追加とSCORM APIの組み込みによって、LMSで配信・学習管理が可能なSCORM教材に変換できます。 この記事では、SCORM対応に必要な作業をステップバイステップで解説します。
1. SCORM対応とは何か
SCORM(Sharable Content Object Reference Model)対応とは、教材がLMS(学習管理システム)と正しくデータをやり取りできる状態にすることです。具体的には、以下の3つの要素が必要になります。
- マニフェストファイル(imsmanifest.xml) — 教材の構成情報をLMSに伝えるXMLファイル
- SCORM API連携 — 学習の開始・終了、進捗・スコアの送受信をJavaScriptで実装
- パッケージング — 上記をまとめたZIPファイル(PIF: Package Interchange Format)の作成
既存のHTML教材がすでにブラウザで動作するなら、コンテンツ自体を大幅に書き換える必要はありません。上記3つを追加するだけでSCORM教材として機能します。
2. 全体のフォルダ構成
SCORM教材のZIPパッケージは、以下のような構成になります。
my-course/
├── imsmanifest.xml ← マニフェストファイル(必須・ルート直下)
├── adlcp_rootv1p2.xsd ← スキーマファイル群(SCORM 1.2の場合)
├── ims_xml.xsd
├── imscp_rootv1p1p2.xsd
├── imsmd_rootv1p2p1.xsd
├── index.html ← 教材のエントリーポイント
├── css/
│ └── style.css
├── js/
│ ├── main.js
│ └── scorm-api.js ← SCORM API ラッパー
└── images/
└── ...
imsmanifest.xmlはZIPのルート直下に配置する必要があります。サブフォルダに入れるとLMSが認識できません。
3. imsmanifest.xmlの作成
マニフェストファイルはSCORMパッケージの心臓部です。以下はSCORM 1.2準拠の基本的な記述例です。
<?xml version="1.0" encoding="UTF-8"?>
<manifest identifier="course-html-to-scorm"
version="1.0"
xmlns="http://www.imsproject.org/xsd/imscp_rootv1p1p2"
xmlns:adlcp="http://www.adlnet.org/xsd/adlcp_rootv1p2"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.imsproject.org/xsd/imscp_rootv1p1p2 imscp_rootv1p1p2.xsd
http://www.imsglobal.org/xsd/imsmd_rootv1p2p1 imsmd_rootv1p2p1.xsd
http://www.adlnet.org/xsd/adlcp_rootv1p2 adlcp_rootv1p2.xsd">
<metadata>
<schema>ADL SCORM</schema>
<schemaversion>1.2</schemaversion>
</metadata>
<organizations default="org-1">
<organization identifier="org-1">
<title>HTML教材サンプルコース</title>
<item identifier="item-1" identifierref="res-1">
<title>第1章 はじめに</title>
</item>
<item identifier="item-2" identifierref="res-2">
<title>第2章 実践演習</title>
</item>
</organization>
</organizations>
<resources>
<resource identifier="res-1" type="webcontent"
adlcp:scormtype="sco" href="chapter1/index.html">
<file href="chapter1/index.html"/>
<file href="css/style.css"/>
<file href="js/scorm-api.js"/>
</resource>
<resource identifier="res-2" type="webcontent"
adlcp:scormtype="sco" href="chapter2/index.html">
<file href="chapter2/index.html"/>
<file href="css/style.css"/>
<file href="js/scorm-api.js"/>
</resource>
</resources>
</manifest>
imsmanifest.xmlの主要要素リファレンス
| 要素 | 必須 | 説明 |
|---|---|---|
| ○ | ルート要素。identifier属性で一意のIDを指定 |
| ○ | SCORMバージョン情報( + ) |
| ○ | 教材の構成(目次構造)を定義。default属性で既定の組織を指定 |
| ○ | 1つのコース構成。で名称を記述 |
| ○ | 学習単位(章・セクション)。identifierrefでリソースと紐付け |
| ○ | 教材ファイルの一覧を格納 |
| ○ | 1つのSCO/Assetを定義。hrefで起動ファイルを指定 |
| △ | リソースに含まれるファイル。省略可能だが記載推奨 |
adlcp:scormtype | ○ | sco(LMSと通信)またはasset(通信なし)を指定 |
ポイント: scormtype="sco"を指定したリソースはSCORM APIでLMSと通信できます。静的な参考資料など通信不要なリソースはassetにします。
4. SCORM APIラッパーの実装
LMSはブラウザのウィンドウオブジェクトにAPIを公開します。教材側のJavaScriptからこのAPIを探索・呼び出しすることで、学習データの読み書きが可能になります。
以下は、SCORM 1.2に対応した基本的なAPIラッパーの実装例です。
/**
* SCORM 1.2 API ラッパー
*/
const ScormAPI = (() => {
let api = null;
// LMSが公開するAPIオブジェクトをウィンドウ階層から探索
function findAPI(win) {
let attempts = 0;
while (!win.API && win.parent && win.parent !== win && attempts < 10) {
win = win.parent;
attempts++;
}
return win.API || null;
}
function getAPI() {
if (api) return api;
api = findAPI(window);
if (!api && window.opener) {
api = findAPI(window.opener);
}
return api;
}
return {
// 学習セッションの開始
initialize() {
const lmsAPI = getAPI();
if (!lmsAPI) {
console.error("SCORM API が見つかりません");
return false;
}
const result = lmsAPI.LMSInitialize("");
// 初回アクセス時はステータスを設定
if (this.getValue("cmi.core.lesson_status") === "not attempted") {
this.setValue("cmi.core.lesson_status", "incomplete");
}
return result === "true";
},
// 値の取得
getValue(key) {
const lmsAPI = getAPI();
return lmsAPI ? lmsAPI.LMSGetValue(key) : "";
},
// 値の設定
setValue(key, value) {
const lmsAPI = getAPI();
return lmsAPI ? lmsAPI.LMSSetValue(key, value) === "true" : false;
},
// データの永続化
commit() {
const lmsAPI = getAPI();
return lmsAPI ? lmsAPI.LMSCommit("") === "true" : false;
},
// 学習セッションの終了
terminate() {
this.commit();
const lmsAPI = getAPI();
return lmsAPI ? lmsAPI.LMSFinish("") === "true" : false;
},
// スコアの送信(0〜100)
setScore(score) {
this.setValue("cmi.core.score.raw", score);
this.setValue("cmi.core.score.min", "0");
this.setValue("cmi.core.score.max", "100");
// スコアに応じて合否判定(例: 80点以上で合格)
const status = score >= 80 ? "passed" : "failed";
this.setValue("cmi.core.lesson_status", status);
this.commit();
},
// 学習完了の記録
setComplete() {
this.setValue("cmi.core.lesson_status", "completed");
this.commit();
}
};
})();
教材HTMLへの組み込み例
<script src="js/scorm-api.js"></script>
<script>
// ページ読み込み時にSCORM接続を開始
window.addEventListener("load", () => {
ScormAPI.initialize();
});
// ページ離脱時にSCORM接続を終了
window.addEventListener("beforeunload", () => {
ScormAPI.terminate();
});
// 学習完了ボタンの例
document.getElementById("btn-complete").addEventListener("click", () => {
ScormAPI.setComplete();
alert("学習完了を記録しました");
});
</script>
5. SCORM 1.2とSCORM 2004のAPI比較
開発時には対象バージョンを明確にしておくことが重要です。主なAPI名の違いを以下にまとめます。
| 操作 | SCORM 1.2 | SCORM 2004 |
|---|---|---|
| API検索対象 | window.API | window.API_1484_11 |
| 初期化 | LMSInitialize("") | Initialize("") |
| 値の取得 | LMSGetValue(key) | GetValue(key) |
| 値の設定 | LMSSetValue(key, value) | SetValue(key, value) |
| コミット | LMSCommit("") | Commit("") |
| 終了 | LMSFinish("") | Terminate("") |
| エラーコード取得 | LMSGetLastError() | GetLastError() |
| 完了ステータスのキー | cmi.core.lesson_status | cmi.completion_status |
| スコアのキー | cmi.core.score.raw | cmi.score.raw |
SCORM 2004ではデータモデルのキー名も変更されています。両バージョンに対応する場合は、API検索を分岐させるラッパーを用意するのが一般的です。
6. パッケージング(ZIP化)
すべてのファイルが準備できたら、ZIP形式にパッケージングします。
手順:
- 教材フォルダのルートに
imsmanifest.xmlがあることを確認 - フォルダの中身を直接ZIP圧縮する(フォルダごとではない)
- ZIPを開いたとき、最上位に
imsmanifest.xmlが見える状態が正解
# コマンドラインでの例(macOS / Linux)
cd my-course/
zip -r ../my-course.zip ./*
よくある失敗: フォルダごとZIP化するとmy-course/imsmanifest.xmlというパスになり、LMSがマニフェストを検出できません。必ずZIPのルート直下にimsmanifest.xmlを配置してください。
7. テストと検証
SCORM Cloudでのテスト
作成したパッケージはRustici社のSCORM Cloudで無料テストできます。
- SCORM Cloudにアカウントを作成
- 「Add Content」からZIPファイルをアップロード
- 「Launch」でコンテンツを実行し、動作を確認
- 「Activity Report」で学習データ(ステータス、スコア)が正しく記録されているか検証
ブラウザの開発者ツールによるデバッグ
SCORM APIの呼び出しをデバッグするには、ラッパーにログ出力を追加すると効率的です。
// デバッグ用:API呼び出しをコンソールに出力
setValue(key, value) {
console.log(`[SCORM] SetValue: ${key} = ${value}`);
const lmsAPI = getAPI();
return lmsAPI ? lmsAPI.LMSSetValue(key, value) === "true" : false;
}
8. よくある失敗とその対策
| 症状 | 原因 | 対策 |
|---|---|---|
| LMSにアップロードできない | ZIPの階層が深い(マニフェストがルートにない) | フォルダの中身を直接ZIP化する |
| 「通信エラー」と表示される | SCORM APIが見つからない | findAPIの探索ロジックを確認。openerも対象にする |
| ステータスが記録されない | LMSCommitを呼んでいない | setValueの後に必ずcommit()を実行 |
| 2回目以降のアクセスでリセットされる | cmi.core.lesson_locationを使っていない | 中断位置をブックマークとして保存・復元する |
| スコアが反映されない | score.min/score.maxを設定していない | score.rawと合わせて3つとも設定する |
| マニフェストのバリデーションエラー | XML名前空間やスキーマ参照の記述ミス | 公式スキーマファイルをパッケージに含め、パスを正確に記述する |
9. よくある質問(FAQ)
Q1. 既存のHTML教材にSCORM対応するのにどれくらいの工数がかかりますか?
シンプルな教材(数ページのHTML)であれば、マニフェスト作成とAPI組み込みで半日〜1日程度が目安です。ただし、テスト結果の送信やブックマーク(中断・再開)機能を実装する場合は、追加で1〜2日を見込んでください。複数SCOで構成される大規模教材や、SCORM 2004のシーケンシング設定が必要な場合はさらに工数が増えます。
Q2. SCORM 1.2と2004のどちらを選ぶべきですか?
日本国内のLMSはSCORM 1.2対応が圧倒的に多く、互換性の面でSCORM 1.2を推奨します。SCORM 2004は学習順序の制御(シーケンシング)や詳細なインタラクション記録が可能ですが、LMS側の対応にばらつきがあり、マニフェストの記述も複雑になります。特別な要件がない限り、まずはSCORM 1.2で作成するのが安全です。
Q3. SCOとAssetの違いは何ですか?
SCO(Sharable Content Object) はSCORM APIを通じてLMSと通信するコンテンツです。学習ステータスやスコアを記録できます。一方、Asset はLMSとの通信を行わない静的リソース(画像、PDF、参考ページなど)です。マニフェストのadlcp:scormtype属性で区別します。
Q4. imsmanifest.xmlをツールで自動生成できますか?
はい。SCORM用のオーサリングツール(iSpring、Articulate Storylineなど)を使えば、GUIでマニフェストを自動生成できます。かつてはReload Editorという無料ツールもありましたが、現在は開発が停滞しています。手書きで構造を理解しておくと、ツール生成後の微調整やトラブルシューティングが格段に楽になります。
Q5. 動画教材もSCORM対応にできますか?
可能です。HTMLページ内にタグで動画を埋め込み、JavaScriptで再生完了を検知してSCORM APIに完了ステータスを送信する方法が一般的です。動画ファイルはパッケージに含めるか、外部CDNから配信してHTMLで参照します。
10. まとめ
HTML教材のSCORM対応は、以下のステップで実現できます。
- imsmanifest.xmlを作成 — 教材の構成・リソース情報をXMLで記述し、ZIPのルートに配置する
- SCORM APIラッパーを実装 — LMSとの通信処理をJavaScriptで記述し、
initialize/setValue/commit/terminateの基本サイクルを組み込む - パッケージをZIP化 — マニフェストがルート直下にある状態でZIP圧縮する
- SCORM Cloudなどでテスト — アップロード・実行し、ステータスやスコアが正しく記録されることを検証する
- SCORM 1.2を基本に — 国内LMSとの互換性を重視するなら、まずはSCORM 1.2で対応する
技術的にはシンプルな仕組みですが、マニフェストの記述ミスやAPI呼び出しの順序誤りなど、細かいハマりどころが多いのも事実です。
HTML教材のSCORM対応でお困りの方は、eラーニング専門18年・3,000件超の制作実績を持つエレファンキューブにご相談ください。既存教材の変換から新規開発、LMSへの搭載テストまでワンストップで対応いたします。
株式会社エレファンキューブ
eラーニング教材制作の専門会社。2008年の創業以来、3,000件超の制作実績を持ち、SCORM 1.2 / SCORM 2004 / xAPI / cmi5など各種規格に精通。企画からLMS搭載まで、ワンストップで対応しています。
コーポレートサイト