陌讯skills聚合平台

teachable-course-creator

📁 shunsukehayashi/miyabi 📅 Today
2
总安装量
1
周安装量
#72909
全站排名
安装命令
npx skills add https://github.com/shunsukehayashi/miyabi --skill teachable-course-creator

Agent 安装分布

amp 1
openclaw 1
opencode 1
cursor 1
kimi-cli 1
codex 1

Skill 文档

Teachable Course Creator

Version: 1.1.0 Purpose: AI Course Content Generator連携でTeachableコースを自動作成

Triggers

Trigger Examples
Course Creation “create teachable course”, “コース作成”, “Teachableセットアップ”
Curriculum “setup curriculum”, “カリキュラム作成”, “セクション追加“
Import “import from mindmeister”, “構造をインポート”
CCG Integration “CCGからTeachableへ”, “コンテンツ生成してアップロード”

Prerequisites

  1. Chrome MCP: ブラウザ自動操作が有効
  2. Teachable Login: 管理者としてログイン済み
  3. Course Structure: Markdownまたはマインドマップ形式の構造

Workflow

Phase 1: コース構造の準備

Step 1.1: 構造データの取得

# コース構造フォーマット

course_title: "コースタイトル"
curriculum:
  - section: "SECTION 1：【カテゴリ】セクションタイトル"
    lessons:
      - title: "レッスン1タイトル"
        type: "Video"
      - title: "レッスン2タイトル"
        type: "Video"
  - section: "SECTION 2：【カテゴリ】セクションタイトル"
    lessons:
      - title: "レッスン1タイトル"
        type: "Video"

Step 1.2: MindMeisterからの取得（オプション）

  1. MindMeisterのマップURLを取得
  2. WebFetchでマップ構造を解析
  3. 上記フォーマットに変換

Phase 2: Teachable ブラウザ操作

Step 2.1: 管理画面へのアクセス

URL形式: https://[school-name].teachable.com/admin-app/courses/[course-id]/curriculum
  1. tabs_context_mcp でタブ情報取得
  2. navigate でカリキュラムページへ移動
  3. screenshot で現在の状態を確認

Step 2.2: セクションの作成/編集

新規セクション作成:

  1. 「New section」ボタンをクリック
  2. セクション名を入力
  3. 「Save」をクリック

セクション名変更:

  1. セクション行の3点メニュー（⋮）をクリック
  2. 「Rename section」を選択
  3. 新しい名前を入力
  4. 「Save」をクリック
// セクション操作のセレクター
Section Menu: 3点メニュー（⋮）
Rename Option: "Rename section"
Save Button: "Save"
Cancel Button: "Cancel"

Step 2.3: レッスンの作成

  1. 対象セクション内の「New lesson」をクリック
  2. レッスンタイトルを入力
  3. コンテンツタイプを選択（Video/Text/Quiz）
  4. 保存

Phase 3: コース設定

Step 3.1: 基本情報

Information ページ:
- コース名
- サブタイトル
- 説明文
- サムネイル画像

Step 3.2: 価格設定

Pricing ページ:
- Free / Paid
- 一括払い / サブスクリプション
- 価格（円/ドル）

Step 3.3: セールスページ

Sales pages ページ:
- ヘッダー画像
- コース説明
- CTA ボタン

Browser Automation Patterns

要素の検索と操作

1. find tool: 自然言語で要素検索
   例: "search bar", "save button"

2. read_page: アクセシビリティツリー取得
   - depth: 15 (デフォルト)
   - filter: "interactive" (ボタン/リンクのみ)

3. computer tool actions:
   - left_click: クリック
   - type: テキスト入力
   - scroll: スクロール
   - screenshot: スクリーンショット

安全な操作フロー

1. screenshot → 現状確認
2. find/read_page → 要素特定
3. click/type → 操作実行
4. screenshot → 結果確認
5. 必要に応じて修正

Input Format Examples

Markdown形式

# コースタイトル

## SECTION 1：【基礎】イントロダクション
- レッスン1：はじめに (Video)
- レッスン2：基本概念 (Video)

## SECTION 2：【実践】ハンズオン
- レッスン1：実演 (Video)
- レッスン2：演習 (Quiz)

YAML形式

course_title: "コースタイトル"
curriculum:
  - section: "SECTION 1：【基礎】イントロダクション"
    lessons:
      - title: "はじめに"
        type: "Video"
      - title: "基本概念"
        type: "Video"

