Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rで始める心理学Web実験

ando_Roid
December 04, 2019

 Rで始める心理学Web実験

本スライドは「Rを使って心理学実験課題を作成し、Web実験を行うまでのチュートリアル的なフロー」です。
・どんな感じで作成していくのか
・環境構築
・簡単な実験課題の作成(jsPsych)
・firebaseを使ったweb実験のやりかた
を主に紹介します。他にも、Tipsや陥りやすいミスなども記載しました。

※R Advent Calender 2019 4日目の記事です。
https://qiita.com/advent-calendar/2019/rlang

ando_Roid

December 04, 2019
Tweet

More Decks by ando_Roid

Other Decks in Science

Transcript

  1. yamlヘッダーの設定 --- title: "test" author: "ando_roid" output: html_document: mathjax: null

    highlight: null theme: null css: jspsych-6.1.0/css/jspsych.css --- outputをいじいじ jsPsych用のcssを追加 (6.1.0のところはver確認) ※yaml … Rmdの設定 Rmdファイルを開いて 一番上にある部分
  2. yamlヘッダーの設定 --- title: "test" author: "ando_roid" output: html_document: mathjax: null

    highlight: null theme: null css: jspsych-6.1.0/css/jspsych.css --- インデント(余白)大事 完全コピペでもよし
  3. rチャンクの設定 ```{r setup, include=FALSE} knitr::opts_chunk$set(echo = FALSE, message=FALSE, warning=FALSE) ```

    ```{r} library(htmltools) tagList( tags$script(src='jspsych-6.1.0/jspsych.js'), tags$script(src='jspsych-6.1.0/plugins/jspsych-html-keyboard- response.js') ) ``` コードやメッセージ、警告を HTMLには表示しない {htmltools}を使って jsPsychとjsPsychのプラグインを呼び出し
  4. jsPsychのプラグインについて プラグインとは…実験機能(Rのパッケージに近い) ・ キー押し課題 → キー押し用プラグイン ・ 質問紙課題 → ボタン式プラグイン

    ・ IAT → IAT用プラグイン 実験によって使いたいものを選択して、 あらかじめ呼び出しておく(library()的な)
  5. jsPsychで「Hello jsPsych」 47 ```{js} /* タイムラインを用意 */ var timeline =

    []; /* 呈示する文字を変数にする */ var text = "Hello jsPsych"; /* trialで呈示する文字を設定 */ var stimuli = { type: "html-keyboard-response", stimulus: text }; timeline.push(stimuli); /* 実験開始 */ jsPsych.init({ timeline: timeline }); ``` 左のコードを書こう!! 「,」や「;」が無いだけで 走らないので注意 ※「/**/」で囲まれた部分は コメントアウトなのでプログラムと して評価されません
  6. jsPsychで「Hello jsPsych」 49 ```{js} /* タイムラインを用意 */ var timeline =

    []; /* 呈示する文字を変数にする */ var text = "Hello jsPsych"; /* trialで呈示する文字を設定 */ var stimuli = { type: "html-keyboard-response", stimulus: text }; timeline.push(stimuli); /* 実験開始 */ jsPsych.init({ timeline: timeline }); ``` タイムラインの作成 試行の順番を指示する タイムラインに従ってプ ログラムは進行する
  7. jsPsychで「Hello jsPsych」 50 ```{js} /* タイムラインを用意 */ var timeline =

    []; /* 呈示する文字を変数にする */ var text = "Hello jsPsych"; /* trialで呈示する文字を設定 */ var stimuli = { type: "html-keyboard-response", stimulus: text }; timeline.push(stimuli); /* 実験開始 */ jsPsych.init({ timeline: timeline }); ``` 呈示刺激の作成 今回は「Hello jsPsych」 という文字列をキー押し 刺激として出力
  8. jsPsychで「Hello jsPsych」 51 ```{js} /* タイムラインを用意 */ var timeline =

    []; /* 呈示する文字を変数にする */ var text = "Hello jsPsych"; /* trialで呈示する文字を設定 */ var stimuli = { type: "html-keyboard-response", stimulus: text }; timeline.push(stimuli); /* 実験開始 */ jsPsych.init({ timeline: timeline }); ``` 呈示刺激の格納 今回は刺激が一つだが、 複数あるときは、 複数プッシュしていく
  9. jsPsychで「Hello jsPsych」 52 ```{js} /* タイムラインを用意 */ var timeline =

    []; /* 呈示する文字を変数にする */ var text = "Hello jsPsych"; /* trialで呈示する文字を設定 */ var stimuli = { type: "html-keyboard-response", stimulus: text }; timeline.push(stimuli); /* 実験開始 */ jsPsych.init({ timeline: timeline }); ``` 実験指示 最後に、タイムラインに 従って実験を行うように 指示する
  10. jsPsychのプログラム作成フロー ・・・ 56 タイムライン (呈示刺激の入れ物) 刺激A 教示文 刺激B キー押し 刺激C

    ボタン押し 呈示刺激を作成し てタイムラインに 入れていく(push) ※刺激に使う プラグインも必要‼
  11. jsPsychのプログラム作成フロー ・・・ 57 タイムライン (呈示刺激の入れ物) 刺激A 教示文 刺激B キー押し 刺激C

    ボタン押し 呈示刺激を入れた タイムラインを実験 として指定 (jsPsych.init) jsPsych.init
  12. 教示文の作成 65 ```{js} var timeline = []; /* 教示文作成 */

    var welcome = { type: "html-button-response", stimulus: '<p>実験へのご協力をありがとうございます。'+ '<br>これから、質問紙に回答していただきます'+ '<br>同意いただける場合は、「次へ」を押してください。</p>', choices: ['次へ'] }; timeline.push(welcome); jsPsych.init({ timeline: timeline }); ```
  13. 教示文の作成 : stimulus 67 呈示刺激のテキストはHTMLをつかって書く ・ <p>…パラグラフタグ ・ <br>…改行タグ ・

    文字列はクオテーションで囲む ・ コードを繋ぐときは「+」で繋げる HTMLに準拠していればフォントや色、大きさの 選択も可能
  14. 質問の作成 70 ```{js} timeline.push(welcome); var gender = { type: 'html-button-response',

    stimulus: '<p>あなたの性別を回答してください<br></p>', choices: ['男性', '女性', 'どちらでもない'], prompt: "該当するものを選択して下さい" } timeline.push(gender); /* 実験開始 */ jsPsych.init({ timeline: timeline }); ``` 教示文(welcome)をプッシュした下に 性別についての質問を追加
  15. 連想配列(Dictionary)とは 75 ・ 通常の配列 var array = ['男性', '女性', 'どちらでもない’];

    ・ 連想配列(辞書型) var dic = [{sex : ‘男性’}, {sex : ‘女性’}, {sex : 'どちらでもない’}];
  16. 連想配列(Dictionary)とは 76 ・ 連想配列(辞書型) var dic = [{sex : ‘男性’},

    {sex : ‘女性’}, {sex : 'どちらでもない’}] 連想配列は、値のほかに「キー」を持つ 連想配列のキーから値を呼び出すことが可能 データにおける変数名のようなもの
  17. 質問プールの作成 77 ```{js} timeline.push(gender) var question_pool = [ { item:

    "おなかが空いた"}, { item: "家に帰りたい"}, { item: "寝たい"} ]; ```{js} 性別(gender)の下に 質問プールを追加 ※ キー名称は統一しておく
  18. 質問プールの作成 78 ```{js} var question_pool = [ { item: "おなかが空いた"},

    { item: "家に帰りたい"}, { item: "寝たい"} ]; var test_question = { type: "html-button-response", stimulus: jsPsych.timelineVariable('item'), choices: ['1', '2', '3', '4', '5'], prompt: "<p>←当てはまらない 当てはまる→</p>" }; ```{js} test_questionの stimulusに timelineVariableとして 質問プールのキー「item」を指定
  19. 質問プールの作成 79 ```{js} var test_question = { type: "html-button-response", stimulus:

    jsPsych.timelineVariable('item'), choices: ['1', '2', '3', '4', '5'], prompt: "<p>←当てはまらない 当てはまる→</p>" }; var test_procedure_question = { timeline: [test_question], timeline_variables: question_pool, randomize_order: true }; timeline.push(test_procedure_question); ```{js} ・ timeline : 呈示刺激を指定 ・ tl_var : 質問プールの指定 ・ randomize_order : 無作為化 ※tl_var … timeline_variables
  20. 質問プールの作成(完成版) 80 var question_pool = [ { item: "おなかが空いた"}, {

    item: "家に帰りたい"}, { item: "寝たい"} ]; var test_question = { type: "html-button-response", stimulus: jsPsych.timelineVariable('item'), choices: ['1', '2', '3', '4', '5'], prompt: "<p>←当てはまらない 当てはまる→</p>" }; var test_procedure_question = { timeline: [test_question], timeline_variables: question_pool, randomize_order: true }; timeline.push(test_procedure_question);
  21. 質問プールの作成(完成版) 81 var question_pool = [ { item: "おなかが空いた"}, {

    item: "家に帰りたい"}, { item: "寝たい"} ]; var test_question = { type: "html-button-response", stimulus: jsPsych.timelineVariable('item'), choices: ['1', '2', '3', '4', '5'], prompt: "<p>←当てはまらない 当てはまる→</p>" }; var test_procedure_question = { timeline: [test_question], timeline_variables: question_pool, randomize_order: true }; timeline.push(test_procedure_question); 〇でつながった同士を 同じ名前に!! 最初は、意味不明でも だんだんわかるはず
  22. 質問プールの作成 82 ・ 質問プールを作成(連想配列) ※ キー名称は統一 ・ 刺激変数作成 stimulus引数に jsPsych.timelineVariables(キー名称)

    ・ タイムライン変数作成 timeline引数に刺激変数を指定 timeline_variables引数に質問プールを指定
  23. Firebaseでオンライン実験 91 ・ Firebaseアカウント&プロジェクト作成 ・ Firebase CLIのインストール ・ Firebase プロジェクトの初期化

    ・ Databaseとアプリの設定 ・ jsPsychにDBの設定 ・ 実験プログラムをホスティング 参考:https://kunisatolab.github.io/main/how-to-web-experiment-jspsych.html
  24. Firebaseでオンライン実験 92 ・ Firebaseアカウント&プロジェクト作成 ・ Firebase CLIのインストール ・ Firebase プロジェクトの初期化

    ・ Databaseとアプリの設定 ・ jsPsychにDBの設定 ・ 実験プログラムをホスティング 参考:https://kunisatolab.github.io/main/how-to-web-experiment-jspsych.html
  25. Firebaseでオンライン実験 94 ・ Firebaseアカウント&プロジェクト作成 ・ Firebase CLIのインストール ・ Firebase プロジェクトの初期化

    ・ Databaseとアプリの設定 ・ jsPsychにDBの設定 ・ 実験プログラムをホスティング 参考:https://kunisatolab.github.io/main/how-to-web-experiment-jspsych.html
  26. Firebaseでオンライン実験 96 ・ Firebaseアカウント&プロジェクト作成 ・ Firebase CLIのインストール ・ Firebase プロジェクトの初期化

    ・ Databaseとアプリの設定 ・ jsPsychにDBの設定 ・ 実験プログラムをホスティング 参考:https://kunisatolab.github.io/main/how-to-web-experiment-jspsych.html
  27. Firebaseでオンライン実験 105 ・ Firebaseアカウント&プロジェクト作成 ・ Firebase CLIのインストール ・ Firebase プロジェクトの初期化

    ・ Databaseとアプリの設定 ・ jsPsychにDBの設定 ・ 実験プログラムをホスティング 参考:https://kunisatolab.github.io/main/how-to-web-experiment-jspsych.html
  28. Firebaseでオンライン実験 113 ・ Firebaseアカウント&プロジェクト作成 ・ Firebase CLIのインストール ・ Firebase プロジェクトの初期化

    ・ Databaseとアプリの設定 ・ jsPsychにDBの設定 ・ 実験プログラムをホスティング 参考:https://kunisatolab.github.io/main/how-to-web-experiment-jspsych.html
  29. jsPsychにDBの設定 114 Firebase SDKをRmd (jsPsych)に追加していく ・ タグ設定部分(rチャンク)にfirebase関連のjsを追加 (firebase-app, firebase-database.js) ```{r}

    library(htmltools) tagList( # firebase関連のjsを追加 tags$script(src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"), tags$script(src="https://www.gstatic.com/firebasejs/7.5.0/firebase-database.js"), tags$script(src='jspsych-6.1.0/jspsych.js'), tags$script(src='jspsych-6.1.0/plugins/jspsych-html-keyboard-response.js') ) ``` バージョンに都度注意(今回は7.5.0)
  30. jsPsychにDBの設定 115 ・ {js}チャンク内にFirebaseの情報を追加 ※ ×××はプロジェクトによって異なる // Firebase set up

    // Your web app's Firebase configuration var firebaseConfig = { apiKey: "XXXXX", authDomain: "XXXXX", databaseURL: "XXXXX", projectId: "XXXXX", storageBucket: "", messagingSenderId: "XXXXX", appId: "XXXXX" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); Firebase SDKの <script></script>で 囲まれた部分を コピペすればOK
  31. jsPsychにDBの設定 117 /*ID(日付時刻_8桁の乱数)の設定*/ // 乱数 var l = 8; var

    c = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; var cl = c.length; var r_num = ""; for(var i=0; i<l; i++){ r_num += c[Math.floor(Math.random()*cl)]; } // 日付時刻 var time_date= new Date(); var year = time_date.getFullYear(); var month = time_date.getMonth()+1; var date = time_date.getDate(); var hour = time_date.getHours(); var minute = time_date.getMinutes(); var second = time_date.getSeconds(); // ID var exp_id = year +'_'+ month +'_'+ date +'_'+ hour +'_'+ minute +'_'+ second +'_' + r_num;
  32. jsPsychにDBの設定 118 /*タイムラインの開始*/ jsPsych.init({ timeline: timeline, on_finish: function() { firebase.database().ref(exp_id).set({

    data: jsPsych.data.get().values() }) } }); ・ 最後に以下のコードをjsPsych.init として 記述。これでデータがDBに保存される
  33. Firebaseでオンライン実験 120 ・ Firebaseアカウント&プロジェクト作成 ・ Firebase CLIのインストール ・ Firebase プロジェクトの初期化

    ・ Databaseとアプリの設定 ・ jsPsychにDBの設定 ・ 実験プログラムをホスティング 参考:https://kunisatolab.github.io/main/how-to-web-experiment-jspsych.html
  34. 129 ・ 反応時間の妥当性 → 反応時間が機械や回線に依存する可能性 (Web実験共通問題) ・ CUIなので最初は少し詰まるかも → 慣れたら神

    ・ Rmd上だと、{js}の補完機能や「:」「,」忘れが… → jsの部分は、別に.jsファイルを作ってそこで書くとGood Rmd × jsPsych × Firebaseのデメリット