2007年04月29日
引き続き、YUIアニメーションシリーズですが、ちょっと回り道をして、GAF APIと組み合わせてみます。
Allabout >> プログラミング >> JavaScript
YUI+Google AJAX Feed API
今月(2007年4月16日)GoogleからJavaScriptだけで別ドメインのRSSも読み込むことができるAPIがリリースされました。
Google AJAX Feed API(以下GAF API)です。
今回は、YUIシリーズの途中ですが、試しに、このリリースされたばかりのGAF APIとYUIを組み合わせて使ってみます。
GAF APIは簡単に言うと、Googleのプロクシサーバーを利用した、RSSリーダーのためのAPIです。
今回は、YUIアニメーションエフェクトを組み合わせて、別ドメインも読み込めるRSSリーダーを作ってみようというお話です。＊このブログはEUCなので、下記サンプルは、例によってiframeで読み込みます。
2007年04月23日
GAFでは、RSSを次のようにしてFeedメソッドの引数で指定します。
new google.feeds.Feed("http://jsgt.org/mt/01/atom.xml");
このとき、GoogleのGAF用プロクシサーバーを経由したデータは普通にキャッシュされています。
これは、GAFで出力でページ作成後、ATOMを書き換えて再読み込みしてみるとわかります(すぐには反映されません)。キャッシュのリフレッシュタイミングはまだわかりませんが、即書き換えたいときには、いつものように、これを騙すテクニックが有効です。サーバー側はいじれませんので、レスポンスヘッダはいじれませんが、たとえば、次のようにGETクエリーをいじってURLを変更する方法は使えます。
new google.feeds.Feed("http://jsgt.org/mt/01/atom.xml?123");
参考:Feedfetcher
http://www.google.com/support/webmasters/bin/topic.py?topic=8843
GAFのセキュリティ対策を調べて見ました。
まず、簡単なクロスサイトスクリプティングですが、「content(MTならcontentタグのCDATA内)」にスクリプトタグを書くとどうなるか？というと、次のようになりました。
<a href="javascript:alert('bodyのAタグにscript')">bodyのAタグにscript</a>
↓
<a href="javascript:void(0)">bodyのAタグにscript</a>
<script>alert('bodyにスクリプトタグ')</script>
↓
content内のスクリプト要素を丸ごと削除
なるほど。基本的な対策はなされているようです。
2007年04月21日
GAFがあんまり便利なので、ついやってしまう ? といけないので、再度リンクしておきます。
【Webサービス】ブログツールや広告を貼るときの注意（テストサンプルあり）
http://jsgt.org/mt/archives/01/000688.html
要するに、
別ドメインのWebサービスやブログアクセサリーなどを、パスワード入力のあるページなどへ貼ると、そのページ管理者の知らないうちに、パスワードを取られる危険があります。
ということです。つまり、SCRIPT要素で別ドメインのWebサービスを読み込むことは、そのWebサービスの管理者と自分のページのdocumentの管理権限を共有してしまうということなわけです。
つまり、この場合、Googleは、APIの機能を無料で提供する代わりに、APIを張り込まれたページすべてを書き換えることも出来る権限を手に入れます。まぁ、Googleを信頼するとしても、パスワードなどをそのページで入力できるようにするのは、個人情報保護法的にもレッドカードではないかな〜？という気がします。もちろん、これはGAFに限らず、ブログツールや広告など他のものにも当てはまるという基礎的?なお話ですけど。
更に、このAPIの場合は、Googleの先のWebサービス(RSSなど)をJSONで出力するわけですから、そこのWebサービス管理者ともページの管理権限をマッシュアップする(笑)ことになります。
基本的には、信頼できるサイトの、既にパブリックなデータを利用するということになると思いますし、とても便利で有用なサービスですが、どこで、どのように使うかは、セキュリティについても考えつつ利用するのが良いかな？と思います。
2007年04月20日
Google AJAX Feed API がサポートするRSSフォーマットは次の通り
aaaa ( 2007年06月29日 00:46 )
aa
(←clickで入力欄open)
Google AJAX Feed API は2つの形式で結果を返すことができます。
JSONとXMLです。 デフォルトで、APIはJSON形式で返します。JSONのフォーマットは次の通り。
JSON Result Format
feed
-
title
The feed title. Corresponds to the
<title> element in Atom and the
<title> element in RSS.
-
link
The URL for the HTML version of the feed. Corresponds to the
<link> element in Atom and the
<link> element in RSS.
-
description
-
author
The feed author. Corresponds to the
<author> element in Atom.
-
entries[]
A list of all of the entries in the feed. Corresponds to the
<entry> element in Atom and the
<item> element in RSS.
自分のページで AJAX Feed API を使うには、まず、Google MapsのようにAPIキーを取得する必要があります。そして、スクリプトの最初で、google.loadメソッドを呼ぶ必要があります。
たとえば次のように。。
<script type="text/javascript">
google.load("feeds", "1");
</script>
これは、 feeds APIのバージョン1という意味です。新しいバージョンは今後使えるようになるかもしれませんが、とりあえず、今は「1」です。
Google AJAX Feed API （GAF API）を使ってみます。
このブログはEUCのため、utf-8な作業は馴染みませんので、試したサンプルは別ファイルで置いて、
Google Mapsの時のようにiframeで読み込みます。
たとえば、こんな感じです。
<iframe src="http://jsgt.org/mt/01/test/gaf/googleAjaxFeedApi.htm" width="90%" height="80" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"
></iframe>
では、始めます。まず、他のドメインにあるRSSをこのjsgt.orgからJavaScriptで読み込めるでしょうか？
AllaboutのRSSを読んでみます。
このサンプルのURL
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Feed API - Simple Example</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ここに自分のキー"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://allabout.co.jp/internet/javascript/rss/index.xml");
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>
Google AJAX Feed API Developer Guide
http://code.google.com/apis/ajaxfeeds/documentation/
#GoogleがRSS用のプロクシを用意してくれ、それから応答を引き出すためのAPIをリリースしました、ということ？
ちょっと試してみます(下記、AtomフィードリストはGoogle AJAX Feed API経由の読み込みです)。
>
おお。
＝ざっくり和訳＝
AJAX Feed APIによって、AtomやRSSフィードをJavaScriptだけで使うことができるようになります。あなたは、それらのフィードと、自分のコンテンツや、他のAPI(たとえば、Google Maps API)を簡単にマッシュアップすることができます。
APIを使うのには、APIキーの申し込みが必要です。
JavaScriptとXMLHttpRequestは、Same origin policyを使用します (訳注：要するに別ドメインとはアクセスできないというあのルール)。これによって、あるクラスのスクリプト用の攻撃からユーザを保護しますが、多くの開発者はAjaxベースのmashupsにそれらを書くことができません(訳注：ので不便です)。
Google AJAX Feed API はウェブで利用可能な内容の特定のタイプのために簡単な回避策をこれらの制限に提供します。
Google AJAX Feed API が、がどうユーザセキュリティを保持するかに関するその他の詳細に関して以下の security notes を見てください。
ページ全体の読み込み完了まで少々お待ちください...
【最近の記事】
ページ全体の読み込み完了まで少々お待ちください...
![[Valid RSS]](http://jsgt.org/mt/archives/01/valid-rss.png "Validate my RSS feed"){kind=small}
