FLIP

FLIP（Freehand & Letters, Instantly Presented）は、授業やセミナーにおいて、学生がスマートフォンから手書きまたはテキストで回答を送信すると、教員の画面にリアルタイムでグリッド状に一覧表示される回答収集・提示ツールである。WebRTC DataChannelにより各端末からストローク座標や文字列データを集約するだけで動作するため軽量であり、ルームIDを共有するだけでブラウザから即座に参加できる。

クイズ番組のフリップボードのように、学生全員の回答が教員の画面にタイルとして並び、書いている途中の様子もリアルタイムで確認できる。教員はプロジェクターへの画面切り替えタイミングを自分でコントロールすることで、「はい、やめ！」のタイミングで一斉に回答を公開するといった演出が可能である。匿名モードと記名モードを切り替えることで、場面に応じた柔軟な運用ができる。

概要

FLIPは、P2P（Peer-to-Peer）技術を使用したリアルタイム回答収集・提示ツールである。サーバーを必要とせず、教員と学生のブラウザがWebRTC DataChannelを通じて直接通信を行う。各端末から送られるデータは手書きのストローク座標やテキスト文字列であり、軽量に動作する。

授業、セミナー、ワークショップ、研修など、学生や参加者の回答をリアルタイムに収集し、一覧で提示したい場面で活用できる。教員は学生が回答を書いている途中の様子を手元の画面で確認しつつ、プロジェクターに映すタイミングを自分でコントロールできる。

特徴

• サーバー不要 — WebRTC DataChannelによるP2P直接通信のため、専用サーバーを用意する必要がない
• ブラウザ動作 — 専用アプリケーションのインストールが不要で、ブラウザだけで動作する
• リアルタイム一覧表示 — 学生の回答が書かれている途中も含めて、教員画面にグリッド状のタイルとして一覧表示される
• 手書き＋テキスト対応 — 学生は手書き（指で描画）とテキスト入力を自由に切り替えて回答できる
• 匿名／記名切り替え — 教員が匿名モードと記名モードを切り替えられる。匿名モードでは回答者名が非表示になる
• 繰り返し利用 — リセット操作で全員の回答をクリアし、次の問題にすぐ移行できる。1回の授業で何問でも繰り返せる
• 簡単参加 — ルームID共有、QRコード、URLパラメータの3つの方法で学生を招待できる
• 最大30人 — 一覧性を確保するため、1ルームあたり最大30人の学生が参加可能

システム構成

FLIPは、1台の教員端末（PC推奨）と、最大30台の学生端末（スマートフォン推奨）で構成される。学生の各端末が教員の端末に対して1対1のDataChannel接続を張るスター型トポロジを採用している。教員のブラウザが中央ハブとして機能し、全学生の回答データを集約してグリッド状のタイル一覧に反映する。PeerJSの公開シグナリングサーバーがICE候補の交換を仲介するが、接続確立後のデータ通信はP2P直接通信となる。

通信データの種類

FLIPでは、同一のDataChannel上で以下の種類のデータが送受信される。データ種別は type プロパティで判別される。

使い方

手順1：教員の準備

1. 教員用のデバイス（PC推奨）でFLIPにアクセスする
2. 「🎓 教員」をクリックする
3. 「ルームを作成」ボタンをクリックする
4. 表示されるルームID（英数字6文字）を学生に共有する

手順2：学生の接続

学生は、各自のスマートフォン・タブレット・PCで以下を行う。

1. FLIPにアクセスする（URLを直接入力、またはQRコード読み取り）
2. 「✏️ 学生」をクリックする
3. 名前を入力する
4. 教員から共有されたルームIDを入力する
5. 「ルームに参加」ボタンをクリックする
6. 「接続済み」と表示されれば回答の入力・送信が可能

手順3：回答の入力と確認

学生は画面の入力エリアで手書きまたはテキストにより回答を入力する。入力内容はリアルタイムで教員の画面に反映される。教員は手元のPC画面で全員の回答をタイル一覧として確認できる。

手順4：回答の公開

教員は任意のタイミングでプロジェクターの表示をFLIPの画面に切り替え、学生全員に回答一覧を見せることができる。普段はスライドを映しておき、「はい、やめ！」のタイミングで画面を切り替える運用を想定している。

