まるぼ実験場

今年専門を卒業したけど就活サボってしまいました(関係ない職種でフリーター生活中)。どうすんだよこれ。

ヤフオク配送料提案アプリを更新(2023/10/15)

 

3ka.me

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

ツール概要

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

主な変更点

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

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

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

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

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

 

※変化が分かるように旧版も置いておきます。

旧版

 

詰まったところのメモ

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

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

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

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

 

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

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

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