ウェブサイト AOI の選択と調整
ウェブサイト AOI は固定の画面位置を追跡しません。特定の要素、つまりそのアンカーを追跡し、その要素は CSS セレクタによって特定されます。AOI を正しい要素に合わせるには、主にそのアンカーを選択して調整することに関するものであり、サイズを変更することではありません。このページでは Website AOI Object Properties パネル内のコントロールの全セットについて説明します：要素の選択、Parent、Child、Prev、および Next での選択の修正、サイズと位置の微調整、エクスポートデータ用の AOI の命名、テキストによるフィルタリング、要素内のスクロールの追跡、および公開前に AOI が実際に機能していることを確認することです。
ウェブサイトフレームと最初の AOI を追加する基本については、完全なウェブブリッジガイドの 興味領域 (AOI) の選択 を参照してください。または、ウェブサイトフレームのウォークスルー を見て、始めから終わりまでのタスクフローを確認してください。
注意：ウェブサイト AOI を選択すると、Labvanced のすべてのオブジェクトタイプで共有される一般的な Object Properties ブロック (Name, Visibility, Active, Position & Size) と、ここで扱うウェブサイト AOI 専用のコントロールが2つの別々のパネルに表示されます。一般的なパネルの Anchor グリッドは、以下のパラグラフで説明する CSS セレクタアンカーとは無関係な位置/スケールの基準点であり、その Position & Size フィールドはウェブサイト AOI が何を追跡するかを決定するものではありません。代わりに、下の CSS セレクタコントロールを使用してください。
アンカー：AOI がスクロールを生き残る理由
すべてのウェブサイト AOI は、CSS Selector フィールドに表示される CSS セレクタを保存します。そのセレクタが AOI のアンカーであり、ウェブページに埋め込まれた DOM 内の AOI がバインドされている一つの要素です。アンカー要素がページ上に存在する限り、Labvanced Web Bridge 拡張は、その生の位置を Labvanced に報告し続けます。これには、参加者がスクロールしている間も含まれます。なぜなら、アンカー要素自体がページとともに移動するからです。これが、正しくアンカーされた AOI がスクロールを通じて正しく追跡し続ける理由です。追跡されているのはスクリーン座標ではなく、アンカーです。
実際の影響：AOI が目標を失ったように見える場合、通常、問題はアンカー自体にあります（無関係な要素を指しているか、その要素がもはやページに存在しない場合）、サイズや位置ではありません。
セレクタは常に一つの要素しか追跡しません。たとえば、繰り返されるカードのセットに共有されるクラス名などで、ページ上の要素が二つ以上マッチすると、AOI はページの構造上最初に来る要素のみを追跡します。この問題は、共有クラスに基づいて手動で入力されたセレクタでよく発生しますが、Pick Element や下のナビゲーションコントロールによって生成されたセレクタは、あなたが到達した正確な要素にアンカーされています。この問題はありません。
Why Pick Element Doesn't Always Land on the Exact Element
セレクタを選択または入力する前は、パネルは CSS Selector, Pick Element, Stimulus Info, Text Filter, Scrollable container, Show AOI overlay in player のみを表示します。Adjust selection (Parent/Child/Prev/Next) およびサイズ/位置オフセットフィールドは、実際にセレクタが存在する場合にのみ表示されます。
Pick Element は、クリックした正確な要素に必ずしもアンカーされるわけではありません。良いコンテナを選択するために近くの要素を探し、自身の ID またはリンク、ボタン、入力などの自然にインタラクティブな要素を好みます。もし近くにそれが見つからなければ、代わりに近くのコンテナに戻ります。実際には、ヘッドラインやカード内のテキストをクリックすると、特定のテキストだけでなく、カード全体が選択されることがよくあります。そのような場合は、下のナビゲーションコントロールを使用して、意図した正確な要素に移動してください。
選択中にいつでも Esc を押すことで、AOI の現在のセレクタを変更せずにキャンセルできます。ピッカーを完全にスキップして、CSS Selector フィールドに CSS セレクタを直接タイプまたは貼り付けることもできます。これは、すでに希望するセレクタを知っている場合や、ピッカーがそれを逃し続けている場合に便利です。
選択の修正：親、子、前、次
CSS セレクタが設定されると、Adjust selection: の下に4つのボタンが Object Properties パネルに表示されます：
| ボタン | 移動先 |
|---|---|
↑ Parent | 現在の要素の含まれている要素 |
↓ Child | 現在の要素の最初の子要素 |
← Prev | 現在のレベルの前の兄弟 |
→ Next | 現在のレベルの次の兄弟 |
これらは、選択を修正するための主な方法であり、サイズを変更することよりも重要です。Pick Element が間違った要素に着地したときの典型的なワークフロー：Child をクリックしてコンテナの最初の内部要素に移動し、次に Next（または Prev）でその要素の兄弟に移動し、実際に望むものに到達します。それでもまだ遠すぎる場合は、もう一度 Child をクリックして別のレベルに降り、再度横に進みます。各クリックは、到達した場所のセレクタを再生成するため、AOI は常にその正確な要素にアンカーされ、その祖先を通る複合パスではなくなります。
ボタンが移動する場所がない場合 (Prev が前の兄弟がない、Child が子供のない要素上、または Parent がページの外部 html/body だけが上にある場合)、何も起こりません：選択はそのまま残り、エラーメッセージも表示されません。ナビゲーションボタンが応答しない場合、その方向にページの構造の端に達している可能性がありますので、別のボタンを試してください。
サイズと位置の微調整
要素がアンカーされると、小さなピクセルレベルの修正用の2つの追加コントロールが表示されます。これらは、上記のナビゲーションとは異なります：
Size offset (px, ± per side): トラッキングエリアを X 軸と Y 軸の設定されたピクセル数で拡大または縮小し、各側に対して対称的に適用されます。Position shift (px): サイズを変更せずにトラッキングエリアを設定されたピクセル数だけ移動します。
これらは、アンカー自体が正しい場合のみ使用してください。すでに正しくアンカーされた要素の境界を微調整します。追跡される要素がどれであるかを変更するわけではありません。
ウェブサイト AOI は常に矩形であり、アンカーされている要素の境界ボックスです。Labvanced で直接構築された刺激の AOI とは異なり、ここにはポリゴンやカスタム形状のオプションはありません。追跡する必要がある要素が自体で矩形でない場合は、それを含む最小の矩形要素にアンカーし、次に Size offset を使用してボックスをトリミングします。
エクスポートデータ用の AOI の命名
Stimulus Info フィールドは AOI のための短いテキストラベルです。これは、選択または移動する要素のテキストから自動的に記入され（テキストがない場合は要素のタグ名から）、より明確なものに編集できます。このラベルは、イベントトリガーやエクスポートデータの Stimulus Info 値として表示されるため、フレーム上に複数の AOI がある場合、特定の視線、クリック、またはホバー行がどの AOI に属しているかを把握する方法です。
実データを収集し始める前に、各 AOI に異なる Stimulus Info ラベルを付けてください。要素のテキストから自動的に記入されるラベル、「カートに追加」のようなものは、それ単独で問題ありませんが、同じテキストが複数の AOI に表示されると混乱を招きます。
テキストフィルター
Text Filter フィールドは、AOI がアンカーされた要素の表示テキストが特定の文字列を含むときのみアクティブになるように制限します（マッチングは大文字と小文字を区別しません）。これは、アンカーセレクタが変更される可能性がある要素に一致する場合に便利です。たとえば、いくつかの状態をサイクルするステータスラベルについて、特定の状態に対してのみ AOI がアクティブとカウントされるようにしたいときに使います。
スクロール可能なサブ領域の追跡
アンカーにした要素が内部スクロールを持っている場合、たとえば、ページ内にネストされたチャットパネルやスクロール可能な製品リストなどは、Scrollable container をチェックしてください。これにより、Labvanced にその要素のスクロール位置とコンテンツの寸法を追跡させます。これは、ページ全体のスクロールとは別です。
このデータは、Eyetracking Gaze/Eyetracking Fixation トリガーを通じてのみ公開され、Mouse Trigger ではありません。視線がスクロールコンテナ AOI 内に入ると、その値の選択メニューには Container Relative X/Container Relative Y （コンテナの全スクロール可能コンテンツ内での位置、現在表示されているものだけではない）と Container Scroll X/Container Scroll Y （コンテナ自体がどれだけスクロールしたか）が提供されます。同じ AOI でマウストリガーが記録する内容については、ウェブサイト AOI 上のマウスの動作の追跡 を参照してください。
AOI が実際に機能しているかの検証
セレクタが現在のページの何にも一致しないためにアンカー失敗する AOI、ターゲット要素がまだロードされていない、または Web Bridge 拡張がアクティブでない場合、デフォルトでは参加者または研究者にエラーを表示しません。それは単に非アクティブのままです：視線、クリック、またはホバーのデータは記録されず、研究内の何も目には見えません。
研究を構築している間、すべての AOI はすでにエディタ内で色付きのオーバーレイとして描画されます。緑はそのセレクタが現在ページ上の要素に一致していることを意味し、赤はそうでないことを意味し、作業中にこれを見るためにトグルは必要ありません。Show AOI overlay in player は、その同じオーバーレイを Preview とライブスタディ全体に拡張します。これにより、編集中だけでなく、AOI がエンドツーエンドで実際に確認されます。この状態で少なくとも一度は研究をプレビューし、すべての AOI が緑であることを確認し、公開する前にオーバーレイを参加者に表示したくない場合は再度オフにします。
表示されたり消えたりする要素 (ダイアログ、モーダル)
ウェブサイト AOI のアンカーは、常にページ上に存在する必要はありません。拡張が CSS セレクタが現在何かに一致するかどうかを継続的にチェックするため、ダイアログ、モーダル、または特定のポイントでのみ表示される他のコンテンツ内部の要素にアンカーされた AOI は、その要素が現れるときにアクティブになり、削除されるときに非アクティブになります。追加のセットアップなしに、これは一時的に存在する要素とのインタラクションを追跡することを可能にします。たとえば、特定のアクションの後に開く確認ダイアログを使用して、上記で説明したとおりのアンカー機構を利用します。
よくある質問
AOI を小さくするためにサイズオフセットを使うべきですか、それともそれは間違ったツールですか？
Parent、Child、Prev、または Next で異なるアンカーを選ぶことです。既存のものを縮小または拡大するのではなく、Size offset および Position shift は、すでにアンカーが正しい場合の小さな修正に留めておきます。 なぜ「Pick Element」がクリックしたものよりも大きなコンテナを選択したのでしょうか？
Child」を使ってから「Next」/Prev を使用して正確な要素を絞り込んでください。 「Next」または「Child」をクリックしても何も起こりません。これはバグですか？
AOI が実際に何かを追跡しているかどうかどうすればわかりますか？
Show AOI overlay in player」をその「Object Properties」パネルで有効にして、研究をプレビューしてください。緑はそのセレクタが現在ページ上の要素に一致していることを示し、赤はそうでないことを示します。AOI がアンカーに失敗した場合、参加者向けにエラーは表示されないので、公開前にこれを確認してください。 
