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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結構、根気のいる作業になりますが、これを実施することで元フォームの一連の挙動を把握して、どのようにフォームアシストをカスタマイズすれば、元フォームの機能とのコンフリクトを解消できるのかを判断し、対応策をひねり出すことができるのです。

「フォームアシスト」は完全にパッケージングされたASPサービスであることを謳っておりますが、時には受注生産かのような作業を実施することもあるのです。
ただし、ご紹介させていただいたような作業を実践することで、ある程度の原因を把握することが可能となり、より多くのお客様にご活用いただけるように心構えています。

今回は弊社サービス「フォームアシスト」を一例として挙げさせていただきましたが、みなさんもJS関連でコンフリクトを起こしたら、原因究明に役立ててみてください。

コメント