Netagearにスワイプタブメニューを追加するアップデート！

スワイプ切り替えのslick.jsを導入してみました！

今回は最初自作で実装しようかと思ったのですが、スワイプタブメニューをCSSだけで実装するのはちょっと思っていたのと違う動きになってしまいそうというのと時間があまりなかったので、すでに作られていたslick.jsを入れてみました。

導入自体は非常に簡単なのですが、動作については少し重い気がします。古いスマホだと少し動きが怪しい時があるので、後々時間があるときに自作していくかもしれません。

タブメニュー

新しいカテゴリーメニューです。見たいジャンルを選ぶと画面が横に動いて切り替わります。今まではページ遷移していましたが、こちらはページはそのままでロードする形に変更しました。

カテゴリータブメニューはスクロールすると上部で追尾する仕様になっています。今までは下に進んで、途中でカテゴリーを変更するには上まで戻ってからじゃないと変えられなかったのですが、これからは簡単に切り替えができます。

スワイプ

タブメニュー以外にも横にスワイプすることでカテゴリーを切り替えることができるようになりました。ただし、こちらはスマホのスペックによっては動作が不安定です。私が検証したzenfone3だとうまくスワイプできないときが多々ありました。iPhone6sではちゃんと動いていたのでiPhoneユーザーは多分大丈夫だと思います。

あとは下までスクロールした状態でスワイプで移動すると、そちらもスクロールした状態で移動してしまうため真っ白になってしまう問題もあります。そういう時は上のタブを押してあげるとちゃんと表示されます。。

ローディング部分の見直し

以前はjQueryプラグインでTwitterのような無限スクロールを実装していたのですが、そのまま使うと今回のスワイプタブ切り替え時に動作がおかしくなってしまいました。そのためローディング部分を自作することにしました。以前と方式を変えたことでイベント発火を抑えて負荷を減らすことができました。ローディングに関しては今までよりもスムーズに行うことができるようになっています。

今回の個人的感想＆まとめ

今回はNetaGearにスワイプタブメニューを追加したというアップデート情報でした。去年の6月ぶりのNetaGearの大幅アップデートなのですが、スマホ対応の強化とカテゴリー間の移動を簡単にしたいという思いで加えました。上のタブが追尾するので途中でカテゴリーを変えるのに、以前は市場上まで戻ってから移動しないといけなかったのでやりやすくなった感じがします。

ただ、今回はslick.jsというjavascriptを使ったのですが、スペックの低い端末でチェックした際にはスワイプの動作はちょっと反応が悪くて微妙な感じになりました。軽快で軽いサイトを目指してNetaGearを作っているので、ちょっと方向性が変わってしまっているので微妙な感じです。最新のハイスペック端末ではそうならないと思いますが、ちょっともっさり感が出たので、時間があるときにでもコードを自作のものに変えたいですね。

みなさん今後ともNetaGearをよろしくお願い致します。 NetaGearにアクセスする！