閉じる
Blog
  • 2010.11.05 (Fri)

JavaScriptでHTMLにRSSを埋め込む


サービスツールを使ったとても簡単にRSSを表示させる方法をご紹介します。

このサービスで日本語を利用する場合は UTF-8 での出力が前提となります

まずFeed2JSのサイトにいきます。

「Build」を選択。

Build a Feed!の画面になります。

URL Enter the web address of the RSS Feed

に表示させたい RSSフィードの URL を記入します。

次にShow channel?

フィード公開元の情報(RSSタイトルと説明)の表示方法を設定します

yes:タイトルと説明を表示

title:タイトルのみ表示

no:表示しない

Number of items to display

記事の表示件数を設定します。0 の場合は RSS に記述された全てを表示します。

Show/Hide item descriptions? How much?

各記事概要の表示文字数を設定します。

0:表示しない

1:全て表示

2 以上:設定文字数を表示

-1:表示しない(タイトルのリンクもなし)

Use HTML in item display?

内容中の HTML の処理の仕方

yes:HTML を有効にする

no:テキストのみ表示

-paragraphs:HTML は無効にする(改行のみ
に変換)

Show item posting date?

日付表示

yes:表示する

no:表示しない

Time Zone Offset

タイムゾーンの設定。日本の場合は、”+9″ を設定。RSS のタイムゾーンを使用する場合、”feed” を設定。

Target links in the new window?

リンク先ページを表示するウィンドウを設定。

n:同一ウィンドウに表示

y:新しいウィンドウに表示

任意の文字列:その名前のついたウィンドウに表示(フレームの場合)

popup:JavaScript の popupfeed() を用いてポップアップ表示

UTF-8 Character Encoding

UTF-8 エンコードの可否。

Podcast enclosures

RSS 2.0 フィードの enclosure 要素について、メディアファイルのリンクを表示

yes:表示する

no:表示しない

Custom CSS Class

ページに複数のRSSを表示し、それぞれに異なるスタイルを適用させたい場合、任意のクラス属性名を設定するとができます。rss-box- XXXX というクラス属性名が付与され、その XXXX の部分を入力します。

ページ右上側にある「Preview Feed」をクリックすればポップアップが開き実際の表示を別ウィンドウで確認できます。表示を確認しながら設定を変更すると良いでしょう。

※キャプチャはこのブログのRSSフィードを表示してます。Show channel?はタイトルのみを選択した状態です。

設定が完了したら「Preview Feed」の下にある「Generate JavaScript」をクリックしてください。

Get Your Code Hereと上部にjavascriptが発行されるので、中身をコピーしHTMLに貼り付けてください。

生成されたスクリプトにある language=”JavaScript” は非推奨ですので、貼り付けた後で削除しておくと良いでしょう。

HTML

Feed2JS で表示されるリストの HTML は下記のようなマークアップになっています。HTML 上は script 要素しか表示されませんので、CSS を設定する場合は下記のリストを参考にしてください。

<div>
<p><a>タイトル</a><br><span>説明</span></p>
<ul>
<li><a>記事名1</a></li>

<li><a>記事名2</a></li>
            :
<li><a>記事名n</a></li>
</ul>
</div>

CSS

Custom CSS Classで付けたクラス名【rss-box-XXXX】を使いCSSでレイアウトも可能です。

下記RSSがスクリプトを貼り付けて表示させた状態です。




※デフォルトの状態です