調査のスタイル設定—ArcGIS Survey123

Survey123 Connectは、ユーザーの注目を引くことができるように、調査の表示方法を構成するツールを提供します。ギャラリー内に表示される調査の情報、調査を開いたときのタイトル、および視覚的にわかりやすくする調査の色とスタイル設定を変更できます。また、メディアを調査に挿入したり、HTML の書式設定を追加することもできます。

サムネイル、タイトル、説明、タグの変更

サムネイルと調査名は、Survey123 フィールドアプリのギャラリーで調査を視覚的に見分けるために重要な役割を果たします。自分自身で使用するために複数の調査を作成している場合や、フィールド作業員が複数の調査をダウンロードする場合には、特に重要です。

サムネイルや調査アイテムのその他のプロパティを変更するには、次の手順を実行します。

Survey123 Connect で調査を開きます。
[詳細] タブをクリックします。
サムネイル画像をクリックして、画像ファイルを参照します。最適な結果を得るためには、600x400 ピクセルの画像を使用してください。
必要に応じて、調査のアイテムタイトル、サマリー、および説明のテキストを入力します。
ここで行った変更は調査ギャラリーに反映され、調査の公開後に ArcGIS 組織の調査のフォームアイテムにも反映されます。

注意:

Survey123 Connect では、サムネイルに使用されるすべての画像ファイルのファイル拡張子を小文字にする必要があります。大文字のファイル拡張子は Survey123 Connect で認識されず、そのサムネイルは調査とともに公開されません。

ファイル名にスペース、シンボル、または特殊文字が含まれている場合、サムネイルが正しく表示されない場合があります。

書式、リンク、その他のリッチテキストエレメントを調査の説明に追加するには、ArcGIS 組織にあるフォームアイテムの説明エディターを使用することをお勧めします。 ArcGIS 組織でフォームアイテムのプロパティを編集する場合には、Survey123 Connect で調査を再度ダウンロードし、[詳細] タブで変更内容を確認する必要があります。

調査のタイトルの設定

調査のタイトルは、ギャラリーから調査を開いたときに表示されます。これにより、調査に詳細な説明を設定できます。調査のタイトルは、ギャラリーに表示される調査名とは異なります。

調査のタイトルを設定するには、[settings] ワークシートの [form_title] 列に値を入力します。

generated_note_form_title という名前のメモ質問を調査に含めることで、調査のタイトルを定義することもできます。この方法では、タイトルの翻訳を提供し、${question_name} 構文を使用してタイトルの調査の回答からの値を含めることができます。詳細については、「フォームエレメントのカスタマイズ」をご参照ください。

調査へのメディアの追加

調査にメディアを追加すると、さまざまな場面で役に立ちます。調査の見栄えがよくなるだけではなく、調査内の画像やオーディオによって、情報を入力する際にユーザーが判断しやすくなります。調査に画像を挿入することで、視覚識別や目測が容易になります。

調査に加えるには、画像およびオーディオファイルを調査のメディアフォルダーに保存する必要があります。

survey ワークシートの [media::image] 列に画像ファイルの正確なファイル名 (ファイル拡張子を含む) を含めることで、どの質問にも画像を追加できます。サポートされているファイル形式には、BMP、GIF、JPC、JPE、JPEG、JPF、JPG、および PNG があります。 GIF 画像の場合、アニメーションは Survey123 Web アプリでのみサポートされます。 Survey123 フィールドアプリは、TIF および TIFF 画像もサポートしています。

survey ワークシートの [media::audio] 列にオーディオファイルの正確なファイル名 (ファイル拡張子を含む) を含めることで、どの質問にもオーディオを追加できます。サポートされるファイルタイプは MP3 と WAV です。一部のプラットフォームでは、追加のオーディオ形式がサポートされています。たとえば、iOS では M4A ファイルを再生できます。調査にオーディオが追加されると、フォーム上でスピーカーボタンがアクティブになります。このボタンを選択して、オーディオファイルを再生します。

注意:

Survey123 では大文字と小文字が区別されます。ファイル名とその拡張子に対する参照では、必ず実際のファイルと同じ大文字小文字を使用してください。たとえば、Tree.JPG は tree.jpg と同じではなく、このように参照された場合、画像が調査に表示されません。

[minimal] または [autocomplete] の表示設定を使用する場合、複数の選択肢の質問の選択肢の画像が Survey123 Web アプリでサポートされません。

画像を表示する、あるいは質問に関連付けられていないオーディオクリップを再生するには、メモの質問を使用します。

メモへのメディアの追加

画像を調査に追加するには、次の手順に従います。

