Webサイト制作におけるjQueryのプラグイン(設置)に関するまとめ

先日、訓練におけるWebサイト制作の発表が終わったので、授業が次のステップに進む前に今回のWebサイト制作において用いたjQueryプラグインについてまとめておく。

私が用いた主なjQueryプラグインは以下の3つ。

  • flexslider:画像の移り変わりの方法(フェード/スライド)を選択できたり、画像の表示順をランダムにできたりと多機能で便利なスライダーのプラグイン
  • jScrollPane:CSSでデザインを変えることができるスクロールバーのプラグイン
  • galleriffic:キャプションやスライドショーなど多機能で、サムネイル画像をクリックすることで、固定位置に大画像が表示されるギャラリーのプラグイン

また、今回のWebサイト制作を通して、jQueryプラグイン設置時に気付いた注意点をまとめておく。

jQueryプラグイン設置時の注意点
  • jQueryプラグインの設置には、読む込むだけのjsファイルの他に、実行部のスクリプトの記述が必要なものがある
  • プラグインにはjsファイルだけでなくcssファイルがセットになっているものもある
  • 簡単にカスタマイズできる項目はHTMLのscriptタグ内に書いてあるもの(書いておくこと)が多いようだが、jsファイル内にもほぼ同じ記述(設定箇所)がある(ことが多い)
  • 紹介サイトなどで書かれているカスタマイズの項目名がたまに間違っていて変更が効かないことがあるので、その場合はjsファイル内の項目名を確認した方がよい
  • 複数のプラグインを同じページに設置する場合、外部スクリプトを読み込む順番によって、動作したりしなくなったりするので、読み込み順の調整が必要な場合がある
  • jQuery本体は基本的には1つで良いが、プラグインによって動作するjQuery本体のバージョンが異なる
jQueryプラグインの無難な設置手順

これは他にも同じようにしている人はいるとは思うが、私自身が勝手に無難な方法と思ってやっている手順は以下の通り。

  1. プラグインの配布先や紹介サイトにある単独ページのDemoサンプル(一番簡潔なサンプル)をそのままコピーしてきて、動くか試す
  2. 手順1がちゃんと動く確認ができた後に、そこに何の変更も加えない状態で、本来設置したいHTML内に必要なコードや読み込みを記述して、動くか試す
  3. 手順2がちゃんと動く確認ができた後に、カスタマイズしたい箇所ごとに「変更」→「動作確認(正常かおかしくなったか)」を繰り返していく

※ここで注意すべき点は、必ず1箇所ずつ変更していき、そこが正常に動作するようになるまでは次のカスタマイズに進まないこと。

ものによっては、HTML内に記述する前に先にカスタマイズしてしまい、カスタマイズ後の動作が確認できたものをHTML内に記述するという方法もありだと思われる。

Webサイト制作におけるjQueryの基本的なメソッド6 - wrap()とremove()

今回はwrap()メソッドとremove()メソッドについて確認する。

その前に、ここまでは既にHTML内にある要素を指定してそれを操作するという方法で確認等を行ってきたが、同じような書き方で、新しく要素を作って、それを操作するということができる。

記述方法は以下の通り。

$('新しく作る要素のHTMLコード').メソッド(パラメータ);

要は今まで既存の要素を指定していた部分に、新しく作る要素のHTMLコードを記入すれば良いだけとなる。

では、以下で新しく作った要素に対する操作も含めて確認していく。

要素を追加、削除する機能をもつ基本的なメソッド
  • wrap()メソッド:指定した要素を囲む(包む、ラッピングする)
  • remove()メソッド:指定した要素を削除する(要素ごと削除する)
wrap()メソッド

記述例は以下の通り。

$("要素1").wrap($("要素2"));

要素2で要素1を囲む(包む、ラッピングする)という操作になる。

続きを読む

Webサイト制作におけるjQueryの基本的なメソッド5 - before()とafter()

前回に引き続き、今回はbefore()メソッドとafter()メソッドについて確認する。

before()メソッド

