オンライン実験を行うにはサーバーを自分で用意するか,ホスティングサービスを利用する必要があります。Openlabなどのサービスを利用すれば,そこまで大変ではないのですが,どうしても参入障壁が高くなってしまいます。(教員の援助なしで)学部生が独力で卒業研究でオンライン実験というのをなんとか実現したいと思い,サーバーなしでオンライン実験を行う方法を考えてみました。ただし,この方法はデータの一部を失う可能性(データ保存やアップロードに失敗する可能性)がある点にご留意ください。

概要

オンライン実験では,実験プログラムの実施とデータの保存にサーバーが必要となるので,この2つの仕事をサーバーなしで分割して実施できるように考えました。

1. オンライン実験の実施

Google driveに入れたlab.jsのプログラムを実施できるようにすることで,オンライン実験をサーバーなしでで実施できます(サーバーなしは厳密にやや語弊があり,静的ページを無料で生成してもらっています)。やり方については以下のページに書いてあります。

Google Driveでオンライン実験(動作のみ)

2. データの保存

1.でオンライン実験を動かせるようになったものの,データを保存することができません。一般的にはサーバー側に用意したデータベースに実験データは自動的に保存されますが,サーバーがないとそういうわけにもいきません。

そこで今回はGoogleフォームを使ってみます。Googleフォームではファイル添付(ファイルアップロード)が可能なので,参加者にオンライン実験後にデータを自分のコンピュータに保存していただき,そのデータをGoogleフォームからアップロードしてもらうことでサーバーへのデータ保存の代用とします。Googleフォームでは「ファイルのアップロード」という質問項目を作成すればデータをアップロードしてもらえます。

今回はオンライン実験URLとデータのアップロードが1つフォームで済むので,Googleフォームを使いましたが,ファイルをアップロードしてもらえばどんなサービスでもよいでしょう。例えば,Dropboxのファイルリクエストなどでもよいかもしれません。

3. Googleフォームの構成

Googleフォームを以下のように構成しましょう。

  1. (Google Driveで実施できる)オンライン実験を実施し,データを保存するよう求める説明項目
  2. データをアップロードする質問項目

以下が作例です。

スクリーンショット 2021-12-20 18.29.03.png

このGoogleフォームのURLを配布することで,参加者にオンライン実験を実施してもらい,その後データをアップロードしてもらうという流れでサーバーなしでオンライン実験を実施することができます。「回答を1回に制限」して複数回の実施も防いだり,G suiteのアカウントを使えば公開範囲も制限することができます。

なお,lab.jsでは実験終了後に画面上部に出現するダウンロードボタンを押さないとデータのダウンロードができないので,データを保存したいコンポーネントのScriptsに以下のようにコードを書いておくと,自動でデータ保存ウィンドウが開くのでオススメです。

//runのタイミングで実行
const ds = this.options.datastore
ds.download()

自動ダウンロードがうまく行かない場合のために,実験画面内にダウンロードボタンを作成したい場合は以下のようなScriptsとHTMLを用意しましょう。