CourseCode Framework

CourseCode Framework

Claude Code、Codex、または MCP に対応する任意の AI ツールで LMS コースを作成できます。

CourseCode Framework はオープンソースで、お使いのコンピューター上で動作します。AI ツールは、確認、バージョン管理、編集が可能な通常のプロジェクトファイルとしてコースを作成します。CourseCode の MCP サーバーを使うと、作成したコースのプレビュー、スクリーンショット撮影、リント、テストができます。SCORM 1.2、SCORM 2004、cmi5、または LTI 1.3 形式でエクスポートできます。

トピックからでも、お手持ちの PDF、Word 文書、PowerPoint 資料からでも始められます。始めるのにコーディングは不要です。必要になれば、コードを完全に管理できます。

デモを見る

• CourseCode のライブデモコースを見る

CourseCode エコシステム

CourseCode Framework（このリポジトリ）はオープンソースで、単独で動作します。CourseCode Cloud は、コースをデプロイして配信するためのオプションの有料ホスティングサービスです。

Framework のドキュメントは coursecodeframework.com/docs と framework/docs/ にあります。

機能

• AI ツールで利用可能：Claude Code と Codex 向けのプラグインに加え、新しいプロジェクトごとに Claude Code、Codex、Cursor、VS Code 用の MCP 設定が用意されています。その他の MCP クライアントからは coursecode mcp を実行できます
• 始めるのにコーディングは不要：作成したいものを説明するだけで、AI がスライド、インタラクション、構成の作成を支援します
• コースの最新化：既存の SCORM コース、PowerPoint、PDF、Word 文書、スクリプト、SME のメモを、アップグレードしたコースの資料として利用できます
• LMS 連携：SCORM 1.2、SCORM 2004、cmi5 のパッケージングに加え、信頼されたサーバー経由の起動に対応する LTI 1.3 のブラウザー連携仕様を備えています
• 豊富な UI コンポーネント：画像、動画、アコーディオン、タブ、サンドボックス化されたカスタム HTML／JS 埋め込みに対応しています
• 豊富なインタラクション：選択式、ドラッグ＆ドロップ、穴埋め、マッチング、順序付けなどに対応しています
• アクセシビリティ：WCAG 2.1 AA への準拠を目指して設計されており、ダークモード、ハイコントラスト、動きを抑える設定を備えています
• TTS 音声ナレーション：AI によるテキスト読み上げ生成機能（Deepgram、ElevenLabs、OpenAI、Google Cloud、Azure に対応。独自の API キーを使用）を備えたプレーヤーを内蔵しています
• スマートトラッキング：エンゲージメント要件、学習目標、進捗の永続化に対応しています
• テーマ設定可能なデザイン：CSS カスタムプロパティでブランドに合わせて簡単にカスタマイズできます
• カスタムエンドポイント：エラー報告と学習記録の保存に対応するオプションの Webhook を利用できます
• ライブプレビュー：ビジュアル編集、ステータスダッシュボード、設定パネル、カタログブラウザー、デバッグツールを備えた完全な LMS シミュレーションを利用できます

---

クイックスタート

プラグインを使う（推奨）

Claude Code と Codex のプラグインは、新しいプロジェクトから LMS パッケージの作成まで AI ツールをガイドし、プロジェクトがまだ存在しない状態でも動作します。Claude Code や Codex のプラグインディレクトリにはまだ登録されていないため、このリポジトリからインストールしてください。

# Claude Code
claude plugin marketplace add course-code-framework/coursecode
claude plugin install coursecode@coursecode

# Codex
codex plugin marketplace add course-code-framework/coursecode
codex plugin add coursecode@coursecode

その後、空のフォルダーで AI ツールを起動し、作成したいコースを説明してください。

このプラグインには Node.js 22.15 以降が必要ですが、coursecode のグローバルインストールは不要です。Node.js が見つからない場合は、setup スキルからインストールを提案します。このプラグインには、以下の MCP サーバーと、setup、new-course、outline、build-slides、review、publish の 6 つのスキルが同梱されています。plugin/README.md を参照してください。

