教室で使えるかもしれないもの作り

「赤ペンの束を持ち帰る夜」をなくす。クラスの作文が一冊の本になるアプリ「オンライン出版社 Pro」

オンライン出版社 Pro を開く コードを見る

🏫 はじめに

作文の時間のあと、こんなことになっていませんか。

原稿用紙を集めて、放課後に赤ペンで直す。次の日に返して、直したものをまた集める。清書用の紙をもう一度配る。ようやく全員ぶんが終わったころには、子どもたちの気持ちは次の単元に移っていて、あの作文がどうなったのかを覚えているのは先生だけ。しかも書いたものを読んだのは、先生ひとりです。

清書もむずかしいところです。せっかくいい文章が書けても、マス目に写しなおすだけで一時間が消えていきます。絵を描かせたいけれど、貼るとかさばりますし、印刷にも回せません。

「オンライン出版社 Pro」は、そのあたりをまるごと引き受けるつもりで作ったWebアプリです。子どもたちは端末で書き、打った先から画面の中の縦書き原稿用紙に組まれていきます。先生はその原稿用紙の上を指でなぞって赤を入れ、子どもたちはその赤を読んで直します。仕上がった作品は「みんなの作品だな」に一冊の本として並び、クラスのだれもが読んで感想を送れます。

配布はGitHubからです。

https://github.com/GIGAyama/Online-Publisher-pro

学校のGoogleアカウントがあれば動きます。サーバーを借りる必要も、書き出しの作業もありません。2つのファイルをコピーして貼るだけです。くわしくは後半の導入手順に書きました。

児童モードの初期画面
児童モードの初期画面。左が書くところ、右が原稿用紙のプレビューです。

📱 このアプリでできること

画面は3つのモードでできています。子どもたちが書く「児童モード」、読み合う「みんなの作品だな」、先生が添削する「先生用」。上のバーの色がオレンジ、緑、赤と変わるので、いまどこにいるのかがひと目で分かります。児童モードと作品だなはログインなしで使えて、先生用だけパスワードがかかります。

まずは書くところから。だいめい、がくねん・くみ、なまえ、そして本文。打った先から右側の原稿用紙に流れこんでいきます。マス目に文字が入っていくようすが見えるので、あと何行で終わるのかが子どもたちにも分かります。入力欄の右下には、改行を除いた文字数が出ます。四百字詰めであと何マス、という話がそのままできます。

本文を書いたところ
打った文字が右の原稿用紙にそのまま組まれていきます。この時点で400文字です。

原稿用紙は20文字20行と、15文字16行の2種類から選べます。高学年と低学年で使い分けてください。行の頭に句読点が来てしまったときの処理も、次の行に送る「追い出し」と、マスの外に小さく出す「ぶら下がり」から選べます。ここは先生の指導のしかたに合わせるところなので、決め打ちにしませんでした。選んだ設定はその端末の中に残るので、一度選べば次からそのままです。

用紙の設定
歯車のボタンから開く用紙の設定です。

保存ボタンはありません。作らなかった、というほうが正確です。子どもが押し忘れて一時間ぶんが消えた、という事故をなくしたかったからです。入力が20秒止まると自動で保存され、タブを閉じたり別のアプリに切り替えたりした瞬間にも保存されます。いまどの状態なのかは本文の下に出ます。編集中、保存中、クラウド保存済、そして通信が切れているときと失敗したとき。切れているあいだは端末の中にいったん置いておいて、つながった時点で自動で送ります。

Chromebookは、ほかのタブを開くと使っていないタブを黙って捨ててしまうことがあります。捨てられる直前にも書きかけを退避させているので、そこで消えることもありません。

クラウド保存済の表示
本文の下に出る保存の状態。ここが「クラウド保存済」なら、もう手もとを離れています。

挿絵も入れられます。写真でも、お絵かきソフトで描いた絵でもかまいません。置きたいページの番号、大きさ、切り抜きの形を指定します。大きさは30パーセントから150パーセントまで、形はしかく、かどまる、まる、ふわふわ、ひしがた、ほしがた、はっかくけい、チケットの8種類です。送る前に幅800ピクセルまで自動で縮めるので、写真をそのまま選んでも重くなりません。

