最近は、ネットの情報などの増加のおかげか、Webデザイナーでなくても、独学で自分のWebサイト(ブログのデザインなど含め)を作ってしまう人が増えている気がします。

たいてい誰でも、HTMLとCSSを覚えて、コツコツとページを作っていくわけですが、少し慣れてくると「もうちょっとこだわって、動きをつけてみたい」「見栄えのいい装飾がほしい」と思ったりします。

そんなとき、手軽に使えておすすめなのがjQueryです。


はじめに

今のところ、jQueryの入門と言っても、Webデザイナーやプログラマー向けの「入門」が多いのではないでしょうか。

仕事でこれからもずっとjQueryを使っていく方なら、基本から地道に勉強したほうがいいと思いますが、半分趣味のような自分のサイトに、ちょっとだけ動きを取り入れるために「とりあえずjQueryを使ってみたい」…と思っている方もいるだろうということで、書いてみました。

ちなみに、僕自身がそんな感じで、まともに勉強せず、必要なところだけかじりながら覚えたので、所詮その程度しか書けないとも言えます(笑)

Webの仕組み(サーバーとか)、HTML/CSSなどについては、ある程度理解している、という前提で説明していきますので、そのあたりはまた別のところで、勉強してから読まれることをお勧めします。

JavaScriptとjQueryの基本

Webで動く仕掛けをつけるというと、JavaScriptが浮かんだ方もいるかも知れません。
結局のところ、jQueryもJavaScriptなのですが、いったいどういうこと?

JavaScript自体が初めての方のために、簡単に説明します。

JavaScriptとは

HTMLとCSSだけで書かれたサイトの場合、ブラウザに読み込まれた時点で処理は終わりです。では、ブラウザに読み込まれたあと、何かしらの処理をしたい場合は?
そんなときに役立つのがJavaScriptです。

わかりやすく言えば、「画像Aを右に動かす」とか「ボックスBを消す」などの処理を、ブラウザの再読み込みをすることなく、実行することができます。

ということは、JavaScriptでも、いろいろな動きをつけることができるので、いいじゃないかと思いますね。しかし、実用を考えていくと、とても複雑なコードになってしまうことが多く、扱いが難しいようです(実際のところ、僕もJavaScriptについてはよくわかってません)。

Flashは?

Webページ上で動きを表現する時、JavaScript以外にもFlashという技術が使われることがあります。

Flashは、Adobeが開発した技術で、ダイナミックな動きのある表現ができます。
その反面、編集には専用ソフトが必要だったり、JavaScriptよりも対応ブラウザが少なくなったり、ページが重くなったりと、いろいろな問題を抱えています。
そのため、AppleがiPadやiPhoneで対応を打ち切るなどの動きもあります。Flashは一部を除き、徐々に衰退し、JavaScriptに置き換えられる、という傾向にあるようです。

jQueryとは

そんな問題を解決するのがjQuery。
jQueryというのは、JavaScriptライブラリと呼ばれるもののひとつで、JavaScriptとは別の、簡単な書き方で同じ処理を実行できるように作られています。

例えば、画像Aを「ふわっと表示」したい場合。

JavaScriptそのままだと、各ブラウザに対応した処理を考え、ずらずらと数十行のコードを書かなければいけません。

jQueryを使うと、こんな感じ。

$(function() {
	$('img.a').fadeIn("slow");
});

使っているコードも簡単です。
画像A(img.a)やフェードイン(=fadeIn=ふわっと表示)が読み取れれば、なんとなく意味がわかるのではないでしょうか?

サンプル

上記のコードとは少し違う書き方ですが二行ほどの追加で、ボタンを押すと画像が表示されたり、隠れたりするようにしてみました。

数十行のコードと同じようなことが、jQueryだと数行で済むわけです。
jQueryは、簡単な記述を、難しいJavaScript用に置き換えてくれる、変換器のようなものだと思えばわかりやすいでしょう。

jQueryはこのCSSのような、直感的な書き方などにより、今もっとも人気のJavaScriptライブラリです。今回はコードを書かない即席入門ですが、後々使いこなすとしたら、簡単にできて、情報も多いjQueryを覚えておくのがいいのではないでしょうか。

jQueryプラグインとは

さて、jQueryがいくら簡単とはいえ、自力で書くとなったら、jQuery用のコードを勉強しなくてはいけませんね。しかし、この記事の趣旨は“とりあえず使いたい”ですので、もっと簡単にjQueryを使う方法を紹介します。

その方法が、jQueryプラグインです。

