jQueryをGoogle Developersから読込む方法

jquery

jQueryライブラリやjQueryCSSをダウンロードして読み込む方法だと、ライブラリの管理も大変になります。
GitやSVNで管理していても、誰かが間違ってjQuery本体をコミットしたら、残念ながら動かなくなります。
せっかくGoogleがライブラリを提供してくれているので、我々デベロッパは楽をさせてもらいましょう。
というわけで、今回は「Google Developers」の使い方を解説していきます。

[スポンサーリンク]

この章でやること

「Google Developers」から以下の3点を読込みます。

  • jquery.min.js
  • jquery-ui.min.js
  • jquery-ui.css

Google Developersのライブラリ指定方法

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>sample</title>

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

<!-- スクリプト部分 -->
<script type="text/javascript">
    $(function() {
        $( "#accordion" ).accordion();
    });
</script>

</head>


<!-- HTML部分 -->
<body>

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    list1.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    list2.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    list3.
    </p>
  </div>
</div>

</body>
</html>

解説

htmlソースの7行目を見て下さい。通常はローカルを向いていますが、ここでは向き先(ホスト)をgoogleとしています。これでgoogleが管理するライブラリを読み込めるようになりました。

実行結果

上記ソースをブラウザで開いて、アコーディオンが動けばOKです。
jquery-google

jQueryのバージョン情報を見てみよう

上記のソースでは、バージョンを「1.9.2」にしましたが、バージョンを変更することも出来ます。
どのバージョンが用意されているか、以下から確認することが出来ます。

まずは、以下URLから「Google Developers」へアクセスします。

jquery-google2
jquery-google3

CSSのバージョン情報は??

「Google Developers」を見てCSSのバージョンが無いことに気付きましたか?
私は最初jsファイルのみが管理されていて、CSSは自前で用意する必要があるのかと思いました。

CSSは「code.jquery.com」(jquery本家)で管理されているようです。これ早目に気付いてよかったです。ほんとに。
なんと、jQueryの本家サイトに書かれていました。(当然ですよね。。)

まずは、以下URLからjQuery本家へアクセスします。

画面一番下の方にcssもありますね。
これは少し分かりにくかったです。。
jquery-google4

さいごに

jQueryライブラリをGitやSVNで管理しているプロジェクトをよくみかけますが、よほどの理由がない限りは、「Google Developers」を使うことをオススメします。
今まで「Google Developers」の存在を知らなくて使っていなかった方は是非使ってみて下さい。
ライブラリのバージョン管理って本当余計な体力を使いますし、ライブラリが増えてきたら結構大変なんですよね。。