IT系おじさんのチラシの裏
2018年10月~
当サイトの記事にはアフィリエイト広告のリンクが含まれる場合があります

jQuery不要なLightbox代替スクリプトLuminousが本当に軽量

jQueryって…重いですよね。

各種ブラウザへの対応が面倒くさかった時代には本当にありがたかったのですが、モダンブラウザ全盛の今、jQueryの必要性を感じないことが多くなってきました。

いやホント、長年お世話になっておいてナンなんですがw

最近ではLightboxやLityのためだけにjQueryを入れている

画像をクリックしたときにふわりと浮かぶあのLightbox、便利ですよね。

特にブログなどの文章が多い場面では画面遷移せずに見られるLightboxの仕組みは必須だと感じています。

当ブログで使っているWordPressのテーマ、Simplicityでも軽量化されたLityというJSライブラリが使用可能なため使っていたのですが、いくらライブラリが軽量でもjQuery自体が重いのが気になっていました。

jQuery不要のLightbox代替スクリプトLuminousを知る

同じように考えている人もいるだろうから、jQuery不要のLightbox風スクリプトないかなぁ、とググってみたら、やはり既にありました。その名は Luminous。

Luminousの配布ページ
https://github.com/imgix/luminous

Luminousの使い方

基本は↓これだけ。

<a href="[画像ファイル]" class="luminous"><img src="[画像ファイル]"></a>

<link rel="stylesheet" href="Luminous-basic.min.css">
<script src="Luminous.min.js"></script>
<script>
new Luminous(document.querySelector('.luminous'));
</script>

これはググるとよく出てくるサンプルですが、Aタグにclass="luminous"と付けた画像のみポップアップ機能が付加されます。

但し、これだと最初の画像1枚にしか対応していません。

Luminousで複数画像をポップアップ化するには querySelectorAll と LuminousGallery を使います。

<a href="[画像ファイル]" class="luminous"><img src="[画像ファイル]"></a>

<link rel="stylesheet" href="Luminous-basic.min.css">
<script src="Luminous.min.js"></script>
<script>
new LuminousGallery(document.querySelectorAll('.luminous'));
</script>

jsDelivrのLuminousを使う

jsDelivrについては「JavaScriptライブラリはCDN使ったほうが便利だし早いっていう話」や、「FontAwesomeの読み込み速度を公式サイトとCDNサービスで比較してみた」で詳しく解説していますので、興味のある方はどうぞ。

jsDelivrのスクリプトを使う場合はスクリプトをダウンロードする必要すらなく、↓こんなふうに書くだけで完了。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/luminous-basic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/luminous.min.js"></script>
<script>
new LuminousGallery(document.querySelectorAll('.luminous'));
</script>

これだけで、class="luminous"が設定されたAタグの画像がすべてポップアップ化されます。

Luminousの実装例

実は既に当ブログでは以前使っていたLityを廃止、すべてLuminusへ変更済なため、普通の画像貼り付けが既にLuminousの実装例になっています。

特に違和感はないですよね?

全ての画像リンクを一括でポップアップ化したい場合

当ブログは既に314件ほど記事を投稿しているのですが、その記事をひとつひとつ開いて、Aタグにclass="luminous"を付けてまわるなんて、考えただけで気が遠くなりそうです。

WordPressはMySQLで動いていますから、テーブルをバックアップしてSQLファイルをテキストエディタで開き、Aタグを置き換えする、という方法もなくはないですが、数十メガあるテキストを開くのはイヤだし、データベースを直接いじるのは慣れていても色々気を使うので避けたいところ。

そこでふと思ったのですが、JavaScriptにはquerySelectorという素敵な関数があるのだから、Aタグのhrefの最後がjpgで終わっているリンクを一括でluminous化すれば良いのでは…?

ということで、さっそくやってみました。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/luminous-basic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/luminous.min.js"></script>
<script>
new LuminousGallery(document.querySelectorAll('a[href$=jpg],a[href$=png]'));
</script>

…やだ…すごい簡単…。

querySelectorは正規表現が使えるわけではないのですが、似たような便利機能を持っています。

それが上述した $= ですね。

querySelectorAll('a[href=jpg]'); と書いたらhref="jpg"のAタグしか列挙しませんが、querySelectorAll('a[href$=jpg]');とすることで、末尾がjpgのAタグをすべて列挙してくれるわけです。
(PNGも追加したいので上述の例ではa[href$=png]も付けています)

そしたら、それをそのまま LuminousGallery クラスへ渡すだけ。

いやぁー便利ですねー。

こんな便利な機能が主要なモダンブラウザすべてで使えるのですからありがたい。

うん、やっぱりjQueryはそろそろいらないんじゃないかなってホント、そう思います。

まとめ

  • そろそろ脱jQueryをしたいから単体で動くLightbox風スクリプトを探していたらLuminousを見つけた。
  • Luminousは少し使い方が特殊で、querySelectorで選択したAタグ要素をLuminousクラスに渡すことで画像をポップアップ化する。
  • 但し、複数枚を矢印で順番に表示するようなギャラリー的な使い方をする場合にはLuminousGalleryクラスを使う。
  • Githubのほかに、jsDelivrでも配信されているのでダウンロードしたり配置するのが面倒な場合はそちらを使うのも手。
  • 既存のコンテンツをluminousのために書き換えるのが面倒な場合はquerySelectorを使ってイイカンジに自動化することも出来る。

といったところでしょうか。

ちなみに、jQueryってそんなに重いかぁ?と疑問に思われる方もいることでしょう。

例えば、うちで使っていたjquery-3.3.1.min.jsは85KBです。

高価なSSDですら500GBだの1TBだという時代に85KBとかwww みたいに感じるかも知れませんが、けっこう大きいんですよねぇ。

具体的にはluminousがわずか10KBなので、その差75KB。

うちのブログの過去30日間の統計で、92,557ページビュー。

75KB×92,557=6,941,775KB=約6.7GB。

スクリプト変えるだけで月間の転送量が6.7GBも削減できるのです。もちろん、実際にはクライアント側のキャッシュなども効いてきますから、ここまでの削減にはならないでしょう。

しかし、その昔運営していたゲーム攻略サイトがたまたま公式ページより上に表示されてしまい、月間転送量120GBを超えてレンタルサーバーを追い出されたことのある身としては簡単に削減できるデータなら削減したいところ…。

いまどきはスマホなど、モバイル端末での閲覧も多いためか、転送量の軽減は検索エンジンからの評価UPにも繋がりますしねー。

過去記事を300件以上、手動で修正しなければならない…となったらさすがに費用対効果が合わん!となりますが、先述のとおり、数行書くだけで終わる作業で月間転送量6.7GB削減なら、個人的には万々歳でございます。

ありがとうluminous!

関連記事

JavaScriptのcanvasで縦書きを行う際の備忘録

canvas上に縦書きの文章を出力して画像化しようと考えてちょっとハマったので忘れないうちにメモしておきます。 結論から先に書くと、基本的にcanvasにはwriting-modeの設定が効くの

JavaScriptのWebAudioAPIで楽曲の口パクをしてみる

以前、ソフトウェアの解説動画を作った際、おっさんの声だけ流れてるのもアレだし、最近流行りのアバターにしゃべらせるやつやってみよう、と思ったことがあります。 vtuberとかおじさんよくわからない

コメント

新しいコメントを投稿する

[新規投稿]
 
TOP