Zenn
🖇️

複数サービス間のデータをクエリ文字列で連結可能に

2022/02/24に公開
JavaScript
jsPsych
tech

はじめに

オンラインで心理学実験を実施するという場合，一つのウェブページ（サービス）だけでは完結できないこともあります。例えば，心理実験は jsPsych で作成したウェブページで実施し，質問紙調査は UI のリッチさなどの理由から他のサービスを利用するということがあります。そういった場合，それぞれのサービスで収集した同じ参加者のデータをどのようにして連結するかが重要な問題となります。

様々な解決方法があると思います[1]が，その一つとして，クエリ文字列を利用してサービス間で参加者 ID を受け渡しするという方法があります。そこで本記事では，

  • クエリ文字列について簡単に説明し，
  • 心理学で使われることの多いサービスでクエリ文字列が使えるということを紹介し
  • 研究手続きに jsPsych 実験を含んでいることを想定し，jsPsych（というか JavaScript）でクエリ文字列を利用する方法を紹介します。

今回の記事の内容を利用すると，

調査サービス（同意画面） -> jsPsych 実験 -> 調査サービス（質問紙調査）

のように，サイトの遷移が複数回あるような場合でも，集めたデータを連結可能にすることができるようになります。

クエリ文字列とは

IT 用語辞典 e-Words では以下のように説明されています。

クエリ文字列とは、Web ブラウザなどが Web サーバに送信するデータを、送信先を指定する URL の末尾に特定の形式で表記したもの。
URL の末尾に「?」（クエスチョンマーク）を付け、続けて「名前=値」の形式で内容を記述する。値が複数あるときは「&」（アンパサンド）で区切り、「?名前 1=値 1&名前 2=値 2&名前 3=値 3」のように続ける。

クエリ文字列を含む URL とは例えば以下のようなものです（Qualtrics のサポートページの例を引用）

  • 単一のクエリ文字列の場合
https://survey.qualtrics.com/jfe/form/SID=SV_1234?Source=Facebook
  • 複数のクエリ文字列を含む場合
https://survey.qualtrics.com/jfe/form/SV_123456789?Source=Facebook&Campaign=Mobile

上の説明にある通り，複数のクエリ文字列を含める場合は&で区切って並べます。

調査プラットフォームでのクエリ文字列の利用

各種オンライン調査プラットフォーム[2]は，クエリ文字列でのデータの受け渡しに対応しています。以下のリンクのように，各サービスのサポートページでその利用方法が説明されているので，それらを参照してください。

  • Qualtrics
  • Surveymonkey
  • PsyToolkit
  • Google form（jsPsych -> Google form のみ）
    「回答を事前入力したフォームを送信する」という項目を参照してください。ただし，具体的な方法は書かれていないので，「グーグルフォーム 事前入力」といったキーワードで検索して出てくる記事なども参考にしてください。

JavaScript でのクエリ文字列の操作

URLSearchParamsオブジェクトを使用すると，クエリ文字列を操作に操作することができます。

詳しくは以下のドキュメントを参考にしてください。

クエリ文字列の作成

new URLSearchParams()でURLSearchParamsオブジェクトを作成します。()内にクエリパラメータの初期値を設定します。ここでは素の JavaScript オブジェクトを引数に指定する方法を記載しています。その他の方法については上記のリンク先を参照してください。

// 単一のクエリ文字列の場合
const queryParams1 = new URLSearchParams({ a: 'apple' });
// console.log(queryParams1.toString());
// a=apple

// 複数のクエリ文字列の場合
const queryParams2 = new URLSearchParams({ a: 'apple', b: 'banana' });
// console.log(queryParams2.toString());
// a=apple&b=banana

// クエリ文字列を追加する
queryParams2.append('c', 'cube');
// console.log(queryParams2.toString());
// a=apple&b=banana&c=cube

toString()メソッドを使うことで，URLSearchParamsオブジェクトからクエリ文字列を生成できます（ただし，以下の説明では使っていません）。

他の調査プラットフォームへの遷移

