Ridery

Webのデザインやエンジニアリング、カメラや写真のことをメインに日常生活もたまに書いています。

ギャラリーサイト maner をリニューアルした

半年ほど前にローンチした maner ですが、このたびリニューアルオープンしました!

  • 開発環境を置き換えた
  • 無限にスクロールできるようになった

やったことといえばこんなところですが、ごそっと全て書き直してしまいました。

見た目は特に変わらないですが、ひとまず見てみてください!

maner.gallery

開発環境を置き換えた 💻

以前は、自前の Gulpタスク が動いていました(多分)。
ので、それをWebpackベースで作られている frontplate-cli に置き換えました。開発環境を自前で作っていると今後、地獄を見るような気がしたためです。

ちなみに、置き換えたというよりは、それをベースにゼロから作りはじめた感じです。

ついでに以前のものよりは圧倒的にちゃんと Vue.js を書いたりもしました。Vuex も大げさと思いつつ導入しています。

無限にスクロールできるようになった 😂

これまでのものは一気に200件くらい写真を取得してきて無理やり並べてハイ終わり!と無茶やってたのですが、いまは底に到達すると追加リクエストするようになっています。

追加リクエストのイベントは IntersectionObserver を使ってみました。結局 Polyfill でスクロールイベントを監視しているんだろうけど、実装はとてもシンプルな見栄えになりました。

比較したわけではないので体感していないですが、対応ブラウザ(Chrome/Firefoxあたり)では、パフォーマンスもさぞかし良いことでしょう。

今後やりたいこと ✔

  • 写真のURLとEXIFを取得するまでのローディングは出来ているけど、実際の画像のダウンロードは待っていないのでそこをなんとかしたい
  • 写真の詳細ページURL を作りたい(モーダルとかで良い)
  • maner のサービス説明ページを作りたい

おわりに 🙇

鈍足ながらも開発を続けていると、ちゃんと学びがあってすごい!