Luminous(document.querySelector('.luminous'));</script>これはググるとよく出てくるサンプルですが、Aタグにclass="luminous"と付けた画像のみポップアップ機能が付加されます。これだと最初の画像1枚にしか対応していません。LuminousGallery(document.querySelectorAll('.luminous'));</script>jsDelivrのLuminousを使うjsDelivrについては「JavaScriptライブラリはCDN使ったほうが便利だし早いっていう話」や、「FontAwesomeの読み込み速度を公式サイトとCDNサービスで比較してみた」で詳しく解説していますので、興味のある方はどうぞ。jsDelivrのスクリプトを使う場合はスクリプトをダウンロードする必要すらなく、↓こんなふうに書くだけで完了。LuminousGallery(document.querySelectorAll('.luminous'));</script>これだけで、class="luminous"が設定されたAタグの画像がすべてポップアップ化されます。実は既に当ブログでは以前使っていたLityを廃止、すべてLuminusへ変更済なため、普通の画像貼り付けが既にLuminousの実装例になっています。2023年3月31日追記:WordPressを廃止し、自作のブログシステムへ移行したため、ここの画像はLuminousでは自作のJavaScriptになっています。当ブログは既に314件ほど記事を投稿しているのですが、その記事をひとつひとつ開いて、Aタグにclass="luminous"を付けてまわるなんて、考えただけで気が遠くなりそうです。WordPressはMySQLで動いていますから、テーブルをバックアップしてSQLファイルをテキストエディタで開き、Aタグを置き換えする、という方法もなくはないですが、数十メガあるテキストを開くのはイヤだし、データベースを直接いじるのは慣れていても色々気を使うので避けたいところ。そこでふと思ったのですが、JavaScriptにはquerySelectorという素敵な関数があるのだから、Aタグのhrefの最後がjpgで終わっているリンクを一括でluminous化すれば良いのでは...?ということで、さっそくやってみました。LuminousGallery(document.querySelectorAll('a[href$=jpg],a[href$=png]'));</script>...やだ...すごい簡単...。querySelectorは正規表現が使えるわけではないのですが、似たような便利機能を持っています。書いたらhref="jpg"のAタグしか列挙しませんが、querySelectorAll('a[href$=jpg]');とすることで、末尾がjpgのAタグをすべて列挙してくれるわけです。いやぁー便利ですねー。こんな便利な機能が主要なモダンブラウザすべてで使えるのですからありがたい。うん、やっぱりjQueryはそろそろいらないんじゃないかなってホント、そう思います。まとめそろそろ脱jQueryをしたいから単体で動くLightbox風スクリプトを探していたらLuminousを見つけた。Luminousは少し使い方が特殊で、querySelectorで選択したAタグ要素をLuminousクラスに渡すことで画像をポップアップ化する。複数枚を矢印で順番に表示するようなギャラリー的な使い方をする場合にはLuminousGalleryクラスを使う。Githubのほかに、jsDelivrでも配信されているのでダウンロードしたり配置するのが面倒な場合はそちらを使うのも手。既存のコンテンツをluminousのために書き換えるのが面倒な場合はquerySelectorを使ってイイカンジに自動化することも出来る。いったところでしょうか。ちなみに、jQueryってそんなに重いかぁ?と疑問に思われる方もいることでしょう。うちで使っていたjquery-3.3.1.min.jsは85KBです。みたいに感じるかも知れませんが、けっこう大きいんですよねぇ。具体的にはluminousがわずか10KBなので、その差75KB。うちのブログの過去30日間の統計で、92,557ページビュー。75KB×92,557=6,941,775KB=約6.7GB。スクリプト変えるだけで月間の転送量が6.7GBも削減できるのです。実際にはクライアント側のキャッシュなども効いてきますから、ここまでの削減にはならないでしょう。その昔運営していたゲーム攻略サイトがたまたま公式ページより上に表示されてしまい、月間転送量120GBを超えてレンタルサーバーを追い出されたことのある身としては簡単に削減できるデータなら削減したいところ...。いまどきはスマホなど、モバイル端末での閲覧も多いためか、転送量の軽減は検索エンジンからの評価UPにも繋がりますしねー。過去記事を300件以上、手動で修正しなければならない...となったらさすがに費用対効果が合わん!となりますが、先述のとおり、数行書くだけで終わる作業で月間転送量6.7GB削減なら、個人的には万々歳でございます。ありがとうluminous!関連記事JavaScriptでファイル名順に複数ファイルを読み込む方法INPUTタグで複数ファイルを読み込む際、ブラウザ内で処理するときはFileReaderオブジェクトを使うことが多いと思います。これは非同期処理なので、はてファイル名順に処理する場合はど02024-06-13JavaScriptのcanvasで縦書きを行う際の備忘録canvas上に縦書きの文章を出力して画像化しようと考えてちょっとハマったので忘れないうちにメモしておきます。結論から先に書くと、基本的にcanvasにはwriting-modeの設定が効くの02024-06-11JavaScriptのWebAudioAPIで楽曲の口パクをしてみる以前、ソフトウェアの解説動画を作った際、おっさんの声だけ流れてるのもアレだし、最近流行りのアバターにしゃべらせるやつやってみよう、と思ったことがあります。前回の記事「JavaScriptで画像を連続表示してコマ撮りムービー風の表示をしてみる」では連続して画像を表示することで、コマ撮りムービーのようなものをブラウザ上に表示することに成功しました。82023-01-24Amazonアソシエイトのレポート作成とダウンロードを自動化するAmazonのアフィリエイトプログラムを使っている方ならわかってもらえると思いますが、Amazonアソシエイトページのレポート画面ってすっっっっっごく使いづらいですよね。コメント投稿直後ならコメントの編集/削除が可能です。※24時間経過するか、新しく投稿した場合は古い投稿の編集や削除は出来ません。※ブラウザでCookieが受け入れられない場合はこの機能は使えません。非公開にチェックを入れたコメントは管理人のみ閲覧できます。コメント投稿のガイドライン誰もが閲覧できるコメント欄ですので個人が特定できる情報等は書き込まないようにしましょう。他人のHPやブログの文章を掲載する場合は著作権法第32条「引用」の条件を満たすかご確認ください。誹謗中傷にあたる表現などは場合によっては法的な責任を問われる可能性があるためご注意ください。とっちらか~るTOP。