操作手順: Python の http.server モジュールを使用して、ArcGIS Survey123 で生成された HTML をローカルでテストする

サマリー

手順

Python がインストールされ、Windows の IIS Web 管理ツールと World Wide Web サービスが有効になっていれば、Python の http.server モジュールを使用して、Survey123 で生成された <iframe> エレメントを含むテスト HTML ファイルをユーザー自身に提供できます。

まず、Notepad++ や VS Code などのテキストエディターを使用して、コンピューター上に HTML ファイルを作成します。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Survey123 iframe test</title> </head> <body> </body> </html>

注意: このファイルを新しいフォルダーに保存しておくと、次のステップが容易になります。

HTML ファイルが作成されたら、生成された Survey123 の <iframe> エレメントをコピーして HTML 内に貼り付け、<style> エレメントを <head> エレメントの内側に、<div>/<iframe> エレメントを <body> エレメントの内部に貼り付けます。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Survey123 iframe test</title> <style> .embed-container { position: relative; height: 0; padding-bottom: 80%; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } small { position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px; } </style> </head> <body> <div class="embed-container">   <iframe name="survey123webform" width="500" height="400" frameborder="0" marginheight="0" marginwidth="0" title="Bug Map Zoom Level" src="//survey123.arcgis.com/share/ae9c15b587494647b5186d69e81d042f" allow="geolocation https://survey123.arcgis.com; camera https://survey123.arcgis.com">   </iframe> </div> <script>var survey123webform = document.getElementsByName('survey123webform')[0]; window.addEventListener("message", e => { if (e.data) { var t = JSON.parse(e.data); "survey123:onFormLoaded" === t.event && t.contentHeight && (survey123webform.parentNode.style.height = t.contentHeight + "px") && (survey123webform.parentNode.style["padding-bottom"] = "unset") } });</script> </body> </html>

HTML ファイルを Web ブラウザーで表示し、埋め込まれた調査の外観と動作をテストします。前述のとおり、単純な HTML ファイルとは異なり、ローカルファイルパスを使用してブラウザーでファイルを直接開くことはできませんが、Python の http.server モジュールを使用して HTTP 経由でユーザー自身にファイルを提供できます。
1. コマンドプロンプトまたは Python コマンドプロンプトを開きます。
2. cd コマンドを使用して、HTML ファイルが保存されているフォルダーに移動します (例: cd .\Desktop\Test)。
3. プロンプトの後ろに「python -m http.server」を貼り付け、Enter キーを押します。
4. Web ブラウザーで http://localhost:8000/ を開き、直前に作成した HTML ファイルをクリックします。ファイルがブラウザータブに読み込まれます。
5. ファイルの検査が完了したら、コマンドプロンプトまたは Python コマンドプロンプトに戻り、Ctrl + C キーを押して提供を停止します。

記事 ID: 000026171