1. Home
  2. 運営情報
  3. アップデート
  4. Netagearにスワイプタブメニューを追加するアップデート!
Article

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

運営情報 > アップデート 
NetaGear_swipe_000.png

ニュース羅列系情報サイトであるNetaGearにスマホでスワイプタブメニューの追加しました。この機能の追加に伴いタブを追尾するように変更したので、現在のカテゴリーを見ている状態からすぐに別のカテゴリーへ飛ぶことができるようになりました。

また、横にスワイプすることでカテゴリーの切り替えが可能です。今まで以上にスマホで便利にNetaGearが使えるようになったのでぜひご活用ください。

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

NetaGear_swipe_004.png slick - the last carousel you'll ever need

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

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

タブメニュー

NetaGear_swipe_002.png

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

NetaGear_swipe_003.png

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

スワイプ

NetaGear_swipe_001.png

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

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

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

Loading

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

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

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

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

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

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...

NetaGear RSS News

Now Loading