v5とは?ページ上に設置した画像をクリックすると拡大してポップアップ表示することができるJavaScriptプラグイン「PhotoSwipe」のバージョン5です。このブログでは過去に何度か触れているライブラリですが、最初に書いた記事がv4についてでした。現在(2022.10.13)の最新バージョンはv5となっており、コードの記述方法がガラッと変わったので今回改めてメモしておこうと思います。▼過去記事は下記をご覧ください。v5のデモとりあえず動かすために作ったデモはこちら。デモコードはGitHubに置いてます。v5の使い方デモと同じようにシンプルにリスト表示された画像に対してPhotoSwipeを設定するための使い方について。インストール必要なパッケージをインストールします。photoswipeCSS(Sass)パッケージに入っているCSSを読み込みます。'photoswipe/dist/photoswipe.css';別に他のCSSとバンドルする必要ないって場合はそのままファイルを読み込ませればOKです。href="photoswipe/dist/photoswipe.css">HTMLhtmlはv4の時とほとんど同じでOKです。-->画像のリストを囲む要素(ここでは.c-grid)に、あとでJSで使うために特定のidやclassなどを振っておく。ここではidにjs-galleryと指定。各アイテム(ここでは.c-grid__item)に、.is-loading(画像の読み込み用のクラス)を付けておく。.is-loadingにはCSSでpointer-events:none;を指定しておき、読み込み中はクリックさせない。imgタグはaタグで囲み、href属性にポップアップ時に表示したい画像のURLを入れておく。(サムネイルの時と拡大する時で読み込む画像を分けられる。)JSv4→v5で大きく変わったのがJSのコードです。Gallery();v4の時はポップアップ表示用のHTMLを挿入するための関数を用意したり、画像のリスト情報を配列にして保持したり、細かい設定を書かないと想定した動きにならなかったのですが、v5からはそれらの設定がデフォルトで含まれるようになったためかなり簡潔なコードになりました。何かカスタマイズしたい時も、APIとしてオプションやイベント、メソッドがしっかり整理され用意されている状態になったのでv4よりもいろいろとできそうです。基本的には下記のコードがPhotoSwipeで必要なコードです。PhotoSwipeのCoreモジュールをここに指定});galleryはここでは取得したElementオブジェクトを指定していますが、id、classなどのCSSセレクタでも指定できます。カンマつなぎで複数指定も可能です。PhotoSwipe});オプションもけっこうあります。僕は基本ノーマルで使いますが、背景の透過を変更したい時はbgOpacityを追加したり、ポップアップ時の拡大するようなアニメーションを使いたくない場合は、showHideAnimationTypeをfadeやnoneに変更したりします。'fade'});その他のオプション、各種イベントやメソッドについて公式ドキュメントをご確認ください。PhotoSwipe公式ドキュメントそれ以外で、v5で実装する際にポイントとなるのが「ポップアップ時の画像のサイズ指定」が必須になっていることです。ポップアップ時の画像のサイズ指定が必須v4の時はaタグのdata-size属性にポップアップ時の画像のサイズ指定が必要でしたが、v5ではdata-pswp-width属性とdata-pswp-height属性に画像サイズを指定しておくことが必須になりました。HTMLに書き込むと下記のような感じ。loading="lazy"></a>これを全部に書き込むとなったら、画像のサイズがバラバラだった場合に手間なので、できれば自動化したいですよね。それが先のコード内でも書いたこちらのコード。});});aタグのhref属性に指定した画像URLからwidthとheightを取得して、data-pswp-width属性とdata-pswp-height属性として設定します。属性を設定できたら.is-loadingクラスを削除します。画像の読み込みは、Promiseを使った簡易な関数を使っています。});}async/awaitで書いたらこんな感じ。el.classList.remove('is-loading');});これでポップアップ時の画像サイズを自動で属性を追加できるようになったので、data-pswp-widthとdata-pswp-heightの属性を手動で設定する必要がなくなりました。デモさいごにv4→v5で面倒なコードが全部なくなってスッキリしたので使いやすくなりました。無駄なjQuery依存もなく、モダンブラウザでしっかり動くし、オプション・イベント豊富で何かと使いやすいです。ReactやVueでも使えるため様々な案件で取り入れやすく、非常におすすめです。