オンライン実験をGUIで作成(lab.js & lab.js Builder)

はじめに

多くの大学で前期はオンラインでの授業実施になりつつある現状ですが,オンラインで心理学実験作成の授業を行ったり,実験実習の授業用にオンライン実験を作成するといった用途に適したサービス(ソフトウェア)であるlab.jsについて教えていただきました。少しいじってみたので,メモ代わりに書いておきます。

https://lab.js.org

lab.js

なにができるか

lab.js

jsPsychなどと同様に,lab.js自体は心理学実験作成用のjavaScriptのライブラリです。javaScriptでhtmlとcssを制御することで心理学実験を可能にしています。

lab.js Bulider

lab.jsの大きな利点は,このBuilderにあります。Builderによって,**ブラウザベースのGUI(グラフィカルユーザーインターフェース)でlab.jsを用いた心理学実験を作成できます。**一部の説明ページなどではhtmlやCSSはコードを記述する必要がありますが,実験ディスプレイへの刺激配置,刺激の定義,実験の流れなどの多くの部分をGUIで作成可能です。

使い方

https://lab.js.org/ のBuliderをクリックすると,GUIで実験を作成できるBuilderを利用できます。新規作成時には以下のような画面が表示されます。

1から作成するか,もしくはWelcome右上のロケットマークをクリックすると読み込めるExamplesを修正することで実験を作成できます。作成方法は試している段階ですので,申し訳ありませんが,詳しい使い方は公式のチュートリアルなどを参照してください。

実験例

公式から提供されているExamplesから,フランカー課題を小林のサーバーに"そのまま”アップしてみました。以下からお試しいただけます。
http://mklab.info/labjs/f/

メリット

ブラウザベースのGUIで実験作成ができる

これが最も優れている点かと思います。lab.jsのBuilderを使うことで,GUIで実験を作成することができます。

無料

無料です。ライセンスとしてライブラリはApache Licenseですので,自分で作成した実験の公開や再配布は可能だと解釈できます(その際に,lab.jsのライブラリを含めることができる)。端的に言えば,lab.js Buliderで作成した実験をそのまま使えるということです。

スマートフォンでも動作する

javaScriptで動作するので,スマートフォンでも実験を行うことができます。実験の実施にキーボード入力を伴わないように工夫する必要はあります。

エクスポート形式が豊富でそのまま使える

以下のように様々なエクスポート形式を選択できます。

  • 一般的なサーバー用(要PHP)
  • サードパーティーツール(Qualtricsなど)
  • JATOS
  • Open LAb
  • Pavlovia
  • Experiment Factory

