jQueryの利用

jQueryの概要やダウンロード方法、jQuery UIの使い方、プラグインの活用方法等について説明したページです。

jQueryの概要

 jQueryはJavaScriptのライブラリーです。

 プログラムはサーバー側で動作するものとパソコン側で動作するものがありますが、JavaScriptはパソコン側で動作するプログラムです。このため、サーバー側にデータを保存する等の処理は出来ませんが、サーバー側でCGI等が動作しない場合でもパソコンで処理可能なプログラムを動作させる事が出来ます。

 ライブラリーとは一定の処理を手軽に使えるようにしたプログラムです。全てのプログラムを一から作ると大変ですが、ライブラリーを使う事で一部作成の手間を省けます。又、通常は自分で作るよりもライブラリーを使った方が見た目やプログラムの作りが洗練されています。

 例えば以下のようなスライダーを貼り付けるだけで作る事が出来ます。

マスターボリューム

ミキサー

88 77 55 33 40 45 70

 jQueryはMIT Lisenceというライセンスを採用していて、自由にダウンロードして無料で利用出来ます。

jQueryのダウンロード

 jQueryのダウンロードは「jQuert」からDownloadを選択して行います。

jQueryの利用1

 1.x系と2.x系があり、どちらかをダウンロードしますが、2.x系はInternet Explorer6、7、8に対応していません。又、compressedとuncompressedがありますが、動作が同じでcompressedの方がファイルサイズが小さくなっています。

 通常は赤枠で囲った部分を右クリックして保存します。保存した後はサーバーのJavaScriptを配置するディレクトリにアップロードすると使えるようになります。

jQuery UIのダウンロード

 jQueryは単体でも使えますが、ライブラリーを理解して使う必要があるため、簡単には使いこなせません。このため、ボタンやスライダー等のインターフェースを簡単に見栄え良くするためにはjQuery UIが便利です。

 jQuery UIはjQueryのサイトで以下の赤枠部分をクリックします。

jQueryの利用2

 jQuery UIのサイトに行くため、Downloadを選択します。

jQueryの利用3

 次の画面ではそのまま一番下の「Download」をクリックして保存します。

jQueryの利用4

 保存したファイルはzip形式で圧縮されているため解凍が必要です。

 解凍したファイルの中には以下が含まれています。

・css\ui-lightness\jquery-ui-1.x.x.custom.min.css
 スタイルシートです。サーバーのスタイルシートを配置するディレクトリにアップロードします。
・css\ui-lightness\imagesフォルダ
 jQuery UIで使うイメージが保存されたフォルダです。なくても動作しますが、アイコン等で表示されると見栄えが良いためサーバーのスタイルシートを配置するディレクトリにフォルダ毎アップロードします。つまり、サーバーのスタイルシートを配置するディレクトリにimagesディレクトリが出来、そのディレクトリにイメージが保存される事になります。
・js\jquery-ui-1.x.x.custom.min.js
 jQuery UIのJavaScriptです。サーバーのJavaScriptを配置するディレクトリにアップロードします。

jQuery、及びjQuery UIのHTMLへの読み込み

 アップロードしたjQuery、及びjQuery UIを利用するためにはHTMLの<head>と</head>の間に以下のように記述します。

【jQuery、及びjQuery UIのHTMLへの読み込み例】
<link rel="stylesheet" href="css/jquery-ui-1.x.x.custom.min.css" />
<script src="js/jquery-1.x.x.min.js"></script>
<script src="js/jquery-ui-1.x.x.custom.min.js"></script>

 1行目はjQuery UIでダウンロードしたCSSファイルの読み込みです。

 2行目はダウンロードしたjQuery本体スクリプトの読み込みです。

 3行目はjQuery UIでダウンロードしたスクリプトの読み込みです。

 赤字部分はアップロードしたディレクトリやファイル名に合わせて変更して下さい。

 尚、既に自分で作成したスタイルシートを読み込ませるようにしている場合でも上記のスタイルシートを追加で読み込ませる事が出来ます。スタイルシートはスタイルシートの定義方法の「外部ファイルでのスタイルシートの適用」で説明した通り、複数指定が可能です。

jQuery UIの使い方

 jQuery UIを実際に利用するためには利用するインターフェース毎にスクリプトの配置が必要です。

 例として以下のスライダーを配置する場合について説明します。

 上記を配置するためのスクリプトとして<head>と</head>の間に以下の記述を追加します。

【スライダーを追加するためのスクリプト例(jQuery UIから引用)】
<script>
$(function() {
$( "#slider" ).slider();
});
</script>

 又、<body>と</body>の間で実際にスライダーを配置する部分に<div id="slider"></div>と記述すると記述した部分にスライダーが表示されます。

 jQuery UIのサイトでは「Demos」を選択すると沢山の例が載っているため実際に動かして確認出来ます。

jQueryの利用5

 赤枠部分がデモですが、緑枠部分をクリックするとデモと同じように動作させるためのソースを確認出来ます。

jQueryの利用6

 確認出来るソースでは<link rel=や<script src=部分がjQueryのサイトになっているため、「jQuery、及びjQuery UIのHTMLへの読み込み」で示した設定にして下さい。

 デモを見て使いたいUIのソースを確認しhtmlに張り付け、「jQuery、及びjQuery UIのHTMLへの読み込み」で示した部分を書き換えるといった手順で動作すると思います。

 今回はjQuery UIをダウンロードする時にUI lightnessを選択したままで行いましたが、UI darkness等様々なテーマを選択出来、選択したテーマで色合い等が変わってきます。

jQueryの利用7

 テーマを変更した場合はダウンロードして解凍した時に、スタイルシートは緑枠で示したフォルダに保存されるようになります。このため、ui-lightnessフォルダではなくこのフォルダ配下のjquery-ui-1.x.x.custom.min.cssをサーバーにアップロードする必要があります。

プラグインの活用

 jQueryには多くのプラグインが公開されており、「jQuery」で赤枠部分を選択すると参照、ダウンロード出来ます。

jQueryの利用8

 又、これ以外にも多数のプラグインが公開されているため、これらを利用する事でJavaScriptが分からなくてもホームページの見た目や利便性を高める事が出来ます。

サイト関連1

jQueryプラグインの使い方
jQueryプラグイン「CompareWYWの使い方
jQueryプラグイン「Colorboxの使い方
jQueryプラグイン「Nivo Sliderの使い方
jQueryプラグイン「DataTablesの使い方
jQueryプラグイン「SuperScrollorama
jQueryプラグイン「ScrollMagicの使い方
  • このエントリーをはてなブックマークに追加