エラー、バグと格闘してたら一日が終わった…

つい最近作った「ぷよぷよプログラム」(正確には写経)で気になる点があったので、修正しようと試行錯誤していたら、一日が終わりました。

修正したかった点

こちらのぷよぷよプログラムをスマホ表示でプレイした際に、いくつか気になる点がありました。

これら２つの問題を解決しようと数時間ずっと調べました…。

スマホのスクロール機能を動かないようにすれば、簡単に修正できると思っていましたが…。

まず、初めの問題の機能(上からスワイプすると更新する)はpull to refreshというようです。

スマホを利用している際に、何気なく使ったいましたが、名前までは知りませんでした。

この機能を停止させる為に、bodyのcssにover-scroll-behavior:none;を適用。

しかし、挙動は全く変わらず…。

また、この方法だとiOSデバイスの場合、問題が発生する模様。

更に検索を重ねて、jsを利用した各ブラウザで利用可能＆AndroidでもiPhoneでも使える修正方法を発見。

スマホのtouchmoveイベントが発生した際に、passive:falseにしてpreventDefaultを実行するとよいらしい。

しかし、関数を実行するも変化なし…。

その後も、グーグルの検索で１０ページ目くらいまで、ひたすらに様々なワードで検索し続けましたが、書いてあることは同じようなことばかり…。

また、いくつかの方法で何度もコードを書き換えながら実行を繰り返すも、結局pull to refreshは消せませんでした。

この辺りで、一度冷静になってエラーコードが出ていないか改めて確認してみました。

chromeの検証→consoleを確認すると、そこには「cordova.js not found」と書かれていました。

ファイルパスを確認すると、確かにcordova.jsという名のファイルはありませんでしたし、そもそも作った記憶もありませんでした。

またまた検索してみると、どうやらCordovaというアプリ開発向けのフレームワークがあるらしい。

今回ぷよぷよプロジェクトで利用した、開発ツールであるmonacaもこのCordovaを利用しているようでした。

私は、プロジェクトで作ったぷよぷよを、webブラウザ上で遊べるように、ファイルだけエクスポートして、ftpでアップロードしていました。

よって、開発環境に入っていたCornova.jsが参照できなくなっていた為、このようなことになっていたみたいです。

他のファイルのコードも確認してみると、AndroidかiPhoneかを判別して、デバイスごとにCordova.jsを参照する記述がちゃんとありました。

エラー出力を確認するのが遅い。

最初に、スクロール機能を停止すれ解決すると思い込んでしまったせいで、ほかの原因に気付くのが遅れました。

また、全体のコード内容をよく理解しきれていない状態で、修正しようとしてしまいました。

この辺りが良くなかったと反省しています。

エラーやバグと格闘することは、今までにも何度かありましたが、今日は一番時間がかかってしまいました。

そこそこ気力を使いましたが、原因が判明したので良しとします。