Zoomのブレイクアウトルームってダサくない？？

# はじめに

私は現在大学4回生で論文のための実験をしているのですが、このご時世のため実験もオンラインで行うことになりました。
私の実験ではGoogle Formを使って協力者に動画の視聴→アンケート→テストという流れを2回繰り返すことでした。(下図が実験の流れ)

![スクリーンショット 2022-01-14 0.15.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/a5cae123-910f-3527-2cec-a967a0025cd4.png)

私は実験の協力者を募るため、教授の力を借り、Zoomでのオンライン授業で募集することになりました。

ここで問題が発生です。
上記の場合、Google FormのURLが4つあります。
どうやって4つのURLを均等に協力者に振り分けようかと私は思いました。

* 4つブレイクアウトルームに分かれてそれぞれに異なるリンクを貼る。→ 私がルーム毎に入退室を行う必要がある。時間がかかる。めんどくさい。
* 学籍番号を4で割った余り、学籍番号の下1桁でURLを指定する。 → 出席者の学籍番号は十中八九連番にはなっていなので、均等にならない。
* 4つのブレイクアウトルームに分かれてルームの番号を覚えてもらい、メインルームに戻り、その番号ごとにURLを指定する。 → ダサい！！！！そもそもブレイクアウトルームから戻ってこなさそう。

とりあえず私はブレイクアウトルームを断固として使いたくない！！！

そこで私は何個か案を考えてみました。

# ランダムジャンプするURLを貼る

実際に作った例 : https://tomomon.jp/programming/random_jump/

javascriptを使って作成する。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>ランダムジャンプ</title>
    <script type="text/javascript">
    <!--
      var mylink = new Array(
        "https://www.youtube.com/watch?v=vLV0UZ308bQ&t=155s",
        "https://tomomon.jp/travel/my_secret_place/",
        "https://tomomon.jp/travel/travel_ranking/",
        "https://tomomon.jp/programming/ksnctf5/"
      );
      function random_jump() {
        var i = Math.floor(Math.random() * mylink.length);
        location.href = mylink[i];
      }
    // -->
    </script>
  </head>
  <body>
    <a href="javascript:random_jump();">ランダムに移動します</a>
  </body>
</html>
```

だだし、これは無作為にリンク先に飛ばされるので、偏る可能性がある。
また、新しいタブで開くと***about:blank#blocked***となってしまう。(Google Chromeの場合)


# 訪問順に異なるリンク先に移動させる

## アクセスカウンターの作成

とりあえず訪問者数を得たいので、アクセスカウンターを作成する。

実際に作った例 : https://tomomon.jp/programming/access_counter/

まず,訪問者数を格納する **count.dat** を作成する。
ディレクトリは下記の感じ。

```terminal
% tree .
.
├── count.dat
└── index.php
```

***count.dat*** には初期値0を入れておく。

```txt:count.dat
0
```

```php:index.php
<?php
  //カウント数が記録してあるファイルを読み書きできるモードで開く
  $fp = fopen('count.dat', 'r+b');

  //ファイルを排他ロックする
  flock($fp, LOCK_EX);

  //ファイルからカウント数を取得する
  $count = fgets($fp);

  //カウント数を1増やす
  $count++;
?>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>アクセスカウンター</title>
  </head>
  <body>
    <div class="counter-area">
      <!-- ファイルから取得したカウント数を表示する -->
      <p>あなたは<span class="access-count"><?php echo $count;?>番目</span>の訪問者です</p>
    </div>
  </body>
</html>

<?php
  //ポインターをファイルの先頭に戻す
  rewind($fp);

  //最新のアクセス数をファイルに書き込む
  fwrite($fp, $count);

  //ファイルのロックを解除する
  flock($fp, LOCK_UN);

  //ファイルを閉じる
  fclose($fp);
?>
```

## 訪問者を訪問者数でグループに分ける。

訪問順に4つのリンクを順にアクセスするよう誘導する。
訪問者数を4で割った余って+1した番号のリンクを選ばせる。

```index.php
<?php
  //カウント数が記録してあるファイルを読み書きできるモードで開く
  $fp = fopen('count.dat', 'r+b');

  //ファイルを排他ロックする
  flock($fp, LOCK_EX);

  //ファイルからカウント数を取得する
  $count = fgets($fp);

  //カウント数を1増やす
  $count++;
?>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>アクセスカウンター</title>
  </head>
  <body>
    <div class="counter-area">
      <!-- ファイルから取得したカウント数を表示する -->
      <p><span class="access-count">Link<?php echo $count%4+1 ;?></span>をクリックしなさい。</p>
    </div>

  <ul class="links">
    <li><a href="https://www.youtube.com/watch?v=vLV0UZ308bQ&t=155s">Link1</a>
    <li><a href="https://tomomon.jp/travel/my_secret_place/">Link2</a>
    <li><a href="https://tomomon.jp/travel/travel_ranking/"> Link3</a>
    <li><a href="https://tomomon.jp/programming/ksnctf5/">Link4</a>
  </ul>
  </body>
</html>

<?php
  //ポインターをファイルの先頭に戻す
  rewind($fp);

  //最新のアクセス数をファイルに書き込む
  fwrite($fp, $count);

  //ファイルのロックを解除する
  flock($fp, LOCK_UN);

  //ファイルを閉じる
  fclose($fp);
?>
```

表示されている4つのリンクから選んでクリックするのがダサいし面倒。間違えてクリックする可能性もある。


# 上記を組み合わせる

上記のアクセスカウンターを使って、ランダムアクセスを改良する。
アクセスjavascriptで書いたurlを格納した配列から訪問者数を4で割った余りを引数として、リンク先のURLを指定する。


```php:index.html
<?php
  //カウント数が記録してあるファイルを読み書きできるモードで開く
  $fp = fopen('count.dat', 'r+b');

  //ファイルを排他ロックする
  flock($fp, LOCK_EX);

  //ファイルからカウント数を取得する
  $count = fgets($fp);

  //カウント数を1増やす
  $count++;
?>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>ランダムジャンプ２</title>
    <script type="text/javascript">
    <!--
      var mylink = new Array(
        "https://www.youtube.com/watch?v=vLV0UZ308bQ&t=155s",
        "https://tomomon.jp/travel/my_secret_place/",
        "https://tomomon.jp/travel/travel_ranking/",
        "https://tomomon.jp/programming/ksnctf5/"
      );
      function divide_links(num) {
        location.href = mylink[num];
      }
    // -->
    </script>
  </head>
  <body>
    <div class="link">
      <!-- ファイルから取得したカウント数を表示する -->
      <a href="javascript:divide_links(<?php echo $count%4 ;?>);">ここをクリックしてください。</a>
    </div>
  </body>
</html>

<?php
  //ポインターをファイルの先頭に戻す
  rewind($fp);

  //最新のアクセス数をファイルに書き込む
  fwrite($fp, $count);

  //ファイルのロックを解除する
  flock($fp, LOCK_UN);

  //ファイルを閉じる
  fclose($fp);
?>
```

以下が実際に実装したもの。

https://tomomon.jp/programming/random_jump2/

これで均等にリンク先が訪問順に決定する。
また、クリックするところが一つしかないので、間違えることがなくなった。

#最後に

ブレイクアウトルームを使わずに済んだのですが、リンク先のURLをクリックさせるために一度HPを経由する必要があるのが少し気になります。リダイレクトを設定したらいいのかな？

普段、全くJavaScriptやPHPを触らないので、もっといい方法、間違っていることがあったら教えてください。