勉強会の毎回の資料と議事メモを 1 か所にためておく「勉強会の本棚」のような Web アプリを作りました。
回ごとに 1 ページのレジュメがあり、当日は会場のスクリーンに QR を映すだけで、参加者が自分のスマホからそのページに書き足せます。
ログイン不要の DEMO を公開しているので、記事を読みながら触ってみてください（記事の最後にリンクがあります）。
参加者に書いてもらうまでが、意外と遠い
勉強会を開くと、議事メモや質問、「次回やりたいこと」を参加者にも書き足してもらいたくなります。
いちばん手近なのは Google ドキュメントですが、ここで当日に手間取ります。
- 参加者が Google アカウントでログインしていないと、編集できない（または「匿名のユーザー」だらけになる）
- 共有設定を「リンクを知っている全員が編集可」にすると、リンクがどこまで出回るか気になる
- メールアドレスで招待しようとすると、当日来た人のアドレスを集めるところから始まる
結局「メモは主催者がまとめて書き、あとでチャットに貼る」に落ち着きがちです。
すると今度は、スライドや資料のリンクがチャットに流れ、数週間後に「前回の資料どこだっけ」とさかのぼることになります。
作ったもの: 回ごとのページが並ぶ「勉強会の本棚」
このアプリでは、勉強会の 1 回分が 1 ページです。項目は「日付・回数・本文」の 3 つだけで、本文は Markdown（# で見出し、- で箇条書き、のように記号で書式を付ける書き方）で書きます。
回を重ねるとページが新しい順に並び、年ごとの引き出しや本文の検索で過去の回をたどれます。
もともとは、自分の勉強会で参加者と資料を共有するための、単純な Markdown エディターの Web システムとして作りました。
使っているうちに「参加者が何人いても、QR からその回のページだけを開いて書けたら便利だ」と考え、共有ノートの機能を足しています。
参加者はアカウント不要。QR を映すだけ
主催者は、その回のページの「共有」から、編集できるリンク（URL と QR）を発行します。QR は大きく映す表示があるので、会場のスクリーンに出しておけば、参加者はスマホのカメラで読むだけです。
参加者に必要なのは、最初に名前を 1 回入れることだけです。アカウントの登録も、アプリのインストールもありません。
見えるのはリンクを発行したその 1 回分だけで、ほかの回や主催者の画面には入れません。閲覧だけのリンクも別に発行できるので、「欠席者には読むだけ」という分け方もできます。
誰がどこを書いたか残り、誰の書き込みも消えない
参加者に書いてもらうときに心配なのは、うっかり消されることと、誰が書いたか分からなくなることです。
このアプリは保存のたびに 1 版ずつ履歴を残します。版ごとに「誰が・いつ・何行増やして何行減らしたか」が記録され、前の版との差分を色分けで見られます。主催者は、どの版にでも「この版に戻す」ことができます。
数人が同時に書いていても、保存のときにまとめます。考え方は次のとおりです。
- 自分がページを開いたときの版を覚えておく
- 保存するとき、その間に別の人が保存していたら、「開いたときの版」「相手の最新」「自分の内容」の 3 つを行ごとに比べる
- 別々の所を書いていたなら、両方の変更を自動で取り込む
- 同じ所を書いていたら保存をいったん止め、「相手を優先」「自分を優先」「両方を並べて残す」から選んでもらう
相手を優先した場合も、自分が書いた内容は履歴に残ります。どちらを選んでも、書き込みが黙って消えることはありません。
打った文字がその場で相手の画面に出る「リアルタイムの同時編集」ではなく、保存のときにまとめる方式です。勉強会のメモのように、各自が自分の気づきを数行ずつ書き足す使い方なら、これで十分に回ります。そのぶん仕組みが小さく、自分のサーバーでも動かしやすくなっています。
リンクを貼るだけで、資料が本文の中に並ぶ
勉強会の資料は、スライド、動画、PDF、出欠のフォームとばらばらになりがちです。このアプリでは、本文にリンクを書くだけで、その行のすぐ下に中身がカードで展開されます。
## 今日の資料
- スライド: https://docs.google.com/presentation/d/xxxx
- 参考動画: https://www.youtube.com/watch?v=xxxx
- 出欠フォーム: https://docs.google.com/forms/d/xxxx
展開できるのは次のものです。
- Google ドキュメント・スプレッドシート・スライド・フォーム、YouTube
- PDF（ページ送りで読める）
- 画像（クリックで拡大）
- 音声（mp3 など）・動画（mp4 など）のプレイヤー
主催者がアップロードした添付ファイルも、画像・PDF・音声・動画・Markdown・テキストなら、ダウンロードせずにページの中で開けます。
当日のスライドも、参考の動画も、出欠の状況も、その回のページを開けば全部そろっているので、欠席した人や後から入った人も 1 ページでたどれます。
この展開の部分は、別のシステムのために作った Google ファミリーのリンク展開、PDF・画像・Markdown の表示、音声・動画のプレイヤー埋め込みを流用しています。ここまで種類の多い資料をそのまま埋め込めるツールは、今のところあまり見かけないのではないかと思っています。
外部サービスではなく、自分のサーバーに置ける
Notion や Google ドキュメントは便利ですが、大学のゼミや社内の研修では「資料を外部のサービスに置けない」こともあります。
このアプリは Python の Flask と SQLite（ファイル 1 つで済むデータベース）で作った小さな Web アプリなので、手元のサーバーや社内のマシンに置いて動かせます。データはそのサーバーの中だけにあり、参加者のアカウントを外部のサービスに作る必要もありません。
当日の流れはこう変わる
- 準備: 前の回のページをコピーして、今回の資料のリンクを貼っておく
- 当日: QR を映して「名前を入れて書いてください」と言うだけ。アカウントの確認も招待もいらない
- 終わった後: 資料もメモも、その回のページに残っている。チャットをさかのぼらなくてよい
- 心配ごと: 誰が書いたかは履歴で分かり、消されても主催者が戻せる
DEMO で触ってみてください
ログイン不要の DEMO を用意しました。[DEMO を始める] を押すと自分専用の部屋ができ、「プログラミング勉強会」と「雑学研究会」のサンプルが入った状態で始まります。
- 主催者として部屋に入り、帯の [参加者として開く] で QR を出す
- スマホで QR を読む（または別のタブで開く）と、参加者として名前を入れて書ける
- 両方から書いて保存し、編集履歴で「誰がどこを書いたか」を見る
部屋は 30 分で自動的に消え、[全部消す] でいつでもすぐに削除できます。サンプルの回には、Google のスライドやフォーム、YouTube の埋め込みも入れてあります。
DEMO: https://tools.systemengineer-yousystem.jp/studygroup-demo/
使用技術: Python, Flask, SQLite, SQLAlchemy, Markdown, EasyMDE, Bootstrap, PDF.js