[3]ブログをやりたい画像クリックでスライドショーを表示したいphotoswipephotoswipeを導入して、画像をクリックした際に高解像度の画像をスライドショー表示できるようにしておきました。開発者ツールで確認まとめやりたいこと本ブログでは表示速度を優先し(?)、最低限の解像度を持つ画像をレスポンシブに配信しています。スマホにおいて、画像を拡大するとその粗さが気になりだしました。そこでタイトルの通り、photoswipeを導入し、画像がクリックされた際に高解像度の画像のスライドショーが表示されるようにしてみました。はじめます🍛photoswipe今回はphotoswipeと呼ばれるJavascript製のライブラリを使用します。何ができるかは公式サイトを見れば良く分かります。https://photoswipe.com/一部条件はありますが、基本的にはMITライセンスとして提供されています。必須であり、パフォーマンスの懸念があったため採用は見送りました。基本的にはこちらの手順通りで問題ないはずです。ライブラリのインストール私はnpmを利用たのでこれだけ。--saveHugoの設定imgタグ基本的にはphotoswipe化したい画像に対して、data-size属性で画像サイズを格納しているだけです。以下のimage.htmlは私が独自に作成している画像出力用のテンプレートですが、大まかなイメージは以下の通りです。}}"/>実際にはレスポンシブ対応などが入っていますが、簡略化しています。表示用DOMの作成phtoswipeによるギャラリー画像を表示するためのコンテナを用意します。phtoswipeに自動的に作成してほしいことろですが、あえてユーザに任せることでライブラリのサイズを小さく保ち、かつ柔軟なカスタマイズを可能にしているようです。実際には公式のテンプレートをそのままコピペでも十分です。</div></div>このテンプレートを/layouts/_default/single.htmlに差し込んでおきました。}}ちなみにsingle.htmlはHugoでは記事に適用されるテンプレートファイルです。1つまりTop画面や一覧画面ではphotoswipeは利用しない方針としました。javascriptjavascriptにより画像がクリックされた際にギャラリーが表示されるようにします。処理内容はコードのコメントに記載した通りです。実際にクリックしてみてください。パフォーマンス改善ちょっと気になるのはphotoswipe自体のモジュールサイズです。導入前から比較した、追加容量はだいたい以下でした。+3KjQueryなどに比べるともちろん容量は少ないですが、それでもやはりこの増加量は気になります。より削っていますが、せいぜい2Kほどしか削減できませんでした。サイズを減らす以外にもっと有効な方法としては、遅延ローディングがあります。要するにphotoswipeは画像をクリックした際に必要となるだけで、ブログの記事を表示するうえでは全く役に立ちません。言い換えると、画像がクリックされて初めて上記のモジュールが必要となります。よってphotoswipeのモジュールは、画像が初めてクリックされた際にダウンロードされるように修正します。言っても主要な変更はこれぐらいです。画像は意図的にバンドル化していませんまとめphotoswipeを導入して、画像クリック時に高解像度の画像ギャラリーが表示されるようにました。ダイナミックローディングにより画像をクリックしない限り、これまでとほぼ変わらないのでパフォーマンスの劣化も問題ありません。問題はそこまで高解像度で表示したい画像が今のところない事です。