まるぼ実験場

アプリの開発日記を載せるサイトでしたが、ただの技術ブログになりました。

ヤフオクやメルカリの配送料を提案するアプリを更新(2024/10/02)

 

3ka.me

配送料計算(提案?)アプリを更新しました。

ツール概要

梱包サイズを入力すると使用できる配送方法と料金を提案するツール。

小型荷物用。

主な変更点

・デザインをスマホ向けに改善しました。

・プレビューの場所移動。検索結果表示時に表示されるようになりました。

・デザイン変更をPC向けにも適応しました。(2023/10/12)

・検索結果を切り替えられるようになりました(おてがる配送のみ)(2023/10/13)

スマホ限定で発生していた、スクロールしてURLバーが消えた瞬間開かれていた項目が勝手に全て閉じられるバグを修正。(2023/10/15)

・郵便料金改定に対応。ついでにメルカリ便にも対応(2024/10/02 New!)

 

詰まったところのメモ

スマホとPCの画面サイズによって、検索結果のdetailの項目が自動で畳まれるか開かれるかどうかを判定しているのだが、

document.querySelectorAll()で検索結果上のdetailの個数を取得、
その後for...inで順番にopen属性を適応していったのだが、そのとき必ずsetAttribute(removeAttribute) is not a functionというエラーが発生する。

ステップで見ていくと、どうやら一つ存在しない分に適用しようとしていて上記エラーが発生していた。

解決方法→forEachでのループに変更

 

スマホでは上部のURLバーが消えた瞬間にもJavaScriptのresizeイベントが発生する。

→今回のアプリの場合は横幅の判定が必要なので、横幅を記録させて判定することで解決。

参考:iOS Safariでスクロールしただけでリサイズイベントが発生する原因と対処法 - Qiita