FeedAPI Manual

概要

指定したFeed(RSS/ATOM)から情報を読み込んで、自分のHTMLにその情報を描画するためのJavaScript。

HTML内のオブジェクトを指定し、その中にFeed情報を描画することができる。

基本的な使用方法

1.JavaScriptの読み込み

以下のように<head>タグ内にJavaScriptを読み込む

<script language="javascript" src="http://asptest.dostigres.com/feedapi.js?url=FEEDURL" type="text/javascript"></script>

FEEDURLはFeedのURLである。必要であれば適切にエンコードすること。エンコード時の文字コードはUTF-8とすること。

2.描画用スクリプト

"canvas"というidの領域(ここでは<div>とする）にRSS情報を描画する場合の例を記述する。

<head>タグ内に以下のように描画用スクリプトを埋め込む

<script language="javascript" type="text/javascript" >
<!--
DTFeed.init = function(f) {
　f.draw(document.getElementById("canvas"));
}
// -->
</script>

<body>タグ内に、描画用の領域(id="canvas")が存在することが前提である。

<div id="canvas"></div>

3.CSSの定義

描画する要素は、１つの「ブログタイトル」と複数個の「リンク付きページタイトル」「ページ更新日」である。

各要素はクラス定義付きで描画されるので、HTML内でCSS定義をすることでデザインをコントロールすることができる。

描画要素は以下のような構造をとる。

<div class="feed_blogtitle">ブログタイトル</div>
<div class="feed_entry"><a href="URL1" class="feed_link">ページタイトル1</a><span class="feed_date">更新日1</span></div>
<div class="feed_entry"><a href="URL2" class="feed_link">ページタイトル2</a><span class="feed_date">更新日2</span></div>
・・・
<div class="feed_entry"><a href="URLn" class="feed_link">ページタイトルn</a><span class="feed_date">更新日n</span></div>

本ページでは例として以下のようなクラス定義を行っている。

<style type="text/css">
.feed_blogtitle {
font-weight: bold;
color: #AA0000;
font-size: 13pt;
}
.feed_entry {
border-bottom: #888888 dashed 1px;
margin-left: 20px;
margin-bottom: 3px;
padding-bottom: 3px;
}
.feed_link {
font-size: 10pt;
}
.feed_date {
font-size: 8pt;
color: #888888;
margin-left: 3px;
}
</style>

4.描画結果

JavaScript読み込みの詳細仕様

JavaScript読み込み部分(<script>タグ）のsrcパラメータの詳細仕様を以下に示す。

1.形式

http://asptest.dostigres.com/feedapi.js?ns=NAMESPACE&url=FEEDURL&oc=OUTPUTCHARSET

太字部分は変数値なので、適切に書き換える必要がある。

2.NAMESPACE

名前空間の指定。

省略可能。省略時の値は DTFeed である。

同時に２つ以上のFeedAPIを扱う場合は省略不可。厳密には、省略できるのは高々１つのFeedAPIのみである。

また、利用する他のJavascriptの名前空間とコンフリクトする場合は、このパラメータによって衝突回避可能である。

3.FEEDURL

読み込み対象のFeedのURL。

必要であればUTF-8で適切にエンコードすること。特にRSSURLに&を含む場合は必須である。

4.OUTPUTCHARSET

出力文字コード。デフォルトはUTF-8。

本システムのJavascriptはDOMでHTMLデータの操作を行うので、本来であればUTF-8が正しい文字コードである。

ただ、特定のブラウザ（InternetExplorerのVer.7以前？等)で、読み込み元のHTMLの文字コードと、<script src="xxx">で読み込むJavascriptの文字コードが一致しないと正しく動作しない場合がある。

このパラメータはそのようなブラウザのためのサポート機能である。

これらのブラウザをサポートし、読み込み元のHTMLをUTF-8以外で作成する場合は、このパラメータを利用し、更に<script>タグの生成自体をJavaScriptでブラウザを見分けながら出力し分ける必要がある。

パラメータ生成ユーティリティ

以下のフォームに必要項目を入力して送信することで、エンコード済みのパラメータを取得できる。

別ウィンドウで開いたURLが目的のsrcパラメータになる。

名前空間 ：
FeedのURL：

名前空間が不要な場合は、 「ns=&」は削除可能。

また、<script .. src=""..>に埋め込む際には、「&」を「&amp;」とHTMLエンコードする必要がある。

描画用スクリプトの詳細仕様

1.ロード完了時に呼び出される関数

HTML（外部JavaScript/CSS含む）のロードが完了すると、NAMESPACE.init(f) という関数が自動的に呼び出される。

描画処理はこの関数内で記述する。

引数の f は描画用オブジェクト（クラス=NAMESPACE.feed）である。

2.描画オブジェクトの属性と関数

属性
属性名 型 意味 デフォルト値
drawTitle 論理値 ブログタイトルを描画するかどうかのフラグ true
drawDate 論理値 ページの更新日付を描画するかどうかのフラグ true
maxEntry 整数 最大描画ページ数。
-1で無制限→RSS/ATOMに記載されているもの全て。
 -1
関数
関数名 動作
draw(elem) 引数elemで指定したオブジェクトの内部にRSS/ATOM情報を描画する。

3.例

「ブルグタイトルを表示しない」「ページ更新日付を表示しない」「最大４つのエントリしか表示しない」とする場合は以下の様にスクリプトを記述する。
（ns=DTFeed2の場合）

DTFeed2.init = function(f) {
　f.drawTitle = false;
　f.drawDate = false;
　f.maxEntry = 4;
　f.draw(document.getElementById("canvas2"));
}

描画結果は以下のようになる