こんにちは。なかにしです。
今回はMBTI診断アプリ作成において起こったバグや、
工夫した実装を紹介します！
① vs連続クリック
クイズ画面において、連続クリック対策を実装しました。
選択肢を押すと次のクイズにスクロールするのですが、その処理が終わる前にクリックし続けるとスクロール処理が重複し、バグります。
▽こんな感じでバグります
解決策： 処理が終わるまでボタンを操作不可に設定
こちらはJqueryで設定しました。長いのでコードは省略します。
② vsOGP設定
以前の記事でも紹介した内容です。
OGP自体触るのが初めてで、結構苦戦しました。
専用のキャッシュ削除アプリを使用しないと変更が反映されなかったり、
Twitterのみ「Twitter Card」という別指定があったりと、結構複雑でした。
存在自体知らなかったので、
この辺触るのは本当に希なのではないかと思います。
③ vsLocalStorage
クイズ画面において、MBTI診断判定の結果を都度保持し、
最後の問題を押下すると結果画面に自動遷移するように組んでいます。
その際、判定結果の保持をCookieでやろうかと思ったのですが、
LocalStorageなるものがあると知り、使用することにしました。
役割はほぼ同じですが、
LocalStorageの方が容量が多く、保存期間が半永久的という利点があります。
上記の利点から、CookieではなくLocalStorageを選択しました。
おわりに
今回はMBTI診断アプリ作成において起こったバグや、
工夫した実装をざっくり紹介しました。
まあ一番難しかったのはスケジュール管理なんですけどね！！
（一番簡単なのはサーバー構築でした。）
やっぱり新しいことをするのは楽しいですね。
引き続き楽しさ第一で開発していきます🙌
今回はここまで！
Enjoy Hacking!!
