adiary組み込みのLightbox2で画像をズームできないことに不満があり、代替を探していてFancyboxという非常に素晴らしい画像スライドツールを見つけたのだが、なんと有料で頭を抱えてしまった。
そこで何とかして無料で同等の機能を実現する方法がないか調べてみた。結論としてはFancybox v3.5.7を使えばよい。
欲しいもの
- 複数ギャラリー対応
- ギャラリーグループの識別が要素単位で可能
- 親タグでグループ化する方式はNG
- ドラッグ・スワイプで前後の画像に切り替えられる
- 違和感なく前後の画像に切り替えられる
- Mastodonみたいに切り替えしようとして閉じない
- UIがガタついて戻ってきたりしない
- キーボード操作をサポート
- 画面サイズより小さい画像は原寸表示
- 画面サイズより大きい画像はアスペクト比を保って縮小
- 縮小した画像をクリック・タップすると拡大・縮小
- 拡大してはみ出た画像をドラッグ可能
- 拡大した画像をドラッグした時に画面から逸脱しない
- 自動でキャプションが出せる
- 非商用利用であれば無料
- 力業で再現させるようなコードが不要
ライブラリ別まとめ
凡例
✅:要件を完全に満たす
⚠️:要件は満たさないが、類似機能がある
❌:要件を満たさない
➖:調べていない
基本的に設定を書くだけか、簡単なスクリプトで実現できるもののみ要件を満たすものとして定義している。また明らかに機能不足で興味が余り湧かなかったものは深く調べていないので情報が間違っている可能性がある。
機能 | Lightbox2 | GLightbox | PhotoSwipe | Viewer.js | Spotlight.js | lightGallery | Fancybox v6 | Fancybox v3.5.7 |
---|---|---|---|---|---|---|---|---|
クリック・タップで拡大・縮小 | ❌ | ✅ | ✅ | ❌ | ❌ | ⚠️ | ✅ | ✅ |
複数ギャラリー対応 | ✅ | ✅ | ❌ | ➖ | ➖ | ✅ | ✅ | ✅ |
ギャラリーの識別が要素単位で可能 | ✅ | ✅ | ❌ | ➖ | ➖ | ❌ | ✅ | ✅ |
ドラッグ・スワイプで前後の画像に切り替えられる | ❌ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ |
違和感なく前後の画像に切り替えられる | ❌ | ❌ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ |
キーボード操作のサポート | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
画面サイズより小さい画像は原寸表示 | ✅ | ✅ | ❌ | ✅ | ❌ | ➖ | ✅ | ✅ |
画面サイズより大きい画像はアスペクト比を保って縮小 | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ |
拡大してはみ出た画像をドラッグ可能 | ❌ | ✅ | ✅ | ➖ | ✅ | ✅ | ✅ | ✅ |
拡大した画像をドラッグした時に画面から逸脱しない | ❌ | ❌ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ |
自動でキャプションが出せる | ✅ | ✅ | ⚠️ | ✅ | ➖ | ➖ | ✅ | ✅ |
非商用利用無料 | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ |
複雑なコードが不要 | ✅ | ⚠️ | ❌ | ➖ | ➖ | ➖ | ✅ | ✅ |
各ライブラリを触ってみた雑感
Lightbox2
拡大機能がないため論外。
GLightbox
画像を開いてからウィンドウを縮小したときにズームできないのが最大の難点。またこのブログに埋め込んだ時、ドラッグで画像を左右に送ろうとしたら妙なガタツキが見られた。
また画像をドラッグすると画面外まで飛んでいくのも、あまり良くない。
他にもUIがカスタマイズ可能なのはいいが、逆に面倒である。
PhotoSwipe
全体的にコールバック関数にフックして自前で実装する要素が色濃く、実装の手間が甚大にかかる。
Lightbox2にあるようなdata-lightbox=<gallary-id>
を使ったギャラリーのグループ化が困難で、フルスクラッチでコードを書く必要があるが、Claude Opus 4.1とGPT-5に書かせて上手く行かなかったので諦めた。
lightGallery
一見するとよさそうだが、有料なので論外。
画像切り替え時にロードが入ることや、ドキュメントが読みづらく何が出来るのかイマイチ判らなかったのもマイナス。
Viewer.js
UIが独特的過ぎてみた瞬間論外だったが一応…。
PCではクリック・ドラッグで画像送りできないのがマイナスで、スマホではタップ・スワイプで可能という新しいアプローチが採用されており、開いた画像は画面内のどこにも自在配置できる機能もあった。
要するに完全に要件外だった。
Spotlight.js
アスペクト比によって画像が見切れるほか、小さい画像が全画面表示されて見づらかった。
記事の投稿が前後しており、購入がフロアタイルを貼ってデスク環境を改善してみたより前のため、床が施工前の状態だ。
籐椅子というのは、いわゆるラタン家具だ。ホームセンターでたまたま見かけてよさげなので買ってみた。
我が家の玄関はバリアフリーで段差がなく、靴紐を結ぶときはマンションの階段でやることが多かったのだが、これがあれば室内でも問題なくできそうだ。
読みかけの本を置くのにも便利な高さだ。
この籐椅子は軽く持ち運びが容易で、場所もさほど取らないため色々便利に使えそうだ。
汚れも付きづらそうで、耐水性もありそうなため、風呂上りに座るのにもいいだろうし、インテリアにもなる。
今回は椅子のキャスターによる床の摩耗に伴うフロアタイルの敷設と、今後の摩耗抑制のためのキャスター交換を行う。
フロアタイル自体は今年の一月に一箱買っており、足りないことに気が付いたので三月にもう一箱買ったのだが、諸般の事情により施工が止まったままになっていた。しかし、そろそろやらねばと言う事で、やることにした。
フロアタイルの敷設
今年の一月に買ってからずっと玄関に放置されていて邪魔だったフロアパネルを遂に施工することにした。
フロアパネルを買っていたのは元々あったフロアタイルが剥げてきており、破片が散る、汚れが溜まるなどでよくない状況だったからだ。
といっても机の上のものを下ろして作業するのは大変…と言う事で登場するのがこちら、山善の軽がるキャリーだ。
Amazonのレビューによるとフロアパネル程度の段差なら乗り越えられると言う事でこれにした。先端にクッションがなく家具を傷めそうなのが難点だが、今回は目を瞑る。
早速机の脚を持ち上げてコロを入れていく。
無事、四隅にはめ込め、完璧だ。
総重量で80kgはあるだろう机が軽々と動くので大変便利だ。
次はいよいよフロアタイルを置いていくターンだ。表面はさながら木の質感でジョイント部分はお互いに嵌め込める作りになっている。
敷いていくと一番奥のサーバーラックも動かさないと無理なことに気が付いたため、安全にシャットダウンしたうえで電源を引き抜き、動かしていく。
どんどん敷き詰めてゆく。
縦方向は若干継ぎ目が見えるものの、横方向は一枚板と言われても、ほとんどわからない仕上がりだ。
これ以上机を下げられないところまで板が詰まってきたので、次はいよいよフロアタイルの上にあげていく作業だ。これはコロをテコで持ち上げフロアタイルの入っていた段ボールを嚙ませると上手く行った。
いい感じだ。ただこれだと手前の脚が宙ぶらりんになってしまう。上手く板を差し込めるか…?と思ったが、杞憂で手前の脚の分まで無事差し込むことが出来た。
そして全ての脚をタイルの上にあげることが出来た。床の剥げも完全に隠れた。
ここで一箱消化しき切ったので、二箱目も投入してゆく。
そして完成した図がこちら。床の見た目も綺麗になって、いい感じだ。
キャリーの交換
次はこのフロアタイルの摩耗を抑えるために椅子のキャスターの交換を行う。
まず元のキャスターがこちら。このキャスターはほとんど回らず、長らく引きずりながら使っていた。よく見るとこの写真でも縁の方に傷が見える。
ずっと交換したかったが、いい選択肢をこれまで探してこれていなかった。
そして今回買ったのがこちら。Amazonに売っていた怪しい中華キャスター。ウレタン製。11mm芯。
IKEA以外は11mm芯が使えるようなのでこれにした。
さて問題は既存のキャスターを引き抜けるのかというところだが、これは工具を使えば意外と簡単だった。
まずはマイナスドライバーを差し込み、てこの原理である程度浮かせる。
次にプライヤーを差し込む、てこの原理で徐々に引き抜いてゆく。ここまでくれば最後は左右に揺らしながら手で引き抜ける。
新品のキャスターと、3年くらい使った元の椅子のキャスターの比較。元のキャスターも接地面はウレタンに見えたが、回らないので機能していなかった。つるつる過ぎてグリップが悪いのだと思う。
新しい方は角も丸くなっており、仮に引きずることがあっても床へのダメージは減りそうだ。
交換し終わった姿がこちら。新品なので綺麗である。しかし上側に強度保持用の梁があり、そこが穴のようになってしまっているため、清掃面では難がありそうである。
ひとまずはこのまま使ってみようと思う。
何故ここまで放置されていたのか?
これはR86Sの購入から自作ルーター化まで四ヶ月のブランクがあったのと同じところに理由があり、今年は主にブログを書くので忙しかったのだ。
時間を取れなかった各月のイベントたち
1月→昨年末のがんばっていきまっしょい旅日記+風を患いダウン
2月→メイクアガール鑑賞と感想執筆と感情の乱れ
3月→メイクアガール鑑賞遠征と感想執筆と感情の乱れ
4月→メイクアガール鑑賞遠征と感想執筆と感情の乱れ+大阪関西万博の記録
5月→マチアソビの記録
6月→つるぎ町の記録
7月→大阪関西万博の記録
特にこのうち、大阪関西万博と、つるぎ町の記録に関しては執筆に半月~一ヶ月ほど掛かっており、作業を支障するのに十分すぎる要素だった。
そして今月、8月は全てから解き放たれたので、やっと着工できたという話だ。流石にこのままイベントラッシュではまずいなというので、8月は何もしない月にすることにした。
恐らくそうでなければ今頃、阿波踊りを観にまた徳島に行っていたところだったろう。しかし阿波踊りはまた来年か、そのうち行きたいと思う。
今年は10月に開催されるであろうマチアソビに行くくらいで、残りは落ち着いて過ごしたいと思う。サーバー構築もやることがまだまだ無数にあり、書きたい記事も多くあるし、ブログに使っているCMSの新製も検討しているので、とにかくやることがありすぎるのだ。山に行く時間さえないのでYAMAPの課金も垂れ流しになってしまっているが、まぁ別にいい。
とにかく充実しているので良いと思う。仕事がクソな分、反動で私生活を充足させようというので始めたが、まぁこれは上手く行き、結果的に仕事にもよい循環が生まれているように感じる。
この作業によってリモートワーク環境もよくなったことで、より頑張っていけるようになるだろう、きっと。
adiaryの痒い所をちょこちょこ直している。上の画像にはないがCtrl + Vでクリップボードの画像をアップロードできる機能も付けている。
変更差分はもっぱらGitHubで管理していて、今日も最新版に追従させたところだ。
最近はOGPを強制出力するようにしたり、今日はSyntax HighlightをPrism.jsに置き換えるなどしていた。
adiaryはDiscordのようにChromeに詐称してくるBOT相手だとOGPが出ないし、標準のSyntax Highlightはしょっぱい。
比較用に元のやつを撮っておくのを忘れてしまったが、正直かなり良くなったと思う。
スマホで見たときに行折れせずスクロールできるようになったのも良い。