s ICC ONLINE | アーカイヴ | 2007年 | ICC マッシュアップ・アート・コンテスト | APIサンプル集
ICC


サンプルをダウンロード(176KB)

注: JavaScriptではドメイン間通信を禁止しているため,このサンプルではRSSの読み込み部分はPHPのスクリプトを使用しています.

このドキュメントをお読みになる前に,「PHPを使用したRSSの取得方法」もご参照ください.


1. サーバからRSSを受信する

XMLHttpRequestを使用し,サーバからRSSを受信します.
この際,以下の形式で受信するようにします.

  • channel要素を連想配列に取り出す
  • item要素は1つの要素を独立して取り込み,その内容を連想配列で取り出す
  • item要素の数を取得する

図にすると以下のようになります.
配列 channel title
link
description
items count
item title
link
description
item(要素数繰り返し)



2. 読み込んだRSSを表示する(PHP側)

配列の作成
(PHPでのRSSパース方法は「PHPを使用したRSSの取得方法」を参考にしてください)
channel要素を作成するスクリプトは以下のようになります.

// channel要素
	print '{"channel": ';
	print '{"title":"' . $channel['title'] . '", ' .
		   '"date": "' . $channel['date'] . '", '.
		   '"description": "' . $channel['description'] . '", ' .
		   '"link": "' . $channel['link'] . '"}';

作成される文字列:
{"channel":
{"title": "title要素の内容", 
"date", "date要素の内容", 
"description": "description要素の内容",
 "link": "link要素の内容"
}
}
同様に item要素も展開し,items.countにitemの要素数を入れます.


3. 読み込んだRSSを表示する(JavaScript側)

2.で作成した文字列をXMLHttpRequestで受け取ります.
作成した配列はJavaScript の eval関数で読み込み,作成します.
このサンプルのpDataの内容はXMLHttpRequestのResponseTextの値が入っています.
注)この際,UTF-8ヘッダがXMLHttpRequestの結果に入っているようなのでPHPスクリプトで書き出した部分のみ処理します.サンプルでは最初の「{」以前をスキップしています.

var wk = pData.substring(pData.indexOf("{", 0)); // BOMのスキップ
eval('var ary = ' + pData); // 配列をaryに作成

配列の各要素にアクセスするには以下のようにします.

  • channel要素

ary.channel.title; // title要素
ary.channel.link; // link要素

  • item要素

ary.item[(添字)].title; // title要素
ary.item[(添字)].link; // link要素
参考) 添字は0以上ary.items.count未満になります.