Webbox
Webboxは外部Webページをモーダルiframeとして調査内に埋め込み、調査員がフォームを離れることなく参照資料を閲覧したり外部ツールと対話したりできます。
Webboxは外部Webページをiframeとして調査内にモーダルポップアップとして埋め込みます。調査員がラベルまたはnoteテキストのボタンをタップすると、ページがフォーム内のフルスクリーンオーバーレイで開き、閉じると元の場所に戻ります。これにより、別のブラウザタブを開かずに参考資料、地図、ダッシュボード、またはカスタムツールを表示できます。
構文
<webbox>HTMLタグをlabelまたはnoteのラベル列に直接挿入します：
<webbox src='https://example.com/reference' title='Reference Guide'>参考ガイドを開く</webbox>
| 属性 | 説明 |
|---|---|
src | iframeに読み込むURL。シングルクォートとダブルクォートの両方をサポート。 |
title | モーダルヘッダーバーに表示されるテキスト。プレーンテキストをサポート。 |
| （コンテンツ） | 調査フィールドに表示されるクリック可能なボタンラベル |
基本的な例
| type | name | label |
|---|---|---|
| note | ref_guide | <webbox src='https://docs.example.com/field-guide' title='Field Guide'>📖 フィールドガイドを開く</webbox> |
これにより「📖 フィールドガイドを開く」というラベルのボタンがレンダリングされます。タップするとフィールドガイドのWebサイトを表示するモーダルが開きます。
地図の埋め込み
| type | name | label |
|---|---|---|
| note | area_map | <webbox src='https://maps.example.com/survey-area' title='Survey Area Map'>🗺 地図を表示</webbox> |
埋め込みページにフォーム値を渡す
calculation列でconcat()を使用してURLにフォームフィールドの値を追加し、ラベルで結果を参照します：
| type | name | label | calculation |
|---|---|---|---|
| calculate | webbox_url | concat('https://dashboard.example.com/household?id=', ${household_id}) | |
| note | hh_dash | <webbox src='${webbox_url}' title='Household Dashboard'>ダッシュボードを開く</webbox> |
<webbox>タグのsrc属性は、ラベルがcalculateフィールドから計算される場合に${fieldname}参照をサポートします。完全なURLをcalculateフィールドで構築してそれを参照してください。
繰り返し操作：削除ボタン
Webboxはラベル内の繰り返しグループを管理するための特別なアクションタグもサポートします：
<delete-repeat-current>この行を削除</delete-repeat-current>
<delete-repeat-last>最後の行を削除</delete-repeat-last>
これらはタップすると繰り返しインスタンスを削除するボタンとしてレンダリングされます。繰り返しグループの内部（またはすぐ後）のnoteフィールドに配置します：
| type | name | label |
|---|---|---|
| begin_repeat | items | 項目 |
| text | item_name | 項目名 |
| note | delete_btn | <delete-repeat-current>✕ この項目を削除</delete-repeat-current> |
| end_repeat |
埋め込みページとの通信（postMessage）
webbox iframeと親フォームは、ブラウザのpostMessage APIを使用して通信できます。モーダルが開くと親はiframeにinitメッセージを送信します。埋め込みページは以下で応答できます：
delete-repeat-current— 現在の繰り返しインスタンスの削除をトリガーdelete-repeat-last— 最後の繰り返しインスタンスの削除をトリガー
これにより、カスタムWebツール（例：描画ツール、インタラクティブ地図）がユーザーがiframe内でアクションを確認したときにフォームのアクションをトリガーできます。
ベストプラクティス
- 参考資料（ガイドライン、検索テーブル、地図）にwebboxを使用してください — フォーム自体に含めるべきデータを収集するためには使用しないでください。
- 埋め込みURLがデバイスのネットワークからアクセスできることを確認してください — webboxには接続性が必要です。
- 埋め込みページをモバイルフレンドリーにしてください — モーダルは最大800px幅でビューポート高さの80%です。
- 汎用ラベル（「ここをクリック」）ではなく説明的なボタンテキストを使用してください（例：「村の地図を表示」）。
- モーダルを閉じると調査に戻ることを調査員に知らせてください — iframeオーバーレイを閉じる方法を知らないユーザーもいます。
制限事項
- Webboxは埋め込みURLを読み込むためにネットワーク接続が必要です。
- 一部の外部サイトは
X-Frame-OptionsまたはContent-Security-Policyヘッダーによってiframe内への埋め込みをブロックします — これらのサイトはwebboxでは使用できません。 - モーダルは調査員が質問から離れるとき閉じます — iframe内の未保存の状態は失われます。
- WebboxはrtSurvey Webフォーム拡張機能であり、他のODK互換クライアントでは機能しない場合があります。