Labvanced Web Bridge — 拡張機能サポート & ガイド
Web Bridgeを初めて使いますか？ ウェブサイトフレームアイ・トラッキングのウォークスルーに従って、ひと通りのタスクフローを体験し、その後ここに戻って完全なリファレンスを確認してください。
助けが必要ですか？ [email protected]までお問い合わせください。
目次
1. Labvanced Web Bridgeとは何ですか？
Labvanced Web Bridgeは、Labvanced実験プラットフォーム（labvanced.com）を実際のウェブサイトに接続するためのGoogle Chrome用ブラウザ拡張機能です。研究者は、参加者がライブのサードパーティのウェブサイトと対話することによって管理されたUX研究や行動研究を実施でき、Labvancedは眼球運動（ウェブカメラを通じて）、マウスクリック、ホバーイベント、スクロール動作を記録します。
この拡張機能なしでは、ブラウザは標準のセキュリティ制限のため、研究の中にウェブサイトを埋め込むことを防ぎます。この拡張機能は管理されたLabvanced研究セッション内でのみその制限を解除し、埋め込まれたサイトでの参加者の相互作用を測定するために必要な行動トラッキング機能を追加します。
その区別が重要な理由については、実際に記録されたクリックと視線対、注意が向く可能性についてのAIによる予測の違いを確認してください。AIはあなたが見る場所を予測できます。 それでも、あなたが何をするかはわかりません。
Labvancedエディタ内では、Website Frameを使用して埋め込みを行います。これはCanvas FrameとPage Frameと並ぶ3種類目のフレームタイプであり、他の2つの変種ではなく、この目的のために特別に設計されています。その他のフレームタイプとの位置づけについては、ウェブサイトフレームをご覧ください。
2. インストール
ステップバイステップ
研究者
- Google Chromeを開きます。
- Labvanced Web BridgeのChromeウェブストアページにアクセスします。
- **「Chromeに追加」**をクリックします。
- 確認ダイアログで**「拡張機能を追加」**をクリックします。
- Labvanced Web BridgeのアイコンがChromeツールバーに表示されます。
参加者
- インストールをクリックします。
- **「Chromeに追加」**をクリックします。
- 確認ダイアログで**「拡張機能を追加」**をクリックします。
- 実験に戻り、ページを更新して研究を開始します。
拡張機能がアクティブであることを確認する
研究者 インストール後、Dashboardタブに移動し、New Studyを作成します。下にスクロールして、ボックスにチェックを入れてTrack External Website:を有効にし、ターゲットウェブサイトのURLを入力します。拡張機能が正しくインストールされていれば、Labvancedエディタに緑のチェックマークと確認メッセージが表示されます。
参加者
実験ページを更新すると、実験が進行します。
3. 誰がこれをインストールするべきですか？
研究者
次の条件に当てはまる場合は、拡張機能をインストールしてください：
- 実際のウェブサイトを刺激として含む研究を設計している（例：製品ページ、ニュース記事、キオスクインターフェースのテスト）。
- Labvancedエディタで
Website Frame要素を使用している。 - 外部ウェブサイトを含む研究のプレビューやパイロットを実施している。
標準のLabvanced刺激（画像、動画、テキスト、フォームなど）のみを使用する研究や、自分のウェブサイトのHTTPヘッダーを直接編集・制御できるウェブサイトの所有者には、この拡張機能は必要ありません。
研究参加者
次の条件に当てはまる場合は、拡張機能をインストールしてください：
- 研究リンクを受け取り、開始前にインストールするよう指示された場合。
- 研究のオンボーディングページから拡張機能がインストールされていることを確認するよう求められた場合。
必要かどうか不明な場合、研究リンクページで研究開始前に知らせてくれます。
4. 使用方法 — 研究者ガイド
4.1 ウェブサイトフレームを研究に追加する
- Labvancedエディタで実験を開きます。
Trial Timelineの下にある+ Websiteフレームオプションをクリックします。- 要素タイプから**「ウェブサイトフレーム」**を選択し、その後
External Websiteオプションを選択します。拡張機能がアクティブであれば、緑の確認メッセージが表示されます。そうでない場合は、上記のインストール手順を参照してください。 - 前のステップで作成したタスクに指定したウェブサイトが自動的に表示されます。
4.2 注目エリア（AOI）の選択
注目エリア（AOI）は、埋め込まれたウェブサイト上で追跡したい特定の要素です。たとえば、製品画像、見出し、または「カートに追加」ボタンなどです。
自動検出はありません。Labvancedは埋め込まれたウェブサイトのHTMLやコンテナマークアップを読み取って、どの要素が研究に重要かを推測することはありません。すべてのAOIは、エディタ内での手動のクリックとアンカー作動です。AOIだけではデータを記録しません。視線キャプチャには、その上に明示的なEyetracking Gazeイベントを作成する必要があります。これを設定するには、視線データの記録:イベントの追加を参照してください。
- エディタ内でウェブサイトフレームがアクティブで、ウェブサイトがインタラクティブに表示されている状態で、サイドメニューから
Add Website AOIオブジェクトをクリックします。 - AOIオブジェクトが追加され、赤で表示されます。ターゲットAOIをクリックします。選択したAOIは緑に変わります。
Pick Elementが思った要素に正しくアンカーされない場合や、既存のAOIのターゲット、サイズ、位置を調整したい場合は、ウェブサイトAOIの選択と調整を参照し、Parent/Child/Prev/Nextナビゲーションコントロール、サイズと位置のオフセット、Text Filter、Scrollable container、および公開前にAOIが実際にアンカーされていることを確認する方法についての完全なリファレンスを見てください。- また、
Resolutionオプションを使用して、研究がデスクトップ用かモバイル用かを示すことができます。以下の画像では、モバイルが選択され、AOIが自動的に更新されました。
- 他の要素に対しても繰り返します。
- 各AOIはAOIリストに表示されます。それだけではデータを記録しませんので、上記のように
Eyetracking Gazeイベントを追加してキャプチャを開始してください。
4.3 追跡される内容
研究セッション中の各AOIについて、Labvancedは研究者が行動データを記録するための次の可能性を提供します：
| データタイプ | 説明 |
|---|---|
| 要素の位置 | 画面上の要素のバウンディングボックス（x, y, 幅, 高さ）、参加者がスクロールするたびにリアルタイムで更新される |
| 視線データ | 要素位置にマッピングされたウェブカメラベースのアイ・トラッキング（研究設定でアイ・トラッキングを有効にする必要があります） |
| クリックイベント | 参加者が要素内でクリックしたかどうか、およびその位置 |
| ホバーイベント | 参加者のマウスが要素に入ったときと離れたとき |
| マウスの動き | 参加者がページを移動する際のマウス座標 |
| スクロール位置 | 各瞬間のページのスクロールオフセット |
4.4 研究のプレビュー
公開する前に、必ず拡張機能がインストールされた状態で研究をプレビューし、以下を確認してください：
- ウェブサイトがフレーム内で正しくロードされる。
- AOIが期待通りに機能している。
最初にタスクを保存し、その後Task Controlsの下にあるエディターツールバーの**「プレビュー」**再生ボタンをクリックして、特定のタスクの参加者ビューのプレビューを開いてください。
4.5 公開と共有
研究が準備できたら：
Launch & Participateタブに移動します。Activateボタンをクリックして、研究のデータ記録を有効にします。Online Participation / Study Publishedの下で、Publish.をクリックします。Online Participation Linkをコピーし、それを参加者と共有します。
5. 使い方 — 参加者ガイド
研究の前に
- 研究者からLabvanced研究の直接リンクを受け取ります。
- 拡張機能がまだインストールされていない場合、研究ページにはChromeウェブストアへの直接リンクとともにインストールプロンプトが表示されます。
- 拡張機能をインストールしたら、研究リンクに戻り、ページを更新します。
- 研究が拡張機能がインストールされていることを確認したら、
Startをクリックして開始します。
研究中
- 通常通り、表示されているウェブサイトを使用し、インタラクションします：指示に従って、ブラウズ、クリック、スクロールします。
- 拡張機能はバックグラウンドで静かに動作します。インタラクションする必要はありません。
- 研究中に拡張機能のアイコンをクリックしないでください。必要ありません。
研究後
- プロンプトが表示された場合は、研究後の質問に答えてください。
- 研究が終了したら、必要がなくなった場合、拡張機能をアンインストールできます：
- ツールバーの拡張機能アイコンを右クリック → 「Chromeから削除」。
6. 使用例
6.1 EコマースUX研究
商品リストまたはチェックアウトページを埋め込みます。参加者がどの製品画像に注視し、どの「カートに追加」ボタンをクリックし、決定を下す前にどのくらいスクロールするかを追跡します。
6.2 ニュース＆メディア注意研究
ニュース記事またはホームページを埋め込みます。どの見出しが最も注意を引くか、記事の長さによって読書パターンがどのように変わるか、どの画像が最初に目を引くかを測定します。
6.3 ナビゲーション＆情報アーキテクチャテスト
ウェブサイトのナビゲーションメニューまたは複数ページのフローを埋め込みます。クリックとホバー時間を記録して、メニューラベルの明確さと見つけやすさを評価します。
6.4 比較研究（A/B）
異なるウェブサイトバージョンを埋め込んだ2つの試行を作成します。Labvancedの組み込みカウンターバランスを使用して条件をランダム化します。グループ間でAOIメトリクスを比較します。
7. データとプライバシー
拡張機能はどのようなデータを収集しますか？
拡張機能は、アクティブなLabvanced研究セッション内にいるときのみ、次のデータを収集します：
- 研究者が選択したページ要素のバウンディングボックス位置（x、y、幅、高さ）
- マウス座標、クリック位置、ホバーイベント、およびマウス移動パス
- 現在のページのスクロール位置とページURL
- ホバリング/クリックされた要素からの可視テキストスニペット（50文字にtruncate）
パスワードフィールドや敏感なフォーム入力は決して読み取られません。 拡張機能は<input type="password">および敏感なオートコンプリート属性を持つ入力を明示的に除外します（autocomplete="password"、cc-*）。これらはすべての場合において空の値を返します。
データはどこに行きますか？
すべてのデータは、ブラウザのpostMessage APIを介して埋め込まれたlabvanced.comページにのみ送信されます。 拡張機能は外部サーバーにデータを送信せず、ローカルに何も保存せず、Labvanced研究の外部で通常のブラウジング中にデータを収集しません。
拡張機能は他のウェブサイトで私を追跡しますか？
いいえ。拡張機能のコンテンツスクリプトはすべてのiframeに挿入されます（ターゲットウェブサイトドメインは事前に把握できないため）ですが、location.ancestorOriginsがlabvanced.comが祖先フレームであることを確認しない限り、すぐに退出します。Labvancedによって埋め込まれていない任意のウェブサイトでは、リスナーはインストールされず、DOMは読み取られず、データの流れはありません。
拡張機能はLabvancedの外にある何かを変更しますか？
いいえ。拡張機能は、labvanced.comのトップレベルURLのブラウザタブ内でのみiframe埋め込み制限（X-Frame-Options / Content-Security-Policyヘッダー）を削除します。他のすべてのタブには全く影響がありません。これらのルールはメモリ内にのみ保存され、タブが閉じたり、別のページに移動したりすると削除されます。
完全なプライバシーポリシー
完全なプライバシーポリシーは、次のリンクでご覧いただけます: https://www.labvanced.com/extension-privacy-policy.html
8. トラブルシューティング
ウェブサイトが私の研究で読み込まれない
考えられる原因と修正：
| 症状 | 考えられる原因 | 修正 |
|---|---|---|
| 空の白いフレーム | 拡張機能がインストールされていないか無効になっている | chrome://extensionsで拡張機能が有効になっているか確認します |
| ウェブサイトがインタラクティブでないかレスポンスがない | サイトがJSレベルでiframe埋め込みを検出 | 埋め込むことができないサイトがあります。[email protected]に連絡してください |
拡張機能のアイコンに警告が表示されるか、グレー表示される
- アイコンをクリックしてポップアップを開き、ステータスメッセージを読みます。
- labvanced.comページにいるか、Labvanced研究が開いていることを確認します。
chrome://extensionsから拡張機能を無効にして再度有効にしてみてください。
要素ピッカーが要素を強調表示しない
- 拡張機能が有効になっていること、またはエディタであるか（プレビューではない）を確認します。
- 一部のウェブサイトは、要素ピッキングを制限するShadow DOMまたはiframe内のiframe構造を使用しています。
Parentパネルを介して要素を選択してみてください。 - エディタを更新して再試行してください。
9. よくある質問
Q: 拡張機能は無料ですか？ A: はい。拡張機能はインストールと使用が無料です。研究をデザインするためにはLabvancedアカウントが必要です。
Q: 他のブラウザ（Firefox、Safari、Edge）で動作しますか？ A: 現在、サポートされているのはGoogle Chromeのみです。Microsoft Edge（Chromiumベース）は動作する可能性がありますが、正式にはサポートされていません。
Q: 研究の後に拡張機能をインストールしたままにしておく必要がありますか？ A: いいえ。参加者は研究を完了した直後にアンインストールできます。拡張機能アイコンを右クリック → "Chromeから削除"。
Q: 拡張機能がブラウザを遅くしますか？ A: 拡張機能はLabvancedセッション以外では非アクティブです。通常のブラウジングに対してオーバーヘッドは追加しません。
Q: パスワードや銀行情報を見られますか？ A: いいえ。パスワードフィールド（<input type="password">）やクレジットカード入力は明示的に除外され、すべてのケースで空の値を返します。拡張機能は敏感なフォームデータを読み取ったり送信したりすることはありません。
Q: 研究者として、参加者が自分で訪れているウェブサイトを追跡するためにこれを使用できますか？ A: いいえ。拡張機能はlabvanced.comによって埋め込まれたiframe内でのみアクティブになります。他のタブで参加者が独自に訪問するウェブサイトを追跡することはできません。
Q: 研究所のITポリシーが拡張機能のレビューを要求しているため、従業員がインストールする前に誰に連絡できますか？ A: ご要望がある場合は、[email protected]にご連絡ください。
10. お問い合わせ & サポート
メール: [email protected]
ドキュメント: https://www.labvanced.com/content/learn/ja/guide/
Discordのコミュニティフォーラム: https://discord.com/invite/SBpFJnVZah
バグレポート: 次の情報を含めてください：
- あなたのChromeバージョン（
chrome://settings/help） - 埋め込みしようとしているウェブサイトのURL
- エラーメッセージのスクリーンショット
- 問題を再現するための手順
Labvanced Web BridgeはScicovery GmbHによって開発および維持されています。完全なプライバシーポリシーについては、https://www.labvanced.com/extension-privacy-policy.htmlを参照してください。