小粋空間  -  a cheap joke and a play on words site

RSS Feed（フィード）を表示する（サービス利用編）

１．Feed2JS へのアクセス

Feed2JS のサイトにあるナビゲーションバーの「Build」をクリック。

２．RSSの設定

URL

表示させたい RSSフィードの URL を記入します。例えば、はてなブックマークの「最近の人気エントリー」の RSS であれば

http://b.hatena.ne.jp/hotentry?mode=rss

を入力します。Atom も可能です。

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 は無効にする（改行のみ <br> に変換）

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」をクリックすれば実際の表示を別ウィンドウで確認できます。表示を確認しながら設定を変更すると良いでしょう。

左のスクリーンショットは、はてなブックマークの「最近の人気エントリー」を5件表示させた場合のプレビューです。

４．JavaScript 生成

設定が完了したらページ右側にある「Generate JavaScript」をクリックしてください。設定が確定していない場合でも、次のページで変更できますのでご安心ください。

このページで表示された「Get Your Code Here」の下にある JavaScript をコピーして、ご自身のブログで表示したい位置に貼り付ければ完成です。

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

５．HTML

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

<div class="rss-box">
<p class="rss-title"><a class="rss-title">タイトル</a><br><span class="rss-item">説明</span></p>
<ul class="rss-items">
<li class="rss-item"><a class="rss-item">記事名1</a></li>
<li class="rss-item"><a class="rss-item">記事名2</a></li>
　　　　　　　　　　　　：
<li class="rss-item"><a class="rss-item">記事名n</a></li>
</ul>
</div>

リスト 5.1　HTMLマークアップ

６．CSS

冒頭のスクリーンショットの「はてなブックマーク：最近の人気エントリー」リストの CSS を掲載しておきます。

リストは「タイトル説明なし」「5件表示」「記事概要表示なし」という設定で、公開テンプレートに下記のセレクタを追加しています。

.rss-items,
.side {
    margin: 3px 0 20px;
    background: none;
    color: #444444;
    font-size: 10px;
    _font-size: 9px;
    line-height: 150%;
}

リスト 6.1　CSS

タイトル部分は手抜きで、手書きで、

<div class="sidetitle">はてぶ 最近の人気エントリー</div>

としていますがタイトル表示をさせて .rss-title を利用するのが良いでしょう。

７．表示の遅延を解消する

サービスとして利用するため、サーバのレスポンス等によっては表示が遅延する可能性があります。そういう場合は「BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）」を試してみてください。