1. まとめトップ

Google AJAX Feed APIの使い方まとめ

初心者のために「Google AJAX Feed API」の使い方を分かりやすくまとめています。

更新日: 2013年05月28日

3 お気に入り 12145 view
お気に入り追加

この記事は私がまとめました

Google AJAX Feed APIとは?

他のサイトが配信している「RSS」や「Atom」フィードをJavaScriptを使って取得しようとした場合、クロス・ドメイン制約によって直接他のサーバにあるデータへアクセスできずサーバ側でいったんフィードを受信するなどの処理が必要となる。
Google AJAX Feed APIを使用すると、Googleがフィードのキャッシュとしての役割を果たしてくれるため、サーバ側のプログラムを必要とせず、クライアント側のスクリプトだけで各種フィードを取得することが出来ます。
Google AJAX Feed APIとはGoogleが公開しているAPIで、このAPIを利用することでGoogleがフィードのキャッシュとしての役割を果たしてくれるため、サーバ側のプログラムを必要とせず、クライアント側のスクリプトだけで「RSS」や「Atom」などの各種フィードを取得することが出来る。

※クロス・ドメイン制約とはJavaScriptでWebサーバへHTTPリクエストを送信するときに、HTMファイルが置かれているドメインのサーバとしか通信することができないという、セキュリティ上の仕様である。

Google AJAX Feed APIサイト

利用方法

①Google AJAX Feed APIサイトの左メニューにある「Feed API」メニューをクリックし、さらに「Developer's Guide」メニューをクリックする。
②「The "Hello World" of Feed」リンクをクリックする。
③サンプルテキストに移動するのでサンプルをコピペする。
④new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");のURLを取得したアドレスへ変更する。
⑤サーバーへアップしてアクセスする。
⑥取得できれば完了。

サンプルソース

<html>
<head>

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

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

function initialize() {
var feed = new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);

</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>

ポイント

【①】
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
-----------------------------------------------------------------------------------
Google AJAX APIを利用するためのライブラリを読み込む

**********************************************************

【②】
google.load("feeds", "1");
-------------------------------------------------------------------------------
Google API を使う時にAPIをロードするためのgoogle.load()を利用する。

google.load(moduleName, moduleVersion [, optionalSettings])
google.load()の引数で渡すのは3つ。[]はオプション。

moduleName
API名。maps, search, feeds, など

moduleVersion
APIモジュールのバージョン。
新しいAPIリビジョン、たとえば2.24が導入されると、前のリビジョン2.23がAPIの安定バージョンになります。
バージョン2.24はテストバージョンです。
リビジョンを指定せずにAPIのバージョン2をリクエストすると、自動的にAPIの安定リビジョン(2.23)が渡されます。
APIのテストバージョンを入手するには、明示的にバージョン2.24をリクエストします。
常にAPIのテストバージョンを指す特別なワイルドカード2.xを使うこともできます。

optionalSetting
省略可能な構成オプション。オブジェクトリテラルで記述。{"language" : "ja_JP"} など。
[可能なオプション例]
・callback : ロード後に呼び出す関数。
・language : APIやUIコントロールをローカライズする言語。ISO639言語コードで指定。
・nocss : デフォルトのCSSをロードするかどうか。trueでロードしない。
・nooldnames : 古い名前空間(GSearch, GSearchControlなど)ロードしない場合はtrueを指定。
・packages : コアAPIと一緒に読み込む関連パッケージを指定。
・base_domain : APIの基本ドメイン。(ex.) Maps APIの中国版は ditu.google.cn を指定。
・other_params : API特有のオプションを指定。

**********************************************************

【③】
google.setOnLoadCallback(initialize);
-----------------------------------------------------------------------------
API利用時の初期化処理は、googleオブジェクトの「setOnLoadCallback」というメソッドを利用する。

google.setOnLoadCallback( 関数リテラル );

**********************************************************

【④】
var feed = new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");
------------------------------------------------------------------------------------------
フィードを取得するにはgoogle.feeds.Feedクラスを利用する。

google.feeds.Feed(url)
引数には取得したフィードのURLを指定する。

**********************************************************

■feedプロパティ
---------------------------
feed
feedUrl
title
link
description
author
entries[]
mediaGroup
title
link
content
contentSnippet
publishedDate
categories[]
---------------------------

【⑤】
feed.load(function(result)
-----------------------------------------------------------------
フィードの取得を行うにはFeedクラスで用意されている「load」メソッドを利用する。

feed.load(dispfeed);

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

でもよいが一般的には関数が呼び出されるのは通常一度だけなので、上記の記述の方がよく使われる。

**********************************************************

【⑥】
if (!result.error){
// エラーが発生していない場合の処理
}
------------------------------------------------------------------------
エラーが発生していない場合に処理を行う。

**********************************************************

【⑦】
var container = document.getElementById("feed");
----------------------------------------------------------------------
指定IDのエレメント取得をする。<div id="feed"></div>のエレメントを取得。

document.getElementById(id)

**********************************************************

【⑧】
for (var i = 0; i < result.feed.entries.length; i++) {
 //ループ処理
}
-------------------------------------------------
result.feed.entries.length=Atom の<entry>要素と RSS の<item>要素の最大数

**********************************************************

【⑨】
var entry = result.feed.entries[i];
---------------------------------------------------------
entries[]・・・Atom の<entry>要素と RSS の<item>要素の値

**********************************************************

【⑩】
var div = document.createElement("div");
----------------------------------------------------------
指定タグでのエレメントを作成する。
document.createElement(name)
引数: name=タグ名

**********************************************************

【⑪】
div.appendChild(document.createTextNode(entry.title));
------------------------------------------------------
divにタイトルを挿入する
<div>タイトル</div>

element.appendChild
div要素に子要素を追加する
element.appendChild(element)
引数: element=追加したい要素

document.createTextNode
新しいテキストノードを作る
document.createTextNode(data);
引数: data=テキストノードに含めるテキストデータ

**********************************************************

container.appendChild(div);
------------------------------------------------------
<div id="feed"></div>に<div>タイトル</div>を挿入する

element.appendChild(element)
引数: element=追加したい要素

**********************************************************

他のGoogle AJAX Feed API機能

①読み込み件数を指定

var feed = new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");
//10件読み込む
feed.setNumEntries(10);

feed.load(function(result) {
// 実行される処理
}

**********************************************************

役に立つサイト

1