レスポンシブ対応のjQueryプラグイン「Glide.js」の組み込み

レスポンシブ対応のjQueryプラグイン「Glide.js」の組み込み

今回のコラムは、当サイトで配布しているWEBサイトテンプレート（PHP）にGlide.jsというスライドショーを組み込む時の解説を致します。
やはりサイトには動的な要素を盛り込んだ方が、アクセスしてきたユーザーにとって見てて楽しい要素になりますよね。
弊社ではこれらもSEOの要素として考えていますので、今回のGlide.jsのみに限らず、様々な動的な要素を盛り込む技術解説をしていきたいと思っています。

さて・・・ところで、Glide.jsって何かご存知ですかね？

Glide.jsとは、当サイトのトップページにあるスライドショー（画像が横に移動し入れ替わる部分）でも使っているjavascriptのことです。
（※当サイトでは若干のカスタマイズを入れていますので、それらのカスタマイズについては触ず基本的な設置について解説致します。）
jQueryというプログラムを活用したJavascriptプログラムがGlide.jsのことです。
設置が難しそう・・・と思われている方でも簡単に設置頂けますので、一つずつ順を追ってゆっくり見て頂ければと思います。

本件では、基本的にGlide.jsの本家サイトのソースをそのまま利用しています。
Glide.jsのカスタマイズを紹介しているブログサイトも様々ありますので、そういう情報も参考にして頂ければと思います。
ただ、やはり基本的なソースは理解しておくべきだと思いますので、まずはここからスタートするような感じで見て頂ければと思います。
追々、Glide.jsのカスタマイズも解説していきますので、まずは順を追っていきたいと思います。

Glide.jsの配布サイトです。
ダウンロードは本家とGitHubにて出来ます。

• 本家
• GitHub

GitHubとは、このようなオープンソースプログラムを共有して開発するためのウェブサービスです。
Gitというバージョン管理（開発管理）プログラムを使い多数のプログラマーで共有・開発されており、そのプログラムをダウンロードしたりすることが出来るというサービスです。
”どちらが良いか悪いか”という話ではありません。
GitHubは、本家をより良くしていくサービスという位置づけでいいのかもしれません。
曖昧なことが多いですが、GitHubとはそういうサービスです。

phptemp_glidejs_151028.zip

Glide.jsを組み込んだページのサンプルです。

• 組み込み済みサンプルページ

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

凡そ、流れ的には以下のような順番です。

1. 本家、若しくはGitHubからダウロードしてきたファイルを展開する。
   展開した中から「 /dist/glide.js 」をWEBサイトテンプレート（PHP）内の「 /js/ 」にコピーする。
2. CSSと、メインhtmlソースをWEBサイトテンプレート（PHP）に書き込む。
3. JSファイル、CSSファイル、メインhtmlソースを書いたファイルをアップする。

ということで、上記の内容を以下で詳細解説致します。

「 /disc/glide.js 」ファイルはそのまま移動させて下さい。
そして、glide.jsを、WEBサイトテンプレート（PHP）のjsフォルダに入れそのままアップして下さい。

jQueryファイルの指定は、最新版、若しくは動作確認の取れているjQueryが好ましいところです。
オープンに利用出来るソースが公開されていますので、そのファイルを直接指定して下さい。
サンプルページでは「 http://code.jquery.com/jquery-1.11.0.min.js 」を指定しています。

ここが一番重要です。

まずは、CSS記述の移植です。

展開したGlideフォルダの中の「 /dist/css/glide.core.css 」と「 /dist/css/glide.theme.css 」の内容をそのままWEBサイトテンプレート（PHP）のCSSフォルダに入れる、若しくは新しくCSSファイルを作成し、内容をそのままコピペして下さい。
本来的に言えば、初心者のコピペは推奨出来ませんが、これは上級者向けの記述ですので、まずはコピペでもOKです。

そして次に、展開したGlideフォルダの中の「 /example/css/demo.css 」の内容を先述同様にコピペか移動をさせて下さい。
この時、読み込ませるCSS内容は【 glide.core.css → glide.theme.css → demo.css 】の順番に読み込ませるようにして下さい。
上から読み込みレンダリングを調整するため、大きな枠を決定している記述から読み込ませレンダリングさせたいためです。

当サイトでは、上述のCSS内容を新たにCSSファイル（glide.css）を作成し、内容をそのままコピーしました。
そして、このファイルについては、ブラウザの横幅に応じるような記述はしていません。
元々、レスポンシブ対応することが仕様としてあるため、わざわざブラウザの横幅に合わせるような記述をする必要がないためです。

CSSの次はhtmlソースの記述です。

htmlソースの記述についても基本的にコピペで出来てしまいます。
が、この段階ではまだデザインが整わないので、追々デザイン調整をするようにしましょう。

展開したGlideフォルダ内の「 /example/ 」内に、たくさんのhtmlファイルが置かれています。
これらは仕様毎の記述例をそのままファイルで用意してくれています。
ですので、どれかhtmlファイルを選び、その中から選んでコピーするような感じになります。
抜粋箇所はそれぞれのファイルによって異なるため、適宜該当箇所を見分けコピーして下さい。
当サイトのサンプルでは「 autoheight.html 」から抜粋しています。

また、htmlソース中にjavascriptで指定記述しなければいけない箇所があります。 スライドショーのhtml記述の直下にオプション指定的な感じでjavascriptが記述されていますので、そのjavascript記述もコピーして同じような場所に記述して下さい。

CSSファイル、htmlファイル、jsファイルのそれぞれをサーバーにアップして下さい。
あとは動作確認を取り、様々なケースでの記述を試して理解すれば、これにて作業完了です。

まずは内容を理解しなくてもアップしてみて感覚を覚えるところからスタートしても問題ないと思います。
文中でも書きましたが、出来れば内容を理解したいところです。
ですが、やはり上級者向けの記述ですので、なかなか難しいところだと思います。
時間の制約や対応の限界はあるかと思いますが、順を追う中で絶対に理解はするようにしましょう。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_151020.zip 」です。
• main.css（3種）の「 #main 」（メイン画像部分）の記述を修正しています。
• glide.cssは共通用に記述しています。
• スライドショーはトップページのみですので、それぞれのファイルはトップページのみ読み込ませています。

WEBサイトテンプレート（PHP）を元に解説致しましたが、基本的にはどのようなサイトでもそのまま活用出来ると思います。
内容を理解し取り組むことで面白さも分かって頂けるのではないかな？とも思っています。

これらの動的な要素を導入して頂くことで、サイトの見栄えが大幅に変わります。
小さなことですが変わります。

最初は理解出来ない部分が多いかとは思いますが、慣れればそうでもありません。
是非とも取り組んで頂きたく思いました。
ご不明な点については、お気軽にお問い合わせ下さい。
どうぞ宜しくお願い致します。

執筆 : 清水 隼斗