挿絵の設定
挿絵の置きかたを決めるところ。形を選ぶと、プレビューにすぐ反映されます。

プレビューは原稿用紙と本の2種類です。本モードにすると、1ページ目が表紙になり、題名と学年と名前が縦に組まれます。挿絵を置いたページは、絵の下に文章が収まるように1行の文字数が自動で減ります。マス目の中では見えてこなかった「作品らしさ」が、ここで急に立ち上がってきます。

本モードのプレビュー
表紙と、挿絵の入った2ページ目。

紙で残したいときは印刷です。原稿用紙はA4横に見開きで、まん中に綴じ代が入り、そこに題名とページ番号が縦に入ります。二つ折りにすればそのまま冊子になります。ブラウザによってはマス目や赤線を「背景」とみなして刷ってくれないので、色を必ず刷るように指定してあります。

A4横の印刷
印刷の紙面。綴じ代に題名とページ番号が入ります。

書き上がったら「提出する」を押します。提出した作品は、先生が返すまで編集できません。書き直したくなったら「コピーして新しく書く」で、元の作品を残したまま新しく書きはじめられます。

提出したあと
提出すると入力欄が閉じ、編集できないことがはっきり分かるようになります。

作品は、下書き、提出済、再提出、完了の4つのどれかの状態にあります。子どもたちが直せるのは下書きと再提出のときだけで、提出済と完了のあいだは手が入りません。完了にできるのは先生だけです。子どもが自分で「これでおしまい」と決められない作りにしたのは、書いたものを先生が必ず一度は読む、という流れを崩したくなかったからです。

✍️ 原稿用紙の上に、そのまま赤を入れる

ここがこのアプリでいちばん時間をかけたところです。

先生用のボタンを押すと、パスワードを聞かれます。最初のパスワードは admin で、あとから変えられます。Googleへのログインは要りません。共用のパソコンでも、ここだけ通れば使えます。

先生用ログイン
先生用ログイン。子どもたちの端末からは、この先には入れません。

ログインすると、提出物の一覧と、選んだ作品の原稿用紙が並びます。左の一覧には名前と題名と状態が出ます。提出済が青、再提出がオレンジ、完了が緑です。名前でも題名でも本文でも検索できますし、完了以外だけを出す、提出済だけを出すといった絞りこみも5種類から選べます。日づけでも絞れるので、「先週の分だけ」という見かたもできます。

提出一覧と添削画面
左が提出一覧、右が選んだ作品の原稿用紙です。

赤を入れるには、原稿用紙の文字をなぞります。パソコンならマウスで、タブレットなら長押ししてから指を滑らせます。手を離すとコメントの入力欄が出るので、そこに書きます。

添削コメントの入力
なぞった範囲にコメントを書きます。

コメントを追加すると、その範囲に赤い線が引かれます。これは先生の画面だけの話ではありません。同じ場所が、子どもの画面の原稿用紙にも出ます。紙を返して、返ってきて、という往復がなくなります。

赤線が入った原稿
2か所に赤が入りました。ほめるところに赤を入れてもかまいません。

子どもたちは、赤いところを押すと先生のコメントを読めます。直し終わったら「修正完了」を押すと、その赤線が消えます。どこを直せばいいのかが自分で分かり、直したという手ごたえも残ります。消しゴムで消した跡が残らないのは、少し寂しい気もしますが、書き直しのハードルはずいぶん下がるはずです。

子どもの画面に届いた先生のコメント
子どもの画面。赤いところを押すと、先生のコメントが出ます。

直したあとに先生がいちばん知りたいのは、どこが変わったのかです。「差分」に切り替えると、書き足したところが緑、消したところがうすい赤で出ます。全部を読み直さなくても、直したところだけを見て返事ができます。

差分表示
書き足したところが緑で出ます。長い作文でも、書き出しから終わりまで全部が読めます。

AIに下読みをさせることもできます。GoogleのGeminiに、誤字や表現の直しどころを出させる機能です。使うときだけAIのキーを入れる形にしてあり、入れなければAIはいっさい動きません。出てきた提案は先生の赤と同じ形で原稿用紙に並ぶので、要らないものはその場で消せます。まとめて何人ぶんも流すこともできますが、一度に20件を超えると処理が途中で止まりやすいので、10件ずつに分けるのが安全です。

