Rで始める心理学Web実験

Rで始める心理学Web実験 ando_Roid

はじめに ⦁ R Advent Calendar 2019 4日目の記事です。 ⦁ 先日、勉強会のために資料を作成したのですが、なかなか力を入れてつくったのでここで供
養させます。 2

自己紹介 ⦁ 名前：安藤正和 ⦁ 専攻：心理学(卒論やばめ) ⦁ マーケティングリサーチの会社でバイト ⦁ Twitter: @hirahria2835
(ando_Roid) 3

Contents ⦁ 小噺(心理学科4年の経験談) ⦁ 環境構築 ⦁ 実験課題作成(質問紙) ⦁ Firebaseを使ってオンライン実験 4

“ 小噺 5

・ Web上で心理学実験やりたいなぁ・条件分岐とかの処理もできるのがいいなぁ・出来ればRを使いたいなぁ・反応時間も取れるといい

7 心理学実験課題作成ソフト

8 心理学実験課題作成ソフト色々ある…

9 Rで書きたい…

10 いけまっせ

11 こう

12 Rコード+mdを{knitr}してドキュメント化 (pdf, html, docx) R以外もOK!! (JS, Python etc…)

13 JavaScriptを使って、プログラム作成豊富なプラグイン機能で大抵の心理学実験は作成可能

14 Googleが提供しているアプリ用プラットフォームサーバとして使用

15 Rmd × jsPsych × Firebase を用いた実験フロー実験(.html) データ(.JSON) Host
DB Participants Programing Analysis

“ 環境構築 16

Environment ・ Rstudioでプロジェクト作成・ jsPsychライブラリの設置・ Rmdファイルを作成 17

Rstudioでプロジェクト作成 1

Rstudioプロジェクトとは ⦁ 一連の処理を一括管理 ⦁ スクリプトの履歴 ⦁ WDも設定 → とりあえず細かく作っておくのが吉 19

Rstudioを起動画面右上 (Project:(None)) をクリック Rstudioプロジェクトの作成 20

Rstudioプロジェクトの作成 21 New Project…を選択 New Directory…を選択

Rstudioプロジェクトの作成 New Projectを選択名前と保存場所を選択して Create Project

Rstudioプロジェクトの作成しばらくして、プロジェクト作成完了右上が自分の名付けたプロジェクト名になっていればおk

jsPsychライブラリの設置 2

jsPsychライブラリの設置 ⦁ Rmdでプログラムを組むために必要 ⦁ 基本的にプロジェクトにおいておく ⦁ あとは呪文(コード)を書くだけで使える 25

jsPsychのダウンロード jsPsychのリリースページに行って、最新版(.zip)をダウンロード ※バージョンがちょくちょく変わるので注意 (jsPsych-×.×.×.zipならおk) ←コレ

jsPsychを解凍して、プロジェクトへ DLした.zipを解凍先ほど作ったプロジェクトに入れる Rprojectファイル jsPsych-×××フォルダの二つがあればおk

Tips : jsPsychライブラリの中身・ examples：jsPsychで作れるプログラムの例 (これ見れば何ができるか分かる) ・ plugins：jsPsychでプログラムを組むときに必要なもの (超重要) ・
jsPsych：jsPsychの中身(核) ※よくわかっていない・ License：ライセンス

Tips : examplesが最強 examplesのファイルを開くとブラウザ上での課題の挙動を見れます。それを見て、これ作ろうと思ったらそのファイルのコードを参考にプログラムを組んでいくのがやりやすいかなと思います。

Rmdファイルを作成 3

Rmdファイルの作成 ⦁ Rmdにプログラムを書いていく ⦁ ポチポチっと終わるのでサクッといきます 31

Rmdファイルの作成左上の File ↓ New File ↓ R Markdown

Rmdファイルの作成 Document ↓ Title,Authorは自由 ↓ 出力をHTML選択 ↓ OK

Rmdファイルの作成作成されたファイルを保存左上のknitをクリックすると、 HTMLファイルが出力される ([CTRL+SHIFT+K]でもおｋ)

Rmdファイルの作成このとき、・[name].Rmd ・[name].html (・[name]_files) が作成されていることを確認 ※今回は「test.Rmd, test.html」

Rmdファイルの作成・ [name].Rmd 実験コードを書く・ [name].html Rmdからレンダリングされた実験プログラム。 Firebaseに、この.htmlを置く

“ 実験課題作成 (質問紙) 37

jsPsychを使ってプログラムを書こう 1. jsPsych用にRmdを設定 2. プログラムを書く 3. knitrでプログラム確認 4. 修正以下、3
~ 4を繰り返す 38

