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

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

修正したかった点

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

  • 上から下にスワイプした際に、スワイプが大きすぎるとページが更新されリセットされてしまう
  • 下から上にスワイプすると、アドレスバーに押し出された余白部分が表示され、ゲーム画面がずれる

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

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

Pull to Refresh について

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

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

この機能を停止させるために、まずは bodyのcssにover-scroll-behavior:none;を適用

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

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

更に調べる

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

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

サイトのコードをコピーし、関数を実行するも変化なし…。

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

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

エラー出力を見直す

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

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

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

Cordovaはモバイルアプリ開発向けのオープンソースフレームワーク

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

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

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

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

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

今回の反省点

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

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

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


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

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

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


メッセージ

CAPTCHA