A Day in the Life

画像クリックしたときに使われるライブラリを PhotoSwipe にした

今まではものぐさで、画像クリックしたときに使われるライブラリを react-image-lightboxを簡単に導入できた、という理由で使っていたのだけど、色々動きが微妙だったので、PhotoSwipe に変更した。

  • 画像のプリロード
  • 大きな画像が読み込まれるまでは小さな画像でレンダリング
  • キーボード操作
  • クリックでズーム
  • スマフォ対応
  • サムネイルからシュッとギャラリーが立ち上がる
  • 変な挙動を(ほぼ)しない

あたりが簡単にできるようになって満足だ。PhotoSwipe は、作者の嗜好でコード1行で導入、という感じで簡単に使えるようになってはいない(例えば画像のwidth/heightを要求するので、自前で取得する必要があるなど)し、 作者が必要と思う機能だけしっかり入れている(そのためここ2年は更新がない)のだけど、そのこだわりが実装にも反映されているのか、素早く動作する。JS のソースコードは読みにくいけどね。

また react-photoswipe というライブラリもあるのだけど、メンテナンスされておらず、最近の React だと warning が出るので、自分で簡単なラッパを書いた (例: Create React wrapper for PhotoSwipe ) ほうが楽に使える気がする。TS 用の @types もあるしね。