Survey123 の Web サイトは、ユーザーの注目を引くことができるように、調査の表示方法を構成するツールを提供します。 ギャラリー内に表示される調査の情報、調査を開いたときのタイトル、および視覚的にわかりやすくする調査の色とスタイル設定を変更できます。 また、メディアを調査に挿入したり、HTML の書式設定を追加することもできます。
サムネイル、タイトル、説明、タグの変更
サムネイルと調査名は、Survey123 の Web サイトで調査を視覚的に見分けるために重要な役割を果たします。 自分自身で使用するために複数の調査を作成している場合や、フィールド作業員が複数の調査をダウンロードする場合には、特に重要です。
Survey123 Web サイトで調査を編集する場合、調査の現在のタイトルをナビゲーション バーでクリックすると、調査の名前を変更できます。
サムネイル、タグ、調査アイテムのサマリーを変更するには、[調査] ページの調査カードの右下隅にある [調査情報の編集] ダイアログ ボックスを開きます。 サムネイル、タグ、サマリーは ArcGIS Online または ArcGIS Enterprise でも編集できます。
調査のヘッダー、説明、およびフッターの設定
調査のヘッダーは、ビューアーの URL から調査を開いたときに表示されます。 これにより、調査に詳細な説明を設定できます。 調査のヘッダーは、ギャラリーに表示される調査名とは異なります。
調査のヘッダーは、Web デザイナーで選択することで設定できます。 右側のウィンドウが [編集] に切り替わり、表示されるタイトルを変更できるようになります。 同じ方法で調査の説明および調査のフッターを編集することもできます。
調査のヘッダーは、テキストまたは画像にすることができます。 推奨されるヘッダー画像の最大幅は、680 ピクセルです。
調査の説明には、画像および書式設定されたテキストを、リンクと共に含めることができます。
調査のフッターは、テキストおよび URL を含むことができます。
調査での画像の使用
調査で画像を使用すると、さまざまな場面で役に立ちます。 調査の見栄えがよくなるだけではなく、調査内の画像によって、情報を入力する際にユーザーが判断しやすくなります。 調査に画像を挿入することで、視覚識別や目測が容易になります。
[画像の挿入] ボタンは、調査のヘッダー、説明、[メモ] の質問、カスタム調査テーマ、および「ありがとうございました」画面を編集する際に使用できます。 このボタンをクリックした後、オンラインでホストされている画像の URL を入力するか、デバイスに保存されている画像をアップロードするかを選択できます。 また、代替テキストを入力し、調査のアクセシビリティを向上させることもできます。 オンラインでホストされている画像を使用する場合、画像がパブリックに共有されていることを確認してください。 ArcGIS Online またはインターネットに接続されている ArcGIS Enterprise でホストされている画像を参照している場合、その URL は https://<org_url>/sharing/rest/content/items/<item_id>/data という形式を使用する必要があります。
注意:
Survey123 Web サイトを ArcGIS Enterprise で使用している場合、ローカルに保存された画像を設定するオプションは無効になります。
スタイルとカスタマイズ
設計ウィンドウの [追加] タブでは、調査に表示される調査エレメントを制御できます。 [調査エレメント] セクションでは、調査のヘッダー、説明、またはフッターを無効化して、フォームで表示されないようにすることができます。
設計ウィンドウの [表示設定] タブでは、調査の視覚エレメントを制御できます。
[テーマ] セクションでは、複数のデフォルトのテーマから選択して、調査の背景および配色を変更することができます。 住居アイコンでマーク付けされたテーマ タイルは、組織の共有テーマであり、管理者によって設定されます。
これらのテーマのいずれかをさらに構成するには、テーマ選択の下で [テーマの編集] ボタンをクリックします。 これによって、追加の [ヘッダー]、[コンテンツ]、および [Web ページ] の各セクションが開き、そのテーマの色または背景画像を変更することができます。 このカスタマイズされたテーマは、設定ボタンでマーク付けされたテーマ タイルに保存されます。
カスタマイズされたテーマの左側にある [既存の調査のテーマ] タイルでは、組織の別の調査からテーマを使用できます。 このテーマは、[テーマの編集] オプションを使用して、さらにカスタマイズすることもできます。 既存の調査を選択すると、右下に [別の調査から選択] ボタンが表示され、別の既存の調査を選択できます。
注意:
Survey123 Connect で公開された調査の表示設定を編集するとき、設計ウィンドウには実際の調査ではなくプレビューの調査が表示されます。 調査のヘッダーとフッターのテキストを編集できなくすることもできます。
グループ、ページ、繰り返しの色
backgroundColor パラメーターと borderColor パラメーターを body::esri:style 列に追加することで、全体の調査スタイルとは独立してグループ、ページ、繰り返しで色を設定できます。 色は、標準の HTML の色名または 16 進数の色コードで指定できます。 これらは、定数または質問への参照として指定できます。 複数のパラメーターは以下のようにスペースで区切って指定します。
backgroundColor=LightCyan borderColor=#483D8B
注意:
backgroundColor パラメーターと borderColor パラメーターは、Survey123 Web アプリではサポートされていません。
グリッド スタイル グループは borderColor をサポートしていません。
HTML 形式
質問ラベルと選択肢リストのラベルで HTML 形式を使用できます。 このテキストに書式を適用することで、重要な情報に対する注意を促すことができます。 サポートされている HTML 形式は次のとおりです。
| タグ | 属性 |
|---|---|
a | href、style |
abbr | title |
audio¹ | autoplay、controls、loop、muted、preload |
b、strong、i、em、u、ul、ol、li、tbody、br、hr | |
dd、dl、dt | style |
div¹ | style、align |
figcaption | style |
figure | style |
font | size、color、style |
h1、h2、h3、h4、h5、h6 | style |
img | src、width、height、border、alt、style |
p | style |
source¹ | media、src、type |
span | style |
sub | style |
sup | style |
table | width、height、cellpadding、cellspacing、border、style |
| td、th | height、width、valign、align、colspan、rowspan、nowrap、style |
tr | height、valign、align、style |
video¹ | autoplay、controls、height、loop、muted、poster、preload、width |
¹ Survey123 Web アプリでのみサポートされます。
注意:
次の状況では、選択肢のラベル内のリンクが Survey123 Web アプリ内で機能しません。
- Survey123 Connect で設定された表示設定が [最小] または [自動入力] の場合
- Survey123 Connect で [ランク] の質問タイプが使用されている場合
- Survey123 Web デザイナーで [ドロップダウン] または [ランク] の質問タイプが使用されている場合
デフォルトでは、HTML 形式で作成したハイパーリンクを Survey123 Web アプリで開くと、調査と同じタブにリンク先のページが開きます。 このリンクを新しいタブで開くには、a href タグに target="_blank" を追加します。例:
<a href="https://www.esri.com" target="_blank">Link to Esri website</a>
HTML 形式は Web フォームの次の領域では表示されません。
- 必須の制約メッセージ
- 外部選択または外部選択肢のいずれかの質問の選択肢ラベル
- 選択肢の順序がランダム化するように設定されている場合の選択肢ラベル
ありがとうございました画面
ありがとうございました画面は、Survey123 Web アプリでユーザーがデータを送信したときに表示されます。この画面は Web デザイナーの [オプション] タブで編集でき、リンクや画像などのリッチ テキスト編集をサポートしています。
編集モードまたはビュー モードで、先ほど送信した調査回答を再開するありがとうございました画面にリンクを追加できます。 これらの組み込みリンクは、動的 globalId パラメーターを使用して、回答を開き、ユーザーが編集または再送信したり、読み取り専用の状態で表示したりできるようにします。 ありがとうございました画面エディターの [リンク] ボタンをクリックして、リンクを追加します。 [調査リンクを使用] ボタンをクリックして、調査回答を編集または表示するための書式設定された URL を追加します。
ユーザーがクリックして調査を再読み込みできるリンクをありがとうございました画面に提供するか、指定した遅延の後に自動的に調査を再読み込みすることにより、ユーザーが新しい回答を送信できるようにすることができます。 指定した URL に自動的にリダイレクトされるようにすることもできます。 デフォルトの遅延は 3 秒です。 遅延が 0 に設定されている場合、調査完了時にありがとうございました画面が表示されず、調査が完了するとすぐにリダイレクトが発生します。 調査が iframe を使用して埋め込まれている場合、URL リダイレクトは無視されます。
autoReload URL パラメーターは、Survey123 Web デザイナーで設定された遅延より優先されます。
Survey123 Connect で設計された調査の場合、XLSForm の特別なメモの質問を使用すると、ありがとうございました画面のコンテンツをカスタマイズすることもできます。 詳細については、「フォーム エレメントのカスタマイズ」をご参照ください。