MoodleでMarkdownを使って教材を作りたかったのでLessonMarkを作った

Posted at 2026-08-29

はじめに

Moodleで技術系の教材を作っていると、

Markdownでそのまま書けたら楽なのに

と思うことがあります。

Markdownなら、見出し、箇条書き、コード、表、リンク、画像などを比較的簡単な記法で書くことができます。

特にプログラミング教材では、

for i in range(5):
    print(i)

のようなコードを頻繁に扱うため、Markdownとの相性はかなり良いと思います。

また、教材をMarkdownで持っておけば、

VS Codeなどのエディタで編集できる
Gitで差分を管理できる
GitHubなどで共有できる
AIに草稿を作らせやすい
Moodle以外でも再利用しやすい

といった利点があります。

一方、Moodle上で教材を作成する場合は、基本的にはHTMLを意識したエディタを使うことになります。

もちろん、それで困らない教材もあります。

しかし技術系の文章を継続して作っていると、

教材の原稿そのものをMarkdownで持ちたい

と思うようになりました。

そこで作ったのが LessonMark です。

`.md` をアップロードするだけでは足りない

最初に考えたのは、MarkdownファイルをMoodleへアップロードして表示するだけの仕組みでした。

例えば、

lesson01.md
        ↓
Moodle
        ↓
HTMLへ変換して表示

です。

これでも教材をMarkdownで管理することはできます。

しかし、実際に使うことを考えると、すぐに問題が出てきます。

例えば誤字を一文字直したいだけでも、

VS Codeで開く
↓
修正する
↓
保存する
↓
Moodleへ再アップロードする

という作業が必要になります。

これは教材を継続的に修正していくにはかなり面倒です。

そこでLessonMarkでは、

Markdownファイルを表示できる

ことよりも、

Moodleの中でMarkdown教材そのものを作成・編集できる

ことを重要な要件にしました。

Markdownをその場で編集して、その場で確認したい

LessonMarkの編集画面では、

┌──────────────────┬──────────────────┐
│ Markdown Editor  │ Preview          │
│                  │                  │
│ # Python入門     │ Python入門       │
│                  │                  │
│ ```python        │ [code block]     │
│ print("Hello")   │                  │
│ ```              │                  │
└──────────────────┴──────────────────┘

という形で、

左側でMarkdownを編集し、右側で学生が見る状態を確認する

ことができます。

画面が狭い場合には、EditとPreviewを切り替えて利用できます。

つまり、

書く
↓
確認する
↓
直す
↓
保存する

という教材制作の流れを、Moodleの中だけで完結できるようにしました。

保存する正本はHTMLではなくMarkdown

LessonMarkで特に重視したのがここです。

MarkdownをHTMLへ変換して保存するのではなく、

Markdown sourceそのものを教材の正本として保存する

ようにしています。

例えば、

# 条件分岐

Pythonでは `if` を使って条件分岐を記述します。

```python
if score >= 80:
    print("Good")
```

と書いた場合、このMarkdown sourceをそのまま保持します。

表示時には、

Markdown source
      ↓
Renderer
      ↓
安全化
      ↓
HTML
      ↓
学生画面

という処理を行います。

そのため、後から編集画面を開いても、元のMarkdown記法が失われません。

これは将来的に、

Git
diff
AI
VS Code

などと連携するためにも重要だと考えています。

Previewと学生画面で別の処理をしない

もう一つ重要にしたのが、

Previewと学生が実際に見る画面で同じレンダリング処理を使う

ことです。

Previewだけきれいに表示されても、保存した後の学生画面で違って見えたら困ります。

そこで、

Markdown
    ↓
共通Renderer
    ↓
安全化されたHTML
       ├─ Preview
       └─ Student view

という構成にしました。

つまり教師がPreviewで確認したものと、学生が見るものができるだけ一致するようにしています。

技術教材で使いたかった機能

最初のバージョンでは、一般的なMarkdown記法に加えて、教材で使いやすい表示を意識しました。

例えば、

見出し
箇条書き
番号付きリスト
表
リンク
画像
inline code
fenced code block
syntax highlighting
blockquote
NOTE
TIP
WARNING
自動目次

などです。

例えば、

> [!NOTE]
> この部分は補足説明です。

のように書けば、教材上ではNOTEとして区別して表示できます。

単にMarkdownをHTMLへ変換するだけではなく、

教材として読みやすいMarkdown表示

を目指しています。

画像はMoodleのFile APIで管理する

教材では画像も必要になります。