Survey123 Connect で調査をプレビューします。
下部のツールバーで [メディア] タブを開きます。
[メディアフォルダーを開く] をクリックし、画像ファイルを追加します。
このファイルは、[メディア] タブに表示されます。
survey ワークシートにメモの質問を追加し、[media::image] 列に画像のファイル名を入力します。
メディアの名前では、大文字と小文字が区別されます。

その画像が調査のメモに表示されます。画像を選択して全画面表示で開きます。左上の [戻る] ボタンを選択して、調査に戻ります。

選択リストへのメディアの追加

単一選択肢と複数選択肢の質問の選択肢に画像とオーディオを追加し、各選択肢についてユーザーに詳細情報を提供することもできます。

単一選択肢と複数選択肢の質問の選択肢にメディアを追加するには、次の手順を実行します。

Survey123 Connect で調査をプレビューします。
下部のツールバーで [メディア] タブを開きます。
[メディアフォルダーを開く] をクリックし、画像ファイルと音声ファイルを追加します。
これらのファイルは、[メディア] タブに表示されます。
choices ワークシートで、選択肢リストに選択肢を追加し、[media::image] 列の選択肢に、画像のファイル名を入力します。
メディアの名前では、大文字と小文字が区別されます。
[media::audio] 列の選択肢に、オーディオファイルのファイル名を入力します。
リストの他の選択肢について、ステップ 4 ～ 5 を繰り返します。

画像とオーディオクリップは、選択肢リストを使用する単一選択肢と複数選択肢の質問で横に並べて表示されます。

スタイルの設定

スタイルによって、調査のさまざまなエレメントの色を制御できます。 [スタイル] パネルは [フォーム] タブの右側にあります。

調査のヘッダー、本文、入力フィールド、フッターに対して、テキスト色と背景色をカスタマイズできます。パレットボタンをクリックして色を選択し、表示されるフィールドに 16 進数カラーコードまたは HTML カラー名を入力します。テキスト色の入力の上にあるコントラストボタンで、読みやすさを確認できます。ボタンをクリックすると、テキスト色と背景色のコントラスト比が表示されます。4.5 未満の数値は推奨されず、赤色のコントラストアイコンが表示されます。

調査の背景として画像を使用することもできます。背景画像として選択した画像ファイルは、調査のプロジェクトフォルダーのメディアサブフォルダーにコピーされます。

グループ、ページ、繰り返しの色

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 アプリで開くと、調査と同じタブにリンク先のページが開きます。このリンクを新しいタブで開くには、target="_blank" タグに a href を追加します。例:

<a href="https://www.esri.com" target="_blank">Link to Esri website</a>

HTML 形式は Web フォームの次の領域では表示されません。

必須の制約メッセージ
外部選択または外部選択肢のいずれかの質問の選択肢ラベル
選択肢の順序がランダム化するように設定されている場合の選択肢ラベル

ありがとうございました画面

ありがとうございました画面は、Survey123 Web アプリでユーザーがデータを送信したときに表示されます。この画面は Web デザイナーの [オプション] タブで編集でき、リンクや画像などのリッチテキスト編集をサポートしています。

注意:

Survey123 Connect で設計された調査の場合、ありがとうございました画面は、Survey123 Web サイトで調査の [設計] > [オプション] タブで編集することができます。変更内容を保存するには、[公開] をクリックして確認します。

編集モードまたはビューモードで、先ほど送信した調査回答を再開するありがとうございました画面にリンクを追加できます。これらの組み込みリンクは、動的 globalId パラメーターを使用して、回答を開き、ユーザーが編集または再送信したり、読み取り専用の状態で表示したりできるようにします。ありがとうございました画面エディターの [リンク] ボタンをクリックして、リンクを追加します。 [調査リンクを使用] ボタンをクリックして、調査回答を編集または表示するための書式設定された URL を追加します。

ユーザーがクリックして調査を再読み込みできるリンクをありがとうございました画面に提供するか、指定した遅延の後に自動的に調査を再読み込みすることにより、ユーザーが新しい回答を送信できるようにすることができます。指定した URL に自動的にリダイレクトされるようにすることもできます。デフォルトの遅延は 3 秒です。遅延が 0 に設定されている場合、調査完了時にありがとうございました画面が表示されず、調査が完了するとすぐにリダイレクトが発生します。調査が iframe を使用して埋め込まれている場合、URL リダイレクトは無視されます。

autoReload URL パラメーターは、Survey123 Web デザイナーで設定された遅延より優先されます。

Survey123 Connect で設計された調査の場合、XLSForm の特別なメモの質問を使用すると、ありがとうございました画面のコンテンツをカスタマイズすることもできます。詳細については、「フォームエレメントのカスタマイズ」をご参照ください。

このトピックへのフィードバック