教室で使えるかもしれないもの作り
作文の赤ペンで放課後が終わる。原稿用紙をなぞって返せる作文アプリ「オンライン原稿用紙 Pro」
🏫 はじめに
作文の授業でいちばん時間がかかるのは、書かせているあいだではなくて、集めたあとではないでしょうか。
三十数冊の原稿用紙を職員室まで運んで、一冊ずつ読んで、赤を入れて、次の日に返す。返したら直してまた出てくる。その二度目をいつ見るのか、机の上でだんだん分からなくなっていく。ここで往復が止まってしまうと、せっかく書いた子どもたちの文章が、直されないまま学期の終わりまで残ります。
「オンライン原稿用紙 Pro」は、その往復をぜんぶ端末の上で済ませてしまうために作りました。子どもたちは横書きの入力欄に打ち込むだけで、隣に縦書きの原稿用紙が組み上がります。先生は提出された作文の上を指やマウスでなぞって赤ペンを入れ、その場で子どもの画面に返せます。
https://online-manuscript-paper-pro.giga-school.com/
じつはこの連載の #6 で、同じ名前のアプリを紹介したことがあります。あのときは、書いた作文が先生の Google スプレッドシートに集まる作りでした。便利だと思って作ったのですが、使ってもらう手前で引っかかることの多いつくりでもありました。シートを用意して、共有の設定をして、列を名簿に合わせる。それに、先生のドライブに子どもたちの文章がずっとたまり続けます。
そこで今回、中身をまるごと作り直しました。スプレッドシートもデータベースも使いません。先生の端末と子どもの端末を直接つないで、作文をそのままやり取りします。先生が用意するのは、四桁の数字を黒板に書くことだけです。
📱 このアプリでできること
子どもが開くと、左に横書きの入力欄、右に縦書きの原稿用紙が出ます。打ち込んだ字はその場でマスに入っていきます。
原稿用紙のきまりは、こちらで勝手にやってしまうようにしました。題名は一行目の三マス目から。学年と名前は次の行の下のほうに寄せて、いちばん下から一マス空けます。行の頭に来てはいけない字は三十八種類、行の終わりに来てはいけない字は十種類を見ています。句読点のうしろに閉じかっこが続く十通りの組み合わせは、二文字を一マスに詰めて表示します。
このあたりを自動にしたのは、子どもたちに考えてほしいのはマスの使い方ではなく、書く中身だと思ったからです。紙の原稿用紙だと「ここに句点が来てしまった、どうしよう」で手が止まります。その時間を、文章のほうに回してほしいと思って作りました。
禁則処理は「追い出し」と「ぶら下がり」から選べるようにしました。追い出しはマス目がきれいに揃うので、清書に向きます。ぶら下がりは文章の切れ目が動かないので、原稿用紙の書き方そのものを教えたいときに向きます。どちらが正しいというものではないので、両方残しました。
子どもが使う画面のボタンや見出しには、漢字にふりがなを振っています。低学年でも自分で操作にたどりつけるようにするためです。ただし作文の本文と、先生用の管理画面にはふりがなを振っていません。本文に振ってしまうと、自分の書いた字がどう見えるのかが分からなくなるからです。
入力の手が止まって〇・六秒たつと、書いた内容は自動でその端末に保存されます。保存ボタンは、自分でそのタイミングを決めたいときのためのものです。
🔌 サーバーもアカウントもなく、四桁の数字だけでつながる
このアプリには、作文を預かるサーバーがありません。先生の端末と子どもの端末が、その場で直接つながります。
四桁の数字にしたのは、名簿を作らずに始められるようにしたかったからです。アカウントを配る作りにすると、転入や欠席のたびに名簿を直すことになります。授業の朝に「今日はこの番号」でつながるほうが、続けやすいと思いました。
そのかわり、正直に書いておかなければならないことが二つあります。
一つは、この四桁は宛先であって、合いかぎではないということです。番号を知っている人は誰でもそのルームに入れます。授業が終わったらタブを閉じて、ルームを閉じてください。
もう一つは、子どもがつないでいるあいだ、まだ提出していない下書きも先生の端末に届いて保存されているということです。先生の名簿に並ぶのは提出済のものだけなので、未完成の作文をうっかり開いてしまうことはありません。けれども、届いていないわけではありません。「書いている途中は先生には見えないよ」と説明すると、事実とちがってしまいます。届いたものは先生用設定の「全データを消去する」でまとめて消せます。
名前が空のままでは提出できないようにしました。それと、先生とつながっていないときも提出できません。送れていないのに提出済になってしまうのが、いちばん困る事故だと思ったからです。
✏️ 原稿用紙の上を、なぞって赤ペン
ここがこのアプリでいちばん作り込んだところです。作文の添削は、紙の上では「その字のそば」に書きます。同じことを画面でやりたかったので、コメント欄を別に用意するのではなく、原稿用紙のマスを直接なぞる形にしました。
タブレットでは、横のスワイプはページ送り、縦のドラッグは範囲の選択として扱うようにしました。同じ指の動きに二つの意味を持たせると必ず誤操作が出るので、方向で分けています。
赤線を消すのを子どもの操作にしたのは、直したかどうかを自分で決めてほしかったからです。先生が消してしまうと、読まなくても消えます。自分で消すなら、少なくとも一度は読むことになります。消したかどうかは先生の画面にも伝わって、その印は緑に変わります。
この差分の表示は、自分がいちばん助かると思って付けました。二度目に出てきた作文を最初から読み直すのは、正直つらいところです。どこを直したのかが色で分かれば、そこだけ見て「よし」と言えます。
名簿には、先生の手数を減らすための道具も付けました。
AI添削は、使いたい先生だけが使えるようにしました。Google の Gemini の鍵を自分で用意して、この欄に入れておくと、誤字の指摘と「考えを引き出す問いかけ」を作って、該当するところに赤ペンとして貼ってくれます。貼られたあとは手で書いた赤ペンと同じように直せますし、消せます。忙しい日は下ごしらえだけAIにやらせて、そのうえに自分の言葉を足す使い方を思って作りました。
AIに送るのは、学年とクラス、題名、本文だけです。子どもの名前は送りません。ただし本文の中にその子だと分かる書きかたがあれば、それはそのまま送られます。ここは運用のきまりを決めてからお使いください。
✨ 導入のメリット
三つのいいことが期待できます。
一つ目は、返すまでの時間が短くなることです。赤ペンはその場で子どもの画面に届くので、授業のうちに一往復できます。持ち帰る原稿用紙が減って、放課後に赤ペンを握る時間そのものが減ります。丸付けに追われる感じが薄くなるのが、いちばん大きいところだと思います。
二つ目は、子どもたちの推敲が「消す」から「直す」に変わることです。紙だと消しゴムで消すのが面倒で、書いたものをそのままにしがちです。画面なら順番の入れ替えも書き足しも軽い手間で済みます。しかも直した跡は差分で残るので、直したことそのものを先生が見て褒められます。書き直しが減点ではなく前進として扱えるようになれば、文章はもっと動くはずだと思っています。
三つ目は、始めるまでが軽いことです。アカウントも名簿もパスワード配布もありません。四桁の数字を黒板に書くだけで授業に入れます。準備に三十分かかる道具は、二回目が来ません。一分で始まる道具だから続けられる、というのを大事にして作りました。
🛠️ 【管理者向け】導入手順
このアプリは静的なファイルだけでできています。ビルドの作業も、サーバーの用意も要りません。
- リポジトリの中の十個のファイルを用意します。index.html、offline.html、manifest.webmanifest、sw.js、favicon.png、そして icons フォルダの中の五枚です。
- それを GitHub Pages、または学校内のWebサーバーにそのまま置きます。
- 公開されたアドレスを開けば、その時間から使えます。
HTTPSでの公開をおすすめします。ホーム画面への追加とオフラインでの起動、それに端末どうしの直接通信は、いずれもHTTPSが前提になっています。
校内のフィルタリングを通す場合は、次のアドレスを許可してください。情報担当の先生にそのまま渡せる形にしておきます。
- online-manuscript-paper-pro.giga-school.com（アプリを置いている場所です。自校のサーバーに置く場合はそのアドレス）
- cdn.tailwindcss.com
- cdn.jsdelivr.net
- cdnjs.cloudflare.com
- unpkg.com
- fonts.googleapis.com
- fonts.gstatic.com
- 0.peerjs.com（端末どうしをつなぐときの仲介に使います）
- stun.l.google.com（UDPの19302番。相手の端末を見つけるのに使います）
- generativelanguage.googleapis.com（AI添削を使うときだけ必要です）
作文の中身は、上の仲介の場所を通りません。端末どうしのあいだを直接流れます。作文が保存されるのも、それぞれの端末のブラウザの中だけです。開発者のサーバーには何も送られません。
そのぶん、次の点は運用でカバーしていただく形になります。
先生モードは、はじめは誰でも入れる状態です。先生用設定でパスワードを決めると、次からは入るときに聞かれるようになります。子どもに配る端末では、配る前に必ず設定してください。
データはブラウザの中だけにあります。先生のパソコンで閲覧履歴やサイトデータを消すと、預かっていた子どもたちの提出も消えます。長く残したいものは印刷するか、ファイルに書き出して保管してください。共用の端末で別の子のプロファイルに切り替わった場合も、前の子のデータは出てきません。
iPad の Safari には、七日間使わないと保存データを消す仕組みがあります。ホーム画面に追加しておくと受けにくくなります。大事な作文はファイルに書き出しておくのが確実です。
上限のめやすも書いておきます。一つの端末に入る量はおおむね五メガバイトです。作文は一文字あたり数バイトなので学級運用で届くことはほぼありませんが、先生の端末には全員分がたまる点だけ気をつけてください。同時につながる人数は一学級ぶんを想定して作っています。四桁の数字はまれに他の教室と重なりますが、重なりを見つけたときは自動で別の番号を取り直します。授業中は画面に出ている番号を都度確かめてください。仲介の場所は共用の無料サーバーなので、提供元の都合で止まることがあります。止まったときはファイルの受け渡しで代わりができます。
はじめて開くときだけ、画面を組み立てるための部品を数メガバイト読み込みます。校内のWi-Fiが混んでいると最初の表示に少し待たされますが、二回目からは端末の中から起動します。
AI添削を使う場合、Gemini の鍵は先生ご自身でご用意ください。鍵は先生のブラウザの中だけに残ります。利用の規約と料金はご自身でお確かめのうえお使いください。
📖 【利用者向け】使い方のガイド
先生の手順です。
- アプリを開いて、右上の「先生用」を押します。
- 左の「通信ルームを開始」を押します。
- 出てきた四桁の数字を黒板やスクリーンに書きます。
- 子どもが提出すると、左の名簿に並びます。名前を押すと右に原稿用紙が出ます。
- 直したいところをドラッグして、コメントを書いて「追加する」を押します。
- 「再提出」か「完了」を押します。つながっている子の画面には、その場で届きます。
子どもの手順です。
- アプリを開いて、上の「先生と接続」を押します。
- 先生に教えてもらった四桁の数字を入れて、「接続する」を押します。
- 題名、学年とクラス、名前を入れます。
- 本文を書きます。手が止まると自動で保存されます。
- 書けたら「提出」を押します。
返ってきたあとの手順です。
- 右上のベルに数字が付いたら、ベルを押します。
- 一覧から「確認する」を押すと、その作文が開きます。
- 原稿用紙の赤いところを押して、先生の言葉を読みます。
- 直したら「修正完了」を押して、赤い印を消します。
- もう一度「提出」を押します。
授業のあいだ、先生はタブを閉じたり再読み込みしたりしないでください。ルームがそこで切れてしまいます。切れているあいだに付けた赤ペンは、その子が次につないだときに自動で届きます。前の時間の続きも、つなぐだけで最新の状態になります。
📝 まとめ
作文の指導でいちばんやりたいのは、その子が書いた一文を読んで、そこに何を返すか考えることだと思います。集める、並べる、探す、配る。そこに時間を取られているうちに、肝心の一文を読む余力がなくなっていくのがつらいところでした。
このアプリでやろうとしたのは、集めるところと配るところを短くすることです。効率をよくするのが目的ではありません。短くなったぶんを、その子の文章の前に座る時間に回したいというだけです。差分の色を見ながら「ここ、直したんだね」と一言だけ返せる。そういう時間が少しでも増えたらいいなと思って作りました。
はじめの一歩は、四桁の数字を黒板に書くところからです。うまくいかない日があっても、それは先生のせいではありません。道具のほうを直せばいい話です。
一歩踏み出そうとする先生を、私はいつでも全力で応援しています。
