APIの読み込みなどAPIを利用したスクリプトの構成

広告

Google AJAX Feed APIの他にGoogle Maps APIやGoogle AJAX Search APIなどは現在Google AJAX API フレームワークに組み込まれており、必要なAPIを読み込んで利用するようになっています。ここではGoogle AJAX APIに含まれるAPIを使用する手順を確認します。

1.loadメソッドを使ったAPIの読み込み
2.実行する関数の定義
3.setOnLoadCallbackメソッドを使った関数の呼び出し
4.サンプル

loadメソッドを使ったAPIの読み込み

まずAPIをロードするスクリプトが記述されたJavaScriptファイルを読み込みます。 

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

読み込んだJavaScriptで定義された「google.load」を使い、必要なAPIのモジュールを読み込みます。書式は次の通りです。 

google.load(module, version, package)

1番目の引数にはAPIの名前を指定します。Google Maps APIであれば「maps」、Google AJAX Search APIであれば「search」、そしてGoogle AJAX Feed APIであれば「feeds」となります。

2番目の引数にはAPIのバージョンを指定します。バージョンは安定バージョンを指定する場合は「1」や「2」などを指定するか、リビジョン番号まで含め「1.4」や「2.21」などのように指定します。テストバージョンを使用した場合は「1.x」や「2.x」のようにワイルドカードを使って指定も可能です。 

google.load("feeds", 1)     メジャーバージョンのみ。安定版
google.load("feeds", 1.4)   リビジョン番号まで含めて指定
google.load("feeds", 1.x)   テストバージョンを指定

省略可能な3番目の引数ではオプションを指定可能ですがこちらの解説はここでは省略します。

Google AJAX Feed APIのバージョンは現在「1」ですのでGoogle AJAX Feed APIを読み込むには次のように記述します。 

<script type="text/javascript">
  google.load("feeds", "1");
</script>
実行する関数の定義

次にAPIを使って実行する処理が記述された関数を定義します。 

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

  function initialize(){
    // 実行される処理
  }

</script>

関数名は任意です。

setOnLoadCallbackメソッドを使った関数の呼び出し

最後にこのスクリプトが記述されたページがブラウザなどに読み込まれたときに呼び出される関数として「google.setOnLoadCallback」メソッドを使って登録します。 

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

  function initialize(){
    // 実行される関数
  }

  google.setOnLoadCallback(initialize);
</script>

これでこのスクリプトが記述されたHTMLページなどが読み込まれた時に「initialize」関数が呼び出され、関数の中に記述されたスクリプトが実行されます。後は関数の中でフィードの内容などをWebページに記述する記述を行えば完成となります。今後作成するスクリプトは基本的にこの形となっています。

※ 今後作成するサンプルではAPIを使ったスクリプトを別のファイルに保存し、Webページから読み込みでいます。

サンプル

それでは簡単なサンプルで試してみます。 

<!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>Google AJAX Feed API テスト</title>

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

</head>
<body>

<p>Google AJAX Feed API テスト</p>

</body>
</html>

google.load("feeds", "1");

function initialize() {
  alert("OK");
}

google.setOnLoadCallback(initialize);

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

p1-1

ページが読み込まれた時にsetOnLoadCallbackメソッドで登録された関数が呼び出されることが確認できました。では次のページ以降で呼び出される関数の中でGoogle AJAX Feed APIを使った処理を記述していきます。

( Written by Tatsuo Ikura )