Margins & Insights: A Shared Classroom Whiteboard Built with Google Apps Script Alone (Quota-Aware Design, WebSocket-Free Sync, and Position-and-Zoom Bookmarks) (Educational Transformation 004)

This technical note describes Margins & Insights (Japanese: 余白と気づき, Yohaku to Kizuki), a shared whiteboard on which every student in a class can write at once, built using only Google Apps Script (GAS) and a Google spreadsheet. It runs on an ordinary Google Workspace account: no Google Cloud project, no cost and no administrator request. Students sign in with their university Google account and need to install nothing. The note explains three design choices. First, the web app runs as the accessing user, so that a class of about 50 does not exhaust one teacher's execution quota (GAS allows 30 simultaneous executions per user). Second, synchronisation works without WebSockets: changes carry per-room sequence numbers issued under LockService, recent changes are served from a CacheService log so routine polls do not read the sheet, and the browser adapts its polling interval (2–10 s) and pauses when idle. Third, bookmarks borrow the conventions of map apps and Minecraft waypoints: a pin visible to everyone on the board, shareable as a link that carries both position and zoom level. The note also records GAS-specific pitfalls found while porting (JavaScript comments stripped from HtmlService output, the hidden attribute not hiding flex panels, text boxes collapsing to one character wide, version-pinned deployments), the trade-off of giving students edit access to the spreadsheet and how it is handled, limitations, and step-by-step guides for teachers and students. The complete source code is included in two editions with identical server logic: an English interface (TN-YK-01_EN_v1.0_files.zip) and a Japanese interface (TN-YK-01_JP_v1.0_files.zip). Each contains Code.gs, Board.html, Lobby.html, appsscript.json and a README. Testing: both editions pass 18 automated checks on a test bench that runs the real Code.gs against Node.js fakes of Google's services, driven by Playwright with several simultaneous browsers. The author deployed the Japanese edition on the University of Tokyo's Google Workspace and confirmed that it works in daily use; three of the pitfalls above were found there. Not yet tested: 50 people writing simultaneously on real Google, lock waiting times at that scale, use in an actual class, and access from accounts outside the organisation. The English edition has been tested on the test bench only. AI assistance: the design discussion, source code, test bench, interface text and this note were produced with the assistance of Claude (Anthropic). The author set the goals and constraints, decided the design priorities, deployed and tested the board in the real Google Workspace environment, reported the issues found there, and reviewed the results. Motivation: the board was built with no budget and no authority to request a new university system. An earlier prototype ran inside Claude with AI features that pose questions about the notes on a page, but it required every student to have a Claude account; this GAS edition removes the AI features so that any class with Google Workspace can use it. This is an unofficial, independent work, not affiliated with or endorsed by Google, Anthropic, Apple, Mojang or Miro. Google's quotas and behaviour may change without notice. Use at your own risk. ―――――――――――――――――――――――――――――――― 本テクニカルノートは、授業中に学生全員が同時に書き込める共有ホワイトボード「余白と気づき」(英語名 Margins & Insights)について記録したものです。Google Apps Script(GAS)とGoogleスプレッドシートだけで作り、通常のGoogle Workspaceアカウントで動きます。Google Cloudのプロジェクト、費用、管理者への申請は要りません。学生は大学のGoogleアカウントでログインするだけで、インストールも不要です。 設計上の工夫を3つ説明します。1つ目は、ウェブアプリを「アクセスしているユーザーとして実行」し、50人規模の授業でも教員一人の実行枠を使い切らないようにしたこと(GASの同時実行は1ユーザーあたり30件まで)。2つ目は、WebSocketを使わない同期です。変更にはLockServiceで部屋ごとの通し番号を振り、最近の変更はCacheServiceの変更ログから返すため、ふだんの確認ではシートを読みません。ブラウザは確認の間隔を2〜10秒の間で調整し、操作がなければ一時停止します。3つ目は、地図アプリとマインクラフトのウェイポイントの作法を取り入れた「しおり」です。ボードの上に全員に見えるピンが立ち、位置と拡大率を含むリンクとして共有できます。 あわせて、移植中に見つかったGAS特有の落とし穴(HtmlServiceの出力からJavaScriptのコメントが消える、hidden属性でflexのパネルが隠れない、テキストボックスが1文字幅に縮む、デプロイがバージョン固定)、学生にスプレッドシートの編集権限を渡すことの引き換えとその対処、限界、教員用・学生用の手順を記しています。 コード一式は、サーバー側の仕組みが同じ2つの版を添付しています。画面が英語の版(TN-YK-01_EN_v1.0_files.zip)と、画面が日本語の版(TN-YK-01_JP_v1.0_files.zip)です。それぞれ Code.gs、Board.html、Lobby.html、appsscript.json、README を含みます。 試験:本物の Code.gs を、Googleのサービスをまねる Node.js の偽物の上で動かし、Playwright で複数のブラウザを同時に操作する試験環境で、両方の版が18項目すべてに通っています。著者は東京大学のGoogle Workspaceに日本語版を公開し、日常的に使えることを確かめました。上記の落とし穴のうち3つは、この環境で見つかったものです。未確認なのは、本物のGoogle上で50人が同時に書く試験、その規模でのロックの待ち時間、実際の授業での使用、組織外のアカウントからの利用です。英語版は試験環境でのみ確かめています。 AIの利用:設計の検討、コード、試験環境、画面の文言、および本ノートは、Claude(Anthropic)の支援を受けて作成しました。著者は、目標と制約の設定、設計の優先順位の決定、本物のGoogle Workspace環境での公開と試験、そこで見つかった問題の報告、結果の確認を行いました。 動機:予算も、大学のシステムを申請する権限もない中で作りました。先に作った試作版はClaudeの中で動き、付箋の内容から問いを出すAIの機能もありましたが、学生全員にClaudeのアカウントが必要でした。このGAS版はAIの機能を外し、Google Workspaceがあればどの授業でも使えるようにしたものです。 本ノートとコードは非公式の個人の成果物であり、Google、Anthropic、Apple、Mojang、Miroとは関係がなく、承認を受けたものでもありません。Googleの利用枠や動作は予告なく変わることがあります。自己責任でご利用ください。