サーバー環境を持たずに jsPsych でオンライン実験 - DataPipeのご紹介 - プログラムもデータもオープンに。

jsPsychの説明は省略しますので、[公式サイトをご覧ください](https://www.jspsych.org/7.3/)。

jsPsychの開発チームがこのたび、[DataPipe](https://pipe.jspsych.org/)というツールを発表しました。このツールは、自前でサーバー環境を準備できない研究者にとって非常に有益なものになっているのでご紹介します。

まず従来のオンライン実験がどういうものだったかというと、こんな感じ。
![スライド1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/a697eb3f-2862-c56e-eb3a-75849213881f.png)

自分でプログラムを作れたとしても、それをオンライン実験として利用できる状態にするには、自前でサーバーを準備するか、有料サービスを使って公開する必要がありました。

ところが本記事で紹介する DataPipeを使うと、以下の図のような流れでサーバーが不要になります（というと語弊がありますが、ほとんど気にしなくてよくなります）。なお図中の OSF は、Open Science Framework の略称です。

![スライド2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/d32195c1-5f30-dbb0-c6f9-8b4d38c899b6.png)

DataPipeの開発者としては、サーバーが不要になる（無料で実現可能）ということもさることながら、プログラムのソースコードから取得されたデータまで、すべてがオープンになる研究の透明性を重視しているようです。実験データが自動的に（即自的に）ある場所に保存されるのを Direct data deposition (Kekecs et al., 2023)、そのデータが誰でも利用可能な状態になることを Born-open data (Rouder, 2016) と呼ぶそうです。

DataPipeのデメリットとしては、次のようなことがあげられます。

- OSFにデータを書き込めるようにするためにトークンの発行が必要。そのトークンが悪意のある第三者に漏れると変なデータを書き込まれるおそれがある（ただし、上書きはできない。未使用のトークンを無効化することである程度対処可能）
- 実験プログラムからDataPipe、DataPipeからOSF間の通信がオープンなので、その間に悪意のあるユーザーは情報を書き換えたり、予期していないような動作を加えようとしたりするかもしれない。（ただし、これはDataPipeというよりもオンライン実験全般に関わるリスク）
- DataPipeに不具合が生じたときに、実験を実施することができない。（Google Cloud を利用した堅牢なシステムではあるからたぶん大丈夫）

詳しくは、[de Leeuw (2023)](https://psyarxiv.com/fv65z) を読んでください。上のデメリットはこの論文に書かれています。それから（たぶん）論文内に書かれていない注意点として、そもそも公開してはいけない個人情報のデータを取得する場合には要注意です。そのような実験で、DataPipeを使ってはいけません。

# 利用方法
[Getting Started](https://pipe.jspsych.org/getting-started)に書いてある通りではあるのですが、日本語で分かりやすく解説できればと思います。

## OSFアカウントを作成
[OSFにアクセスしてユーザー登録](https://osf.io/)。すでにアカウントを持っていれば、それを使えばOK！

## OSFトークンを作成
OSFにサインインしたら、右上の名前をクリックして、Settingsを開く。
![1_osf_settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/d3af7189-f47b-ece9-374d-d6cd1db1c494.png)

左側で、Personal Access Tokens をクリック。Create Token ボタンをクリック
![create_token.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/f22e87c6-9907-ebea-6fd1-9b3453a3e39b.png)

Token name に適当な名前を入力。osf.full_write にチェックを入れて、Create token!
![osf_full_write.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/cdbe6c59-ef35-f69d-c15d-323aac70fb53.png)

次の画面でトークンが表示されます。この情報は機密性の高いものなので取り扱い注意。**トークンをコピーしてください。** （トークンの左横にコピーボタンがあります）

## DataPipeのユーザー登録
[DataPipeのユーザー登録を行います](https://pipe.jspsych.org/)

サインインができたら、右上のアカウントから Settings を開きます。
![datapipe_settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/af8bf0e8-a275-5a7d-3ab5-3c5fa76825fa.png)

上の手順でコピーしておいたトークンをセットします。
![2_osf_token.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/c5232401-930a-6721-4b5a-b08fda01f070.png)

## OSFでプロジェクトを作成してIDを確認
OSFのプロジェクトに、実験データが保存されます。
![create_osf_project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/4af4c83c-0c29-9cdc-6d34-dc52047f945c.png)

作成したプロジェクトを開いて、URLを確認します。例えば私の場合、
https://osf.io/zu4as/
となっていますが、zu4as がプロジェクトIDとなります。これをコピーします。

## DataPipeで新規に実験を作成
DataPipeの右上から　New Experiment
![new_exp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/7c40ebbf-71d6-8b46-cb03-ac6932e82466.png)

Title、OSFのプロジェクトID、OSF Data Component Name（OSF上で、データを保存する場所の名前。適当で大丈夫）を入力。OSFのプロジェクトIDについては、上の手順でコピーしたものを貼り付けてください。この作業で OSF と DataPipe が紐づくわけですね。

![new_exp2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/92297459-1691-b184-8724-8c7149dfadbf.png)

次のような画面になると思います。詳細は後のステップで解説します。
![datapipe_detail.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/1e0192ae-8a07-53af-63cd-5eea105cacf7.jpeg)

## GitHubでプログラムを作成
[GitHubのアカウントを作成します](https://github.com/)。新規にレポジトリを作成します。（レポジトリの意味を正確に理解する必要はありません。実験ごとレポジトリを作る、くらいの認識で大丈夫）

![new_repo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/1f707de2-14ce-d4b6-e707-bbe44c829651.png)

レポジトリの名前を決めて、Publicで作成します。Publicで作成しているため、すぐに全世界にソースコードが公開されます。ご注意ください。Add a README file にチェックを入れます。
![new_repo2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/b1126b27-9d97-4fc8-1a49-f022a9258518.png)

Add file から Create new fileを選択します。ただし、すでに実験プログラムが完成している場合は、Upload filesでもOKです。
![add_file.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/e3a6c331-73c1-6423-f1a2-ab825e608e19.png)

ここでは、以下のサンプルコードを使いましょう。画面に'Hello world!'と表示するためのプログラムになっています。

```javascript
<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="https://unpkg.com/jspsych@7.3.2"></script>
    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.2"></script>
    <link href="https://unpkg.com/jspsych@7.3.2/css/jspsych.css" rel="stylesheet" type="text/css" />
  </head>
  <body></body>
  <script>
    const jsPsych = initJsPsych();

    const hello_trial = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: 'Hello world!'
    }

    jsPsych.run([hello_trial]);
  </script>
</html>
```

![source_code.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/907b1b76-79e6-bd0b-219f-d0c63dd0822b.jpeg)


## GitHub pages を有効
Settingsを開き、左端のメニューから Pages を選択。Deploy from a branch と main を確認して、Saveをクリックします。
![github_pages.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/af5816f3-9c0d-4572-d633-6bb5f963dd82.png)

この後、少し時間をおいて（2、3分後）Pagesを見ると、Visit site というボタンが現れます。それをクリックしてください。

![visit_site.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/c3ce5e2e-c948-b944-298f-055a6c1a0b7c.png)

表示されたウェブサイトのURLは、
https://kurokida.github.io/datapipe3/
のようになっていると思いますが、URLの最後に、実験プログラムのファイル名（今回の例ではexperiment.html）を追加します。
https://kurokida.github.io/datapipe3/experiment.html
このURLにアクセスすると、'Hello world!'が表示されるはずです。

ここまでで、オンライン実験を GitHub上で動かすことができるようになりました。あとは、GitHubとOSFをDataPipeでつなぐだけです。

## GitHubとOSFをDataPipeでつなぐ
あらためて、以下の図を思い出してください。
![datapipe_detail.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/a6fc84c4-bbf0-6d80-f93b-e22a2f5c8c91.jpeg)
この図の右半分をソースコードに加えます。ここでは GitHub上で直接編集する方法をご案内しますが、自分のPC上でテキストエディタを使って編集し、それをGitHubにアップロードしてもOKです。

![edit1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/d21896be-0bc5-1dbe-32e9-a28ae5df2374.png)

![edit2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/d941028b-a055-25d0-c7b5-ca0816262b88.png)

変更箇所については、
https://github.com/kurokida/datapipe3/commit/9238165788a20dca2fcfe6d87925ead5766791ef
をご覧いただくのがよいかと思います。画面左側が変更前、右側が変更後で、変更箇所は色付けされています。

編集を終えたらコミットします。

## 動作確認
あらためて実験プログラムにアクセスします。今回私が作成したプログラムのURLは、
https://kurokida.github.io/datapipe3/experiment.html
です。
'Hello world!'が表示されたら、キーボードの A を押してください。

画面が真っ白になったら、プログラムと紐づいたOSFのプロジェクトを開きます。私の場合は、
https://osf.io/zu4as/
です。exp_data（最初のほうのステップでそういう名前をつけました）のなかに、参加者ごとにCSVファイルが作成されます。

![save_data.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/4e698e7b-8c47-601e-e4f7-a45a11b67352.png)

CSVファイルの中身も確認してみましょう。

![response.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/aa6fefcf-fa85-7190-8ea5-221d5d211621.png)

反応キーとして a が記録されていますね！　このように、実験を行うたびに、OSF上にデータが随時保存されます。ソースコードは、GitHubで公開されています。オープンな研究の完成です！

# 引用文献
- de Leeuw, J. R. (2023, March 22). DataPipe: Born-open data collection for online experiments. https://doi.org/10.31234/osf.io/fv65z
- Kekecs Zoltan, Palfi Bence, Szaszi Barnabas, Szecsi Peter, Zrubka Mark, Kovacs Marton, Bakos Bence E., Cousineau Denis, Tressoldi Patrizio, Schmidt Kathleen, Grassi Massimo, Evans Thomas Rhys, Yamada Yuki, Miller Jeremy K., Liu Huanxu, Yonemitsu Fumiya, Dubrov Dmitrii, Röer Jan Philipp, Becker Marvin, Schnepper Roxane, Ariga Atsunori, Arriaga Patrícia, Oliveira Raquel, Põldver Nele, Kreegipuu Kairi, Hall Braeden, Wiechert Sera, Verschuere Bruno, Girán Kyra and Aczel Balazs (2023). Raising the value of research studies in psychological science by increasing the credibility of research reports: the transparent Psi project. *Royal Society Open Science*, Article 10191375191375. http://doi.org/10.1098/rsos.191375
- Rouder, J. N. (2016). The what, why, and how of born-open data. *Behavior Research Methods, 48*, 1062–1069. https://doi.org/10.3758/s13428-015-0630-z