jsPsych用にRmdを設定・ yamlヘッダーの設定 →Rmdの設定部分・ rチャンクにjsPsychのプラグイン設定 →チャンクはmdではなくコードとして認識される 39

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ファイルを開いて一番上にある部分

yamlヘッダーの設定 --- title: "test" author: "ando_roid" output: html_document: mathjax: null
highlight: null theme: null css: jspsych-6.1.0/css/jspsych.css --- インデント(余白)大事完全コピペでもよし

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のプラグインを呼び出し

jsPsychのプラグインについてプラグインとは…実験機能(Rのパッケージに近い) ・キー押し課題 → キー押し用プラグイン・質問紙課題 → ボタン式プラグイン
・ IAT → IAT用プラグイン実験によって使いたいものを選択して、あらかじめ呼び出しておく(library()的な)

このようになっていればOK!!

実験プログラムを書いていこう!! ・ jsPsychで「Hello jsPsych」・ jsPsychで簡単な質問紙 45

実験プログラムを書いていこう!! ・ jsPsychで「Hello jsPsych」・ jsPsychで簡単な質問紙 46

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 }); ``` 左のコードを書こう！！「,」や「；」が無いだけで走らないので注意 ※「/**/」で囲まれた部分はコメントアウトなのでプログラムとして評価されません

このようになっていればOK!! {js}でプログラム作成実行して、真っ白の画面に「Hello jsPsych」呈示されれば成功‼

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

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

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

[]; /* 呈示する文字を変数にする */ var text = "Hello jsPsych"; /* trialで呈示する文字を設定 */ var stimuli = { type: "html-keyboard-response", stimulus: text }; timeline.push(stimuli); /* 実験開始 */ jsPsych.init({ timeline: timeline }); ``` 実験指示最後に、タイムラインに従って実験を行うように指示する

jsPsychで「Hello jsPsych」が上手くいかないとき… 53 ・yamlの設定が上手くできてない → インデント（空白）のミス、パスのミス・プラグインの設定が上手くできていない → Rコードのエラー、パスのミス
・{js}内のエラー →「,」や「:」の付け忘れ、変数名のミス

jsPsychで「Hello jsPsych」が上手くいかないとき… 54 48枚目のスライド写真通りにコードを書こうそれでもだめなら、jsPsychライブラリフォルダがきちんと入っているか見直そうエラーはあなたを強くします

jsPsychのプログラム作成フロー 55 タイムライン (呈示刺激の入れ物) 呈示刺激の入れ物であるタイムラインを作成する

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

jsPsychのプログラム作成フロー・・・ 57 タイムライン (呈示刺激の入れ物) 刺激A 教示文刺激B キー押し刺激C
ボタン押し呈示刺激を入れたタイムラインを実験として指定 (jsPsych.init) jsPsych.init

注意：よくない例(jsチャンクが複数) jsPsychを各Rmdファイルは、 {js}チャンクは一つ！！ (の方が良いと思う) 提示刺激は全てそのチャンク内に書こう！！

注意：よい例(jsチャンクが一つ) jsPsychを各Rmdファイルは、 {js}チャンクは一つ！！ (の方が良いと思う) 提示刺激は全てそのチャンク内に書こう！！

実験プログラムを書いていこう!! ・ jsPsychでHello jsPsych ・ jsPsychで簡単な質問紙 60

jsPsychで簡単な質問紙 61 質問紙課題を作ろう・教示→質問→質問プール・スマホでも出来るようにボタン式

プラグインの指定 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') ) ```

教示文の作成 65 ```{js} var timeline = []; /* 教示文作成 */
var welcome = { type: "html-button-response", stimulus: '実験へのご協力をありがとうございます。'+ ' これから、質問紙に回答していただきます'+ ' 同意いただける場合は、「次へ」を押してください。', choices: ['次へ'] }; timeline.push(welcome); jsPsych.init({ timeline: timeline }); ```

教示文の作成 : type 66 Type引数：“html-button-response”を選択練習では "html-keyboard-response“ 刺激ごとに使用する種類を選択 ※刺激作成に当たってプラグインの書き込みも忘れずに

教示文の作成 : stimulus 67 呈示刺激のテキストはHTMLをつかって書く・ …パラグラフタグ・ …改行タグ・
文字列はクオテーションで囲む・コードを繋ぐときは「＋」で繋げる HTMLに準拠していればフォントや色、大きさの選択も可能

