[PR]今日のニュースは
「Infoseek モバイル」

RSSフィードをウェッブページに埋め込む方法

Legacy Web Managerなどを使ってRSSフィードを提供しているならば、トップページの更新情報欄、所謂What's Newは自動で生成したいものです。

こういう場合、基本的にはcgiを使う方法が一般的でしょうが、ここではcgiを設置できない人のために、一般公開されているcgiを使わせてもらう方法と、cgiを使わずクライアントサイドで表示させる方法を幾つか紹介します。

ちなみにこれらは全て、最終的にはJavascriptによりクライアントのブラウザ上で展開される方法ですので、WWWCやWWWD等のようなHTTPプロトコルによる更新チェッカには、更新として認識されません。(静的なRSSを公開しているわけですから、そのRSSの更新をチェックしてもらえば良いというだけの話ではありますが。)

rss-jpのcgi

基本的はこれがお奨めです。ただ時々実行エラーが出たりと、不安定なようではあります。

このcgiは指示されたURLからRSSを取り込んで解析し、適当なHTMLに変換し、その結果を吐き出すためのJavascript文を生成します。即ち次のようなコードをHTMLに書いておくと、Javascript対応のブラウザ上では、RSSの内容がページに埋め込まれたかのように見えます。

<script type="text/javascript" src="http://rss-jp.net/x/read_rss.cgi?url={url}&style=js&encode=sjis&num=5"></script>

http://rss-jp.net/

B.B.'sWebSpaceのcgi

これもほぼ同じです。dsc=onで要約も表示してくれるとの説明があるのですが、当サイトのRSSではタイトルしか表示されないようです。(キチンと調べてはいません。)

<script type="text/javascript" src="http://bbws.main.jp/RSS/jsRSS.cgi?url={url}&enc=sjis&line=5&ts=on"></script>

http://bbws.main.jp/blog/2003/10/200310241716.php

拙作サーブレット

rss-jpのcgiで事は足りるのですが、アクセスする時間によってはcgiの実行エラーになったりするようなので、実験用のサーバでサクッと作ってみました。対応形式はRSS1.0限定です。Legacy Web Managerの吐き出すRSSでは動作確認済みです。

<script type="text/javascript" src="http://www.mycgiserver.com/servlet/kamicup.feedreader.JsGenerator?url={url}&charset={encoding}"></script>

使い方はほぼ同じですが、charsetにはShift-JIS/EUC-JP等を指定してください。デフォルトはutf-8です。
表示方法はcssで変更してください。当ページではread_rss.cssを使っていますので、これを適当に書き換えれば良いでしょう。

クライアントサイドでのRSS直接処理(Javascript + XSLT)

クライアントサイドのJavascriptでRSSを処理して表示する事もできます。

ブラウザ非依存にするにはJavascript製のXMLパーサから用意しないといけないのでしょうから、実際問題として無理な気がします。 ここではIE上のJavascriptからMSXMLを利用する方法を紹介しておきます。やっていることは次のようなものです。

Javascriptは外部ファイルにしました。rss.jsです。あとrss.xslも同ディレクトリに置きます。(これをカスタマイズすると如何様な形式にも変形できる、というのはメリットではあります。)

<head>
<link rel="meta" type="application/rdf+xml" title="RSS" href="rss/index.rdf" />
<script type="text/javascript" src="rss.js">
</head>
<body>
<a href="#" onClick="rss('rss/index.rdf');">展開表示</a>
<a href="#" onClick="document.all.FEED.innerHTML = '';">折り畳む</a>
<div ID="FEED"></div>
</body>

この例ではマウスイベントのハンドラを表示トリガとして使っていますが、別にその必要はありません。

クライアントサイドでのRSS直接処理(Javascript + DOM)

前項でブラウザ非依存にするのは難しいと書きましたが、訂正します。 最近のIEやMozilla、Firefox等Gekko互換ブラウザ、Opera等では、JavascriptでDOMをサポートしていますので、これを使ってRSSを解析しHTML文書内に埋め込む事ができます。

こちらの方法では、RSSの取り込みにXMLHttpRequestオブジェクトを利用し、HTMLへの変形を低レベルDOMで行っています。 Javascriptは外部ファイル(rss_dom.js)にしました。 このScriptはRSS1.0用ですので、他のRSSバージョン用が必要ならば適当に作り変えてください。

<head>
<style>
.pItem { margin-top: 5px; margin-bottom: 5px; background-color: #c0c0c0; font-size:60%;}
.divTitle { margin-left: 5px; margin-right:5px; }
.divDescription { margin-left: 5px; margin-right:5px; background-color: #d0d0d0; }
.divDcCreator { margin-left: 5px; margin-right:5px; text-align: right; }
.divDcDate { margin-left: 5px; margin-right:5px; text-align: right; }
</style>
<script type="text/javascript" src="rss_dom.js">
</head>
<body onload="getRSS10('http://kamicup.at.infoseek.co.jp/rss/index.rdf','FEED')">
<div ID="FEED"></div>
</body>

注意点が一つ。XMLHttpRequest.responseXMLは、HTTP応答のMIME typeがtext/xmlでないと動作しないようです。つまり静的RSSの場合、ファイルの拡張子とサーバ環境によって動作したりしなかったりする可能性があるということです。*.rdfで駄目なら*.xmlにするなど試すと良いでしょう。

実行例:

The Web KANZAKIのRSS Feed Reader

埋込でなく独立ページでも良ければ、前述のrss-jpのcgiのhtml版とか、The Web KANZAKIのRSS Feed Readerを使わせていただくというのもありかもしれません。

<a href="http://kanzaki.com/test/rssfr?u={url}">What's Newページ</a>

ただし当然の事ながら、表示のカスタマイズはできません。


おまけ(静的ページでTrackbackも!?)

この下に置いてあるTrackback一覧は、上のRSSの場合と同じようにJavascriptの外部呼び出しを利用して埋め込んでいます。

RSSの場合とは違って、サーバ側でいくらかのデータ(トラックバック送信元のURLなど)を保持しなければなりませんから、データ保存領域の制限があるので無制限に解放するわけにもゆきません。あくまで実験だという了解の上で試してみたいという方はメールください。

Trackback (JavascriptによるTrackback埋込実験中)

Trackback Ping URL: http://kamicup.mydns.jp/kamicup/servlet/linklebell/host02/how2insertrss.html

参照元URL: (必須)
サイト名:
タイトル:
概要:

Visit No.

(Since Feburary 9, 2004)
Back to Homepage

Copyright (c) 2004 Yoshikazu Hashimoto