手順5：次の問題へ

教員が「リセット」ボタンをクリックすると、全学生の回答がクリアされ、学生の画面も自動的に白紙に戻る。次の問題にすぐ移行できる。

教員画面

教員画面は、学生全員の回答をリアルタイムで一覧表示するダッシュボードである。手元のPCで回答状況を確認しながら、適切なタイミングでプロジェクターに映して学生全員に公開する。

画面構成

回答タイル一覧

学生の回答は、グリッド状のタイルとして画面に敷き詰められる。1タイルが1人の学生の回答に対応する。

グリッドレイアウトの自動調整

接続人数に応じて、タイルの列数とサイズが自動で調整される。

匿名モード／記名モード

切り替えはいつでも可能で、切り替えた瞬間に表示が反映される。

学生画面

学生画面は、スマートフォンでの操作に最適化された回答入力画面である。手書きモードとテキストモードを自由に切り替えて回答を入力できる。

画面構成

手書きモード

テキストモード

モード切り替え

リセット時の挙動

教員がリセットを実行すると、学生の画面は以下のように変化する。

手書きデータの通信仕様

手書きデータは画像ではなく、ストローク（線の軌跡）の座標配列として送信される。これにより通信データを軽量に保つ。

ストロークデータ

座標を正規化（0.0〜1.0）することで、学生のスマートフォン画面サイズと教員のPC画面タイルサイズが異なっていても、正しく描画を再現できる。

消しゴム操作

教員画面での描画再現

教員画面の各タイル内にはミニキャンバスが配置され、学生から受信したストロークデータを順次描画する。正規化座標をタイルサイズに変換して描画するため、タイルサイズが変化しても回答内容は正しく表示される。

QRコード・ルーム共有

共有方法

教員は以下の3つの方法で学生にルームを共有できる。

URLパラメータによる自動参加

FLIPのURLにクエリパラメータ ?room=XXXXXX を付加すると、学生はアクセスするだけで自動的に学生モードになり、ルームIDが入力された状態で表示される。

例：

このURLをチャットに貼り付けたり、QRコードにしたりすることで、学生はルームIDの手入力なしで接続画面に到達できる。名前の入力と「ルームに参加」ボタンのクリックのみで参加が完了する。

トラブルシューティング

接続できない

• すべてのデバイスがインターネットに接続されているか確認する
• ルームIDが正しく入力されているか確認する（英数字6文字、大文字で入力）
• ブラウザを最新版に更新する
• 教員が先にルームを作成しているか確認する
• 企業や学校のファイアウォール環境では、WebRTC通信がブロックされる場合がある

回答が教員画面に表示されない

• 学生が接続済みか確認する（教員画面の「○人接続中」を確認）
• 学生が回答を入力しているか確認する
• 手書きモードの場合、指を離したタイミング（1ストローク完了時）でデータが送信される

手書きの描画がずれる

• ブラウザのズーム倍率が100%になっているか確認する
• ページを再読み込みして再接続を試みる

「ルームが見つかりません」と表示される

• ルームIDの入力ミスがないか確認する
• 教員がルームを作成済みか確認する
• 教員がブラウザを閉じたり、セッションを終了していないか確認する
• 接続試行はタイムアウトするため、再度試す

一部の学生だけ接続できない

• 該当デバイスのネットワーク接続を確認する
• ブラウザのキャッシュをクリアして再試行する
• 別のブラウザで試す（Chrome、Edge、Safari、Firefoxに対応）
• モバイルデータ通信とWi-Fiを切り替えて試す

学生画面で「接続中...」のまま進まない

• ネットワーク接続を確認する
• ルームIDが正しいか再確認する
• ページを再読み込みして再接続を試みる

セッションが突然切断された

• 教員がセッションを終了した可能性がある
• ネットワーク接続が不安定な場合に切断されることがある
• 「トップに戻る」ボタンを押して最初からやり直す

リセットされたが白紙に戻らない

• ネットワーク接続が不安定で、リセット信号が届かなかった可能性がある
• ページを再読み込みして再接続する

注意事項