Javascriptライブラリについて
前章で使用したjQueryは、JavaScriptライブラリの１つです。 レッスンで使った以外にも、jQueryは様々な機能が搭載されています。
……なのですが、「この機能だけ欲しい！」という時には、データ容量が大きいというデメリットもあります。 いろいろな機能が入っているほど、コードの量が多くなり重くなるんですね。
Web制作では軽量化による、ページの読み込み速度アップも重視されています。 ですので、「スライダーだけ付けたい」など限られた箇所にしかJavascriptが必要ない場合は、jQueryではなくも必要機能のみのライブラリを利用することもあります。
Bootstrapも、バージョン5からはjQueryが使用されなくなりました。
4系まではjQueryが使われていたので、そのままjQueryコードを書くことができました。
しかし、今後は欲しい機能を持った（jQuery非依存の）ライブラリを使用する機会も増えそうです。
フレームワーク、ライブラリ、プラグイン
Javascriptで追加したい機能を調べると、ライブラリやプラグインなどの単語が出てきます。jQueryについて調べても「ライブラリ」と言う方と「フレームワーク」と言っている方がいますよね。
JavaScriptライブラリとは、JavaScriptベースのアプリケーションを書きやすくするためにあらかじめ書かれたJavaScriptのライブラリのことである。特に、AJAXなどのウェブ中心の技術で活用されている。 wikipedia
このような定義はあるのですが、実際のところ呼び分けは明確化されていません。
例えば、前章で使った「jquery.waypoints.min.js」はjQueryの拡張機能（＝プラグイン）です。今回使う「Luminous」は画像拡大のライブラリです。
しかし、上の図で薄グリーンの背景色の部分はフレームワークとライブラリ、 薄茶色の背景部分はライブラリ、プラグイン、ツール などなど、呼び方が混在していて人によって違う場合があります。
言葉で判断してしまうと、依存するファイルの有無がわかりにくい場合があります。 今度、ご自身で使いたいライブラリ/プラグインを検索する際には、こうした言葉の綾に注意して下さい。導入前に動かすために必要なファイルが別にあるか、単体で動くか確認しておきましょう。
拡大画像をポップアップ表示させてみよう
では、JavaScriptライブラリというものを使ってみましょう。 今回は、簡単な設定で、拡大画像をポップアップで表示する「Luminous」を使用してみます。
jQuery無しでも動くかチェックしてみたい方は、下記のようにhtmlファイルのjQuery読み込み箇所をコメントアウトして試してみて下さい。 こうするとBootstrapのカルーセルは動かなくなります。
JSライブラリ使用の準備
1.Luminousをダウンロード
下記より、Luminousをダウンロードして下さい。
「Izmir Hover Effects」と同じく、緑色のCodeボタンからダウンロードできます。
https://github.com/imgix/luminous
ダウンロードしたファイルは解凍してください。
2.必要なファイルを移動する
解凍したフォルダ「luminous-main」を開いて下さい。 「dist」というフォルダをクリックします。
青色にハイライトしている、下記２つのファイルを使用します。
- luminous-basic.min.css
- luminous.min.js
それぞれ、作成中のフォルダに移動させましょう。
① luminous-basic.min.cssはcssフォルダに
②luminous.min.jsはjsフォルダに
3.htmlファイルから読み込む
advance.htmlに、移動させたファイルの読み込みを記述します。
① luminous-basic.min.cssを読み込む
独自のスタイル指定を追加したい場合を考え、オリジナルCSSよりも上に書きましょう。
②luminous.min.jsを読み込む
Luminousを動かしてみる
1.Luminousを発動させるスクリプトを書く
luminous.min.jsを読み込ませただけでは、機能しません。 どういった条件で動かすかを、別途記述してあげる必要があります。
スクリプトをどのように記述すれば良いのか調べましょう。 大抵の場合、下記2つのどちらか、もしくは両方に使用法が書いてあります。
- ライブラリやプラグインの配布ページ
- DLしたフォルダ内のHTMLファイル
luminousは両方ありますが、とりあえず配布ページを見てみましょう。 https://github.com/imgix/luminous
スクロールダウンしていくと「Usage（使用法）」の見出しがあります。
赤線部分をコピーして、luminous.min.js読み込みの下に貼り付けます。 スクリプトタグで囲いましょう。
コピーしてきたコードに使われている「document.querySelector」は、指定されたCSS セレクターの最初のエレメントを対象にするという意味です。
カッコ内の「a」は、aタグのクラスを入れよという事です。
ですので、画像を拡大したいリンクにつけるクラスを自分で命名します。 今回はluminous01にしてみましょう。
2.拡大表示させる画像部分の設定
クラスを決めたので、拡大表示したい画像部分に設定してみましょう。 画像部分の設定は下記のように行います。
<a href="拡大画像" class="スクリプトで指定したセレクタ名">
<img src="拡大前の画像" alt="">
</a>
Portfolio Sectionの画像を拡大表示させてみます。 画像をaタグで囲い、クラス名luminous01を入れました。
保存してブラウザで確認してみましょう。
拡大表示されましたね！
複数の画像を拡大表示できるようにする
上記の設定で画像の拡大表示はできました。 同様にwork-2.jpg部分をaタグで囲ってみましょう。 拡大表示が動作しなくなってしまうはずです。
実は、先程のコードではページ内の画像1枚にしか対応できません。 Portfolio Sectionのように複数枚の画像に対応させるためには、LuminousGalleryを使います。
LuminousGallery
luminous配布ページ https://github.com/imgix/luminous の「Usage（使用法）」にLuminousGalleryのコードも載っています。
赤線部分のコードをコピーして、hemhファイルに貼り付けて下さい。 先程使ったluminous01の行はコメントアウトしておきます。
セレクターをluminous01に変更します。
保存してブラウザをリロードして下さい。 work-2.jpg部分をクリックすると、拡大表示が出来るようになっています。 同じクラスの画像は矢印で切り替えることもできますね。
※querySelectorとquerySelectorAllについては下記サイトを御覧ください。
実習
上の「複数の画像を拡大表示できるようにする」をアレンジして、それぞれの画像を拡大表示した時にキャプション（説明文）が表示されるようにしてみましょう。
表示する文字は各カードのH3部分とします。
（例：work-1.jpgであればLorem impsum dolor）
配布ページやDLフォルダ内で調べても、ネットで検索しても構いません。
スクリプト部分はコピペでも良いので、使用したい機能を調べて取り入れるということにチャレンジしてみましょう！