最近Webでよく見る表現、例えば…

  • 画像のスライドショー(このサイトのトップページ
  • 拡大画像を、画面上にポップアップ(クリック
  • ページの先頭に戻るときの、スムーズスクロール(このBlogの右下、Back to Top)

このようなものを、自分のサイトに取り入れたい場合、自分で全部書くのは大変ですが、jQueryのプラグインで簡単に揃えることができます。

jQueryのプラグインというのは、jQueryの基本機能を組み合わせて、上記のような複雑な動作を完成させた状態のコードです。完成品なので、いくつかのファイルを読み込んで、少し設定するだけでその機能を追加することができます。

また、jQueryは多くのユーザーがいるので、上にあげたもの以外にも、さまざまな機能を実現するプラグインが、山のようにあります。特殊な使い方や、完全オリジナルにこだわるのでなければ、たいていの事は、プラグインで出来ると思います。

スライドショーのプラグインを設置してみる

では、さっそく、サイトにjQueryを取り入れるということで、実際にプラグインを設置してみましょう。

今回は、写真がふわっと切り替わっていくスライドショーを作ってみます。

完成サンプル

完成形は、こんな感じです。
手順どおりに進めれば簡単ですので、はりきっていきましょう:-)

使用プラグイン:jQuery crossFader

プラグインは海外の物が多いのですが、今回は、小窓屋さんから、わかりやすい日本語解説付きで公開されている、jQuery crossFaderを使ってみることにします。

URLhttp://www.komadoya.com/mt/mt-tb.cgi/57
本家デモページhttp://lab.komadoya.com/javascript/crossFader/
ライセンスMIT

設置方法は、本家サイトでかなり丁寧に解説されているので、慣れた人には説明不要ですが、はじめて挑戦する人のために、設定の意味などをもう少し詳しく解説していきます。
なお、ここでは詳しく書かなかったこともありますので、本家サイトも合わせてご覧になることをお勧めします。

また、設置するページの、スライドショー部分以外のHTML/CSSはあらかじめ用意しておいてください。

1.ファイルをダウンロードしてサーバに設置

まず、小窓屋さんの解説ページに行きダウンロードボタンをクリック。

zipファイルを解凍して、フォルダを開きます。現在のバージョン(0.2)のファイル構成はこんな感じです。

この中のcrossFader.cssjquery.crossFader.jsを、サーバーにアップロードします。場所はリンクできればどこでもいいですが、一番上の階層や、スライドショーを設置したいページと同じ階層に置いておくのがわかりやすいと思います。

画像の準備

スライドショーに使用する画像も、あらかじめアップロードしておきます。
画像の枚数は、とくに制限はないはずです(あまり多いとページが重くなりますが)。

実際に使用する場合は、画像の縦・横サイズをすべて揃えます

crossFader.cssの修正

crossFader.cssに、以下のような記述があります。

.crossfader{
	position:relative;
	height:340px;
}

heightは、画像の高さが指定されているので、画像サイズが違う場合は修正します。

2.HTMLのヘッダでjQueryなどを読み込む

HTMLの<head>〜</head>の間にコードを追加します。

1.jQuery本体の読み込み

JavaScriptの外部ファイルは<script>タグで読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

これは、Google Libraries APIを使って、jQueryを読み込む方法です。

この一行で、jQueryの読み込みが出来てしまうので簡単です。また、Googleのサーバーを使うので、すこし高速化されるそうです。

Google Libraries APIの詳しい仕様が知りたい方は、検索してみてください。

<script type="text/javascript" src="jQueryのパス"></script>

自分のサーバーに置きたい場合は、公式サイトからダウンロードしたjQueryをアップロードして、srcにjQueryのパスを書きます。

2.jquery.crossFader.jsの読み込み

<script type="text/javascript" src="jquery.crossFader.jsのパス"></script>

同じように<script>タグを使って、先ほどアップロードしたjquery.crossFader.jsを読み込みます。

3.CSSの読み込み

<link rel="stylesheet" type="text/css" href="crossFader.cssのパス" /> 

<link>タグでcrossFader.cssを読み込みます。

<head>内の記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="jquery.crossFader.js"></script>
<link rel="stylesheet" type="text/css" href="crossFader.css" />

上記をすべてまとめた記述例です。
jQueryは、jquery.crossFader.jsよりも先に記述してください。

3.スライドショー部分のHTMLを追加

スライドショーを表示したい場所にHTMLタグを追加します。

<div id="slideshow" class="crossfader">
	<img src="img1.jpg" alt="" class="active" />
	<img src="img2.jpg" alt="" />
	<img src="img3.jpg" alt="" />
	<img src="img4.jpg" alt="" />
</div>

ここでのポイントは2つです。

divのIDとClass

IDは、任意のもので構いません。今回は、slideshowにしました。
スライドショーを実行する時にこのIDを指定します。

Classには、crossfaderを指定してください。crossFader.cssを読めばわかりますが、スライドショーのためのスタイルが、このClassで指定されているので、間違っているとうまく表示されません。

<img>タグ

画像は<img>タグを使って、普通に記述してください。
通常は書いた順番で、スライドショーが再生されます。

また、JavaScriptが動かない環境で見たときは、スライドショーが動かないので、表示したい画像を1枚選んで、activeというClassをつけておいてください。

4.スライドショー機能を有効にする

ここまで来れば、準備は整ったはずです。
最後に、<head>〜</head>の間に簡単なスクリプトを追加することで、スライドショーの機能が有効になります。

<script type="text/javascript">
	$(function(){
		$('#slideshow').crossFader();
	});
</script>

このスクリプトは「#slideshowにcrossFaderの機能(スライドショー)を適用してください」という命令をしています。#slideshowの部分は、先ほどdivに指定したIDが入ります。#はCSSのIDセレクタと同じ書き方ですね。

できたらページを読み込んでみてください。ちゃんと動いていれば成功です!

5.オプションを設定してみる

jQueryのプラグインには、動作を変更できるオプションが用意されていることがあります。jquery.crossFader.jsにもオプションがありますので、設定してみましょう。

<script type="text/javascript">
	$(function(){
		$('#slideshow').crossFader({
			timer: 3000,
			 speed: 1000,
			 changeSpd: 400,
			 random: true,
			 loop: false
		});
	});
</script>

これは、手順4で書いたスクリプトに、オプション用の記述を追加したところです。
ここではすべてのオプションを変更していますが、変更する必要のないものは、削除してしまってもかまいません。

オプションの説明

本家の解説から引用させてもらいました。

オプション項目 デフォルト値 内容
timer 6000 切替までの待機時間 [単位:ミリ秒]
speed 1500 遷移速度(待機時間timer経過時) [単位:ミリ秒]
changeSpd 800 遷移速度(画像クリック時) [単位:ミリ秒]
random false 画像をランダム表示する(true) or しない(false)
loop true ループ表示する(true) or しない(false)

※ミリ秒は、1/1000秒のことなので、3秒なら3000と記述します。

例えば、ランダム再生で画像の切替を3秒ごとにしたい場合は、このように設定します。

<script type="text/javascript">
	$(function(){
		$('#slideshow').crossFader({
			timer: 3000,
			random: true
		});
	});
</script>

1つのオプションごとに、カンマ(,)で区切りますが、最後の1つには付けませんので、注意してください。

実際に設定を変更すると、どうなるかは、本家のデモページで確認してみてください。

他のプラグインも使ってみよう!

さて、うまく設置できたでしょうか?
スライドショーがうまくいったら、ぜひ他のプラグインも挑戦してみてください。

他のプラグインの場合でも、作者の説明や、動作サンプルが一緒に配布されていますので、その通りにコードを書いていけば、動くはずです。また、人気のプラグインでは、日本のブログで設置方法を解説してくれていたりするので、わからないときは検索してみましょう。

というわけで、最後にjQueryプラグインを探すときにおすすめなサイトを紹介します。

 jQueryプラグイン紹介サイト

コリス

情報量が多い。100個まとめてなど大量に紹介されている記事を読むと、こんな事も出来るのか!という発見があったり。
jQueryに限らずWeb制作に役立つ情報が沢山。

かちびと.net

ここも情報量が多い。ちょっと変わったものも紹介される。
解説もわかりやすい。

PHP & JavaScript Room

一覧の中のjQuery pluginより。すべて動作サンプル付き。
ジャンル分けもしてあって探しやすい。

あとは、Googleで「jquery スライドショー」 のように欲しい機能で検索すると、たくさんのブログ記事が出てくるので、じっくり選んでみてください。

プラグイン選びのポイント

ついでに、プラグインを探すとき、気をつけていることも書いておきます。苦労して設置してから、使えないことがわかると悲しいので、試す前に確認してみましょう。

ライセンス

たいていのプラグインはMITなどのフリーライセンスがついていますが、そうでないものもあるので気をつけてください。

動作ブラウザ

特にIE6の対応を考えているなら、動作するブラウザを確認しておいたほうがいいです。

ファイルサイズ

読み込むスクリプトや画像などのサイズが大きいと、読み込みが遅くなるので、気になる方は、もっと軽くて同じ機能のものがないか探してみましょう。

記述方法

簡単に設置できるもののほうが良いので、設置の仕方をよく読んで、理解できるか確認しましょう。また、指定のHTML/CSSの記述を入れないと動作しないというものもあるので、記述方法にこだわりがある場合(CSSハックは使わないとか)も注意が必要です。

おわりに

最後まで、お読みいただきありがとうございました。

やはり自分でわかっていても人に説明するのは難しいですね。なんか、余計にわかりずらくなってしまった気もします。

解説の内容に関しては、分りやすくするため、あえて正確性を欠いている部分があります。また、知識不足による間違いもあるかもしれません。
自分のサイトで試す場合は、あくまでも自己責任ということでお願いします(もっとも、それほど困った事にはならないと思いますが)。

また、問題点に気づいた方はご指摘いただければ幸いです。