続・オンライン演習どうするどうやる？

オンライン演習をどうやって実現するかの手探りはまだ続く．OBSを使ったデスクトップ画面共有は一つの解としてあり得るが，そもそも環境構築できるかとか，非力なデバイスだと大丈夫だとか，心配の種は尽きない．

Colabを用いた演習の監視

そこでプランBである．代替案（プランB）は，クラウドサービスを利用するものである．Google Colabを用いたプログラミング演習をリモートから管理することを考えた．次の動画は，そのために作成したツールの操作を説明するためのデモ動画である．

演習はGoogle Colaboratoryで行う．クラウドサービスなので，手元のデバイスは非力なものでも大丈夫だろう．Google Colaboratoryの環境を用意するのも多少の手順が必要だが，それに対して慣れてもらうのは致し方ない．

さて，このプランBは，学生各自のColabノート（ページ）を，教員と共有するというアイデアがミソだ．学生のノートを共有するので，直接，学生の演習状況を確認できる．場合によってはコメントを付けたり書き込んだりして，ノートを介して双方向のコミュニケーションをすることだってできる．なんだか交換日記みたいだけど．

MultiView

OBSとZoomのギャラリービューを用いた学生の作業状況の一覧機能に代わるものとして，Colabノートの共有で学生の作業状況をまとめて確認するにはどうしたらよいだろう？

そこで，各学生のノートを一覧で表示できるようなちょっとしたプログラムMultiViewを用意した．PHPとJavaScriptで作成した簡単なプログラムである．

MultiViewのエントリページにアクセスすると，次のようなフォームが表示される．

ここで，フォームには学生数を入れて submit ボタンを押す．すると，次のように，入力した数だけのページをまとめて表示する画面が現れる．なお，それぞれのページはインラインフレームとして組み込まれ，50％に縮小されて表示される．

それぞれのブロックには，Load，Reset，Openのボタンが用意されている．初期状態ではLoadボタンのみ有効である．各ページにはURLとNameを書き込むテキストフィールドが用意されている．URLとNameを指定してLoadボタンを押すと，そのブロックに縮小されたウェブページが表示される．

この図は，Student 1として「Joe's Page」を，Student 2として「Bob’s Note」を指定し，それぞれのページを読み込んだ状態である．これらのページは学生本人のページと同期しているため，若干のタイムラグはあるが，学生の作業状況を縮小された状態のまま確認できる．なお，Nameはオプションなので，入力しなくてもよい．その場合は，「Student #」の表示がそのまま利用される．

ページを組み込むと，Loadボタンは無効化され，ResetおよびOpenボタンが有効となる．Resetボタンは組み込んだページを排除して元の状態に戻すものである（ボタンの状態も初期化される）．Openボタンは，そのページを新たなウィンドウ（タブ）として表示するために用意されている．縮小状態では不十分な際には，Openボタンを押すことで独立したページとしてアクセスできるようになる．

補足

セキュリティ上の理由により，素のブラウザではこのプログラムをきちんと動かすことができない．URLを入れてLoadボタンを押しても，接続を拒否されるエラーが発生してしまう．MultiViewの機能を有効にするためにはGoogle Chromeの Ignore X-Frame headers 拡張機能をChromeに組み込む必要がある．また，Chrome 以外のブラウザでの動作は確認していないが，同様の対処が必要になろう．

学生の数が多い場合，一つ一つ，Loadしていくのは面倒な作業になりそうだ．少しプログラムを拡張して，まとめて登録できるような仕組みを用意すべきかもしれない．

追記：

やはり一つ一つちまちまとロードするのは面倒なので，CSVファイルで一気に登録できるようにした．その様子はこんな感じ．