前述の実験例は「一般的なサーバー用」にエクスポートして,レンタルサーバーにアップしただけですが,そのまま動作しました(そのまま動くかはサーバーによります)。エクスポートしたファイルにはデータ保存用のPHPが含まれているため,PHPが動くサーバーであれば,実験データはdataフォルダに格納されます。
保存形式はSQLiteという簡易のデータベースファイルになるので,適切なソフトで読み込む必要があります。しかしながら,読み込み用Rmarkdownが提供されているので,Rstudioを使えば簡単に読み込むことができます(https://github.com/FelixHenninger/lab.js のutilitiesにあるSQLite import.rmd)。このRmarkdownを実行すると,csv形式でデータの出力まで行ってくれるという至れり尽くせりです。

デメリット

英語

主に実験作成の授業での利用を考えると問題になるのが,Builderの言語が英語ということです。英語に対して抵抗がある学生さんだと取っつきにくいかもしれません。日本語のドキュメントを用意できれば問題はないかと思いますが。

公式ドキュメントの多くが動画

デメリットに含めるかは迷うところですが,GUIでの操作となるため,チュートリアルを含め,大部分の説明が英語音声の動画で提供されています。そのため,動画を見ないと実験作成に入れません。CCボタンを押すと,自動生成の音声字幕がでるので,多少わかりやすくなるかもしれません。
https://labjs.readthedocs.io/en/latest/index.html

一応,コードで書く場合の説明文章(Code a study from scratch)やLibrary refeneceを見れば,動画を見なくても作成できるかもしれません。

その他

呈示タイミングや反応時間取得の精度

以下のプレプリントによると,刺激の呈示タイミングと反応時間取得の精度はブラウザ依存するそうです。呈示タイミングはChrome使用時で最も優れた制御で,反応時間の遅延もChrome使用時に一定時間の安定した遅延が見られるようです。これらの制御は,Chrome次いでFirefoxで優れているようです(Macの場合はChorom ≒ Safari > Firefox)。ちなみにですが,Edgeの使用は避けた方がよさそうです。

Henninger, F., Shevchenko, Y., Mertens, U. K., Kieslich, P. J., & Hilbig, B. E. (2020). lab.js: A free, open, online study builder. doi: 10.5281/zenodo.597045

他の実験ソフトウェアとの比較

各ソフトウェアでタイミングの正確性を検証した以下のプレプリントによると,Windows × Chromeだと,視覚刺激呈示と反応取得に関しては大きな問題はなさそうです(音声・視覚の同期についてはあまり良くない)。 Mac × Chromeでは,視覚刺激呈示,反応取得,音声・視覚の同期ともに大きな問題はなさそうです。ちなみにjsPsychはWindows,MacともにChromeを使えば視覚刺激呈示,音声・視覚の同期,反応取得に大きな問題はなさそうです。

Bridges, D., Pitiot, A., MacAskill, M. R., & Peirce, J. W. (2020, January 20). The timing mega-study: comparing a range of experiment generators, both lab-based and online. https://doi.org/10.31234/osf.io/d6nu5

引用

Githubページに記載されているように,lab.jsを用いた場合は以下のような引用がお願いしますとのことです。

Henninger, F., Shevchenko, Y., Mertens, U. K., Kieslich, P. J., & Hilbig, B. E. (2020). lab.js: A free, open, online study builder. doi: 10.5281/zenodo.597045

エクスポートから自分サーバーへのアップロードまでの流れ

サーバーなどがよく分からないという方もいらっしゃると思いますので,簡単に流れだけ書いておきます。

  • PHPが動作するレンタルサーバーを借ります。有料サーバーなら普通は動きます。だいたい数百円/月のコストがかかります。学内サーバーがあればそこでも可。
  • lab.jsで実験を作成し,「generic server tools(PHP backend)」形式でエクスポート
  • FTPソフトなどでエクスポートしたフォルダごとサーバーにアップロード
  • dataフォルダへのアクセスを禁止するため,dataフォルダに.htaccessを設定(個人情報保護に重要)
  • サーバーの実験ページを公開
  • dataフォルダの「data.sqlite」にデータが蓄積されるので,実験が終了したらダウンロード
  • data.sqliteを(公式提供のRmarkdownなどで)読み込んでデータ分析

基本的にはエクスポートしたままアップロードすればOKなので(データ保存用のPHPのパーミッションの変更はいるかも),サーバー周りだけ詳しい人に頼むというのも手だと思います。個人情報を扱う場合もあるので,一応,有料のレンタルサーバーをオススメします。
*jsPsychのようにGoogle Firebaseを使えば無料でいけるかも。

jsPsychとの比較

jsPsychはけっこう書きにくい部類なので,lab.jsのGUIでの作成は非常に楽です。特に,刺激の呈示位置をGUIで決められる点,ループの制御のGUIで設定できる点,実験の流れをGUIで決められる点などは大きなメリットですね。一方で,公式ドキュメントの充実度はjsPsychの方が良いのと,プラグインも豊富なので,いまの時点では自由度が高いのはjsPsychかなと思います。まぁ,どちらもhtmlとcssについても調べないといけないという点では,ハードルが高めではありますが…。
また,授業利用についてはlab.jsの方が優れているでしょう。例えば,卒論を考えた時,学生さんにオンライン実験を作ってもらって,教員がその実験をサーバーにアップしてということを考えると,エクスポートしてそのまま動くlab.jsが圧倒的に便利です。教員がすることは,学生さんが作成してエクスポートした実験をサーバーにアップロードするだけなので(ただし,実験データのSQLiteの読み込みなどは教えるか,教員がやる必要はあります)。

まとめ

lab.jsを使うとブラウザベースのGUIで心理学実験を作成することができます。英語なので,取っつきにくいかもしれませんが,現状では最も簡単にオンライン実験が作成できるツールだと思います。オンラインでの実験実習用の実験作成,オンラインでの実験作成の授業などに活用できるはずです。

追記(2020年4月13日)

大杉尚之先生を中心にlab.jsのチュートリアルを作成中です。以下からご覧いただけます。
https://www.notion.so/lab-js-8496c3c67b384168b9e69f165ee06e16

小林 正法
小林 正法
Principal Investigator

関連項目