教示文の作成 : choice 68 選択肢を記述今回は選択肢が一つだが、複数ある場合 Java Scriptでの配列の記述方法で書き込む例：var array
= ['男性', '女性', 'どちらでもない']

jsPsychで簡単な質問紙 69 質問紙課題を作ろう・教示→質問→質問プール・スマホでも出来るようにボタン式基本的に、作り方は教示と同じ選択肢が複数あるのと選択肢にラベルを付けられる

質問の作成 70 ```{js} timeline.push(welcome); var gender = { type: 'html-button-response',
stimulus: 'あなたの性別を回答してください ', choices: ['男性', '女性', 'どちらでもない'], prompt: "該当するものを選択して下さい" } timeline.push(gender); /* 実験開始 */ jsPsych.init({ timeline: timeline }); ``` 教示文(welcome)をプッシュした下に性別についての質問を追加

質問の作成 71 作成方法は教示と基本的に同じ異なるの点は・ stimulusを配列・ promptで選択肢に補足説明

・質問を一つ一つ作って pushしていくの手間… ・質問項目をランダムに呈示したい

よろしい、ならばタイムライン変数だ

jsPsychで簡単な質問紙 74 質問紙課題を作ろう・教示→質問→質問プール・スマホでも出来るようにボタン式ここは少しテクいです。連想配列をマスターして質問プールから項目をランダム呈示しましょう

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

