はじめに
これまでの章では，jsPsych の基本的な使い方を学びながらフランカー課題を作成しました。同意画面や，練習・本番前・実験終了時の教示画面を追加すれば実験として完成です（各自で行ってください）。本章では実験プログラム作成の仕上げとして，実験画面をフルスクリーン表示にする方法について説明します。そして，完成した実験プログラムを jsPsych のメインの利用用途であるオンライン実験として実施する方法を簡単に紹介します。
実験をフルスクリーンで実施する
オンライン実験で実験画面をフルスクリーン表示にする方法を説明します。jsPsych には全画面表示を操作できるプラグインjspsych-fullscreen.jsが用意されています。これを使って実験画面を全画面にしたり全画面を解除したりすることができます。コードの冒頭部分でプラグインを読み込み，<script></script>部分でtype: 'fullscreen'の試行変数を作成します。それらをjspsych.init()のtimeline配列に入れます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="../jspsych-6.3.1/jspsych.js"></script>
<script src="../jspsych-6.3.1/plugins/jspsych-fullscreen.js"></script>
<link rel="stylesheet" href="../jspsych-6.3.1/css/jspsych.css" />
</head>
<body></body>
<script>
var start_fullscreen = {
type: 'fullscreen',
message: '<p>ウィンドウサイズを最大化します。下のボタンを押してください。</p>',
button_label: '次へ',
fullscreen_mode: true, // 全画面表示にする
};
var end_fullscreen = {
type: 'fullscreen',
fullscreen_mode: false, // 全画面表示を解除
};
var instruction = {
type: 'html-keyboard-response',
stimulus: '3秒経過 or いずれかのキー入力でフルスクリーンを解除します',
trial_duration: 3000,
};
jsPsych.init({
timeline: [start_fullscreen, instruction, end_fullscreen],
});
</script>
</html>
上の例では，type: 'fullscreen'の試行変数の以下の項目について設定しています。
-
message: 全画面表示を開始する前に画面に表示するメッセージ -
button_label: メッセージの下に表示されるボタンのラベル -
fullscreen_mode: 全画面表示にするかどうか。trueなら全画面表示を開始する。
なお，messageやbutton_labelの設定は，fullscreen_mode: trueの時のみ有効になります。
オンライン実験の実施（cognition.run）
フルスクリーン化も導入して，フランカー課題のコードが完成しました。以下にコード例を示しています。ご自身で作成したコードを見比べてみてください。違っていても思ったように動作していれば OK です。
フランカー課題のコード例
利用するプラグインを<head></head>部分で全て読み込んでいるか注意してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="../jspsych-6.3.1/jspsych.js"></script>
<script src="../jspsych-6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
<script src="../jspsych-6.3.1/plugins/jspsych-survey-text.js"></script>
<script src="../jspsych-6.3.1/plugins/jspsych-survey-multi-choice.js"></script>
<script src="../jspsych-6.3.1/plugins/jspsych-fullscreen.js"></script>
<link rel="stylesheet" href="../jspsych-6.3.1/css/jspsych.css" />
</head>
<body></body>
<script>
// general instructions ----------------------------------------------------
var inst_opening = {
type: 'html-keyboard-response',
stimulus: 'これから実験をおこないます（10分程度）[実験の説明をし，同意を取る]',
prompt: '<p>スペースキーを押すと次に進みます<p>',
choices: [' '],
data: { task: 'instruction' },
};
var inst_closing = {
type: 'html-keyboard-response',
stimulus: '<p>実験はすべて終了しました。ご協力ありがとうございました。</p>',
prompt: 'そのまま待機してください。5秒経過すると自動でウィンドウサイズがもとに戻ります。',
choices: jsPsych.NO_KEYS,
data: { task: 'instruction' },
trial_duration: 5000,
};
// fullscreen --------------------------------------------------------------
var start_fullscreen = {
type: 'fullscreen',
message: '<p>ウィンドウサイズを最大化します。下のボタンを押してください。</p>',
button_label: '次へ',
fullscreen_mode: true,
data: { task: 'instruction' },
};
var end_fullscreen = {
type: 'fullscreen',
fullscreen_mode: false,
data: { task: 'instruction' },
};
// participant info --------------------------------------------------------
var par_info = {
tempID: jsPsych.randomization.randomID(12),
};
var ask_age = {
type: 'survey-text',
questions: [{ prompt: '年齢を入力してください', columns: 3, required: true, name: 'age' }],
data: { task: 'par_info' },
on_finish: function (data) {
par_info.age = data.response.age;
},
};
var ask_sex = {
type: 'survey-multi-choice',
questions: [{ prompt: '性別を回答してください', options: ['男性', '女性'], required: true, horizontal: true, name: 'sex' }],
data: { task: 'par_info' },
on_finish: function (data) {
par_info.sex = data.response.sex;
},
};
var get_par_info = {
timeline: [ask_age, ask_sex],
};
// flanker -----------------------------------------------------------------
var repeat_practice = 2;
var repeat_main = 10;
var inst_flanker_procedure = {
type: 'html-keyboard-response',
stimulus:
'これから画面上に５つの矢印（>>>>>など）が表示されます。<br>' +
'中央の矢印が左向き（<）なら「f」キーを<br>' +
'中央の矢印が右向き（>）なら「j」キーを<br>' +
'なるべく早く，正確に押してください<br><br>' +
'準備ができたら「f」キーか「j」キーを押して課題を開始してください。',
choices: ['f', 'j'],
data: { task: 'instruction' },
};
var inst_flanker_go_main = {
type: 'html-keyboard-response',
stimulus: 'それでは本番を行います。<br>準備ができたら「f」キーか「j」キーを押して課題を開始してください。',
choices: ['f', 'j'],
data: { task: 'instruction' },
};
function create_flanker_block(task_name, sample_size) {
var stims_flanker = [
{ stim: '<<<<<', condition: '一致', key: 'f' },
{ stim: '>>>>>', condition: '一致', key: 'j' },
{ stim: '>><>>', condition: '不一致', key: 'f' },
{ stim: '<<><<', condition: '不一致', key: 'j' },
{ stim: '--<--', condition: '中性', key: 'f' },
{ stim: '-->--', condition: '中性', key: 'j' },
];
var fixation = {
type: 'html-keyboard-response',
stimulus: '<p style="font-size: 48px">+</p>',
choices: jsPsych.NO_KEYS,
trial_duration: 500,
};
var trial = {
type: 'html-keyboard-response',
stimulus: function () {
return `<p style="font-size: 48px">${jsPsych.timelineVariable('stim')}</p>`;
},
choices: ['f', 'j'],
data: {
task: task_name, // <-- 第1引数によって変わる
condition: jsPsych.timelineVariable('condition'),
key: jsPsych.timelineVariable('key'),
},
on_finish: function (data) {
data.correct = Number(jsPsych.pluginAPI.compareKeys(data.response, data.key));
},
};
var block = {
timeline: [fixation, trial],
timeline_variables: stims_flanker,
sample: {
type: 'fixed-repetitions',
size: sample_size, // <-- 第2引数によって変わる
},
};
return block;
}
var flanker_practice = create_flanker_block('flanker_practice', repeat_practice);
var flanker_main = create_flanker_block('flanker_main', repeat_main);
var flanker_task = {
timeline: [inst_flanker_procedure, flanker_practice, inst_flanker_go_main, flanker_main],
};
jsPsych.init({
timeline: [inst_opening, start_fullscreen, get_par_info, flanker_task, inst_closing, end_fullscreen],
});
</script>
</html>
作成したコードをオンライン実験として実施できるようにしましょう。簡単に試せるサービスとして，cognition.run があります。jsPsych で作成したコードでオンライン実験するために作られたサービスです。筆者がちょっと使ってみた感想は，超便利！です（しかも無料）。特にびっくりしたのは，サーバーにデータを保存するためのコードを書かなくても勝手に保存してくれるという点です（通常は保存用のコードを書く必要がある）。
5 ステップで本チュートリアルで作成したフランカー課題をオンライン実験として実施できます
- アカウントを作る
- 左上の「new task」から課題プロジェクトを作成（課題名は念のため半角英数字のみにする）
- 上から 2 段目「Design」の「Source code」から課題編集ページへ移動
- コードエリア（黒い領域）に作成したコード（
<script></script>部分のみ）をコピペ - プロジェクトのページに戻り（コードエリアのすぐ上にある課題名をクリックすれば良い），一番上の「Link」にあるリンクを然るべき方法で共有し参加者にアクセスしてもらう
サーバーを用意する
第 1 章で言及したように，jsPsych を用いて作成した実験プログラムはウェブページです。第三者がネットを経由してアクセスできるようなサーバーに必要なファイル・フォルダをアップロードすれば実験を実施することができます。以下のような選択肢があります。
Pavlovia は参加者一人あたりの利用料金が課金されるシステムです。Firebase は一定の範囲内で無料のサービスです。MindProbe は無料だそうです（たぶん一定の条件がありそう）。詳細は各サービスの公式ページを参照してください。MindProbe 以外のサービスの導入・利用方法については国里先生のページがとても参考になります。
他にも，ウェブサイトを運営できるようなレンタルサーバーでも実験を実施できます。筆者はさくらサーバーを利用しています。月額制なので，実験を実施していなくても料金を払う必要があります。研究室単位で利用する場合はあまり問題ないかもしれません。
さくらサーバーを利用して本チュートリアルの実験を実施する場合は，まず，データをサーバーに保存するためのスクリプトをこれまでの実験スクリプトに追加します。次に，実験に関係するフォルダをサーバーにアップロードします。基本的に，チュートリアル用のフォルダjspsych-tutorialをそのままアップロードすればよいです。実験用の html ファイルのリンクを取得して公開すれば実験を実施できます。
詳細については今後ここに追記するか，別の記事として公開する予定です。
おわりに
本章では，jsPsych を用いた実験プログラムをオンライン実験として実施する方法を紹介しました。いろんな方法があってそれぞれによって手順が違う（し，有料のものもある）ので，サービス名の紹介にとどまってしまいました。少なくとも練習用途では cognition.run を利用するのが簡単でいいと思います。
本章で主なチュートリアルは終了です。画面に文字刺激を提示するだけの簡単な実験ではありましたが，jsPsych の使い方の基本を押さえることはできたと願っております。以降の章では，これまでの章で扱っていないが，心理学の研究でよく使われそうな課題の作り方などを各論的に扱っていきます。