Skip to content
espar form espar form espar form DOCS

ローカルWebサーバでの動作確認

ローカル環境にWebサーバを立てて、espar form の動作確認をすることができます。

準備

espar form は、デフォルトではローカル環境で動作しません。espar form の管理画面から、対象となるフォームにローカル環境での動作を許可する必要があります。

  1. 管理画面にログインし、[フォーム]タブをクリックします。
  2. リストボックスの一覧から対象のフォームを選びます。
  3. 下図のように[詳細設定]タブで「localhostからの送信を許可する」と「httpのアクセスを許可する」のチェックボックスをONにします。

以上でローカル環境で準備は完了です。

手順

準備が終わったら、以下の手順で動作確認できます。

  1. ターミナルを起動します。
  2. cd 等で、espar form を組み込んだHTMLファイルがあるディレクトリに移動します。
  3. ターミナルで npx serve を実行しローカルWebサーバを起動します。
  4. 出力された内容に従って(上記例では http://localhost:3000/) にアクセスします。espar form を実装しているHTMLファイル名が index.html でない場合は明示的にファイル名を指定したURLを指定します。(例:http://localhost:3000/form.html)
  5. 動作確認後、管理画面で「localhostからの送信を許可する」と「httpのアクセスを許可する」のチェックボックスをOFFにしておいて下さい。

本番稼働後のテスト

本番稼働後にフォームの修正を行う場合のテストは、テスト用フォームを作成して対応して下さい。

  1. 対象フォームのテスト用フォームを追加します。 (フォームIDの例 : espfTest)
  2. 対象フォームの設定内容を1.にコピーします。
  3. 1.の[基本情報]タブでフォームIDとAPIキーを調べます。 (APIキーの例 : YYYYYYYY)
  4. 既存の埋め込みコードの値を差し替えます。(以下は espfTest, YYYYYYYY で差し替えた例) 
    var espar_form = { espfTest : { api_key: "YYYYYYYY", debug:false } };
  5. テスト環境後に埋め込みコードのフォームIDとAPIキーを元に戻します。
  6. 修正に伴って変更した1.の設定を対象フォームの設定に反映します。

本番稼働後は、このようにフォームIDとAPIキーを差し替えることでテストを行うことができます。