小学生から高齢者まで使える全48回のオープンソース教材サイトを公開した

小学生、中学生、高校生、高齢者を対象にした、プログラミング・パソコン教室の教材を作りました。

せっかくなので、誰でも見たり使ったりできるように、教材カタログとGitHubリポジトリを公開しています。

• 教材カタログを見る
• GitHubリポジトリを見る

教材を作っていくうちに、ファイルを並べているだけでは「どこに何があるのか分かりにくい」という問題も出てきました。

そこで、対象やレベルから教材を探して、授業回またはコース単位でダウンロードできるサイトも一緒に作りました。

この記事では、どんな教材を作ったのかと、更新や配布をしやすくするために考えたことを紹介します。

まずは全体像

公開時点では、次の教材が入っています。

4つの対象それぞれに初級・中級・上級があり、1コースは4回構成です。

• 小学生: パソコンの基本、Scratch、HTML、AI、作品制作
• 中学生: プログラミング構文、Webアプリ、設計、Git、テスト、運用
• 高校生: 型、TDD、チーム開発、DevOps、アーキテクチャ、AI/ML
• 高齢者: ファイル操作、安全なインターネット利用、文書・表計算、AI、行政・金融の電子化

同じ内容を少しずつ難しくしただけではありません。対象者に合わせて、扱う題材やゴール、実際に手を動かす内容を変えています。

基本の流れは、初級で「知る・触る」、中級で「作る・説明する」、上級で「企画から改善まで経験する」です。

最初に画面を作らなかった理由

この教材では、最初からWebサイトの画面を作り始めたわけではありません。

まずは、教材をどんな単位で整理するかを決めました。

この分け方を、そのままディレクトリ構成にも反映しています。

対象者_レベル/
├── 00_カリキュラム概要.md
├── 01_授業名/
│   ├── lesson.md
│   └── interactive.html
├── 02_授業名/
├── 03_授業名/
└── 04_授業名/

教材カタログ専用のデータベースは作っていません。このディレクトリ構造を教材データの基準にして、サイト用のデータや配布ZIPを生成しています。

教材本体とサイトの情報を別々に入力すると、どこかで更新を忘れそうです。この形なら、教材を追加したあとに生成処理を動かすだけで済みます。

教材とカタログの内容がずれていないかも確認しやすくなりました。

1回の授業に2種類の教材を用意した

各授業回には、基本的に2種類のファイルを置いています。

lesson.md

講師が説明するときに使うスライドの原本です。Marp形式のMarkdownで管理して、必要なときだけPowerPointやPDFに変換します。

PowerPointを直接管理しなかったのは、Markdownの方がGitで変更内容を確認しやすいからです。レビューや複数ファイルの一括修正もしやすくなります。

interactive.html

受講者がブラウザ上で実際に操作する教材です。

クイズだけでなく、HTMLエディタ、Gitブランチの可視化、DB設計、詐欺を見分ける練習など、授業ごとに違う体験を用意しました。

外部CDNや実際のAI APIには依存せず、ダウンロードしたHTMLをブラウザで直接開けば動く構成を基本にしています。

教室のWi-Fiが不安定だったり、外部サービスが止まっていたりしても、それだけで授業全体が止まらないようにするためです。

ただし、GitHub Pages上の教材カタログを見るときはインターネット接続が必要です。オフラインで動くのは、ダウンロードしたあとの対話型教材です。

なぜ静的サイトにしたのか

教材カタログは、index.html、CSS、JavaScriptで作った静的サイトです。ログイン、データベース、管理画面、決済機能はありません。

