授業が終わったあと、「あのときの板書、あとで見返したい」と思う場面があります。
黒板には、その日の授業の流れ、子どもたちに伝えたこと、次回につなげたいメモが残っています。ただ、写真をスマホに保存するだけだと、あとから探すときに少し大変です。学年、教科、日付、単元が混ざってしまい、「たしか4月の算数だったはず」と思っても、なかなか見つからないことがあります。
そこで、板書写真を授業記録として整理できるWebアプリ BanShowZ を作りました。
BanShowZでできること
BanShowZは、先生が授業後に板書を撮影し、あとから見返しやすくするためのアプリです。
使い方はシンプルです。黒板を撮影し、学年、教科、単元、日付、メモを付けて保存します。保存した板書は、ホーム画面から月ごとに一覧できます。学年は1年から6年まで切り替えられ、教科ごとの絞り込みにも対応しています。
表示方法も、用途に合わせて切り替えられるようにしました。
- 一覧で時系列に見る
- カレンダーで授業日から探す
- 教科ごとにまとめて見る
たとえば、年度はじめの黒板、単元の導入、行事前後の連絡、学級づくりに関わる板書などを、あとから振り返りやすくなります。
詳細画面では、保存した黒板写真を大きく表示し、メモやOCRで読み取ったテキストも確認できます。写真が複数ある場合は、まとめて1つの記録として扱えます。あとから写真を追加したり、削除したり、並び替えたりできるようにもしています。
OCRで「あとから探せる」板書にする
BanShowZで特に大事にしたのは、写真をただ保存するだけで終わらせないことです。
黒板の写真は、見返すだけなら便利ですが、検索には向きません。そこで、AI OCRを使って、写真の中に書かれた文字をテキストとして取り出せるようにしました。
OCRとは、画像の中の文字を読み取る仕組みです。BanShowZでは、板書写真を保存したあとに、黒板の文字を読み取り、記録の中にテキストとして残します。これにより、あとから検索画面で「リーダー」「分数」「年度はじめ」のような言葉を入力して、関連する板書を探せるようになります。
板書は横書きだけでなく、縦書きや混ざった書き方になることもあります。そのため、読み取りの処理では、黒板らしい書き方をできるだけ考慮するようにしています。
また、読み取り結果がうまくいかなかった場合に備えて、詳細画面から再OCRもできるようにしました。撮影条件や文字の薄さによって結果が変わることがあるので、やり直せることは実用上かなり大事です。
先生が毎日使いやすい画面にする
BanShowZの画面は、できるだけシンプルにしました。
全体は白基調で、スマホから見やすいレイアウトにしています。操作の中心になる色はティール系にして、選択中の学年や教科、ナビゲーションが分かりやすくなるようにしました。
ホーム画面では、上から順に次の操作ができます。
- 学年を選ぶ
- 一覧、カレンダー、教科別の表示を切り替える
- 月を移動する
- 教科で絞り込む
- 板書記録を開く
下のナビゲーションには、ホーム、記録、検索、設定を置いています。先生が授業後にスマホでさっと使うことを想定して、余計な画面遷移を増やさないようにしました。
写真の詳細画面では、黒板写真をタップして拡大表示できます。板書の細かい文字を確認したいときに、ピンチズームで見られるようにしています。
使った技術
BanShowZは Next.js で作っています。Next.jsは、Webアプリを作るための仕組みです。スマホのブラウザから使いやすいように、画面の表示とデータのやり取りを同じプロジェクトの中でまとめています。
画面は React と TypeScript で作りました。TypeScriptを使うことで、板書記録、画像、教科、学年などのデータを扱うときに、間違いを減らしやすくなります。
黒板写真の読み取りには Gemini を使っています。画像を送ると、黒板に書かれた文字を読み取り、検索に使えるテキストとして保存します。専門的にはOCRと呼ばれる部分ですが、ユーザーから見ると「写真の中身も検索できるようにするための機能」です。
写真の保存には、S3互換のクラウドストレージを使っています。黒板写真はサイズが大きくなりやすいので、アプリ本体とは分けて保存する構成にしました。
板書の情報、学年、教科、単元、メモ、OCRテキストなどは、データベースに保存しています。検索しやすくするため、メモとOCRテキストを対象にした全文検索も入れています。
公開先は Vercel です。Webアプリをすばやく公開でき、Next.jsとの相性も良いため、この構成にしています。
作ってみて感じたこと
このアプリは、派手な機能を詰め込むというより、現場で毎日続けられることを重視しました。
板書写真は、授業の記録としてかなり価値があります。ただ、撮った写真がスマホのカメラロールに埋もれてしまうと、あとから使いにくくなります。
BanShowZでは、写真を撮る、授業情報を付ける、OCRで検索できるようにする、という流れを1つにまとめました。これにより、授業後の小さな記録が、あとから振り返れる教材・引き継ぎ・改善メモになります。
今後は、より見やすい整理方法や、共有しやすい形も考えていきたいです。