まとめてAI添削の確認
チェックを付けた作品をまとめてAIに読ませるところ。実行する前に確認が出ます。

一覧と原稿用紙を行ったり来たりするので、キーボードのショートカットも入れました。上下で子どもを切り替え、Cで完了、Rで再提出、Vで表示の切り替え。ぜんぶで11個あります。はてなマークのキーで一覧が出ます。

ショートカット一覧
先生用の画面で使えるショートカットです。

📚 書いた作文が、みんなで読める一冊の本になる

提出された作品と、完了になった作品は「みんなの作品だな」に並びます。ログインは要りません。背表紙のように立った本が、教室の学級文庫のように並びます。

みんなの作品だな
提出された作品が本として並びます。

一冊を選ぶと、画面いっぱいのリーダーが開きます。左右のキーでも、指のスワイプでもページがめくれます。縦書きなので、右から左へ。表紙をめくると本文がはじまります。

全画面のブックリーダー
全画面のリーダー。右にコメント欄があります。

読んだら、その場で感想を送れます。名前を書いて一言。作品には届いた感想の数がバッジで出るので、自分の作品に誰かが何か書いてくれたことが、すぐに分かります。

書いたものに読み手ができる、というのがこの機能の全部です。先生ひとりが読んで返すのと、クラス全員が読めるのとでは、書くときの構えが変わってくるのではないかと思っています。

感想を送ったあと
感想を送ると、すぐに右側に並びます。

スマートフォンやタブレットの縦画面でも同じことができます。左右が並ばないぶん、いちばん上の「かく」と「プレビュー」で切り替えて、それぞれを全画面で使います。家に持ち帰った端末でも、続きが書けます。

スマートフォンのかく画面
スマートフォンの「かく」。
スマートフォンのプレビュー
同じ端末の「プレビュー」。切り替えて使います。

✨ 導入のメリット

三つのいいことが期待できます。

一つ目は、赤ペンを持ち帰る夜が減ることです。丸付けそのものが消えるわけではありませんが、集める、配る、また集める、という往復がなくなります。直したところが緑で出るので、二度目からは全文を読み直さずに済みます。空いた時間は、書けずに止まっている子のところへ行く時間にできます。

二つ目は、清書に使っていた一時間が、書く時間になることです。マス目に写しなおす作業は、字をていねいに書く練習にはなりますが、文章を良くする時間ではありません。打ち直せば原稿用紙のかたちになるので、その一時間を、もう一度読み返して直す時間に回せます。

三つ目は、書いたものに読み手ができることです。提出した作品はクラスの本だなに並び、だれもが読んで感想を送れます。だれかに読まれると分かっているときの文章は、先生だけに出す文章とは変わってくるのではないかと思います。少なくとも、そうなればいいと思って作りました。

🛠️ 【管理者向け】導入手順

用意するものは、学校のGoogleアカウントがひとつだけです。サーバーの契約も、月々の費用もかかりません。

  1. Google Apps Script のサイトを開き、新しいプロジェクトを作ります。
  2. 最初からある「コード.gs」の中身を全部消して、リポジトリの code.gs を貼りつけます。
  3. 左の「+」からHTMLファイルを追加し、名前を index にして、リポジトリの index.html を貼りつけます。
  4. 右上の「デプロイ」から「新しいデプロイ」を選び、種類を「ウェブアプリ」にします。
  5. 実行するユーザーを自分にして、アクセスできるユーザーを「全員」または「Googleアカウントを持つ全員」にします。学校の方針に合わせてください。
  6. 初回だけ「このアプリは確認されていません」という警告が出ます。詳細を表示から、自分のアプリなので許可します。
  7. 発行されたURLを開いて、画面が出ることを確かめます。
  8. 「先生用」を押し、admin でログインします。
  9. 歯車のボタンからシステム設定を開き、パスワードを必ず変えます。AI添削を使うなら、ここにAIのキーも入れます。
システム設定
先生用の歯車から開くシステム設定。パスワードの変更とAIのキーはここです。

情報担当の先生に聞かれることを、先に書いておきます。

校内のフィルタリングで、次のアドレスを通してください。ふさがれていると画面が真っ白になります。撮影のためにこのアプリを動かした環境でも、ここがふさがれていて表示できませんでした。

