Google Libraries APIを使う

広告

前のページでGoogleやMicrosoftがCDNにて用意しているjQueryファイルを読み込んで使う方法について記述しましたが、Googleの場合はGoogle Libraries APIとして様々なJavaScriptライブラリを読み込むことができる仕組みが用意されています。

p3-3

Google Libraries APIを使用する場合、jQueryファイルを読み込むには2つの方法が用意されています

1つ目は前のページで見たように読み込みたいjQueryファイルのフルパスを指定して読み込む方法。そしてもう1つは google.load() を使い、読み込みたいJavaScriptライブラリのモジュール名とバージョンを指定して読み込む方法です。

ではgoogle.load()を使って読み込む方法を確認します。まず最初に下記のように読み込みます。 

<script type="text/javascript"
 src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>

ここで「INSERT-YOUR-KEY」と書かれている部分にはご自身のAPIキーを指定します。ただ、jQueryファイルを読み込む場合はAPIキーは省略することができますので単に次のように記述できます。 

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

次に google.load を使ってjQueryファイルを読み込みます。 

<script type="text/javascript">
google.load("jquery", "1.5.1");
</script>

構文は google.load(モジュール名, バージョン) となっています。jQueryを読み込む場合にはモジュール名に「jquery」を指定して下さい。またバージョンには読み込むjQueryのバージョンを指定します。

この形式の便利な点は、バージョンの指定を細かく指定せずに最新のバージョンを使うように指定できる点です。例えば次のように記述すると、jQuery1.5.xの最新バージョンを読み込みます。 

<script type="text/javascript">
google.load("jquery", "1.5");
</script>

同じく次のように記述するとjQuery1.x.yの最新バージョンを読み込みます。 

<script type="text/javascript">
google.load("jquery", "1");
</script>

特定のバージョンではなく最新のバージョンを自動で読み込ませたい場合にはこの記述方法が便利です。

なおこの記述方法を使う場合の注意点としてjQueryファイルが完全に読み込まれた後にJavaScriptスクリプトが実行されるように google.setOnLoadCallback を使用して下さい。 

<script type="text/javascript">
google.load("jquery", "1");
google.setOnLoadCallback(function() {
  $(function() {
    // 実行するスクリプト
  });
});
</script>
サンプル

では簡単なサンプルを作成して試して見ます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>jQueryテスト</title>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("jquery", "1.5.1");
google.setOnLoadCallback(function() {
  $(function() {
    $("p").click(function(){
      alert("Hello!");
    });
  });
});

</script>

</head>
<body>
  <p>Hello!</p>
</body>
</html>

上記を実際にブラウザ見てみると次のように表示されます。

p3-1

「Hello!」と書かれた部分をクリックすると次のようにダイアログが表示されます。

p3-2

実行結果は今までのサンプルと同じです。

( Written by Tatsuo Ikura )