LessonMarkでは、画像を独自のディレクトリへ保存するのではなく、MoodleのFile APIを利用しています。

これは、

Moodleの権限管理
course module context
backup / restore
course duplication

などと整合させるためです。

Markdown本文だけ移動できても、

本文はある
画像がない

では教材として困ります。

そのため最初のリリースから、本文と関連ファイルをMoodleのbackup / restoreで扱えることも完成条件にしました。

`.md` のimportとexport

既にMarkdown教材を持っている場合には、.md ファイルを取り込めます。

lesson.md
   ↓ import
LessonMark Editor
   ↓
修正
   ↓
Preview
   ↓
保存

逆に、LessonMarkで作った教材を .md としてexportすることもできます。

つまり教材をMoodleの中だけに閉じ込めないようにしています。

現時点ではimportは一度限りです。

元のMarkdownファイルやGit repositoryと継続的に同期する機能は、まだありません。

AIとの相性もかなり良い

このプラグインを考え始めた理由の一つに、AIの存在もあります。

生成AIに技術教材の草稿を作らせるとき、

Markdownで出力してください

と指定するのは非常に自然です。

例えば、

Pythonのfor文について、
説明
コード例
注意点
演習問題3問
の構成でMarkdown教材を作成してください。

と指示する。

すると、

AI
↓
Markdown
↓
LessonMark
↓
教師が編集
↓
Preview
↓
学生へ公開

という流れが作れます。

もちろんAIが生成した教材をそのまま公開するのではなく、人間が確認・修正する必要があります。

そのときMarkdownであれば、修正もしやすく、差分も確認しやすい。

今後、教材制作にAIを使う場面はさらに増えると思います。

そう考えると、

Markdownを教材の中間形式として扱えること

には以前より大きな意味があるように感じています。

最初からGit連携までは入れなかった

将来的には、

GitHub
   ↓
Markdown教材
   ↓
LessonMark
   ↓
Moodle

という形も考えています。

しかし最初からそこまで実装すると、かなり大きなプラグインになります。

そのためv0.1では、

MoodleだけでMarkdown教材を完成できる

ことを優先しました。

現在のLessonMarkは、

新規作成
編集
Preview
import
export
画像管理
学生表示
backup / restore

までを一つのResourceとして扱います。

Git同期、複数Markdownによる章構成、AI-assisted authoringなどは、今後の候補として分離しています。

Moodle Marketplaceへ申請した

LessonMark v0.1.0として一通り実装し、現在はMoodle Marketplaceへ公開申請を行っています。

Moodle Plugin Dashboardでは、

LessonMark
mod_lessonmark
Submitted for review

という状態です。

審査が通れば、Moodle Marketplaceからインストールできるようになります。

ソースコードはすでにGitHubで公開しています。

現在のリリースでは、

Markdown source保存
Edit / Preview
学生向け表示
画像
import / export
backup / restore
course duplication
security / accessibility checks
GitHub ActionsによるCI

まで実装しています。

まとめ

最初に欲しかったのは、かなり単純なものでした。

MoodleでMarkdownを使って教材を書きたい。

しかし考えてみると、

Markdownファイルを表示する

だけでは足りませんでした。

実際に教材制作へ使うには、

Moodleで新規作成できる
↓
その場で編集できる
↓
Previewできる
↓
Markdown sourceを失わない
↓
画像も扱える
↓
backup / restoreできる

ところまで必要でした。

そこでLessonMarkでは、

Markdownを単なる入力形式ではなく、教材の正本として扱う

ことにしました。

今後は、

複数Markdown
教材bundle
章構成
Git同期
差分管理
AI支援
翻訳支援

などへ発展させる余地があります。

ただ、まずは、

Moodleの中だけでMarkdown教材を作って、直して、確認して、公開できる

ところまでを最初の一区切りとしました。

Moodleで技術教材を作っていて、

Markdownで書けたら楽なのに

と思ったことがある人には、少し試してもらえるものになればと思っています。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

MoodleでMarkdownを使って教材を作りたかったのでLessonMarkを作った

はじめに

.md をアップロードするだけでは足りない

Markdownをその場で編集して、その場で確認したい

保存する正本はHTMLではなくMarkdown

Previewと学生画面で別の処理をしない

技術教材で使いたかった機能

画像はMoodleのFile APIで管理する

.md のimportとexport

AIとの相性もかなり良い

最初からGit連携までは入れなかった

Moodle Marketplaceへ申請した

まとめ

`.md` をアップロードするだけでは足りない

`.md` のimportとexport