データの置き場所は、手順4で「実行するユーザー」にしたアカウントのマイドライブです。作文はスプレッドシートに、挿絵の画像はドライブのフォルダに入ります。どちらも最初に開いたときに自動で作られるので、事前の準備は要りません。挿絵のフォルダは、アプリの中で画像を表示するために「リンクを知っている人は見られる」設定になります。顔が写った写真を挿絵にするかどうかは、ここを踏まえて決めてください。

名前を書く欄があります。学級の中だけで使うなら、出席番号や下の名前だけにするという運用もできます。児童モードにログインはないので、「開く」の一覧にはそのアプリに入っている全員の作品が並びます。同じ学級や学年で使うことを前提にした作りです。

作品を消すボタンは、アプリの中にあえて置いていません。子どもが押しまちがえて一時間ぶんを消してしまうことのほうが、こわいと考えたからです。どうしても消したいときは、データが入っているスプレッドシートを開いて、その行の「削除日時」の欄に日づけを入れます。それだけでアプリの画面には出なくなり、中身は残ります。

共用の端末で使うときは、用紙の設定と書きかけの下書きがその端末の中に残ることを覚えておいてください。次に使う子の画面に前の子の書きかけが出ることがあります。使いはじめに「新規」を押す、と決めておけば消えます。

1クラス40人が同時に使うぶんには問題ありません。提出が一斉に集中すると数秒待つことがありますが、データが壊れることはなく、もう一度押せば保存されます。学年3クラスが同時となると、提出の時間をずらすことをおすすめします。

アプリらしく使いたいときのために、ホーム画面に置くための入り口も同梱しています。最初に一度だけURLを入れると、次からはアイコンから開けます。子どもたちに長いURLを毎回入力させずに済みます。

ホーム画面に置くための入り口
最初の一回だけURLを入れる画面。あとはアイコンから開きます。

📖 【利用者向け】使い方のガイド

子どもたちに配る手順です。

  1. 先生から教えてもらったURLを開きます。
  2. 「だいめい」「がくねん・くみ」「なまえ」を入れます。
  3. 大きな欄に本文を書きます。右の原稿用紙に、打った文字がそのまま出ます。
  4. 絵を入れるときは「挿絵」を押して、画像を選び、置きたいページの番号を入れます。
  5. 保存は押さなくてかまいません。手が止まると自動で保存されます。
  6. 書けたら「提出する」を押します。
  7. 先生から赤が入ったら、赤いところを押してコメントを読みます。
  8. 直したら「修正完了」を押して、赤線を消します。
  9. ほかの人の作品は「みんなの作品」から読めます。感想も送れます。

続きを書くときは「開く」を押して、自分の作品を選びます。前に書いたものがそのまま出てきます。

保存した作品を開く
「開く」の一覧。状態と、最後に保存した時刻が出ます。

先生の手順です。

  1. 右上の「先生用」を押し、パスワードを入れます。
  2. 左の一覧から子どもを選びます。上下のキーでも切り替えられます。
  3. 原稿用紙の文字をなぞって、コメントを書きます。
  4. 直してほしいときは「再提出」を、これで仕上がりなら「完了」を押します。
  5. 直ってきた作品は「差分」に切り替えると、変わったところだけが色で出ます。
  6. まとめて印刷したいときは、一覧のチェックを付けてから印刷のボタンを押します。

📝 まとめ

このアプリで消えるのは、赤ペンを持ち帰る夜と、清書に使っていた一時間です。作文を教える仕事そのものが軽くなるわけではありません。どこをどう直すと良くなるのかを見つけて、その子に伝わることばで返す。そこはやはり先生の仕事です。

ただ、集める、配る、また集める、という往復に取られていた時間は返ってきます。そのぶんを、書けずに止まっている子のとなりに座る時間に使えたら、と思ってこれを作りました。

そして、書いたものが本になって並び、だれかが読んで感想を送ってくれる。それを見た子が、次はもう少し書いてみようと思う。そういうことが起きたらうれしいです。

うまくいくかどうかは、正直なところ、やってみないと分かりません。それでも、試してみる価値はあると思っています。

一歩踏み出そうとする先生を、私はいつでも全力で応援しています。

オンライン出版社 Pro を開く