npx を使う

Node.js 22.15 以降がインストールされていることを確認してから、プロジェクトを作成します。

npx coursecode create my-course

my-course フォルダーを Claude Code、Codex、Cursor、または VS Code で開き、作成したいコースを説明してください。プロジェクトには、これらの各ツール向けの MCP 設定と、作成ワークフローを記載した AGENTS.md が含まれているため、AI ツールは自動的に接続します。Claude Code では、プロジェクトの MCP サーバーを一度承認するよう求められます。Codex はフォルダーを信頼すると、プロジェクト設定を読み込みます。

AI ツールを使わずにプレビューするには、次のコマンドを実行してください。

cd my-course
npx coursecode preview

http://localhost:4173 を開くと、コースを表示して編集できます。

新しいプロジェクトごとに付属するサンプルコースには、CourseCode の使い方を網羅したガイドが含まれています。

詳しい手順については、ユーザーガイドを参照してください。

---

要件

Node.js 22.15 以降。すべてのコマンドは npx coursecode 経由で実行できます。また、このガイドの残りの部分で使用する短い coursecode コマンドを使うには、CLI をグローバルにインストールしてください。

npm install -g coursecode

学習者向けコースは、Chrome 111 以降、Edge 111 以降、Firefox 114 以降、Safari 16.4 以降に対応しています。SCORM の互換性は、LMS との通信とパッケージングに関するものであり、Internet Explorer のサポートを意味するものではありません。

以下も推奨します。

• VS Code、Cursor などのコードまたはテキストエディター
• Claude Code、Codex、Cursor、または GitHub Copilot を搭載した VS Code など、MCP に対応した AI コーディングツール
• バージョン管理用の GitHub Desktop

---

MCP 統合

CourseCode には、組み込みの Model Context Protocol（MCP）サーバーが含まれています。お使いの AI ツールが MCP に対応している場合、コースプロジェクトに直接接続するため、ファイルをチャットに貼り付ける必要はありません。

新しいプロジェクトには、Claude Code（.mcp.json）、Codex（.codex/config.toml）、Cursor（.cursor/mcp.json）、VS Code（.vscode/mcp.json）用の MCP 設定があらかじめ含まれています。既存のプロジェクトに設定を追加するには、coursecode agent-setup を実行してください。その他の MCP クライアントでは、次のコマンドでサーバーを起動できます。

coursecode mcp

グローバルインストールまたは npx から実行すると、サーバーはプロジェクト独自の CourseCode バージョンに処理を引き継ぎます。

MCP を使うと、AI は次のことができます。

• スライドをプレビューしてスクリーンショットを撮り、レイアウトとデザインを確認する
• 自分のコードをリントして、エラーを自動的に検出する
• 操作を直接ナビゲートしてテストする
• コンポーネントカタログを参照して、利用できる UI 要素を確認する
• エンゲージメント、スコアリング、LMS データなどのコースの状態を読み取る

設定手順については、ユーザーガイドをご覧ください。

---

コースディレクトリ

コースのコンテンツはすべて course/ フォルダーにあります。

my-course/
├── course/                     # ← Your content goes here
│   ├── course-config.js        # Course structure, format, objectives, settings
│   ├── slides/                 # Slide content files
│   │   ├── intro.js
│   │   ├── content-01.js
│   │   └── assessment.js
│   ├── assets/                 # Images, audio, video
│   │   ├── images/
│   │   └── audio/
│   └── theme.css               # Brand customization
│
├── framework/                  # Framework code (don't edit)
│   └── docs/                   # Guides and templates

コース

場所	内容
course/course-config.js	コース設定：構成、学習目標、ナビゲーションルール
course/slides/	スライドのコンテンツ（スライドごとに1ファイル）
course/theme.css	ブランドカラーとタイポグラフィ
course/assets/	画像、音声、動画ファイル

主なドキュメント

すべてのガイドは framework/docs/ にあります。

