そもそもファイルの事前読み込みはどうして必要なの？

画像や動画、音声ファイルを使った実験では、指定したタイミングでそれらを呈示したいというのが人情です。ところが事前読み込みをしていないと、呈示する段になってあわてて読み込むので、刺激の呈示タイミングに重大な影響を及ぼします。なので事前読み込みは必ずしましょうね、という話です。

6.2.0まではどうやってたの？

基本的にjsPsychは自動で事前読み込みをするように設計されていますが、これが適切に機能するには制約があります。例えばcode1は自動で画像ファイルを読み込んでくれますが、code2は自動で読み込みません。

code1　自動で読み込む

var trial = {
  type: 'image-button-response',
  stimulus: 'file.jpg'
}

code2　自動で読み込まない

var trial = {
  type: 'html-button-response',
  stimulus: '<img src="file.jpg">'
}

code2のようなケースでは次のような形で手動で読み込む必要がありました。

var images = ['image1.png', 'image2.png', 'image3.png'];

jsPsych.init({
  timeline: [trial],
  preload_images: images, // The image data should be preloaded.
});

6.3.0以降で以下のようにやる

自動で読み込むときと読み込まないときがあると上で説明しましたが、それについては変更はありません。正直なところ、どういうときに自動で読み込むのかを完全に把握するのは結構な手間ですよね・・・。なので私は基本的に手動で読み込むようにしています。どんな場合も手動！　手動は自動を包含します。なので、ここでも手動での説明にしぼります。

まず、事前読み込み用のプラグインを使う点に注意してください。つまり、ファイルの冒頭に以下のような一文が必要になります。

<script src="../plugins/jspsych-preload.js"></script>

それから、事前読み込み用の試行を設けます。


    const images = [ // プログラム内で使用するファイル名を列挙した配列を作ります
        // この例ではimgフォルダに画像がまとまっていると想定していますが、まとまっていなくてもOK
        './img/image1.png',
        './img/image2.png',
        './img/image3.png'
    ];

    const sounds = [
        './sound1.wav',
        './sound2.mp3',
        './sound3.wav'
    ];

    const preload = {
        type: 'preload',
        images: images,
        audio: sounds
    }

そうして、initのtimelineにpreloadを含めます。このとき、実際にファイルを呈示する試行（練習や本試行）よりも前で読み込むように注意してください。

jsPsych.init({
    timeline: [preload, practice, experiment, ... ]
})

めんどくさくなってない？

事前読み込みの方法が、いままでよりも複雑になってないか？　そんな声が聞こえてきそうです。私もその点は同意します。ただ、こんなふうに変更した意味がもちろんあるわけですね。

具体的には動画を使うような実験で恩恵を受けると思われます。

動画の事前読み込みは、かなりの時間を要することがあります。私が以前に作ったプログラムでも、実験前に１分以上待つことがありました。あれ？　フリーズしてる？って思うくらい。

例えば動画ファイルを３つ使う実験だったとして、実験前に３つのファイルすべてを読み込むのが今までのやり方でした。6.3.0以降では、これを次のように書くことができるようになりました。

jsPsych.init({
    timeline: [preload1, trial1, preload2, trial2, preload3, trial3]
})

つまり、呈示するファイルだけを呈示の直前で読み込むことができるんですね。こうすることで読み込み時間（待ち時間）を分散することができるようになったのです！　もちろん、いっきにすべてのファイルを読み込んでも問題がないときには、まとめて読み込むことも可能です。

説明は以上です。

ここで説明したことのほかにも、事前読み込みに失敗しても実験を強行できるオプションや、エラーの詳細を画面に表示したりすることができるようになっています。詳しくは、公式の事前読み込みの概要とpreloadプラグインの説明をご覧ください。

なお、私が作成したpsychophysicsプラグインを使うときにも事前読み込みを忘れずに行ってくださいね。

jsPsych 6.3.0からファイルの事前読み込み方法が変わったよ

そもそもファイルの事前読み込みはどうして必要なの？

6.2.0まではどうやってたの？

6.3.0以降で以下のようにやる

めんどくさくなってない？