教材ディレクトリ
  ├─ lesson.md
  └─ interactive.html
          ↓
  生成スクリプト
  ├─ assets/site-data.js
  └─ downloads/*.zip
          ↓
  静的教材カタログ
  ├─ 検索・絞り込み
  ├─ 授業回単位のダウンロード
  └─ コース単位のダウンロード

理由はシンプルで、今やりたいことが「教材を探してダウンロードする」だからです。そのために、サーバー側で利用者の状態を持つ必要はありませんでした。

静的サイトならGitHub Pagesでそのまま公開できます。リポジトリを取得すれば、ローカルで開くこともできます。

認証情報や受講者データを保存しないので、管理するものやセキュリティ上の心配も増やさずに済みます。

もちろん、できないこともあります。受講者ごとの進み具合を記録したり、ログイン後だけ教材を見せたり、修了証をまとめて管理したりはできません。

将来そうした機能が必要になったら、今の教材カタログへ無理に詰め込まず、別のアプリとして作るつもりです。

相手に合わせて内容と見た目を変えた

基本的な操作はそろえつつ、配色、言葉、題材は対象者ごとに変えています。

例えば高校生向けでは、TDD、レビュー、DevOps、DDDなど、実務開発につながる題材を扱っています。

一方、高齢者向けでは、日常生活でどう使うか、安全に使うには何に気をつけるか、自分用の手順をどう残すか、といった内容を重視しました。

すべてを同じ画面へ流し込む作りにした方が、開発の手間は少なくなります。

ただ、対象者によって読みやすい文字量や親しみやすい題材、必要な注意事項はかなり違います。そこで、多少の重複は受け入れて、各教材を独立したHTMLにしました。

管理するファイルは増えますが、1回分の教材だけを配布でき、特別なビルド環境がなくても動かせるメリットがあります。

安全に使うために考えたこと

子どもや高齢者が使う可能性のある教材なので、動けばよいとは考えませんでした。安全に使うための内容も、教材の一部として入れています。

• APIキー、パスワード、実在する個人情報を教材に書かない
• AIに入力してよい情報と、入力してはいけない情報を扱う
• 外部AIサービスを使う場合の年齢制限や保護者同意を案内する
• フィッシング、偽警告、サポート詐欺を題材に含める
• 問い合わせ内容が公開GitHub Issueになることを画面上で説明する
• キーボード操作とコントラストを含むアクセシビリティ改善を継続する

GitHub Actionsでは、Markdown、HTML、インラインJavaScript、IDの重複、リンク、静的なアクセシビリティ項目などを自動で確認しています。

とはいえ、自動チェックが通れば教材として完璧、というわけではありません。

分かりやすいか、実際に操作しやすいか、予定した授業時間で終わるかは、人が使って初めて分かる部分です。ブラウザや端末の違いもあるので、ここは今後も確認していきます。

まだまだ改善したいところ

公開できる形にはなりましたが、まだ課題はあります。

• 教材変更後に生成データや配布ZIPを更新し忘れる可能性がある
• 独立したHTMLが増えるほど、共通UIの一括変更が難しくなる
• 問い合わせにGitHubアカウントが必要で、内容は公開される
• アクセシビリティは、目標に向けて少しずつ改善する必要がある
• 教材が想定した授業時間や難易度に合うか、実利用での検証が必要

生成物の更新忘れなど、機械で見つけられる問題はできるだけCIで検出したいと考えています。

一方で、教材の内容や難易度は自動チェックだけでは判断できません。レビューや実際に使った結果を取り入れながら改善していきます。

オープンソースで公開しています

教材とコードは、MIT Licenseで公開しています。

誤字の修正、教材内容の改善、新しい対話型ツールの提案などがあれば、GitHubのIssueやPull Requestから参加できます。

制作や改善には生成AIも活用しました。ただし、生成された内容をそのまま教材にするのではなく、対象者に合う表現か、誤解を招かないか、安全上の問題がないかを確認することが前提です。

まとめ

今回作ったのは、48回分の教材ファイルだけではありません。

対象者とレベルを先に整理して、MarkdownとHTMLを原本として管理し、検索用データと配布ZIPを作るところまでを一つの流れにしました。

まだ実際に使いながら改善したい部分はたくさんあります。それでも、教材を探してダウンロードし、オフラインでも試せる入口は用意できました。

気になる授業があれば、教材カタログやGitHubリポジトリをのぞいてみてください。

• lecture-materials 教材カタログ
• yt-hsgw/lecture-materials