デバッグとテスト

espar form ではデバッグ機能やテスト用のサンプルなど、導入の助けになるツールをご用意しています。

 

コンフィグテスト

esapr form に必要なクラス名指定に誤りが無いかを自動チェックしてくれるモードを用意しています。クラス名の指定が誤っている場合、以下のようにブラウザのコンソール上に示してくれるというものです。

debug_1-1-0

初めて espar form を組み込む場合や、フォームが期待通りに動作しない場合に御利用下さい。使用方法は以下の通りです。

  • (1) espar form の埋め込みコードの json 内に config_test : true を挿入する (挿入位置を間違えないで下さい)
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://bridge.espar.biz/v1.3.0/form.js"></script>
<script>
    var espar_form = { espfEsparFormMonitor : { api_key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", debug:true }, config_test: true};
</script>
  • (2) ブラウザで espar form を埋め込んでいる html ファイルをブラウザで開く
    (この際、Webサーバは不要です。htmlファイルをブラウザにドラッグ&ドロップして開いてもコンフィグテストは機能します)
  • (3) 表示される ERROR や WARN を参考にクラス指定を修正する。エラーレベルの意味は以下の通りです。
レベル 説明
ERROR 必ず修正する必要のある箇所です。多くの場合、必須項目がかけている場合に発生しますので、導入準備編・バリデーション・エラークラス などを再確認して下さい
WARN 必ずしも修正する必要はありません。仕様上は指定可能なクラスだが使用されていない場合に表示されます
INFO クラスが指定されていることを認識した場合に表示されます

本番サーバ上でのコンフィグテスト

コンフィグテストは本番サーバ上で絶対に行わないで下さい。コンフィグテスト中はメール送信が機能しません。本番サーバ上でコンフィグテストを行っている最中は、お客様がフォーム入力をされても何も起こらずメール送信も行われません。

コンフィグテストはローカル環境のブラウザで行うか、ステージングサーバ上などテスト環境でのみ使用するようにして下さい。htmlを本番環境に反映する場合も、埋め込みコード内に config_test の指定が残ったままになっていないかご注意下さい。

 

デバッグ

espar form の埋め込みコードではデフォルトで console にデバッグ出力が出力されるようになっています。

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://bridge.espar.biz/v1.3.0/form.js"></script>
<script>
    var espar_form = { espfEsparFormMonitor : { api_key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", debug:true } };
</script>

上記の debug:true の部分がデバッグモードONを示しています。espar form が期待通りに動作しない場合、原因解明にご利用下さい。consoleを見るには Chrome の developer console がお勧めです。

なお、espar form のデバッグ出力にはレベルが数段階あり、以下の中から選ぶことができます。

レベル 出力内容
ERROR 通信エラー、APIキー・フォームIDが不正、トークン切れ
WARN validation エラー、submit エラー
INFO 画面遷移、ユーザのボタンクリック、submit 成功、validation成功
DEBUG callback呼び出し、ユーザが設定した espar_form オブジェクトの内容
TRACE フォームをパースした内容（フォームの項目とバリデーション設定）

デフォルトでは INFO レベルになっていますが、レベルを変更することもできます。埋め込みコードを以下のように変更して下さい。

<script>
    var espar_form = {
        espfEsparFormMonitor: {
            api_key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
            debug: true,
            log_level: "TRACE"
        }
    }
</script>

 

サンプルを使ったテスト

espar form をどのように導入するかが分かるサンプルを以下からダウンロードできます。

サンプルhtmlフォーム

また、macOS前提ですが本サンプルをローカル環境で動作させることもできます。

サンプルhtmlフォームの動作から確認まで

  • (1) macOS上のデスクトップに sample フォルダを作成し上記リンクの form.html を保存する

  • (2) form.html の api_key にテスト用(トライアル環境用)のキー文字列（弊社よりご案内します）をペーストし保存する

  • (3) Finderを開き、[アプリケーション]→[ユティリティ] フォルダに移動して「ターミナル.app」をダブルクリックする

debug_3-1-2

  • (4) 黒い画面で以下のように入力する（cd以降を間違いなく入力して最後にエンターキー）
$ cd ~/Desktop/sample
  • (5) 更に以下のように入力して macOS 上でWebサーバを起動する
$ python -m SimpleHTTPServer
  • (6) espar formの管理画面にログインしフォームの[詳細設定]タブで「localhostからの送信を許可する」と「http のアクセスを許可する」のチェックをONにする (これにより、http://localhost〜 からの送信が可能になる)

debug_3-1-6

debug_3-1-7

値を入力後に確認ボタンをクリックすると、バリデーションや確認画面、メール送信まで確認可能です。

ローカルサーバでの実行時の注意

localhost で espar form の動作確認をする場合、管理画面の [詳細設定]の「localhostからの送信を許可する」と「http のアクセスを許可する」のチェックボックスがONになっている必要があります。

セキュリティリスクが高まるため、これらのチェックボックスはテスト時を除いてOFFにすることが推奨されます（悪意ある第三者にメールを送信され続けるリスクがあります）。テスト完了後は必ず「localhostからの送信を許可する」と「http のアクセスを許可する」のチェックボックスをOFFにして下さい。

 

コンソールについて

espar form の導入ではブラウザに標準搭載されているコンソールを使用すると便利です。

上述の コンフィグテスト や デバッグ に記載の通り、開発時に詳細情報を得られるほか、動作確認時に問題が発生した場合の解決ヒントを得て頂くことができます。弊社サポートにお問い合わせの際に情報としてご提示頂くと問題解決が早くなる可能性もございますので是非ご活用下さい。

Google Chrome の場合

  • (1) espar form を動作させるページを表示する
  • (2) メニュー項目またはショートカットを使ってデベロッパーツールを開く
メニュー キーボードショートカット
macOS [表示]→[開発/管理]→[デベロッパーツール] [option ⌥] + [command ⌘] + I
Windows […]→[More tools]→[Developer tools]
(…はアドレスバー横の右端にある縦にドット3つアイコン)		 [Ctrl] + [Shift] + I
  • (3) ブラウザ内の下部にデベロッパーツールが現れるので、 Console タブをクリックしてコンソールを表示する

debug_4-1-3

  • (4) 画面をリロードしたり、フォームのsubmitボタンをクリックして、コンソール内に表示されるエラーや警告を確認する

Safari (macOSのみ) の場合

  • (1) 開発メニューを有効にするためメニューから [Safari]→[環境設定] で設定ダイアログを開く
  • (2) [詳細] タブを選択肢、「メニューバーに”開発”メニューを表示」のチェックを入れて設定ダイアログを閉じる

debug_4_2_2.png

  • (3) espar form を動作させるページを表示する
  • (4) メニュー項目またはショートカットを使って JavaScriptコンソールを開く
メニュー キーボードショートカット
macOS [開発]→[JavaScriptコンソールを表示] [option ⌥] + [command ⌘] + C

debug_4_2_3.png

  • (5) 表示するログ対象が「すべて」になっていることを確認する
  • (6) 画面をリロードしたり、フォームのsubmitボタンをクリックして、JavaScriptコンソール内に表示されるエラーや警告を確認する

Edge (Windows版) の場合

  • (1) espar form を動作させるページを表示する
  • (2) メニュー項目またはショートカットを使ってデベロッパーツールを開く
メニュー キーボードショートカット
Windows […]→[その他のツール]→[開発者ツール]
(…はアドレスバー横の右端にある縦にドット3つアイコン)		 [F12]
  • (3) ブラウザ内の下部にデベロッパーツールが現れるので、 コンソール タブをクリックしてコンソールを表示する

debug_4-4-3

  • (4) 画面をリロードしたり、フォームのsubmitボタンをクリックして、コンソール内に表示されるエラーや警告を確認する

Internet Explorer 11 (Windowsのみ) の場合

  • (1) espar form を動作させるページを表示する
  • (2) メニュー項目またはショートカットを使ってデベロッパーツールを開く
メニュー キーボードショートカット
Windows [ギヤアイコン]→[F12 開発者ツール]
(ギヤはアドレスバー右横のアイコン)		 [F12]
  • (3) ブラウザ内の下部に開発者ツールが現れるので、 コンソール タブをクリックしてコンソールを表示する。

debug_4-3-3

  • (4) コンソール内に全ての情報が漏れなく表示されるよう、ログレベルアイコンが有効(色がカラー)になっていることを確認する。グレーの場合はクリックして有効にする

debug_4-3-4  →  debug_4-3-4

  • (5) 画面をリロードしたり、フォームのsubmitボタンをクリックして、コンソール内に表示されるエラーや警告を確認する