back
Google Feed API (3/8)
■Google Japan Blogのフィードを利用してみる
では、実際に簡単なサンプルを作ってみましょう。ここでは、Google Japan BlogのRSSを読み込み、内容を表示してみることにします。
ここでは、ブロクの最新記事のタイトルだけを取り出して表示しています。下のリスト欄にサンプルコードを掲載しましたので実際に書いてアクセスしてみましょう。最近アップされた記事のタイトルが一覧表示されます。ここではsetOnLoadCallbackでOnLoad関数を実行していますね。このOnLoadで、Feedオブジェクトを作成し、loadメソッドでフィードの読み込みを行っています。
Ajax通信で受け取ったデータの処理を行っているのは、コールバック関数として用意したfeedLoaded関数内です。ここでは、受け取ったデータが引数のresult変数に渡されます。まず最初に、エラーのチェックを行います。
実行している処理部分では、まずデータを表示する<div>タグのDOMオブジェクトを変数に取り出した後、resultから順にデータを取り出して処理をしています。この部分を見ると、以下のような繰り返しになっていますね。
最後に、作成した<div>タグを、表示用のタグにappendChildで組み込みます。全体の流れがわかれば、そう難しいものではありませんね。
※setOnLoadCallbackを使わない方法
ざっとスクリプトを見ていきましたが、やっぱり「google.loadでロードしてからsetOnLoadCallbackで処理を実行して、そこからコールバック関数で……」というのは、ややこしいことは確かです。せめてもう少しシンプルな書き方ができないか、と思う人に、「google.loadで直接OnLoadを実行させる書き方」を紹介しておきましょう。
まぁ、たかだが１行減るだけなのでそれほど大きな違いはありませんが、「setOnLoadCallbackするのを忘れて動かない」というポカはよくやってしまいがちですので、こちらの書き方で覚えたほうが確実かも知れませんね。
※Google Japan BlogのRSS
http://feeds.feedburner.com/GoogleJapanBlog
ここでは、ブロクの最新記事のタイトルだけを取り出して表示しています。下のリスト欄にサンプルコードを掲載しましたので実際に書いてアクセスしてみましょう。最近アップされた記事のタイトルが一覧表示されます。ここではsetOnLoadCallbackでOnLoad関数を実行していますね。このOnLoadで、Feedオブジェクトを作成し、loadメソッドでフィードの読み込みを行っています。
Ajax通信で受け取ったデータの処理を行っているのは、コールバック関数として用意したfeedLoaded関数内です。ここでは、受け取ったデータが引数のresult変数に渡されます。まず最初に、エラーのチェックを行います。
if (!result.error) {……resultは、受け取ったXMLデータのテキストがただずらずらと保管されているのではなく、オブジェクトになっています。この中に、必要な情報が整理され保管されているのです。データが正しく受け取れたかどうかは「error」プロパティでチェックできます。!result.errorをチェックすることで、エラーがない場合にのみ処理を実行させることができます。実行している処理部分では、まずデータを表示する<div>タグのDOMオブジェクトを変数に取り出した後、resultから順にデータを取り出して処理をしています。この部分を見ると、以下のような繰り返しになっていますね。
for (var i = 0; i < result.feed.entries.length; i++) {……}result内の「feed」というオブジェクトに、取得したフィード情報がまとめられています。個々のデータ（「エントリー」と呼ばれる、各記事の情報をまとめたもの）は「entries」というプロパティに配列として保管されています。ですから、繰り返しを使い、ここから順にエントリーのオブジェクトをとり出し、そこから情報を調べていけばよいわけです。var entry = result.feed.entries[i];それを行っているのが、この部分です。まず、entries配列からエントリーのオブジェクトをとり出しておきます。そしてcreateElementで新たな<div>タグのDOMオブジェクトを作って、エントリーのタイトルをその中に組み込みます。エントリーのタイトルは、「entry.title」というように、エントリーオブジェクトのtitleプロパティで取り出せます。
var div = document.createElement("div");
div.innerText = entry.title;
container.appendChild(div);
最後に、作成した<div>タグを、表示用のタグにappendChildで組み込みます。全体の流れがわかれば、そう難しいものではありませんね。
※setOnLoadCallbackを使わない方法
ざっとスクリプトを見ていきましたが、やっぱり「google.loadでロードしてからsetOnLoadCallbackで処理を実行して、そこからコールバック関数で……」というのは、ややこしいことは確かです。せめてもう少しシンプルな書き方ができないか、と思う人に、「google.loadで直接OnLoadを実行させる書き方」を紹介しておきましょう。
google.load("feeds", "1",{"callback":OnLoad});
google.setOnLoadCallback(OnLoad); ↓google.load("feeds", "1",{"callback":OnLoad});こんな具合に、google.loadを実行する際、第３引数として{"callback":OnLoad}という連想配列を渡してやります。これで、ライブラリの読み込みが完了したら自動的にOnLoadを実行させることができます。つまり、setOnLoadCallbackは不要となるのです。まぁ、たかだが１行減るだけなのでそれほど大きな違いはありませんが、「setOnLoadCallbackするのを忘れて動かない」というポカはよくやってしまいがちですので、こちらの書き方で覚えたほうが確実かも知れませんね。
※Google Japan BlogのRSS
http://feeds.feedburner.com/GoogleJapanBlog
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Sample</title>
<style>
h1 {font-size: 14pt; font-weight:bold;
background-color:#DDF; padding:3px;}
</style>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
google.setOnLoadCallback(OnLoad);
function OnLoad() {
var feed = new google.feeds.Feed
("http://feeds.feedburner.com/GoogleJapanBlog");
feed.load(feedLoaded);
}
function feedLoaded(result) {
if (!result.error) {
var container = document.getElementById("container");
container.innerHTML = '';
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.innerText = entry.title;
container.appendChild(div);
}
}
}
</script>
</head>
<body>
<h1>Google Feed API</h1>
<p>Google Japan Blogの新着記事</p>
<div id="container">Loading...</div>
</body>
</html>
| << 前へ | 次へ >> |