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

## はじめに
jsPsychがVersion6 から 7になり、
以前書いたドキュメント
[jsPsych を 一番簡単に試す方法を考えた結果 Glitch を使うことにした(推定30分)](https://qiita.com/temochiz/items/d2780efd95dccb3df372)
を Version7対応にしてみました。

前回は30分程の作業時間を想定していましたが、Version7からはインストールしないでCDNを利用する方法が公式となったため、試用するまで30秒程度でできるようになっていました。

![手順.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/d6028fd9-c29a-438f-586f-16b58d178063.png)

## 到達目標

jsPsych7 の開発環境を構築し、チュートリアルの hello world を表示するところまでをやってみます。


## 事前準備 Glitch のアカウント登録

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

実際に [Glitch](https://glitch.com/) にアクセスして、右上の "Sign up" ボタンを押すと登録画面になります。
![登録1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/8ceba45f-c71e-be6a-4483-7dae85512366.png)

「Join for free」→ 「Create an Account」→ 「Email Magik Link」と進み、

![登録2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/b675d9cf-201d-0797-34d7-13576c465099.png)

メールアドレス入力後に「Send a Code」ボタンを押すとこんなメールが届きます。

![登録3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/dc21d6b3-d94f-1112-30e9-954e830e44c8.png)

ここで、「Sign in to Glitch」ボタンを押すか、メールアドレスと仮パスワードを使ってSign in して準備完了です。


## チュートリアルの hello world を動かしてみる
### (1) 新規プロジェクトの作成

画面上の、「New Project」ボタンを押して、メニューから「hello-webpage」を選びます。
![step01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/a7f3225d-50b9-a983-41e1-665b4c9bae9a.png)

これで新規プロジェクトが作成されました。
![step02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/b2ec4ab2-ba47-a095-405b-56b364eb80f5.png)

### (2) hello world のコピー
次に本家jsPsychのページに行って、
左のメニューから Tutorials - The Basics: Hello world を選びます。
![step11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/3a31130c-a369-a6cc-caba-640a7ea9a18d.png)
読み進めると、Step5 にコードが書いてあるので、これをコピーします。
![step05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/7fea3623-98c2-e3fa-ea60-153202875749.png)
その次に、Glitch のページに戻って index.html を編集します。
![step06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/b33bbda2-a9fd-bd7e-d4cf-5a50d55abc4f.png)
この時に、右側にある実行結果のページが邪魔なので、X ボタンで消しておきます。
![step07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/c3a5f63a-75f3-e80b-4f3c-4e7cb4080944.png)
index.html の内容を、先ほどこピーした内容に入れ替えます。
![step08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/d97f2dd4-a232-ece9-663f-014ca30ea99e.png)

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="https://unpkg.com/jspsych@7.0.0"></script>
    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>
    <link href="https://unpkg.com/jspsych@7.0.0/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>
```

###(3) Hello World の実行
Show - In a New Window で、実行します。

![step09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/57332104-438a-6b0e-2426-8ced01924015.png)

無事に Hello World が表示されました。
![step10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1252322/6fc124dc-3df2-6a50-b062-486d15d33686.png)


おつかれさまでした。


## 実行中の画面
上記の手順を実際にやってみました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/KMAqJqx1mPQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## おわりに
やはり、以前と比較しても最初の取っ掛かりがかなり簡単になりました。
あとはプラグインのリファレンスを読んでおけばそこそこ作れるのではないでしょうか。