Topツール > 2006年12月
2006年12月12日

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

December 12,2006 1:35 AM
Tag:[, , ]
Permalink

Feed2JSによるRSSフィードのブログ表示昨日紹介した「RSS Feed(フィード)を表示する」はツールをインストールする必要がありましたが、今回は、ツールをインストールできない方のために、サービスとして提供されている Feed2JS を利用して、RSSフィードをブログのサイドバー等に簡単に表示する方法を紹介します(手抜きとかいわない)。

Feed2JS はフリーのサービスです。RSS フィードを HTML として表示させる仕組みは、まずこの Feed2JS に対し、ブログに表示したい RSS フィードのURLを入力して、それに対応する JavaScript を生成します。そしてこの JavaScript をブログに貼り付けまておきます。あとはページを表示することで、JavaScript から Feed2JS のPHPを起動し、さらにPHPのプログラムから RSS フィードを取得し、HTML に変換して表示する、という訳です。
異なるドメインのRSSも利用することができ、表示方法もきめ細かい設定が可能で、単純なテキストとして取得することも可能です。

なおこのサービスで日本語を利用する場合は UTF-8 での出力が前提とするため、他の文字コードで出力する場合は、前回の「RSS フィードをブログに表示する」で文字コードを変更する必要があります。

1.Feed2JS へのアクセス

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

2.RSSの設定

設定画面表示された画面で、 RSS フィードから JavaScript を生成し、どのように表示するかについて各項目を設定します。画像のリンクは右クリックで「新しいウィンドウを開く」を選択して下記の各項目と見比べてください。

以下、設定項目について解説します。

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 の部分を入力します。

3.プレビュー

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

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

4.JavaScript 生成

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

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

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

5.HTML

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

リスト 5.1 HTMLマークアップ

<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>

6.CSS

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

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

リスト 6.1 CSS

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

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

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

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

7.表示の遅延を解消する

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

Comments [0] | Trackbacks [8]
2006年12月11日

RSS Feed(フィード)を表示する

December 11,2006 12:38 AM
Tag:[, , , , ]
Permalink

Feed2JSによるRSSフィードのブログ表示RSS Feed(フィード)をブログのサイドバー等に表示するテクニックです。方法は色々あるみたいですが、ここでは「Feed2JS」を利用した方法を紹介します。

Feed2JS はフリーのツールです。RSS フィードを HTML として表示させる仕組みは、まずこの Feed2JS に対し、ブログに表示したい RSS フィードのURLを入力して、それに対応する JavaScript を生成します。そしてこの JavaScript をブログに貼り付けまておきます。あとはページを表示することで、JavaScript から Feed2JS のPHPを起動し、さらにPHPのプログラムから RSS フィードを取得し、HTML に変換して表示する、という訳です。
異なるドメインのRSSも利用することができ、表示方法もきめ細かい設定が可能で、単純なテキストとして取得することも可能です。

Feed2JS はサービスとして利用することもできますが、このエントリーでは公開されているソースをご自身がご利用されているサーバにインストールして利用するカスタマイズについて説明します。したがってサーバ上で PHP が動作可能であることが条件です。
この方法であれば、自分の利用しているサーバでツールを起動させるため(多分)レスポンスが良くなります。なお、ツールをインストールできない場合は「RSS Feed(フィード)を表示する(サービス利用編)」を参照ください。

1.Feed2JS のダウンロード

Feed2JSのサイトFeed2JS のサイトにあるナビゲーションバーの「Download」をクリック。
ダウンロードのページ1次のページで「Installation」の「1. Get the Latest Source Code now available on eduforge」の eduforge をクリック。
ダウンロードのページ2feed2js.zip をクリックして任意のフォルダに保存。

2.Magpie RSS のダウンロード

*この作業は Magpie RSS のアップグレードが必要な場合のみ(Magpie RSS は FeedRS に同梱されています)ですのでスキップしてください。