ドキュメント	対象読者	目的
USER_GUIDE.md	人間	ワークフロー、機能、エクスポートと共有に関する総合ガイド
COURSE_AUTHORING_GUIDE.md	AI エージェント	スライド作成、インタラクション、CSS スタイリング
COURSE_OUTLINE_GUIDE.md	AI エージェント	効果的なコース概要の作成方法
COURSE_OUTLINE_TEMPLATE.md	AI エージェント	概要作成を始めるための空のテンプレート
DATA_MODEL.md	AI エージェント	LMS のデータモデルとトラッキングフィールド
FRAMEWORK_GUIDE.md	AI エージェント	フレームワークの内部構造（上級者向け）

---

AI 主導の作成ワークフロー

ソース資料から LMS に対応したコースを完成させるまでの4つのステップです。

ステップ1：ソース資料を変換する

既存のコンテンツ（PDF、Word 文書、PowerPoint）を course/references/ に配置してから、次を実行します。

coursecode convert

course/references/converted/ 内の Markdown に変換されます。最初から作成する場合は、このステップを省略してください。

ステップ2：コース概要を作成する

コンテンツに基づいてコース概要を作成するよう、AI に依頼します。

• MCP を使用する場合：AI が参照資料と概要テンプレートを自動的に読み込みます
• MCP を使用しない場合：変換した文書、COURSE_OUTLINE_TEMPLATE.md、COURSE_OUTLINE_GUIDE.md を AI に共有します

作成に進む前に、概要を確認して調整してください。

ステップ3：コースを作成する

承認済みの概要からスライドを作成するよう、AI に依頼します。

• MCP を使用する場合：AI がすべての文書を読み込み、コードをリントし、スライドのスクリーンショットを撮って確認します
• MCP を使用しない場合：概要と COURSE_AUTHORING_GUIDE.md を AI に共有します

ステップ 4：プレビュー、反復、エクスポート

coursecode preview

プレビューサーバーでは、次の操作ができます。

• ライブリロード：変更がすぐに反映されます
• ビジュアル編集：要素をクリックして、コンテンツを直接編集できます
• ステータスダッシュボード：コースの状態、エラー、ビルド状況を一目で確認できます
• 設定パネル：設定、インタラクション、評価を調整できます
• コンポーネントカタログ：利用可能な UI 要素をライブプレビューで確認できます
• デバッグツール：LMS の状態を調べ、インタラクションをテストし、トラッキングを確認できます

準備ができたら、パッケージをビルドして LMS にアップロードします。ZIP ファイルはプロジェクトフォルダーに書き出されます。

coursecode build                    # cmi5 (default)
coursecode build --format scorm1.2  # or scorm2004, lti

ほかの共有方法：

• **サーバー不要の単一ファイル：**受信者がダブルクリックして開けるポータブルな HTML コースです。進捗は、そのブラウザー内にのみ保存されます。

  coursecode export html
  

• **レビューサイト：**GitHub Pages、Netlify、または任意の静的ホストで公開できる、プレビューの静的コピーです。

  coursecode preview --export
  

• ホスティング配信（オプション）：CourseCode Cloud は、CourseCode コース向けの有料ホスティングサービスです。coursecode deploy を実行するとビルドがアップロードされます。Cloud がコースを配信し、共有可能なプレビューリンクを提供するとともに、必要に応じて任意の LMS 形式を生成します。ユーザーガイドの CourseCode Cloud を参照してください。

---

基本コマンド

コマンド	説明
coursecode create <name>	新しいコースプロジェクトを作成します。create . を実行すると、現在のフォルダー名からタイトル形式のコースタイトルとハイフン区切りの npm 名が生成されます
coursecode init [name]	現在のディレクトリを初期化します。必要に応じてコースタイトルを指定できます
coursecode preview	コースをローカルでプレビューします
coursecode export html	LMS やサーバーを使わずに開ける、共有可能なコースファイルを 1 つ作成します
coursecode convert	PDF、Word、PowerPoint を Markdown に変換します
coursecode mcp	AI 連携用の MCP サーバーを起動します
coursecode agent-setup	Claude Code、Codex、Cursor、VS Code 用の MCP 設定と AGENTS.md を既存のプロジェクトに追加します
coursecode lint	コースの構成とコンテンツを検証します
coursecode build	LMS へのアップロード用パッケージをビルドします
coursecode narration	テキストから音声ナレーションを生成します
coursecode deploy	ビルドを CourseCode Cloud にアップロードします（オプション。deployments、promote、preview-link で管理できます）

