2014.10.30
（上級編）BiNDクラウドのサイトにjQueryを仕込む
このページが表示されるとき、全体の要素が「フワッ」と浮き上がってきたのに気づいただろうか。実はこのページは、ページの表示をフェードインするjQueryを仕込んでいるのだ。よくわからなかったという人は、ページを再度リロードして確認してみてほしい（古いバージョンのWebブラウザなどでは、再現されない場合もある）。
ここでは「jQuery」に関する詳細説明は省くが、簡単に言えば、Webサイトにさまざまな表現を追加する（しやすくする）ための技術だと考えていい。世の中にはjQueryを利用したさまざまな「jQueryプラグイン」が公開されており、そのjQueryプラグインを自分のWebサイトに組み込むことで、ユニークな演出を簡単に実装できるのだ。
※jQueryプラグインは無料・許諾不要のものが多いが、すべてが無料というわけではなく、使用条件はものによって異なる。この点はあらかじめ注意しよう。
そんなjQueryプラグインを、はたしてBiNDクラウドでも利用できるのだろうか？
…すでにこのページで実装しているのをご覧いただいた後に「できるのだろうか？」というのもおかしな話だが、「原則的には可能」というというのがその結論だ。
では、具体的にはどんな手順が必要か？ 「jquery.fadeMover」というjQueryプラグインを例に解説していこう。このページのフェードイン／フェードアウトに使っているプラグインだ。
http://www.detelu.com/fademover/
このプラグインの公開元Webサイトでは、一般的なWebサイトでの組み込み方がかなり親切に書いてある（しかも日本語だ）。肝心のプラグイン本体は、ページの一番最後のリンクボタンからダウンロードする。
まず、BiNDクラウドで適用したいページの［設定］を開き、［スクリプトと詳細設定］タブを表示させる。そしてそこにある「スクリプト入力欄」に次のような文字列を入力する。
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.fademover.js"></script>
<script>
$(function(){
$('body').fadeMover();
});
</script>
</head>
通常のWebサイトの場合だと、あとはFTPサーバ内にjQueryプラグインのファイルを置いておけばいいのだが、BiNDクラウドのベーシックコースではそれができない（プロコース以上ならFTPサーバにアクセスできるため、jQueryプラグインをファイルとして置いておくことも可能なはずだが、こちらは未検証）。そこで、プラグインファイル本体に書かれているコードを、このスクリプト入力欄にそのまま書き足す必要がある。
上記の文字列の中で、プラグインファイルを呼び出しているのは3行目の部分だ。
（<script src="jquery.fademover.js"></script>）
この部分を取り除き、代わりにプラグインファイル（jquery.fademover.js）に書かれているコードに置き換えてる。置き換える際には、コードの上に<script type="text/javascript”>と記述。コードの終わりに</script>と入れる。
全文を掲載すると、以下のようになる。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
/* Copyright (c) 2011 detelu (http://www.detelu.com)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* jquery.fademover.js
* Version: 2012-02-06
*/
(function($){
$.fn.fadeMover = function(options) {
var defaults = {
'effectType': 1,
'inSpeed': 800,
'outSpeed': 800,
'inDelay' : '0',
'outDelay' : '0',
'nofadeOut' : 'nonmover'
};
var setting = $.extend(defaults, options);
var cnt = $(this).length-1;
this.each(function(i) {
var pel = this;
if(setting.effectType == 1 || setting.effectType == 2) {
$(pel).css("opacity", 0).delay(i*setting.inDelay).animate({opacity: 1}, setting.inSpeed);
}
if(setting.effectType == 1 || setting.effectType == 3) {
$('a').click(function(event) {
var moveUrl = $(this).attr("href");
if(!$(this).hasClass(setting.nofadeOut) && moveUrl.charAt(0) != "#"){
event.preventDefault();
$(pel).delay(i*setting.outDelay).animate({"opacity": 0}, setting.outSpeed, function(){
if(cnt == i || setting.outDelay == '0')
location.href = moveUrl;
});
}
});
}
});
return this;
}
window.onunload = function () {};
})(jQuery);
</script>
<script>
$(function(){
$('body').fadeMover();
});
</script>
なお、プラグインファイルのコードの上のほうに書かれているのは、コードの著作権表記だ。この表記を省略してしまうと使用ライセンス違反になるので注意しよう。
あとは、［OK］を押してWebサイトを公開すれば、反映されているのを確認できるはずだ。ぜひ試しにやってみてほしい。この基本がわかれば、いろいろなjQueryプラグインでも応用できることだろう。
なお、jQueryプラグインによっては、BiNDクラウドですでに使われているjQueryプラグインとバッティングを起こす場合もある。今回例に挙げたフェードイン／フェードアウトプラグインは、デフォルトの設定のままだとバッティングが起きたため（画像のライトボックス表示とのバッティング）、フェードアウトはオフにしてある。
jQueryプラグインは、［設定］パネル内の［スクリプトと詳細設定］タブ内で記述する。
このページを共有する
