Webサイト制作におけるjQueryのプラグイン（設置）に関するまとめ
先日、訓練におけるWebサイト制作の発表が終わったので、授業が次のステップに進む前に今回のWebサイト制作において用いたjQueryのプラグインについてまとめておく。
- flexslider：画像の移り変わりの方法（フェード/スライド）を選択できたり、画像の表示順をランダムにできたりと多機能で便利なスライダーのプラグイン
- jScrollPane：CSSでデザインを変えることができるスクロールバーのプラグイン
- galleriffic：キャプションやスライドショーなど多機能で、サムネイル画像をクリックすることで、固定位置に大画像が表示されるギャラリーのプラグイン
また、今回のWebサイト制作を通して、jQueryプラグイン設置時に気付いた注意点をまとめておく。
jQueryプラグイン設置時の注意点
- jQueryプラグインの設置には、読む込むだけのjsファイルの他に、実行部のスクリプトの記述が必要なものがある
- プラグインにはjsファイルだけでなくcssファイルがセットになっているものもある
- 簡単にカスタマイズできる項目はHTMLのscriptタグ内に書いてあるもの（書いておくこと）が多いようだが、jsファイル内にもほぼ同じ記述（設定箇所）がある（ことが多い）
- 紹介サイトなどで書かれているカスタマイズの項目名がたまに間違っていて変更が効かないことがあるので、その場合はjsファイル内の項目名を確認した方がよい
- 複数のプラグインを同じページに設置する場合、外部スクリプトを読み込む順番によって、動作したりしなくなったりするので、読み込み順の調整が必要な場合がある
- jQuery本体は基本的には１つで良いが、プラグインによって動作するjQuery本体のバージョンが異なる
jQueryプラグインの無難な設置手順
これは他にも同じようにしている人はいるとは思うが、私自身が勝手に無難な方法と思ってやっている手順は以下の通り。
- プラグインの配布先や紹介サイトにある単独ページのDemoサンプル（一番簡潔なサンプル）をそのままコピーしてきて、動くか試す
- 手順1がちゃんと動く確認ができた後に、そこに何の変更も加えない状態で、本来設置したいHTML内に必要なコードや読み込みを記述して、動くか試す
- 手順2がちゃんと動く確認ができた後に、カスタマイズしたい箇所ごとに「変更」→「動作確認（正常かおかしくなったか）」を繰り返していく
※ここで注意すべき点は、必ず1箇所ずつ変更していき、そこが正常に動作するようになるまでは次のカスタマイズに進まないこと。
ものによっては、HTML内に記述する前に先にカスタマイズしてしまい、カスタマイズ後の動作が確認できたものをHTML内に記述するという方法もありだと思われる。