コマンドの全一覧と共有方法については、ユーザーガイドを参照するか、coursecode --help を実行してください。

---

UI コンポーネント

インタラクティブな要素を使って、魅力的なスライドを作成できます。まず AI の支援を受け、さらに細かく制御したい場合は、生成されたファイルをいつでも直接編集できます。

メディアとウィジェット

コンポーネント	説明
タブ	コンテンツパネルを切り替えます
アコーディオン	展開・折りたたみ可能なセクションです
フリップカード	クリックするとコンテンツが表示されます
カルーセル	スワイプしてスライドを切り替えます
モーダル	ポップアップで詳細を表示します
インタラクティブなタイムライン	クリック可能なタイムラインイベントです
インタラクティブ画像	画像上にホットスポットを表示します
埋め込みフレーム	サンドボックス化された HTML/JS コンテンツです
オーディオプレーヤー	コントロール付きのナレーションです
ビデオプレーヤー	ネイティブ、YouTube、または Vimeo の動画です

スライドテンプレート

よく使われるスライドの種類向けに、あらかじめデザインされたレイアウトです。必要なものを AI アシスタントに伝えるだけです。

テンプレート	用途
イントロカード	重要なポイントを下部に示す概要スライド
手順	順番に沿った説明（番号付き）
特長	3～4 個の主要な機能を強調します
比較	選択肢を左右に並べて比較します
統計	インパクトのある指標や数値を示します
コンテンツ＋画像	図と並べてテキストを表示します
ヒーロー	行動喚起を含む全幅の導入スライド
タイムライン	時系列のイベント
引用	推薦コメントや引用文献
チェックリスト	タスク一覧と要件

---

インタラクションの種類

学習者の参加を促し、理解度を確認するアクティビティです。

種類	説明
選択式	1 つ以上の正解を選択します
正誤問題	はい／いいえで答える簡単な問題です
穴埋め問題	空欄に入るテキストを入力します（誤字の許容に対応）
マッチング	関連する項目を結び付けます
ドラッグ＆ドロップ	項目をカテゴリに分類します
順序付け	項目を正しい順序に並べます
数値入力	数値を入力します（完全一致または範囲）
ホットスポット	画像上の正しい領域をクリックします
リッカート尺度	アンケート用の評価尺度です

すべてのインタラクションで即時フィードバックが提供され、スライドの完了条件として設定できます。

---

進捗と採点

エンゲージメント

次に進む前に、学習者がアクティビティを完了するよう求めます。

• すべてのタブまたはアコーディオンパネルを表示する
• インタラクションを完了する
• 動画を視聴する、または音声を聴く
• スライド上で最低限の時間を過ごす

ゲーティング

条件が満たされるまでスライドをロックします。

• 評価に合格する
• 学習目標を達成する
• スライド上で最低限の時間を過ごす
• 分岐選択後などに、カスタムフラグを設定する

評価

コースの完了を判定する採点付きクイズです。

• 問題の順序をランダム化する
• 多様性を確保するための問題バンク
• 合格点を設定する
• 補習を伴う再試行
• スコアを LMS に報告する

学習目標

定義された目標に対する学習者の進捗を追跡します。

• 自動：スライドの閲覧状況を追跡します
• 連携：学習目標を評価のスコアに関連付けます
• 報告：完了状況を LMS に送信します

---

詳しく見る

ユーザーガイドですべてを詳しく説明しています。

• プレビューとビジュアル編集ツールの使用
• すべてのインタラクションの種類（選択式、ドラッグ＆ドロップ、マッチングなど）
• 評価と採点
• 音声と動画
• テーマとブランディング
• ナビゲーションと学習者の進行管理
• エクスポートと共有のオプション
• トラブルシューティング

---

ライセンス

MIT © Seth Vincent