はじめに
プログラミングをしていて、それまでは、動作していたが、ある時から動作しなくなったということはよくあります。そのあるときがいつだったのか、何をしたからかが、その不具合に気が付いたときにはわかりません。大抵はしばらくたってから気が付きます。そこから、不具合の原因を探し続けることになります。直接の原因が何なのか、まったく見当がつきません。今回の例をもとに、ご説明いたします。
現象と原因
どんな現象が起こったのかと言いますと、テキスト入力画面で、文字入力をするのですが、ひらがなは何とか入力できますが、そのほかのキーが効きません。例えば、バックスペース、デリートキー、数値キー、アルファベットキーなどです。ある時点までは何事もなく入力できていました。そのため、いくつかのチェックをしてみました。
(1) かな漢字変換ツールがおかしくなったのか
試しに、他のページで試してみました。例えば、yahoo!Japanの検索入力で、文字入力してみましたが、問題はありません。その他のページのも文字入力も問題はありません。かな漢字変換ツールは正常に動作しています。
(2)今デバッグしているページのみがおかしい。
他のページでは、正常に文字入力ができます。キーボードが故障したわけではなさそうです。
(3)ページをリロードして何度も確かめました。
何度、リロードしても現象は同じ結果です。ある時点までは、正常にできていました。このことから、じっくり、考えてみました。
いつ、何をしてからなのか。考えられるスクリプトファイルを中心に調べました。デバッガーでキー入力しているイベント処理あたりにブレークポイントを入れてみたりしました。ワンステップずつ、進めてゆきました。この時、このファイルは別のフォルダーからコピーしたものだったことから、そちらのスクリプトで確認したところ、そのスクリプトでは正常に文字入力ができました。
(4)何が原因だろうか
そこで、この二つのファイルを差分チェックしてみました。幸い、使っているIDEは、NetBeansIDEだったため、差分チェックがあります。
そこで、比較してみたところ、いくつかの相違箇所がありました。
おそらく、この中のどこがに原因があるだろうと検討をつけました。
ひとつひとつつぶして行き、最後にたどりついたのが、イベント処理の最後で、不具合がある方のスクリプトに、return false;が追加されていました。正常な方にはありません。記述にはありませんが、単にreturn;しているはずです。ようやく、原因がわかりはじめました。
そうか、これが原因かと。実は、ある現象のため、迂闊にもこのreturn false;を追加してしまいました。その時は、イベントバブリングをしたくなかったためです。しかし、今回の現象から、このreturn falsel;があるために、それ以降のイベント処理が停止していました。
そのため、その次の文字入力が実行されなかったようです。
(5)return false;を外して実行しました。
見事に正しく、文字入力ができました。他のすべてのコントロールキーも効いています。やった!!と自己満足しています。
この快感があるから、デバッグは楽しいといつも思っています。
年寄りの、脳の健康維持にはデバックは最適な作業だと感じています
。
実画面で比較確認します
今回の事例は、自作の「コーナープレーヤー」を作成しているときに発生しました。以下にそのURLをリンクしました。
(1)悪い例
[悪い例リンク]
(https://iframe.tecoyan.net/corner/index_1.php)
初期画面のページでクリックすると、右側にメッセージとサムネイルが表示されます。
悪いケース
このコメント入力画面は、背景色がグレー表示のメッセージをクリックすると表示されます。この例では、文字入力ができません。上の[悪い例リンク]で確認できます。ひらがなは入力できますが、他のキーは動作しません。
(2)正常な例
正常なリンク
初期画面のページでクリックすると、右側にメッセージとサムネイルが表示されます。
正常なケース
このコメント入力画面は、背景色がグレー表示のメッセージをクリックすると表示されます。この例では、文字入力ができます。上の[正常な例リンク]で確認できます。
あとがき
デバックしていると、いつもこのような不具合に出会います。
結果を知りたくて、あまり考えずにスクリプトを記述しているとことのようなことが起こります。しかし、熟考ばかりしていたら、先へ進みませんので、とりあえず進めて、テストしてみます。結局、試行錯誤の連続になってしまいますが、この作業の過程で得るものは結構多く、後々に役立っているものと思います。スキルアップにもなっているのかと自己満足しています。