jsPsych を 一番簡単に試す方法を考えた結果 Glitch を使うことにした(推定30分)

## 1. このドキュメントを書いた動機

ご縁があって学生に jsPsych の使い方を教える事になりましたが、PC初心者だと jsPsych や VS Code のインストールから手間取るようです。
研究に辿り着く以前にPCに苦手意識を持ったり、基礎知識の取得に時間を取ってしまうのも本末転倒だと思い、一番簡単な方法でjsPsychの使い方だけを知る方法を考えてみました。

それが、[Glitch](https://glitch.com/) を使った jsPsych の使い方です。
全体の概要としては、この通りの簡単5ステップです。
![flow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/5573f438-f4d2-6341-9ac4-249a8bdca623.png)

## 2. 到達目標

ある程度自分でプログラムを書き、実験は良くわかっている人を頼って実施できる辺りを到達目標にしています。
さらに前提となる JavaScript の知識も必要ですが、こちらも後ほど文法を最低限に絞ってまとめてみたいと思います。

## 3. 事前準備
Glitch のアカウントを用意します。
そもそも Glitch って何？という話になりますが、ネット上に作られたPCでブラウザを使ってファイルの編集ができるサービスだと考えておいてください。
実際には高機能でできることがたくさんあるサービスですが、jsPsychでは、htmlとJavascriptのファイルの作成と編集にしか使いません。
ネットで Glitch を検索すると、丁寧にまとめてくれているサイトがいくつも見つかるでしょう。

実際に [Glitch](https://glitch.com/) にアクセスして、右上の "Sign up" ボタンを押すと登録画面になります。
![make01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/aad0f10a-4291-6c45-9aa8-d56823768a56.png)

「Join for free」→ 「Create an Account」→ 「Email Magik Link」と進み、
![make02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/3fb8cfc6-833a-9990-4019-7ce4e34641a6.png)

メールアドレス入力後に「Send a Code」ボタンを押すとこんなメールが届きます。
![create3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/bc6116c5-c21f-c3b4-0fb9-0342fb5ab524.png)
ここで、「Sign in to Glitch」ボタンを押すか、メールアドレスと仮パスワードを使ってSign in して準備完了です。

## 4. プログラムを動かす

###(1) 新規プロジェクトの作成
画面上の、「New Project」ボタンを押して、メニューから「hello-webpage」を選びます。
![glitch01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/93618877-4b2a-164f-3ef0-7e6300cca203.png)
これで新規プロジェクトが作成されました。
![glitch02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/68fbf327-e020-515b-c056-dad2e74d8a85.png)

###(2) jsPsychのインストール
次に、jsPsychをインストールします。　方法はいくつかありますが、本家のGitレポジトリをクローンするのが一番簡単そうです。

左下の「Tools」ボタンを押して、メニューから「Import and Export」を選びます。
![glitch03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/33171571-c999-83a6-24bf-822bbf59716e.png)

ここで「Import from GitHub」を選択して、
![glitch04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/9319eb08-6bd8-01b2-a15d-15dc914aacbe.png)

本家のGitレポジトリである
``` https://github.com/jspsych/jsPsych　```
を入力して「OK」ボタンを押します。
![glitch05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/a0bfdf29-bb30-a505-f4cd-0586dbf985fc.png)

これで最新版のjsPsychoがGlitchにインストールできました。
![glitch06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/515fdfe0-2d6b-ea15-dca1-f42d0194ca91.png)

###(3) 不要なファイルの削除
package.json は、jsPsychでは使用しません。　そして置いてあるだけで Glitch がうまく動作しなくなるので、package.json を右クリックメニューの Delete で削除しておきます。
![glitch07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/ea80f320-3644-f513-f39d-2c5d444bd7da.png)

ここまでで、ようやくプログラムを書くための準備が終わりました。

###(4) プログラムの記述
最初に、index.html を作成します。
左側にある「New File」を押して、ファイル名の ```index.html```を入力し、「Add this File」ボタンを押してください。

![glitch08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/2c196abb-4331-d208-83ad-cb18f39366af.png)

作ったindex.htmlに、プログラムを記述します。
![glitch09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/b1c62ec8-b525-3e68-6e58-9d8e03491143.png)
↓ この内容を貼り付けてください。

```html:index.html
<!DOCTYPE html>
<html>
    <head>
        <title>My experiment</title>
        <script src="./jspsych.js"></script>
        <script src="./plugins/jspsych-html-keyboard-response.js"></script>
        <link href="./css/jspsych.css" rel="stylesheet" type="text/css">
    </head>
    <body></body>
    <script>

    var hello_trial = {
        type: 'html-keyboard-response',
        stimulus: 'Hello world!'
    }

    jsPsych.init({
        timeline: [hello_trial]
    })

    </script>
</html>
```

ここで注目するのは、

```
<script src="./jspsych.js"></script>
<script src="./plugins/jspsych-html-keyboard-response.js"></script>
<link href="./css/jspsych.css" rel="stylesheet" type="text/css">
```
の、3行です。
公式サイトの[チュートリアル](https://www.jspsych.org/tutorials/hello-world/)では

```
<script src="jspsych-6.3.0/jspsych.js"></script>
<script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
<link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
```

と、なっていますが、これはフォルダ構成が、以下のようになっていて、

```
📂 My Experiment
--  📂 jspsych-6.3.0
----  📂 css
----  📂 examples
----  📂 plugins
----  📄 jspsych.js
```
実験用のプログラムは `My Experiment` に置かれ、その下のフォルダ `jspsych-6.3.0`の下に `jspsych.js` が置いてあります。
これを指定するために、`jspsych-6.3.0/jspsych.js`という記述になっています。
それに対し、今回インストールした環境ではフォルダ構成が、以下のようになっています。

```
----  📂 css
----  📂 examples
----  📂 plugins
----  📄 jspsych.js
----  📄 index.html
```
実験用のプログラムは `jspsych.js` と同じフォルダに置いてあるので、`./jspsych.js`という記述になります。
<font color="Red">この、自分から見てどこに jspsych.js や、css フォルダがあるかを正しく指定しないと動きません。</font>
興味があれば「相対パス」「絶対パス」を調べてみてください。

###(5) Hello Worldの実行
記入が終わったらいよいよプログラムを実行します。
ここは、「Show」ボタンを押してください。
今回はプログラムの修正箇所の反映がわかりやすい「Next to the Code」を使用します。
(実験結果のファイルの保存は「In a New Window」でなければできない模様です。)
![glitch10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/99408134-d949-4ba6-76fc-8174f2a35a50.png)

右側に「Hello World!」が表示されれば、無事に実行できています。
おつかれさまでした！
![glitch11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/9ca89506-8f75-05f6-d3c2-a7344dde2f58.png)

## 5. 今後のステップアップ
- JavaScriptの文法の理解
- 本家のチュートリアルを読んで
- Pluginの使い方を自分で調べる

と、できたら困る事もないと思いますが、Qiita にも jsPsych の初心者向けにもっと広範囲の解説をしてくれている方達がいらっしゃいますので、そちらをご覧の上で最終的に上記に到達できれば良いと思います。