上のセクションでは，URLSearchParamsを用いたクエリ文字列の作成方法を紹介しました。それを利用して，jsPsych で作成した実験ページから他の調査プラットフォームにクエリ文字列を付与して遷移する方法を紹介します。

ここでは，ランダムに生成した参加者 ID をクエリ文字列として付与しています。

const jsPsych = initJsPsych();
// ランダムなIDを生成する
const subjID = jsPsych.randomization.randomID(8);
// 実験終了時に動作するon_finish関数を設定する
jsPsych.opts.on_finish = () => {
  // クエリパラメータを作成
  const queryParams = new URLSearchParams({ id: subjID });
  // 遷移先のページのURLオブジェクトを作成
  const nextPage = new URL('https://link/to/onlinesurvey');
  // クエリ文字列の追加
  nextPage.search = queryParams;
  // 遷移する
  location.replace(nextPage.toString());
};
/*
具体的な実験のコード
*/

他の情報，例えばその参加者が割り当てられた条件で他の調査プラットフォームも分岐させたいという場合は，URLSearchParamsを宣言したときの初期値にその情報を追加すればよいです。

const queryParams = new URLSearchParams({ id: subjID, cond: 1 });

取得

他の調査プラットフォームからクエリ文字列を付与して jsPsych 実験ページに遷移させることもできます。付与されたクエリ文字列は以下のようなコードでデータに追加することができます。

ここでは，参加者id情報がクエリ文字列id=exampleIDxxxとして付与されているとします。

// https://url/of/experiment.html?id=exampleIDxxx
// という実験用URL+クエリ文字列だとする。
const queryParams = new URLSearchParams(location.search);
// オブジェクトに変換する
const queries = {};
for (const [key, value] of queryParams) {
  queries[key] = value;
}
// console.log(queries)
// {id: 'exampleIDxxx'}

URL に付与されたクエリ文字列はlocation.searchで取り出すことができます。そのクエリを初期値とするURLSearchParamsオブジェクトを作成します。ただ，そのままではデータに追加できないので，素のオブジェクトに変換します。

生成されたqueriesはオブジェクトなので，以下のようにそのままjsPsych.data.addPropertiesに流せば，クエリ文字列として渡された 情報をデータのすべての行に追加できます。

jsPsych.data.addProperties(queries);

上記の例ではidだけがクエリ文字列に指定されていましたが，他にもクエリ文字列を入れている場合は（上のコードをそのまま使うと）それらすべてが保存されます。

おわりに

今回の記事では，

  • クエリ文字列を用いてサービス間で共通の文字列を受け渡しすれば，複数のサービスで収集したデータを連結できるようになること
  • JavaScript および jsPsych でクエリ文字列を扱う方法

について紹介しました。冒頭でも書いたことも含めて，以下の点には注意してください。

こればっかりは実験・調査参加者を信頼するしかないですね（クエリ文字列に限った話ではないですが）。

そういったリスクはありますが，クエリ文字列は手軽にデータの連結可能にすることができます。適材適所で調査サービスと jsPsych などのオンライン実験手法を利用できるというのは，割と魅力的に思われます。もしひとつのサイトのみでのデータ収集に不満があったという方は導入を検討してみてはいかがでしょうか。

本家の公式リファレンスには Prolific や Amazon Mturk との連携も書かれているので，気になる方は目を通してみてください。

不定期にはなりますが，今後も引き続き心理学実験・研究法に関する Tips を共有していきます。いいね・サポートをいただけると大変励みになりますので，ぜひそちらもよろしくお願いします。

謝辞

本記事は，MEXT 科研費学術変革領域研究（A）「生涯学」（JP21H05329）のサポートを受けたものです。

脚注

  1. 調査ページに実験のコードを埋め込むというテクニックもあるようです（参考 1）（参考 2） ↩︎

  2. 筆者が聞いたことのあるサービスだけを取り上げています。他のサービスでも「サービス名 クエリ文字列」などと検索すると解説記事などがヒットすると思います。 ↩︎

Discussion