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月21日
GAFがあんまり便利なので、ついやってしまう ? といけないので、再度リンクしておきます。
【Webサービス】ブログツールや広告を貼るときの注意（テストサンプルあり）http://jsgt.org/mt/archives/01/000688.html
要するに、
ということです。つまり、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
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.
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 Guidehttp://code.google.com/apis/ajaxfeeds/documentation/
#GoogleがRSS用のプロクシを用意してくれ、それから応答を引き出すためのAPIをリリースしました、ということ？
ちょっと試してみます(下記、AtomフィードリストはGoogle AJAX Feed API経由の読み込みです)。
>
おお。
＝ざっくり和訳＝
APIを使うのには、APIキーの申し込み が必要です。
JavaScriptとXMLHttpRequestは、Same origin policy を使用します (訳注：要するに別ドメインとはアクセスできないというあのルール)。これによって、あるクラスのスクリプト用の攻撃からユーザを保護しますが、多くの開発者はAjaxベースのmashupsにそれらを書くことができません(訳注：ので不便です)。
Google AJAX Feed API はウェブで利用可能な内容の特定のタイプのために簡単な回避策をこれらの制限に提供します。
Google AJAX Feed API が、がどうユーザセキュリティを保持するかに関するその他の詳細に関して以下の security notes を見てください。
2007年01月06日
どんな意味があるかはともかく、、、(^^;; 下記のA地点からB地点までの文章は、HTMLコメントなので、ブログでは表には表示されていませんが、もしRSSリーダー側がAtomのcontent要素をtext解釈すれば表示されます。 [A地点] [B地点] 。たとえば、atom のcontentを見るとわかります。でも、MTのRDFのdescription要素やatomのsummary要素は、コメントを削除するのでだめですね。普通のRSSリーダーはそっちを読むぽいですし。
あるいは、JavaScript有効なら、次の[D地点]から[E地点]のように、if(!document)document.write('文字')などとすることで、元サイトで読めず、RDFのdescription要素やatomでもsummary要素で読めるというのも可能かも。 [D地点] [E地点] 。
逆にScriptでRSS側を難読化というのもできるかもしれません。次のはエンコードはしていませんが、、、document.write書いた部分を難読化すればよいかなと。 [F地点] [G地点]
難読化の手法としては、encodeURIなどだけでは簡単すぎて間違えてデコードされるケースもありうる(笑)ので、まぁ、どうせ簡易な話なので、何でも良いんですが、たとえば、それを更に、自家製エンコード するとかするとか。これなら、サーバー側でたとえば、PHPならrawurlencode()+正規表現とか で自動出力するのも簡単。
2006年04月24日
2005年06月01日
MozillaやOperaは別ドメインからの読み込みが出来ません。セキュリティを考慮して、WinIEとは違う、慎重な実装を選んだわけですが、Webサービスを利用しようという用途には向きません。
思うに、Flashのように別ドメインへ出るときにユーザーが許可できる仕組みにしてくれれば良かったのにとは思いますが、実装済みブラウザを使うしかありませんので、とりあえず試験ということで、自分で仕組みを実装してみます。
ここでは、別ドメインのXMLを一旦、サーバー側で受信してから同一ドメインとして渡すことで、どのブラウザでも別ドメインを使えるようにしてみます。
jsgt.orgからwww.openspc2.org にある古籏さんのブログを読み込んでみました。
http://jsgt.org/ajax/ref/test/json/jkl/v0.07/betudomain.htm
#今回はプログレスバーに100秒タイムアウトを付けてみました。
別ドメインのRSS読み込みテスト
動作ブラウザ
win
mac
linux
n7 m1 e6 o7 o8
n7 m1 e5 s1
n7 m1 k3
○ ○ ○ × ○
○ ○ × ○
○ ○ ○
www.openspc2.org 古籏さんのブログ
【クライアント側】
<button onclick="rssOut5()">
www.openspc2.org 古籏さんのブログ</button><br>
<!-- JKL.ParseXMLを読み込む -->
<script type="text/javascript"
src="http://jsgt.org/ajax/ref/test/json/jkl/v0.07/jkl-parsexml.js">
</script>
<script>
<!--
//プログレスバー
var bar
var cnt = 0
//データ
var data5 =""
var url ="http://www.openspc2.org/blog/atom.xml"
//出力用DIV
document.write('<div id="out5" style ="font-size:0.8em;margin:12px;"></div>')
//プレロード
rssPreLoader5('http://jsgt.org/ajax/ref/test/json/jkl/v0.07/getrss.cgi?u='+url)
function rssPreLoader5(url)
{
//プログレスバー開始
document.getElementById('out5').innerHTML = 'pre loading...'
bar = setInterval('progressbar()', 100 )
// JKL.ParseXMLオブジェクトを生成
var xml = new JKL.ParseXML( url );
var func = function ( data5 ) // 呼び出し先関数を定義する
{
onloaded5( data5 ); //コールバック
}
xml.async( func ); // 呼び出し先関数を指定する
xml.parse(); // ダウンロード〜解析〜関数呼び出しする
}
//RSSを受信時に起動するコールバック関数
function onloaded5(xml)
{
data5 =""
//feed要素以下のentry要素を順番に処理
for(i in xml.feed.entry)
{
//出力用HTMLを作る
data5 += '<a href="'+xml.feed.entry[i].link.href+'">'
//24文字に制限
data5 += xml.feed.entry[i].title.substr(0,24)
data5 += '</a>'
data5 += '<br>'
//時間を取り出す
var time = xml.feed.entry[i].issued
time = time.split("T").join(" ").split("+")[0]
data5 += '('+time+')<br>'
}
//プログレスバー停止
clearInterval(bar)
document.getElementById('out5').innerHTML = 'ok now loaded.'
return data5
}
//出力
function rssOut5()
{
//出力
document.getElementById('out5').innerHTML = data5
}
//プログレスバー
function progressbar()
{
document.getElementById('out5').innerHTML += '|'
//タイムアウト処理
if( cnt > 1000 )
{
clearInterval(bar)
document.getElementById('out5').innerHTML += 'load 失敗'
}
cnt ++
}
//-->
</script>
【サーバー側】
#!/usr/bin/perl
#=====================================================================
# 別ドメインのXML取得用簡易プロクシ
#
# example:
# ./getrss.cgi?u=http://jsgt.org/mt/01/atom.xml
#---------------------------------------------------------------------
# Toshirou Takahashi http://jsgt.org/mt/archives/01/000373.html
#
#
#---------------------------------------------------------------------
# GETを取得
#
($dmy2, $url) = split(/u=/, $ENV{'QUERY_STRING'});
#---------------------------------------------------------------------
# RSSデータを取得
#
$url = escapeshellarg($url);
$nkf = "/usr/bin/nkf";
$wget = `/usr/bin/wget -q -O - '$url' | $nkf -w ` ;
#---------------------------------------------------------------------
# 出力
#
print "Content-type: application/xml;charset=utf-8\n\n";
print "$wget";
高橋登史朗 ( 2005年11月16日 11:46 )
splitしているだけです。
//プレロードhttp://jsgt.org/ajax/ref/test/json/jkl/v0.07/getrss.cgi?u='+url)
chisa ( 2005年11月16日 13:05 )
返信ありがとうございます。
あともう一点わからないです。
var func = function ( data5 ) // 呼び出し先関数を定義する
のところです。
ご教授お願いします。
chisa ( 2005年11月17日 19:08 )
返信ありがとうございます。
どうもでした。
RSSデータをプレロードしてみました。一瞬で表示されますので、プログレスバーは、意味が無くなったのでやめました(^^;。
動作ブラウザ
win
mac
linux
n7 m1 e6 o7 o8
n7 m1 e5 s1
n7 m1 k3
○ ○ ○ × ○
○ ○ × ○
○ ○ ○
MobableType のatom.xml
追記
2005.06.01
プレロード版最近のエントリー
( プログレスバー付き )
http://jsgt.org/ajax/ref/test/json/jkl/v0.07/mt_preroad.htm
2005年05月31日
Ajaxなロードでブログのエントリーリストを読み込んでみます。
まぁ、都合により、もとがEUC-JPのRSSを吐き出しているので、、、あれなんですけれど、、、。プログレスバーもどきもつけときました(^^。XML->JS展開には、山崎さんの
JKL.ParseXML を利用させて頂きました。
レスポンス考えると、この程度のものは、Imageオブジェクトのような考え方で、先読みしておくべきかもしれませんね、、、。
動作ブラウザ
win
mac
linux
n7 m1 e6 o7 o8
n7 m1 e5 s1
n7 m1 k3.4
○ ○ ○ × ○
○ ○ × ○
○ ○ ○
最近のエントリー
<button onclick="rssReader('http://jsgt.org/mt/01/atom.xml')">
最近のエントリー</button><br>
<!-- JKL.ParseXMLを読み込む -->
<script type="text/javascript"
src="http://jsgt.org/ajax/ref/test/json/jkl/v0.07/jkl-parsexml.js">
</script>
<script>
<!--
//プログレスバー
var bar
//メイン関数
function rssReader(url)
{
//プログレスバー開始
document.getElementById('out370').innerHTML = ''
bar = setInterval('progressbar()', 100 )
// JKL.ParseXMLオブジェクトを生成
var xml = new JKL.ParseXML( url );
var func = function ( data ) // 呼び出し先関数を定義する
{
onloaded370( data ); //コールバック
}
xml.async( func ); // 呼び出し先関数を指定する
xml.parse(); // ダウンロード〜解析〜関数呼び出しする
}
//RSSを受信時に起動するコールバック関数
function onloaded370(xml)
{
var data =""
//feed要素以下のentry要素を順番に処理
for(i in xml.feed.entry)
{
//カテゴリがAjaxのみを出力する
if(xml.feed.entry[i]["dc:subject"]=="Ajax")
{
//出力用HTMLを作る
data += '<a href="'+xml.feed.entry[i].link.href+'">'
//24文字に制限
data += xml.feed.entry[i].title.substr(0,24)
data += '</a>'
data += '<br>'
//時間を取り出す
var time = xml.feed.entry[i].issued
time = time.split("T").join(" ").split("+")[0]
data += '('+time+')<br>'
}
}
//プログレスバー停止
clearInterval(bar)
//出力
document.getElementById('out370').innerHTML = data
}
//プログレスバー
function progressbar()
{
document.getElementById('out370').innerHTML += '|'
}
//-->
</script>
<br />
<!-- ここへ出力します -->
<div id='out370'
style ="font-size:0.8em;margin:12px;" ></div>
2005年03月10日
なにげに、googleを引いていたら、RSScache.comというページがあって「JavaScript++かも日記」がキャッシュされていました。なるほど。http://www.rsscache.com/Section/Stats/more/1622.aspx
2004年06月23日
ブログタイトルを読み込む2 に引き続き「ブログタイトルを読み込む」シリーズ。
今日は、ほかのサイトのブログも読み込んでみる。ってことで、古籏さんのところの最新ブログタイトルを読んで見ます。ただし、IEではセキュリティの調整が必要かもしれないことと、Mozではできません(たぶんprefをいじらないといけないような。。。)。ちょと残念。で、ソースはコメントへ。
*
Win IEでセキュリティを調整する方法は、メニューから[インターネットオプション]-[セキュリティ]-
[レベルのカスタマイズ]--その他--[ドメイン間でのデータ ソースのアクセス]の
チェック を「無効にする」ではなく「ダイアログを表示する」か「有効にする」にしておくことです。
安全と思われる環境以外では「ダイアログを表示する」がお勧めかもしれません。もちろん、私は責任を持てませんが(^^;;、一応これならドメイン間のアクセスが発生するだびにダイアログで確認してくれます。
*あと、当然ですが、同じ
[レベルのカスタマイズ] でActiveXを使えるようにしておく必要があります。これもやはり安全のため
「ダイアログを表示する」 を選んでおくのがよいかもしれません。
ま、自分で書いたjsを自分のために使う分にはめんどくさいんですけどね(^^;;;
ブログタイトルを読み込みます
ページ全体の読み込み完了まで少々お待ちください...
【最近の記事】
