webのお仕事でご活躍されているみなさま、これからwebのお仕事でキャリアデビューしたい!という方にも少しでも役立てていただけますように、jQueryの導入アプローチから、現場で人気のプラグインなどをご紹介していきます。
ところでjQueryってなんだっけ?
「jQuery」という言葉は、webのお仕事経験のある方、興味のある方なら一度は聞いたことがあると思います。
でも、「jQueryとは?」と聞かれると返答に困ったことがある(聞かれたことないけど、聞かれたら正確には返答できない)のは私だけじゃないハズ(きっと)。
何度かコピペとかして使ったこともあるし、jQueryってアレでしょ?
画像をスライドして動かしたり、いろいろ出来るあれだよね?
そんな感じの方だっているハズだ。
・・・と信じて、まずはjQueryとは何なのか、(すごーく)簡単な説明をしておきたいと思います。
とってもざっくり言いますと、jQueryはjavascriptのライブラリの1つです。
*ライブラリとは、いくつものプログラムを簡素化してまとめて使えるようにしたものです。
javascriptのライブラリであるjQueryを使えば、難しいコードを書くこと無くjavascriptを実行できるよ!という何とも親切なものなのです♪
デザインは好きだし、htmlやCSSは何とか出来るけれどjavascriptは手が出せない。という方にもおすすめです。
html5やCSS3でも様々な動きや表現ができるようにはなってきましたが、もっとリッチな表現をしたい。という時に、jQueryを使うことでカンタンに実現できるのです。
クロスブラウザ対応を意識せずに使える、というところも特徴です。
(IE6以上、Chrome、Firefox、Safari 5.1以上、Opera ver12.xと現行の最新verより1つ前まで、iOS 6.1以上、Android 2.3/4.0以上など、主要なブラウザーをサポート)
クロスブラウザ対応については少しだけ注意が必要で、jQueryにもバージョンが存在します。
ver1.xxはIE6にも対応していますが、ver2.xxはIE9以降にしか対応していません。
webのお仕事現場では、事実上jQuery1.xしか使用できない、といっても過言ではないかも・・・。
ちなみに、javascriptのライブラリは、jQueryだけではありません。
(詳しくはここでは省略します。)
しかし、javascriptライブラリの使用統計で、インターネット全体の35%ものサイトでjQueryが使用されている。
というデータがあるほど、浸透していることがうかがえます。
難しそうだから、と使用していなかった方も、javascriptそのものに挫折したことのある方も、この機会にぜひ取り入れてみてくださいね。
*もっと詳しくjQueryとは何なのかを知りたい方はコチラ↓
http://ja.wikipedia.org/wiki/JQuery
jQueryを使おう!まずは何をしたらいいの?
さあ!今からjQueryを使ってリッチなデザインにしちゃうぞ~。という前に。
ちょっとだけ準備が必要です。
jQueryを動かすには「本体」と「プラグイン」が必要となります。
まずは「本体」をjQuery本家からダウンロードしておきましょう。
http://jquery.com/download/
jQuery1.xの項目から右ボタンクリックでダウンロードして下さい。
そしてjQueryを実装させたいhtmlのheadに以下のように記述しておきます。
<head> <script src='js/jquery.js'></script> </head>
*パスはjQuery本体を格納している階層に合わせて適宜変更してくださいね。
*scriptの記述はhtml5で紹介しています。
次に、表現したい「動き」をしてくれるプログラム部分の「プラグイン」を読み込みます。
世界中の開発者が非常に多くのプラグインをオープンソースとして公開してくれていますので
まずはそれらをダウンロードして使用してみると良いと思います♪
ダウンロードしたjsファイル(プラグイン)もjQuery本体と同じようにheadに記述して読み込みます。
<head> <script src='js/jquery.js'></script> /* jQuery本体 */ <script src='js/sample-plugin.js'></script> /* プラグイン */ </head>
あとは、少しだけjavascriptのコードを追記しないといけない場合が多いようです。
(例)画像スライダーのプラグインの場合↓
<head> <script src='js/jquery.js'></script> /* jQuery本体 */ <script src='js/slider-plugin.js'></script> /* プラグイン */ <script> /* プラグインの表示や動きなどの細かい設定(カスタマイズ) */ $(window).load(function() { $('#slider').nivoSlider({ controlNav : true, /* ページャーを表示 */ controlNavThumbs : true, /* ページャーにサムネイルを使用 */ controlNavThumbsFromRel : true /* rel 属性にサムネイルのパス */ )}; )}; </script> </head>
オープンソースのプラグインをそっくりそのままデフォルトで使う場合は、javascriptのコード部分も必要なく動くものもあります。
ですが、思った通りのデザインや動きのプラグインもなかなか無いもの。
「えー!javascript苦手でもjQueryならおすすめって言ったじゃん!」
と思われた方もいらっしゃると思いますが、
CSSがわかれば十分に理解できる程度のコードとなっていることが殆どですし、
プラグインを配布してくれている開発者さんが、カスタマイズごとの動きとそのコードを説明・記述してくれているケースも多くありますので安心してくださいね!
上記の(例)で記述しているスライダープラグインのコードをみると #slider と、htmlやCSSでも使う「#」でIDを振られていることがわかると思います。
そうです。なんとなく感づきましたか?
実際に表示する部分のdivなどにこのIDを付けることで、プラグインと紐づいてくれる仕組みです。(すべてのプラグインがそうだ、ということではありませんが・・・。)
(例)htmlのスライダーを表示させる部分↓
<div id="slider"> <a href="#"><img src="images/image01.jpg" /></a> <a href="#"><img src="images/image02.jpg" /></a> <a href="#"><img src="images/image03.jpg" /></a> </div>
★jQueryのプラグインを使うときの流れをおさらい
(1)jQuery本体を本家からDLする
(2)jQuery本体をhtmlのheadに記述して読み込む
(3)使いたいプラグインをダウンロード
(4)プラグインもjQuery本体と同じようにheadに記述して読み込む
(5)プラグインの内容に合わせてhtmlやCSSを書く
次回は、現場で使えるおすすめのjQueryプラグインをご紹介します(^0^)/お楽しみに!