Rで始める心理学Web実験

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

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

Transcript

1. Rで始める 心理学Web実験 ando_Roid
2. はじめに ⦁ R Advent Calendar 2019 4日目の記事です。 ⦁ 先日、勉強会のために資料を作成したのです が、なかなか力を入れてつくったのでここで供 養させます。 2
3. 自己紹介 ⦁ 名前：安藤正和 ⦁ 専攻：心理学(卒論やばめ) ⦁ マーケティングリサーチの会社でバイト ⦁ Twitter: @hirahria2835 (ando_Roid) 3
4. Contents ⦁ 小噺(心理学科4年の経験談) ⦁ 環境構築 ⦁ 実験課題作成(質問紙) ⦁ Firebaseを使ってオンライン実験 4
5. “ 小噺 5
6. ・ Web上で 心理学実験やりたいなぁ ・ 条件分岐とかの処理 もできるのがいいなぁ ・ 出来ればRを使いたいなぁ ・ 反応時間も取れるといい
7. 7 心理学実験課題作成ソフト
8. 8 心理学実験課題作成ソフト 色々ある…
9. 9 Rで書きたい…
10. 10 いけまっせ
11. 11 こう
12. 12 Rコード+mdを{knitr}して ドキュメント化 (pdf, html, docx) R以外もOK!! (JS, Python etc…)
13. 13 JavaScriptを使って、 プログラム作成 豊富なプラグイン機能で 大抵の心理学実験は 作成可能
14. 14 Googleが提供している アプリ用プラットフォーム サーバとして使用
15. 15 Rmd × jsPsych × Firebase を用いた実験フロー 実験(.html) データ(.JSON) Host DB Participants Programing Analysis
16. “ 環境構築 16
17. Environment ・ Rstudioでプロジェクト作成 ・ jsPsychライブラリの設置 ・ Rmdファイルを作成 17
18. Rstudioで プロジェクト作成 1
19. Rstudioプロジェクトとは ⦁ 一連の処理を一括管理 ⦁ スクリプトの履歴 ⦁ WDも設定 → とりあえず細かく作っておくのが吉 19
20. Rstudioを起動 画面右上 (Project:(None)) をクリック Rstudioプロジェクトの作成 20
21. Rstudioプロジェクトの作成 21 New Project…を選択 New Directory…を選択
22. Rstudioプロジェクトの作成 New Projectを選択 名前と保存場所を選択して Create Project
23. Rstudioプロジェクトの作成 しばらくして、プロジェクト作成完了 右上が自分の名付けた プロジェクト名になっていればおk
24. jsPsychライブラリ の設置 2
25. jsPsychライブラリの設置 ⦁ Rmdでプログラムを組むために必要 ⦁ 基本的にプロジェクトにおいておく ⦁ あとは呪文(コード)を書くだけで使える 25
26. jsPsychのダウンロード jsPsychのリリースページに行って、 最新版(.zip)をダウンロード ※バージョンがちょくちょく変わるので注意 (jsPsych-×.×.×.zipならおk) ←コレ
27. jsPsychを解凍して、プロジェクトへ DLした.zipを解凍 先ほど作ったプロジェクトに入れる Rprojectファイル jsPsych-×××フォルダ の二つがあればおk
28. Tips : jsPsychライブラリの中身 ・ examples：jsPsychで作れるプログラムの例 (これ見れば何ができるか分かる) ・ plugins：jsPsychでプログラムを組むときに必要なもの (超重要) ・ jsPsych：jsPsychの中身(核) ※よくわかっていない ・ License：ライセンス
29. Tips : examplesが最強 examplesのファイルを開くと ブラウザ上での課題の挙動を 見れます。 それを見て、これ作ろうと思ったら そのファイルのコードを参考に プログラムを組んでいくのが やりやすいかなと思います。
30. Rmdファイルを作成 3
31. Rmdファイルの作成 ⦁ Rmdにプログラムを書いていく ⦁ ポチポチっと終わるのでサクッといきます 31
32. Rmdファイルの作成 左上の File ↓ New File ↓ R Markdown
33. Rmdファイルの作成 Document ↓ Title,Authorは自由 ↓ 出力をHTML選択 ↓ OK
34. Rmdファイルの作成 作成されたファイルを保存 左上のknitをクリックすると、 HTMLファイルが出力される ([CTRL+SHIFT+K]でもおｋ)
35. Rmdファイルの作成 このとき、 ・[name].Rmd ・[name].html (・[name]_files) が作成されていることを確認 ※今回は 「test.Rmd, test.html」
36. Rmdファイルの作成 ・ [name].Rmd 実験コードを書く ・ [name].html Rmdからレンダリングされ た実験プログラム。 Firebaseに、この.htmlを置く
37. “ 実験課題作成 (質問紙) 37
38. jsPsychを使ってプログラムを書こう 1. jsPsych用にRmdを設定 2. プログラムを書く 3. knitrでプログラム確認 4. 修正 以下、3 ~ 4を繰り返す 38
39. jsPsych用にRmdを設定 ・ yamlヘッダーの設定 →Rmdの設定部分 ・ rチャンクにjsPsychのプラグイン設定 →チャンクはmdではなくコードとして 認識される 39
40. 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ファイルを開いて 一番上にある部分
41. yamlヘッダーの設定 --- title: "test" author: "ando_roid" output: html_document: mathjax: null highlight: null theme: null css: jspsych-6.1.0/css/jspsych.css --- インデント(余白)大事 完全コピペでもよし
42. 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のプラグインを呼び出し
43. jsPsychのプラグインについて プラグインとは…実験機能(Rのパッケージに近い) ・ キー押し課題 → キー押し用プラグイン ・ 質問紙課題 → ボタン式プラグイン ・ IAT → IAT用プラグイン 実験によって使いたいものを選択して、 あらかじめ呼び出しておく(library()的な)
44. このようになっていればOK!!
45. 実験プログラムを書いていこう!! ・ jsPsychで「Hello jsPsych」 ・ jsPsychで簡単な質問紙 45
46. 実験プログラムを書いていこう!! ・ jsPsychで「Hello jsPsych」 ・ jsPsychで簡単な質問紙 46
47. 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 }); ``` 左のコードを書こう！！ 「,」や「；」が無いだけで 走らないので注意 ※「/**/」で囲まれた部分は コメントアウトなのでプログラムと して評価されません
48. このようになっていればOK!! {js}でプログラム作成 実行して、真っ白の画 面に「Hello jsPsych」 呈示されれば成功‼
49. 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 }); ``` タイムラインの作成 試行の順番を指示する タイムラインに従ってプ ログラムは進行する
50. 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」 という文字列をキー押し 刺激として出力
51. 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 }); ``` 呈示刺激の格納 今回は刺激が一つだが、 複数あるときは、 複数プッシュしていく
52. 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 }); ``` 実験指示 最後に、タイムラインに 従って実験を行うように 指示する
53. jsPsychで「Hello jsPsych」 が上手くいかないとき… 53 ・yamlの設定が上手くできてない → インデント（空白）のミス、パスのミス ・プラグインの設定が上手くできていない → Rコードのエラー、パスのミス ・{js}内のエラー →「,」や「:」の付け忘れ、変数名のミス
54. jsPsychで「Hello jsPsych」 が上手くいかないとき… 54 48枚目のスライド写真通りにコードを書こう それでもだめなら、jsPsychライブラリフォルダ がきちんと入っているか見直そう エラーはあなたを強くします
55. jsPsychのプログラム作成フロー 55 タイムライン (呈示刺激の入れ物) 呈示刺激の入れ物 であるタイムライン を作成する
56. jsPsychのプログラム作成フロー ・・・ 56 タイムライン (呈示刺激の入れ物) 刺激A 教示文 刺激B キー押し 刺激C ボタン押し 呈示刺激を作成し てタイムラインに 入れていく(push) ※刺激に使う プラグインも必要‼
57. jsPsychのプログラム作成フロー ・・・ 57 タイムライン (呈示刺激の入れ物) 刺激A 教示文 刺激B キー押し 刺激C ボタン押し 呈示刺激を入れた タイムラインを実験 として指定 (jsPsych.init) jsPsych.init
58. 注意：よくない例(jsチャンクが複数) jsPsychを各Rmdファイルは、 {js}チャンクは一つ！！ (の方が良いと思う) 提示刺激は全てそのチャンク内 に書こう！！
59. 注意：よい例(jsチャンクが一つ) jsPsychを各Rmdファイルは、 {js}チャンクは一つ！！ (の方が良いと思う) 提示刺激は全てそのチャンク内 に書こう！！
60. 実験プログラムを書いていこう!! ・ jsPsychでHello jsPsych ・ jsPsychで簡単な質問紙 60
61. jsPsychで簡単な質問紙 61 質問紙課題を作ろう ・ 教示→質問→質問プール ・ スマホでも出来るようにボタン式
62. jsPsychで簡単な質問紙 62 質問紙課題を作ろう ・ 教示→質問→質問プール ・ スマホでも出来るようにボタン式
63. プラグインの指定 63 先ほどはキー押しのプラグインを使用 キー押しはパソコンのみ適用する可能 今回はスマホでも出来るボタン式プラグイン ```{r} library(htmltools) tagList( tags$script(src='jspsych-6.1.0/jspsych.js’), # これがHTMLで使用するボタン式プラグイン tags$script(src='jspsych-6.1.0/plugins/jspsych-html-button-response.js') ) ```
64. jsPsychで簡単な質問紙 64 質問紙課題を作ろう ・ 教示→質問→質問プール ・ スマホでも出来るようにボタン式
65. 教示文の作成 65 ```{js} var timeline = []; /* 教示文作成 */ var welcome = { type: "html-button-response", stimulus: '<p>実験へのご協力をありがとうございます。'+ '<br>これから、質問紙に回答していただきます'+ '<br>同意いただける場合は、「次へ」を押してください。</p>', choices: ['次へ'] }; timeline.push(welcome); jsPsych.init({ timeline: timeline }); ```
66. 教示文の作成 : type 66 Type引数：“html-button-response”を選択 練習では "html-keyboard-response“ 刺激ごとに使用する種類を選択 ※刺激作成に当たってプラグインの書き込みも 忘れずに
67. 教示文の作成 : stimulus 67 呈示刺激のテキストはHTMLをつかって書く ・ <p>…パラグラフタグ ・ <br>…改行タグ ・ 文字列はクオテーションで囲む ・ コードを繋ぐときは「＋」で繋げる HTMLに準拠していればフォントや色、大きさの 選択も可能
68. 教示文の作成 : choice 68 選択肢を記述 今回は選択肢が一つだが、複数ある場合 Java Scriptでの配列の記述方法で書き込む 例：var array = ['男性', '女性', 'どちらでもない']
69. jsPsychで簡単な質問紙 69 質問紙課題を作ろう ・ 教示→質問→質問プール ・ スマホでも出来るようにボタン式 基本的に、作り方は教示と同じ 選択肢が複数あるのと選択肢にラベル を付けられる
70. 質問の作成 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)をプッシュした下に 性別についての質問を追加
71. 質問の作成 71 作成方法は教示と基本的に同じ 異なるの点は ・ stimulusを配列 ・ promptで選択肢に補足説明
72. ・ 質問を一つ一つ作って pushしていくの手間… ・ 質問項目をランダムに 呈示したい
73. よろしい、ならばタイムライン変数だ
74. jsPsychで簡単な質問紙 74 質問紙課題を作ろう ・ 教示→質問→質問プール ・ スマホでも出来るようにボタン式 ここは少しテクいです。 連想配列をマスターして質問プールから 項目をランダム呈示しましょう
75. 連想配列(Dictionary)とは 75 ・ 通常の配列 var array = ['男性', '女性', 'どちらでもない’]; ・ 連想配列(辞書型) var dic = [{sex : ‘男性’}, {sex : ‘女性’}, {sex : 'どちらでもない’}];
76. 連想配列(Dictionary)とは 76 ・ 連想配列(辞書型) var dic = [{sex : ‘男性’}, {sex : ‘女性’}, {sex : 'どちらでもない’}] 連想配列は、値のほかに「キー」を持つ 連想配列のキーから値を呼び出すことが可能 データにおける変数名のようなもの
77. 質問プールの作成 77 ```{js} timeline.push(gender) var question_pool = [ { item: "おなかが空いた"}, { item: "家に帰りたい"}, { item: "寝たい"} ]; ```{js} 性別(gender)の下に 質問プールを追加 ※ キー名称は統一しておく
78. 質問プールの作成 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」を指定
79. 質問プールの作成 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
80. 質問プールの作成(完成版) 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);
81. 質問プールの作成(完成版) 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); 〇でつながった同士を 同じ名前に！！ 最初は、意味不明でも だんだんわかるはず
82. 質問プールの作成 82 ・ 質問プールを作成(連想配列) ※ キー名称は統一 ・ 刺激変数作成 stimulus引数に jsPsych.timelineVariables(キー名称) ・ タイムライン変数作成 timeline引数に刺激変数を指定 timeline_variables引数に質問プールを指定
83. “ Firebaseで オンライン実験 83
84. ここまでで 84 jsPsychによる実験課題作成が完了 ただ…
85. ここまでで 85 jsPsychによる実験課題作成が完了 ただ… データはどこにある？ Web実験やってなくね？
86. Web実験やろう 86 取得したデータは、JSONファイル形式で プログラム上に残る。 しかし、プログラムを閉じると データは消失していまう。 これを解決するために プログラムをサーバに立てる必要あり
87. 87 Rmd × jsPsych × Firebase を用いた実験フロー 実験(.html) データ(.JSON) Host DB Participants Programing Analysis
88. なぜFirebaseをつかうのか 88 Web実験を行う際にはサーバが必要…
89. なぜFirebaseをつかうのか 89 Web実験を行う際にはサーバが必要… 立てるの面倒くさい よくわからない くぁwせdrftgyふじこlp お金かかる
90. なぜFirebaseをつかうのか 90 Firebaseを使うと、通常のWeb実験なら ・ 無料(たいてい) ・ ホスティングも簡単 ・ サーバ知識に乏しくても行ける ※ 900人のWeb実験は無料でいけた by ando_Roid
91. Firebaseでオンライン実験 91 ・ Firebaseアカウント&プロジェクト作成 ・ Firebase CLIのインストール ・ Firebase プロジェクトの初期化 ・ Databaseとアプリの設定 ・ jsPsychにDBの設定 ・ 実験プログラムをホスティング 参考：https://kunisatolab.github.io/main/how-to-web-experiment-jspsych.html
92. Firebaseでオンライン実験 92 ・ Firebaseアカウント&プロジェクト作成 ・ Firebase CLIのインストール ・ Firebase プロジェクトの初期化 ・ Databaseとアプリの設定 ・ jsPsychにDBの設定 ・ 実験プログラムをホスティング 参考：https://kunisatolab.github.io/main/how-to-web-experiment-jspsych.html
93. Firebaseアカウント&プロジェクト作成 93 ・ Googleアカウントでログイン ・ 「プロジェクト作成」でプロジェクト名を設定 ・ Gアナリティクスは「今は必要ない」 1つのWeb実験につき1つのプロジェクト プロジェクト名はURLに記載されるので注意
94. Firebaseでオンライン実験 94 ・ Firebaseアカウント&プロジェクト作成 ・ Firebase CLIのインストール ・ Firebase プロジェクトの初期化 ・ Databaseとアプリの設定 ・ jsPsychにDBの設定 ・ 実験プログラムをホスティング 参考：https://kunisatolab.github.io/main/how-to-web-experiment-jspsych.html
95. Firebase CLIのインストール 95 https://firebase.google.com/docs/cli?hl=ja からOSごとにnode.jsをインストール コマンドをターミナルに打ち込んで Firebase CLIをインストール&ログイン npm install -g firebase-tools firebase login
96. Firebaseでオンライン実験 96 ・ Firebaseアカウント&プロジェクト作成 ・ Firebase CLIのインストール ・ Firebase プロジェクトの初期化 ・ Databaseとアプリの設定 ・ jsPsychにDBの設定 ・ 実験プログラムをホスティング 参考：https://kunisatolab.github.io/main/how-to-web-experiment-jspsych.html
97. Firebase CLIのインストール 97 Firebase用のフォルダを作成と初期化 ※フォルダ名は何でも良し (今回はDocuments内にfirebaseを作成 その中にtestというフォルダを作る想定) # ワーキングディレクトリをfirebaseのtestフォルダに変更 cd Documents/firebase/test # firebaseの初期化 firebase init
98. Firebase CLIのインストール 98 成功！！
99. Firebase CLIのインストール 99 DatabaseとHostingをSpaceキーで選択 選択されたらEnterで次へ
100. Firebase CLIのインストール 100 yes → yesでプロジェクト選択 先ほど作成したプロジェクト(test-jsPsych) を選択
101. Firebase CLIのインストール 101 あとは基本yesを選択して、最後は「N」
102. Firebase CLIのインストール 102 「Firebase initialization complete!」 とでれば初期化完了！！
103. DBのセキュリティルールの設定 103 初期状態だとDBに書き込みができないので firebase/test内のDatabase.rule.jsonを変更 「”.write” : true」に変更
104. DBのセキュリティルールの設定 104 コマンド「firebase deploy」で変更を保存
105. Firebaseでオンライン実験 105 ・ Firebaseアカウント&プロジェクト作成 ・ Firebase CLIのインストール ・ Firebase プロジェクトの初期化 ・ Databaseとアプリの設定 ・ jsPsychにDBの設定 ・ 実験プログラムをホスティング 参考：https://kunisatolab.github.io/main/how-to-web-experiment-jspsych.html
106. Databaseとアプリの設定 106 ・ Firebaseのプロジェクトページにて 開発からDatabaseを選択 ・ 「データベースの作成」をクリック
107. Databaseとアプリの設定 107 ・ 「テストモードで開始」を選んで「次へ」 ※どっちでもいい説がある
108. Databaseとアプリの設定 108 ・Cloud Firestoreのロケーションを選択する ※asia-northeast1は「東京」, 2は「大阪」
109. Databaseとアプリの設定 109 ・Cloud Firestore→Realtime Databaseを選択 ・「ルール」を開いて「”.write” : true」ならOK!!
110. Databaseとアプリの設定 110 ・ プロジェクトページから「アプリを追加」 ・ “ウェブ</>”をクリック
111. Databaseとアプリの設定 111 ・ アプリの登録にて「ニックネーム」を決める ・ アプリを登録をクリック
112. Databaseとアプリの設定 112 提示されるFirebase SDKを コピーこれをjsPsychに 挿入することでDBへの データ保存が可能となる
113. Firebaseでオンライン実験 113 ・ Firebaseアカウント&プロジェクト作成 ・ Firebase CLIのインストール ・ Firebase プロジェクトの初期化 ・ Databaseとアプリの設定 ・ jsPsychにDBの設定 ・ 実験プログラムをホスティング 参考：https://kunisatolab.github.io/main/how-to-web-experiment-jspsych.html
114. jsPsychにDBの設定 114 Firebase SDKをRmd (jsPsych)に追加していく ・ タグ設定部分(ｒチャンク)に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)
115. 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>で 囲まれた部分を コピペすればＯＫ
116. jsPsychにDBの設定 116 ・ DBに書き込む際のIDを設定 exp_idに「日付時刻_8桁の乱数」が用意される 次のスライドをFirebase情報の下にコピペ
117. jsPsychにDBの設定 117 /*ID(日付時刻_８桁の乱数)の設定*/ // 乱数 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;
118. jsPsychにDBの設定 118 /*タイムラインの開始*/ jsPsych.init({ timeline: timeline, on_finish: function() { firebase.database().ref(exp_id).set({ data: jsPsych.data.get().values() }) } }); ・ 最後に以下のコードをjsPsych.init として 記述。これでデータがDBに保存される
119. jsPsychにDBの設定 119 ・ 以上の工程が出来たら実行(knit)して 実験用HTMLを作成する HTMLにエラーが無ければＯＫ
120. Firebaseでオンライン実験 120 ・ Firebaseアカウント&プロジェクト作成 ・ Firebase CLIのインストール ・ Firebase プロジェクトの初期化 ・ Databaseとアプリの設定 ・ jsPsychにDBの設定 ・ 実験プログラムをホスティング 参考：https://kunisatolab.github.io/main/how-to-web-experiment-jspsych.html
121. 実験プログラムをホスティング 121 ・ 完成した実験用HTMLファイルと jsPsychフォルダを”public”内におく(こぴぺ) ※ question.htmlが実験課題のファイル
122. 実験プログラムをホスティング 122 ・ ブラウザで以下のアドレスで検索 https://プロジェクト名.firebaseapp.com/ファイル名.html プロジェクト名は、firebaseで決めた名前 ファイル名は実験用HTMLファイルの名前 一致！！
123. 実験プログラムをホスティング 123 これで表示されたら大成功！！ あとは実験を行うたびに、データが Firebase上のRealtime Databaseに保存される
124. 実験プログラムをホスティング 124 保存されたデータはRealtime Databaseから 「JSONのエクスポート」をクリックするとDL可能 吐き出されたJSONをRで分析すると最強
125. 補足：JSONファイルの読み込み 125 Jsonファイルは分析するために、 少し癖がありますが以下のコードに通せば 分析しやすい形に整形できます。 library(jsonlite) library(tidyverse) dat <- fromJSON(“実験のデータ.jsonをここに入れる") %>% as_tibble(validate = F) %>% gather(ID, data) %>% unnest(cols = data)
126. 補足：JSONファイルの読み込み 126 データフレーム(tibble)型に変身
127. “ 終わりに 127
128. 128 ・ プロジェクトとして一つのフォルダで管理可能 → フォルダをコピーすれば実験の再現可能 ・ firebaseによってWeb実験コストが低く済む →サーバ知識や金銭的な障壁はかなり低い ・ 環境構築のコストもかなり低い ・ Rstudioで実験課題が作れる Rmd × jsPsych × Firebaseのメリット
129. 129 ・ 反応時間の妥当性 → 反応時間が機械や回線に依存する可能性 (Web実験共通問題) ・ CUIなので最初は少し詰まるかも → 慣れたら神 ・ Rmd上だと、{js}の補完機能や「:」「,」忘れが… → jsの部分は、別に.jsファイルを作ってそこで書くとGood Rmd × jsPsych × Firebaseのデメリット
130. 参考資料 130 ・ 国里先生のjsPsychによる認知課題生成 ・ 国里先生のfirebaseを用いたWeb実験 ・ jsPsychのホームページ
131. 131 Enjoy! 何か質問があれば以下のアドレスまで mando（at）psy.senshu-u.ac.jp ※(at)は@に変換してください