2
Help us understand the problem. What are the problem?

posted at

updated at

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

はじめに

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

スクリーンショット 2022-01-14 0.15.15.png

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

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

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

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

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

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

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

javascriptを使って作成する。

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 を作成する。
ディレクトリは下記の感じ。

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

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

count.dat
0
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を指定する。

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>ランダムジャンプ2</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);
?>

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

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

最後に

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

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

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
2
Help us understand the problem. What are the problem?