HTML Styling
rtSurveyはラベルとヒントでHTMLタグをサポートし、リッチテキスト書式設定、リンク、および動的カラーテーマを可能にします。
rtSurveyはWebフォームでlabelとhintテキストをHTMLとしてレンダリングします。つまり、標準のHTMLタグを使用してテキストを書式設定したり、改行を追加したり、リンクを作成したり、色を適用したりできます。これはnoteフィールド、セクション指示、および動的サマリーに特に便利です。
ラベルのHTMLはWebフォームとrtSurveyモバイルアプリでレンダリングされます。すべてのODK互換クライアントでレンダリングされない場合があります。常にターゲットプラットフォームでテストしてください。
サポートされるHTMLタグ
テキスト書式設定
| タグ | 結果 |
|---|---|
<strong>text</strong>または<b>text</b> | 太字テキスト |
<em>text</em>または<i>text</i> | 斜体テキスト |
<u>text</u> | 下線付きテキスト |
<br> | 改行 |
<span style="...">text</span> | インラインスタイル |
リンク
<a href="https://example.com" target="_blank">ここをクリック</a>
新しいタブで開きます。調査員が参照すべき参考文書、ガイドライン、または外部リソースに使用します。
色
インラインスタイルを使った<span>を使用します：
<span style="color: red;">警告：値が範囲外です</span>
<span style="color: #009688;">セクション完了</span>
カラーテーマ変数
rtSurveyはアプリの設定テーマに適応するカラーテーマトークンをサポートします。__COLOR_THEME_NAME__構文を使用します：
<span style="color: var(--color-theme-primary);">プライマリカラーテキスト</span>
またはラベルテキストのトークン省略記法を使用します：
<font color="var(--COLOR_THEME_PRIMARY)">重要なメモ</font>
これはレンダリング時に同等の<span>とCSSバリアブルに自動的に変換されます。
多言語ラベル
単一のラベルセルで複数の言語をサポートするためにコンテンツを言語タグで囲みます：
<en>Enter the household size</en><vi>Nhập quy mô hộ gia đình</vi>
rtSurveyは現在のアプリ言語に一致するコンテンツを抽出します。一致する言語タグが見つからない場合は、文字列全体がそのまま表示されます。
noteフィールドでの例
太字と改行付きのセクション指示
| type | name | label |
|---|---|---|
| note | section_intro | <strong>セクション3：土地利用</strong><br>このセクションのすべての質問は世帯主のみに尋ねてください。 |
計算参照付きの動的サマリー
| type | name | label |
|---|---|---|
| calculate | total | |
| note | summary | 世帯員総数：<strong>${total}</strong><br><span style="color: gray;">大人：${adults} · 子供：${children}</span> |
赤い警告
| type | name | label | relevant |
|---|---|---|---|
| note | age_warning | <span style="color: red;"><strong>警告：</strong>入力された年齢（${age}）が異常に高いです。確認してください。</span> | ${age} > 100 |
参考文書へのリンク
| type | name | label |
|---|---|---|
| note | guidelines_link | このセクションを始める前に<a href="https://docs.example.com/guidelines" target="_blank">フィールドガイドライン</a>を参照してください。 |
rtSurvey固有のHTMLタグ
<webbox src='url' title='title'>...</webbox>
フォーム内のモーダルにURLを埋め込むボタンをレンダリングします。詳細についてはWebboxを参照してください。
<delete-repeat-current>label</delete-repeat-current>
タップすると現在の繰り返しインスタンスを削除する繰り返しグループ内のボタンをレンダリングします。
<delete-repeat-last>label</delete-repeat-last>
最後の繰り返しインスタンスを削除するボタンをレンダリングします。
繰り返しグループ内での使用例：
| type | name | label |
|---|---|---|
| note | delete_btn | <delete-repeat-current>このメンバーを削除</delete-repeat-current> |
ベストプラクティス
- HTMLは控えめに使用してください — 過度に書式設定されたラベルは読みにくくなります。
- 太字には
<strong>を、斜体には<em>を使用してください（非推奨の<b>と<i>の代わりに）。 - 色の使用を意味のあるものにしてください — 警告には赤を使用し、装飾には使用しないでください。
- HTMLのレンダリングがわずかに異なる場合があるため、モバイルアプリとWebフォームの両方で常にHTMLレンダリングをテストしてください。
- ラベル内の
<table>タグは避けてください — モバイル画面でのレンダリングがよくありません。 - JavaScriptは使用しないでください（
<script>）— 削除されるかエラーを引き起こします。
制限事項
- 複雑なHTML（テーブル、フォーム、スクリプト）はサポートされておらず、レンダリングを壊す可能性があります。
- 一部の古いモバイルクライアントはHTMLタグをリテラルテキストとして表示する場合があります — すべてのターゲットデバイスでテストしてください。
<a>リンクはブラウザまたはWebViewで開きます — 調査員がフォームを離れることになり、モバイルでは混乱を招く可能性があります。