Magpie RSS のダウンロード11項の最初のページにある「2. Download and install the Magpie RSS」の Magpie RSS をクリック。
Magpie RSS のダウンロード2「DOWNLOAD」のリンクをクリック。
Magpie RSS のダウンロード3「Download」のリンクをクリック。
Magpie RSS のダウンロード4ページ後方にある「magpierss-0.72.tar.gz」のリンクをクリック(0.72 の部分は変わるかもしれません)。

3.アップロード

FFFTPによるアップロード1項でダウンロードした feed2js.zip を解凍し、その中にあるファイルをそのままの構成でサーバにアップロードします。ここでは「feed2js」というディレクトリを作成した例で進め、その配下にアップロードした場合、リスト3.1 の、

リスト 3.1 アップロード後のディレクトリ構成

/feed2js
  /magpie
  /style
  build.php
    :

という構成になります。

2項の magpie をアップグレードする場合は、feed2js 配下にある magpie ディレクトリ配下のファイルを入れ替えます。

4.パーミッションの変更

4.1 ファイルのパーミッション変更

feed2js 直下にあるファイルで、拡張子が ".php" のファイル(下記)のパーミッションを 755 等(値はご利用のサーバによって異なりますので、適宜ご確認ください)に変更してください。

リスト 4.1 パーミッションを変更するファイル

build.php
feed2js.php
feed2js_config.php
magpie_debug.php
magpie_simple.php
nosource.php
preview.php
style.php
style_preview.php

先頭が "._" で始まっているファイルのパーミッションは変更する必要はありません。

4.2 ディレクトリのパーミッション変更

magpieディレクトリにある cache と cache_utf8 のパーミッションを 777に変更します。

5.Feed2JS の動作テスト

Feed2JS が正常に動作することをテストします。ブラウザに下記のURLを入力して実行してください。

リスト 5.1 動作テスト用URL

http://[user-domain]/feed2js/magpie_debug.php

user-domain の部分はご自身のURLを設定してください。

動作テスト結果画面OKであればスクリーンショットのようなメッセージが表示されます。

これがOKであれば、インストール完了です。
実際に RSS フィードから JavaScript を生成する方法については次項の内容にしたがってください。

6.RSSの設定

ブラウザに下記のURLを入力して実行してください。

リスト 6.1 Feed2JS実行用URL

http://[user-domain]/feed2js/build.php

各項目設定画面これで下記の画面が表示されます。このページで RSS フィードから JavaScript を生成し、どのように表示するかについて各項目を設定します。画像のリンクは右クリックで「新しいウィンドウを開く」を選択して下記の各項目と見比べてください。

以下、設定項目について解説します。

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 の部分を入力します。

7.プレビュー

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

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

8.JavaScript 生成

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

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

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

9.HTML

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

リスト 9.1 HTMLマークアップ

<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>

10.CSS

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

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

リスト 10.1 CSS

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

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

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

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

11.文字コードについて

このツールでの日本語表示は UTF-8 での出力が前提となっているため、他の文字コードで出力する場合は、feed2js.php の 136 行目辺り(リスト11.1)のすぐ下に、11.1項(リスト11.2)、または11.2項(リスト11.3)の 1行を追加するといいようです。
指定行数はバージョンによって異なる可能性がありますのでご了承ください(リストの文字列で検索すると良いでしょう)。

リスト 11.1 文字コード変更ポイント

$rss = @fetch_rss( $src );

11.1 文字コードを EUC-JP にする場合

リスト 11.2 文字コードを EUC-JP にする場合

$rss = @fetch_rss( $src );
mb_convert_variables("EUC-JP","UTF-8",$rss);

11.2 文字コードを Shift_JIS にする場合

リスト 11.3 文字コードを Shift_JIS にする場合

$rss = @fetch_rss( $src );
mb_convert_variables("SJIS","UTF-8",$rss);

11項の参考サイトは下記です。ありがとうございました。

本のためのアフィリエイト・ポイントブログRSS情報をJavaScriptで表示する(PHP)

Comments [34] | Trackbacks [23]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3