この記事では lab.js を使う際の様々な tips（コツや工夫）を紹介します。
異なるコンポーネントから共通のファイルを参照する
複数のコンポーネントから同じファイル（画像とか）を利用したい場合は、コンポーネントではなく static フォルダにファイルをアップロードするとよいです（こちらの記事も参考に）。
static フォルダにアップロードしたファイルは以下のようにして利用できます。
${"static/ファイル名"}
たとえば、static フォルダに a.jpg という画像ファイルがアップロードされており、それを HTML の img タグを使って表示させたい場合は、以下のようにします。
<img src=${"static/a.jpg"}>
特定のコンポーネントの情報を出力ファイルから除外する
デフォルトではプログラムで用いられたすべてのコンポーネントのデータが出力ファイル記録されますが、データ分析に用いる可能性がないコンポーネントについては保存データに含まれないようにすると、出力ファイルが見やすくなって便利です（こちらの記事の後半部分も参考に）。
やり方：
・除外したいコンポーネントの Scripts 欄にthis.options.datacommit = false;と記入する。
・実行タイミングはbefore:prepareを選択する。
フルスクリーン表示にする
プラグインを使うとできます。こちらの記事で解説されています。
画像の表示サイズの指定
Page (HTML) コンポーネントで追加できる Image を使う場合
Page (HTML) コンポーネントで追加できる Image の詳細設定欄で width と height が指定できます。サイズ指定は100px;のように、ピクセルサイズで指定して末尾に;を付けます。
注意点として、height のみを記入して width に何も記入しなかった場合、height に記入した内容が無視されてしまい、画像の大きさが変わりません。この場合は width にauto;と記入するとうまく行きます。
（別の対処方法として、width に何か適当な値、例えば 0 とかを記入して一度プログラムを実行し、そのあと width の内容を削除して空にすると、height の値が効くようになります。ただしこのやり方は lab.js Builder のバグのような挙動を利用したやり方であり、将来は修正される可能性があるので、width を指定したくない場合は auto; と記入するやり方を使うのが良いでしょう。ちなみに width だけを指定して height を何も書かない場合には特に問題なく動作します。）
Page (HTML) の Image で指定できる width と height は CSS の max-width と max-height のことです。これらの CSS 属性は画像の最大サイズを指定するために使われるものです。横幅 500px の画像を表示させる場合に、width に 500px 以下の値を指定すると、画像はその値の横幅で表示されます。しかし、画像の横幅である 500px よりも大きな値を width に指定しても、画像は横幅 500px で表示されます。画像の横幅は 500px だけれど、画面に表示する際は 600px で表示したい、という場合には、Image の width 欄ではそれを実現することはできません。その場合は Raw HTML を使い、img タグを書いて画像を表示させます。
img タグをを使う場合
Page (HTML) コンポーネントの Content 欄で Raw HTML を追加し、その記入欄に img タグを書きます。
static フォルダに a.jpg というファイル名の画像がアップロードされている場合は以下のように書きます。
<img src=${"static/a.jpg"} width="300px">
コンポーネントに画像をアップロードしている場合は以下のように書きます。
<img src=${this.files["a.jpg"]} width="300px">
width="300px"の部分が画像の横幅の大きさを指定している部分です。高さを指定したい場合はheight="300px"とします。
img タグの width や height は、そこで指定した通りのサイズで画像を表示してくれます。画像サイズよりも大きな値を指定すれば、画像はその大きさに引き伸ばされて表示されます。width か height のうち、指定されなかった方の値は自動で決まります（元画像のアスペクト比を保つようにしてくれます）。
画像の横幅と高さの両方を指定する場合は以下のように書きます。
<img src=${this.files["a.jpg"]} width="300px" height="100px">
img タグの width や height を使うと、画像が本来どのようなサイズ（解像度）を持っていようと、指定した通りの値で画像が表示されます。本来横長の画像であっても、たとえば width と height に同じ値を指定すれば、正方形で表示されます。
実験開始時刻の取得
下記のスクリプトでは、date という変数に「年月日_時分秒」という形式の文字列を入れています。その結果、date 変数の中身はたとえば20220722_140510などとなります。これは、このスクリプトが実行されたのが2022年07月22日の14時05分10秒であることを示しています。
let d = new Date();
let date = d.getFullYear() + ("0"+(d.getMonth()+1)).slice(-2) + ("0"+d.getDate()).slice(-2) + "_" + ("0" + d.getHours()).slice(-2) + ("0" + d.getMinutes()).slice(-2) + ("0" + d.getSeconds()).slice(-2);
//console.log(date);
上記の時刻情報の文字列は被験者IDとして使うことができます（アンダースコア記号（_）は含めずに数値だけにしても良いかもしれません）。実験の冒頭部分で日付の取得を行えば実験の開始時刻におよそ一致します。ただし、同一の時刻に実験を開始した人がいた場合には ID が被ってしまいます（秒まで含めているので、一致することはほとんど無いだろうとは考えられますが）。
日付の後にランダムな数値を付け足すことで、ID が一致する可能性をほぼゼロにできます。
let sbjID = date + "_" + (""+this.random.range(0,10000)).padStart(4, '0');
上記の例では４桁のランダムな整数を作成し、日付（date 変数）の後ろに付け足しています。その結果、sbjID 変数の中身はたとえば20220722_140510_0198のようになります（日付の後に 0198 という数字が追加されています）。実験時刻と４桁のランダムな整数の両方が一致する可能性は非常に小さいので、唯一性のある被験者 ID として使えます。
Loop コンポーネントのスクリプト部分で下記のように書くと出力ファイルに sbjID 変数の中身を保存することができます。
this.options.templateParameters.push({sbjID:sbjID})
コメント