Checklist

コース作成前

  • Teachableにログイン済み
  • コース構造データを準備
  • Chrome MCPが利用可能

カリキュラム作成

  • 全セクションを作成/命名
  • 各セクションにレッスンを追加
  • レッスンの順序を確認
  • 公開ステータスを設定

コース設定

  • コース基本情報を入力
  • 価格を設定
  • セールスページを作成
  • プレビューで確認

Error Handling

Error Solution
要素が見つからない scroll して再検索
クリックが効かない 座標を確認して再試行
入力が反映されない フィールドをクリアしてから入力
ページ遷移しない wait してから screenshot

Best Practices

✅ GOOD:
- 操作前後で screenshot を撮る
- セクション名は「SECTION N：【カテゴリ】タイトル」形式
- 一度に1つの操作を実行

❌ BAD:
- screenshot なしで連続操作
- 長すぎるセクション名
- 確認なしの大量操作

CCG Integration (AI Course Content Generator)

Overview

AI Course Content Generator (CCG)
/Users/shunsukehayashi/dev/ai-course-content-generator-v2

機能:
- Gemini AIでコース構造を自動生成
- レッスン台本の自動作成
- TTS音声生成
- グラフィックレコーディング風スライド
- MP4動画レンダリング
- Teachableエクスポート用MCPサーバー

CCG → Teachable ワークフロー

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   CCG App       │ -> │   MCP Server    │ -> │   Teachable     │
│ コンテンツ生成   │    │ エクスポート     │    │ ブラウザ操作     │
└─────────────────┘    └─────────────────┘    └─────────────────┘

Phase A: CCGでコンテンツ生成

Step A.1: CCGアプリ起動

cd /Users/shunsukehayashi/dev/ai-course-content-generator-v2
npm run dev          # Webモード (port 3000)
npm run electron:dev # Electronモード

Step A.2: コース構造生成

  1. Vision Panelで参考資料をアップロード（画像/PDF/URL）
  2. コースタイトルと概要を入力
  3. 「Generate Structure」でJSON構造を生成
  4. 必要に応じて構造を編集

Step A.3: レッスンコンテンツ生成

各レッスンで:

  1. 「Generate Plan」→ 統合プラン生成
  2. 「Generate Script」→ 台本生成
  3. 「Generate Audio」→ TTS音声生成
  4. 「Generate Slides」→ スライド画像生成
  5. 「Generate Video」→ MP4動画生成

Phase B: MCPでエクスポート

Step B.1: MCP Teachable Uploader

# 初回セットアップ
cd /Users/shunsukehayashi/dev/ai-course-content-generator-v2/mcp-teachable-uploader
npm install

Step B.2: MCPツール一覧

Tool Purpose
list_projects プロジェクト一覧取得
get_project_info プロジェクト詳細
get_lesson_files レッスンファイル一覧
export_single_lesson 単一レッスンエクスポート
build_teachable_export 全レッスンエクスポート
save_export_to_file JSONファイル保存

Step B.3: エクスポートコマンド例

# Claude Desktopで実行
"プロジェクト一覧を見せて"
"〇〇プロジェクトをTeachable用にエクスポートして"
"export.jsonに保存して"

Phase C: Teachableにアップロード

Step C.1: カリキュラム構造の反映

エクスポートしたJSONからカリキュラム構造を取得し、 Phase 2のブラウザ操作でTeachableに反映。

Step C.2: 動画アップロード

  1. Teachableのレッスン編集画面を開く
  2. 「Add Video」をクリック
  3. CCGで生成したMP4ファイルをアップロード

CCG出力ファイル構造

projects/
└── [project-name]/
    ├── course.json           # コース構造
    ├── lessons/
    │   └── [lesson-id]/
    │       ├── plan.json     # 統合プラン
    │       ├── script.md     # 台本
    │       ├── audio.mp3     # 音声
    │       ├── slides/       # スライド画像
    │       └── video.mp4     # 完成動画
    └── export/
        └── teachable.json    # Teachableエクスポート

Related Skills

  • ccg: AI Course Content Generator（コンテンツ生成）
  • doc-generator: ドキュメント生成
GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台
本页面由 陌讯 Skills 聚合平台 收录整理，数据定期更新。