Javascriptが引き起こす“コンフリクト”の調査方法

Javascriptが引き起こす“コンフリクト”の調査方法

こんにちは、ゲーマーのM氏です。

ショーケース・ティービーがご提供させていただきます入力フォーム支援ASPサービス「ナビキャスト フォームアシスト(以下 フォームアシスト)」は、おかげさまで2016年9月の時点で3900フォームの導入を突破いたしました。

本サービスの最大のウリは、わずか1行ぐらいのJSタグをHTMLに埋め込みさえすれば、弊社設定担当者が設定した内容通りに入力支援制御が働き、入力フォームを使いやすくさせることできるところです。

しかし、導入フォームの仕様によっては、フォームアシストのプログラムが正常に動作しないパターンがまれにあったりもします。
具体例を挙げるとすれば、元のフォーム内に入力支援制御が入っていたりすると、フォームアシストのプログラムとコンフリクトしてしまう動かないケースなどがあります。こういった場合、元々の入力支援制御を打ち消す場合や、元々の入力支援とフォームアシストとを一緒に動作させたいなど、様々なリクエストに対応をしています。

しかし、どのようなリクエストに応えるにも、一番に始めなければならないのは原因究明。コンフリクトした時の原因を突き止めない以上、対応策は生まれません。

今回は読者の方々に直接的な関係がないかもしれませんが、Javascriptによるコンフリクトの調査方法についてご紹介します。

少しでも「フォームアシスト」に関心を持っていただければ幸いです。

手始めに導入フォームのイベント処理を確認する

当然のことながら、フォームアシストは製品として成立しているぐらいですから、単体ではエラーは起こりえません。ただ、人間関係と同じで導入フォームとの“相性”というものは存在します。

しかし、弊社営業マンが汗水たらして獲得してきた案件である以上、“相性”が悪いから導入できませんとは中々言いづらいものです。

そこで営業マンの努力を報いるために、まずは相手の性格(=導入フォームに備わっている機能)を調べることから始まります。具体的には、“相性”が悪いとされる対象項目をブラウザのコンソールを開いて、開発チェックツールを用いて徹底的にイベント処理をリサーチすることになります。

各項目にカーソルインした状態でブラウザのコンソールを開き、「Elements」情報を選択した上で「Event Listeners」のタブを確認すると、どのようなイベントが付与されているかを確認することができます。すると大抵の場合、元フォームの関数などの記述が表示されます。
関数の中身を確認しながら、フォームアシストが動作した後にその関数を実行されるといった記述をプログラム上に組み込むことになります。

従来の設定とは異なる追加設定を、弊社では“カスタマイズ”と称しておりますが、カスタマイズを施せばほとんどのケースで解決に向かいます。

時として、地道な調査を実施することも…

前記のブラウザ内コンソール上の開発ツールを用いても、極稀に該当箇所が分からない場合があります。でも、ネバーギブアップです!

そんな時はソースをまるまるコピー保存し、疑似環境を作って調査することになります。その調査とは、ソース内に記載される一つ一つのスクリプトを削除(実際にはコメントアウト)しながらの動作検証です。
つまり、草の根運動並みの地道な作業に徹することになります。

コメントアウトの結果、コンクリフトが解消されたらアタリということになります。

当然ながら、コメントアウトしただけでは問題解決には至りません。
コンクリフトを引き起こしていた対象スクリプトをコメントアウトにしたなな中身を抽出し、それを直接HTMLに貼り付けます。

その後、気になる箇所にデバックを入れて、どのような動作をしているのか、どんなパラメータを付与しているのかを確認することになります。

あなたにおすすめ

フォームデザイン実証研究 送信ボタン編... こんにちは! 最近の悩みは山登りをするとひざの痛みが気になること、、、 本日のブログは自然派20代OLことミヤが担当させていただきます。 さて、サイトでCVを上げるためには徹底的にテストを繰り返していくことですが、 今回は日...
仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...