以下、挙動確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>before()メソッド</title>
<style>
body, div, p, li {
  margin: 10px;
  padding: 0;
}
#done {
  background: #0F0;
}
#dtwo {
  width: 200px;
  background: #0FF;
}
#dthree {
  width: 150px;
  background: #F0F;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="done">
  <p>done_p</p>
  <p>done_p</p>
</div>

<div id="dtwo">
 <p>dtwo_p</p>
 <p>dtwo_p</p>
</div>

<div id="dthree">
 <p class="pone">dthree_pone</p>
 <p class="ptwo">dthree_ptwo</p>
 <p class="pthree">dthree_pthree</p>
 <ul>
  <li class="lione">dthree_ul_lione</li>
  <li class="litwo">dthree_ul_litwo</li>
 </ul>
 <div>
  <p>dthree_div_p</p>
 </div>
  <p class="pfour">dthree_pfour</p>
</div>

<script>
$(function(){
 $('#done').before($('#dtwo'));
 $('#done').before($('.pone'),$('.pfour'),$('.pthree'));
 $('#dtwo').before($('#dthree p'));
 $('#done').before($('.litwo'));
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示
結果から、以下のことが分かる。

  • 複数の要素をまとめて移動させる場合、before()メソッドの括弧内に書いた順に移動する(移動後、その順番で並ぶ)※上記例の「.pfour」、「.pthree」に対する結果参照
  • もとは兄弟関係でないものでも、同じ条件で抽出されたものは、移動後は兄弟扱いになる ※上記例の「#dthree p」に対する結果参照
  • このような指定の仕方が正しいのかどうかは不明だが、「ul li」の「li」のみを移動させた場合でも、処理はされる(「li」が単独で移動する)※上記例の「.litwo」に対する結果参照
続きを読む

Webサイト制作におけるjQueryの基本的なメソッド4 - prepend()とprependTo()

前回に引き続き、今回はprepend()メソッドとprependTo()メソッドについて確認する。

機能の概要は既に(前回)書いたので割愛する。

挿入される位置が異なる以外は、append()メソッドおよびappendTo()メソッドと同じ機能なので、前回の記事を見て頂いた人は特に見る必要はないと思われる。

続きを読む

Webサイト制作におけるjQueryの基本的なメソッド3 - append()とappendTo()

今回からは、Webサイト制作のコーディングにおいて用いるjQueryの基本的なメソッドの中でも、要素の移動や挿入(追加)する機能をもつメソッドをまとめていく。

要素を移動・挿入(追加)する機能をもつ基本的なメソッド
  • append()メソッド:指定した要素内(中身)の最後に挿入する
  • appendTo()メソッド:指定した要素内(中身)の最後に挿入する
  • prepend()メソッド:指定した要素内(中身)の先頭に挿入する
  • prependTo()メソッド:指定した要素内(中身)の先頭に挿入する
  • before()メソッド:指定した要素の前に挿入する
  • after()メソッド:指定した要素の後に挿入する
記述例

共通した記述の仕方は以下の通り。

$("要素1").メソッド($("要素2"));

注意する点は、指定する2つの要素はどちらもjQueryオブジェクト化する必要があるということ。

(先に書く)要素1に対して、(後に書く)要素2を操作するというのが基本となる。

ただし、メソッドの最後に「To」がつくappendTo()メソッドとprependTo()メソッドのみ2つの要素の指定位置が逆になる。

以下で、各メソッドの挙動を確認していく。

append()メソッド

複数の要素をまとめてappendすることが可能で、その場合は下記のように書く。

$("要素1").メソッド($("要素2"),$("要素3"),$("要素4"),…);

メソッドの括弧()内にコンマで区切って追加していく。

ちなみに複数の要素に対して、同じ要素をappendできるのかを試したところ、IEFirefoxで結果が異なったため、そういった指定は不可と考えられる。
以下、NGな指定方法。

($("要素1"),$("要素2")).メソッド($("要素3")); /* これはNG */
続きを読む

Webサイト制作におけるjQueryのメソッドの書き方あれこれ

ここ数回に渡ってjQueryの基本的なメソッドについてまとめてきたが、正しい書き方(意図した通りに処理される書き方)がやや曖昧なので、一度確認しておく。

以下、確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッドの書き方あれこれ</title>
<style>
body, div, p, li {
  margin: 10px;
  padding: 0;
}
.done {
 width: 200px;
 background: #0F0;
}
.dtwo {
  width: 200px;
  background: #0FF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>

<div class="done">
  <p>done</p>
</div>

<div class="dtwo">
  <p>dtwo</p>
</div>

<script>
$(function(){
/* append */
/*$('.dtwo').append($('.done')); /*  ○ */
/*$('.dtwo').append('.done'); /*  × */
/*$('<div class="new">class=new1</div>').append($('.done'));  /*  × */
/*$('<div class="new">class=new2</div>').append('.done'); /*  × */
/*$('.done').append($('<div class="new">class=new3</div>')); /*  ○ */
/*$('.done').append('<div class="new">class=new4</div>');  /*  ○ */
/*$('.done').append('<div class="new">'
+ '<p>class=new5</p>'
+'</div>');  /*  ○ */

/* appendTo */
/*$('.done').appendTo($('.dtwo')); /*  ○ */
/*$('.done').appendTo('.dtwo'); /*  ○ */
/*$('<div class="new">class=new1</div>').appendTo($('.done'));  /*  ○ */
/*$('<div class="new">class=new2</div>').appendTo('.done'); /*  ○ */
/*$('.done').appendTo($('<div class="new">class=new3</div>')); /*  × */
/*$('.done').appendTo('<div class="new">class=new4</div>');  /*  × */
/*$('<div class="new">'
+ '<p>class=new5</p>'
+'</div>').appendTo($('.done'));  /*  ○ */

/* prepend */
/*$('.dtwo').prepend($('.done')); /*  ○ */
/*$('.dtwo').prepend('.done'); /*  × */
/*$('<div class="new">class=new1</div>').prepend($('.done'));  /*  × */
/*$('<div class="new">class=new2</div>').prepend('.done');/*  × */
/*$('.done').prepend($('<div class="new">class=new3</div>')); /*  ○ */
/*$('.done').prepend('<div class="new">class=new4</div>');  /*  ○ */
/*$('.done').prepend('<div class="new">'
+ '<p>class=new5</p>'
+'</div>');  /*  ○ */

/* prependTo */
/*$('.done').prependTo($('.dtwo')); /*  ○ */
/*$('.done').prependTo('.dtwo'); /*  ○ */
/*$('<div class="new">class=new1</div>').prependTo($('.done'));  /*  ○ */
/*$('<div class="new">class=new2</div>').prependTo('.done'); /*  ○ */
/*$('.done').prependTo($('<div class="new">class=new3</div>')); /*  × */
/*$('.done').prependTo('<div class="new">class=new4</div>');  /*  × */
/*$('<div class="new">'
+ '<p>class=new5</p>'
+'</div>').prependTo($('.done'));  /*  ○ */

/* before */
/*$('.done').before($('.dtwo')); /*  ○ */
/*$('.done').before('.dtwo'); /*  × */
/*$('<div class="new">class=new1</div>').before($('.done'));  /*  × */
/*$('<div class="new">class=new2</div>').before('.done'); /*  × */
/*$('.done').before($('<div class="new">class=new3</div>')); /*  ○ */
/*$('.done').before('<div class="new">class=new4</div>');  /*  ○ */
/*$('.done').before($('<div class="new">'
+ '<p>class=new5</p>'
+'</div>'));  /*  ○ */

/* after */
/*$('.dtwo').after($('.done')); /*  ○ */
/*$('.dtwo').after('.done'); /*  × */
/*$('<div class="new">class=new1</div>').after($('.done'));  /*  × */
/*$('<div class="new">class=new2</div>').after('.done'); /*  × */
/*$('.done').after($('<div class="new">class=new3</div>')); /*  ○ */
/*$('.done').after('<div class="new">class=new4</div>');  /*  ○ */
/*$('.done').after($('<div class="new">'
+ '<p>class=new5</p>'
+'</div>'));  /*  ○ */

/* wrap */
/*$('.done').wrap($('.dtwo')); /* ○ */
/*$('.done').wrap('.dtwo'); /* ○ */ 
/*$('.done').wrap($('<div class="new">class=new</div>'));  /* ○ */
/*$('.done').wrap('<div class="new">class=new</div>'); /* ○ */

});
</script>
</body>
</html>

表示結果は省略。

上記コードはすべてコメントアウトしてあるが、一行ずつ確認していった結果を各行の右側のコメント欄に○×で記してある。

上記結果から分かることは以下の通り。

  • 新しく作る要素(まだHTML内に挿入していない状態の要素)は、別の要素を挿入するにあたっての基準にはなれないようなので注意が必要(意図した処理にはならない)
  • (逆に、)既にHTML内にある要素を基準にして、新しく作る要素(まだHTML内に挿入していない状態の要素)を挿入することはできる
  • appendTo()メソッド、prependTo()メソッド、wrap()メソッドに関しては、メソッドの括弧()内に指定する要素をjQueryオブジェクト化するための「$()」は、省略しても正しく(意図した通りに)処理される
  • 新しく作る要素(まだHTML内に挿入していない状態の要素)をメソッドの括弧()内に書く場合は、jQueryオブジェクト化するための「$()」を省略しても正しく(意図した通りに)処理される

Webサイト制作におけるjQueryの基本的なメソッド2

前回に引き続き、Webサイト制作のコーディングにおいて用いるjQueryの基本的なメソッドについて、まとめていく。

今回はデザイン面ではなく、コードそのものや表示される内容を変える機能面のメソッドをまとめる。

内容や機能を変更する基本的なメソッド
  • addClass()メソッド:要素にクラス(属性)を指定(付加)する
  • removeClass()メソッド:要素からクラス(属性)を取り除く(削除する)
  • attr()メソッド:要素の属性値を指定した値に変更する
  • empty()メソッド:要素の中身を削除する(指定した要素自体は残る)
  • text()メソッド:要素の中身を指定したテキストに変更する
  • html()メソッド:要素の中身を指定したHTMLに変更する
addClass()メソッドとremoveClass()メソッドの記述例

addClass()メソッドとremoveClass()メソッドの基本的な書き方は以下の通り。

$('#sample').addClass('クラス名');
$('#sample').removeClass('クラス名');

ポイントはメソッドの後の括弧内のシングルクォートで囲まれたクラス名には、スタイルを指定するときに付けるドット「.」は不要ということ。

また、HTMLやCSSとも絡む内容となるが、クラスは1つの要素に複数設定することができる。

以下、HTML内で複数のclass属性を指定する記述例。

<div class="one two three"></div>

クラス名「one」と「two」、「three」の3つが指定(付加)される。
class属性を指定するダブルクォート内で、間に半角スペースを挟むことで区切りが認識される。

以下、jQueryでaddClass()メソッド、removeClass()メソッドを用いて複数のクラスを操作する場合の記述例。

$('#sample').addClass('one two three');
$('#sample').removeClass('one two');

実際に挙動を確認してみる。
以下、確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>addClassメソッドとremoveClassメソッドの確認</title>
<style>
div {
 margin: 10px;
 width: 300px;
}
.one {
 background:#0f0; /* 緑 */
}
.two {
 background:#00f; /* 青 */
}
.three {
 background:#FCF; /* ピンク */
}
.four {
 background:#FF0; /* 黄色 */
}
.tri {
 border: 1px solid #636; /* 紫 */
}
.tetra {
 border: 1px solid #F60; /* オレンジ */
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="first">初期状態:クラス指定なし</div>
<div id="second" class="two">初期状態:クラス「two」</div>
<div id="third" class="three">初期状態:クラス「three」</div>
<div id="fourth" class="four tetra">初期状態:クラス「four」、「tetra」</div>
<script>
$(function(){
 $('#first').addClass('one');
 $('#second').removeClass('two');
 $('#third').addClass('tri');
 $('#fourth').removeClass('four');
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示

removeClass()メソッドに関して、クラス名は削除されているが、「class=""」とあるように、指定していたクラスがすべてなくなってしまっても、クラスを指定していた痕跡は残っているということが分かる。

続きを読む