jQueryやUI、PrototypeなどのライブラリーをGoogleライブラリAPIから読み込む方法

日々アップデートを続けるjQueryのコアファイルやjQueryUIを使用するときにダウンロードし直すのが面倒くさくなってきたのでGoogleCodeから一気に読み込む方法を備忘録として紹介。

結論から言うとjqueryとjqueryUIを読み込むパスは以下をhtmlのhead内に記述すればおk。

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css"/><!-- jquery UI のcss-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><!-- jquery　本体-->
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script><!-- jquery-UI　本体-->

jQueryUIがすっごい便利で、けっこう使うのですがjQueryUIを公式からダウンロードして使おうと思うと、大量のjsファイルのなかから自分がやりたいことと一致するjsを選ぶのが結構面倒。しかもjsをhtml内に読み込むだけでhead内が結構な行数になるのがいや。
つーわけでサクッとGoogleCodeから直URLを引っ張ってくる方法です。
Googleから読み込んだDemo

GoogleライブラリからjQueryをさがす

GoogleライブラリAPI
ここの一覧から該当するjsライブラリを選択すれば下記のように簡単にjsのURLがわかります。jQueryUIのjsも同様にココにパスがあります。カスタマイズしなければminがついてるほうでおk。

■jQueryとjQery-UIのjs(minではないもの)

https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js

バージョンを変更したい場合はパスの数字部分を使用したいバージョンに変更するだけでオKです。

jQueryUIで用意されているスタイルを使用する

jQueryUIを利用してUI widgets(用意されているスタイル)を使用する場合には専用のcssも読み込まないと正しく表示されないので注意して下さい。

jqueryUIのcss直リンURL

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/[テーマ名]/jquery-ui.css

テーマ名は後述

cssはテーマによってディレクトリの名前が違います。上記URLにテーマ名を入れるとcssを正しく読み込めます。

jQuery-UI var.1.8.12で使用できるテーマ
base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness,vader.

また、自分でカスタマイズしたい場合には下記のページからをカスタマイズして下さい。テーマ事のデザイン確認も下記で参照できます
jQueryテーマカスタマイズ

もっとわかりやすいのないの？

Googlecode便利ですが、わかりにくりというかたには下記にライブラリのまとめが非常にわかりやすく載ってるので便利です。
http://scriptsrc.net/