連想配列(Dictionary)とは 76 ・連想配列(辞書型) var dic = [{sex : ‘男性’},
{sex : ‘女性’}, {sex : 'どちらでもない’}] 連想配列は、値のほかに「キー」を持つ連想配列のキーから値を呼び出すことが可能データにおける変数名のようなもの

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

質問プールの作成 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: "←当てはまらない当てはまる→" }; ```{js} test_questionの stimulusに timelineVariableとして質問プールのキー「item」を指定

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

質問プールの作成(完成版) 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: "←当てはまらない当てはまる→" }; var test_procedure_question = { timeline: [test_question], timeline_variables: question_pool, randomize_order: true }; timeline.push(test_procedure_question); 〇でつながった同士を同じ名前に！！最初は、意味不明でもだんだんわかるはず

質問プールの作成 82 ・質問プールを作成(連想配列) ※ キー名称は統一・刺激変数作成 stimulus引数に jsPsych.timelineVariables(キー名称)
・タイムライン変数作成 timeline引数に刺激変数を指定 timeline_variables引数に質問プールを指定

“ Firebaseでオンライン実験 83

ここまでで 84 jsPsychによる実験課題作成が完了ただ…

ここまでで 85 jsPsychによる実験課題作成が完了ただ… データはどこにある？ Web実験やってなくね？

Web実験やろう 86 取得したデータは、JSONファイル形式でプログラム上に残る。しかし、プログラムを閉じるとデータは消失していまう。これを解決するためにプログラムをサーバに立てる必要あり

87 Rmd × jsPsych × Firebase を用いた実験フロー実験(.html) データ(.JSON) Host
DB Participants Programing Analysis

なぜFirebaseをつかうのか 88 Web実験を行う際にはサーバが必要…

なぜFirebaseをつかうのか 89 Web実験を行う際にはサーバが必要… 立てるの面倒くさいよくわからないくぁwせdrftgyふじこlp お金かかる

なぜFirebaseをつかうのか 90 Firebaseを使うと、通常のWeb実験なら・無料(たいてい) ・ホスティングも簡単・サーバ知識に乏しくても行ける ※
900人のWeb実験は無料でいけた by ando_Roid

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

Firebaseアカウント&プロジェクト作成 93 ・ Googleアカウントでログイン・「プロジェクト作成」でプロジェクト名を設定・ Gアナリティクスは「今は必要ない」 1つのWeb実験につき1つのプロジェクトプロジェクト名はURLに記載されるので注意

Firebase CLIのインストール 95 https://firebase.google.com/docs/cli?hl=ja からOSごとにnode.jsをインストールコマンドをターミナルに打ち込んで Firebase CLIをインストール&ログイン npm install
-g firebase-tools firebase login

Firebase CLIのインストール 97 Firebase用のフォルダを作成と初期化 ※フォルダ名は何でも良し (今回はDocuments内にfirebaseを作成その中にtestというフォルダを作る想定) # ワーキングディレクトリをfirebaseのtestフォルダに変更 cd
Documents/firebase/test # firebaseの初期化 firebase init

Firebase CLIのインストール 98 成功！！

Firebase CLIのインストール 99 DatabaseとHostingをSpaceキーで選択選択されたらEnterで次へ

Firebase CLIのインストール 100 yes → yesでプロジェクト選択先ほど作成したプロジェクト(test-jsPsych) を選択

Firebase CLIのインストール 101 あとは基本yesを選択して、最後は「N」

Firebase CLIのインストール 102 「Firebase initialization complete!」とでれば初期化完了！！

DBのセキュリティルールの設定 103 初期状態だとDBに書き込みができないので firebase/test内のDatabase.rule.jsonを変更「”.write” : true」に変更

DBのセキュリティルールの設定 104 コマンド「firebase deploy」で変更を保存

Databaseとアプリの設定 106 ・ Firebaseのプロジェクトページにて開発からDatabaseを選択・「データベースの作成」をクリック

Databaseとアプリの設定 107 ・「テストモードで開始」を選んで「次へ」 ※どっちでもいい説がある

Databaseとアプリの設定 108 ・Cloud Firestoreのロケーションを選択する ※asia-northeast1は「東京」, 2は「大阪」

Databaseとアプリの設定 109 ・Cloud Firestore→Realtime Databaseを選択・「ルール」を開いて「”.write” : true」ならOK!!

Databaseとアプリの設定 110 ・プロジェクトページから「アプリを追加」・ “ウェブ</>”をクリック

Databaseとアプリの設定 111 ・アプリの登録にて「ニックネーム」を決める・アプリを登録をクリック

Databaseとアプリの設定 112 提示されるFirebase SDKをコピーこれをjsPsychに挿入することでDBへのデータ保存が可能となる

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)

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>で囲まれた部分をコピペすればＯＫ

jsPsychにDBの設定 116 ・ DBに書き込む際のIDを設定 exp_idに「日付時刻_8桁の乱数」が用意される次のスライドをFirebase情報の下にコピペ

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;

jsPsychにDBの設定 118 /*タイムラインの開始*/ jsPsych.init({ timeline: timeline, on_finish: function() { firebase.database().ref(exp_id).set({
data: jsPsych.data.get().values() }) } }); ・最後に以下のコードをjsPsych.init として記述。これでデータがDBに保存される

jsPsychにDBの設定 119 ・以上の工程が出来たら実行(knit)して実験用HTMLを作成する HTMLにエラーが無ければＯＫ

実験プログラムをホスティング 121 ・完成した実験用HTMLファイルと jsPsychフォルダを”public”内におく(こぴぺ) ※ question.htmlが実験課題のファイル

実験プログラムをホスティング 122 ・ブラウザで以下のアドレスで検索 https://プロジェクト名.firebaseapp.com/ファイル名.html プロジェクト名は、firebaseで決めた名前ファイル名は実験用HTMLファイルの名前一致！！

実験プログラムをホスティング 123 これで表示されたら大成功！！あとは実験を行うたびに、データが Firebase上のRealtime Databaseに保存される

実験プログラムをホスティング 124 保存されたデータはRealtime Databaseから「JSONのエクスポート」をクリックするとDL可能吐き出されたJSONをRで分析すると最強

補足：JSONファイルの読み込み 125 Jsonファイルは分析するために、少し癖がありますが以下のコードに通せば分析しやすい形に整形できます。 library(jsonlite) library(tidyverse) dat <- fromJSON(“実験のデータ.jsonをここに入れる")
%>% as_tibble(validate = F) %>% gather(ID, data) %>% unnest(cols = data)

補足：JSONファイルの読み込み 126 データフレーム(tibble)型に変身

“ 終わりに 127

128 ・プロジェクトとして一つのフォルダで管理可能 → フォルダをコピーすれば実験の再現可能・ firebaseによってWeb実験コストが低く済む →サーバ知識や金銭的な障壁はかなり低い・環境構築のコストもかなり低い
・ Rstudioで実験課題が作れる Rmd × jsPsych × Firebaseのメリット

129 ・反応時間の妥当性 → 反応時間が機械や回線に依存する可能性 (Web実験共通問題) ・ CUIなので最初は少し詰まるかも → 慣れたら神
・ Rmd上だと、{js}の補完機能や「:」「,」忘れが… → jsの部分は、別に.jsファイルを作ってそこで書くとGood Rmd × jsPsych × Firebaseのデメリット

参考資料 130 ・国里先生のjsPsychによる認知課題生成・国里先生のfirebaseを用いたWeb実験・ jsPsychのホームページ

131 Enjoy! 何か質問があれば以下のアドレスまで mando（at）psy.senshu-u.ac.jp ※(at)は@に変換してください

Rで始める心理学Web実験

Rで始める心理学Web実験

More Decks by ando_Roid

Other Decks in Science

Featured

Transcript