Feed2JS の表示結果のタイトルに日付を表示する
フィードの内容をブログ等に表示するツール「Feed2JS」を使ったときに、タイトル横に日付を表示する方法です。
Feed2JS の詳細については、「RSS Feed(フィード)を表示する」をご覧ください。
下の例は、はてなブックマーク「最近の人気エントリー」のフィードを表示した場合の、変更前と変更後です。変更前はタイトル下に日付と時刻が表示されますが、変更後はタイトルの左に日付を表示します(いずれも設定項目の「Show item posting date? 」を「Yes」に設定)。
変更前

変更後

西暦を2桁表示することも可能です。

元のように、時刻も表示できます。

1.タイトル横に日付を適用する
自サーバにアップロードした feed2js ディレクトリ直下にある、feed2js.php の 200 行目あたり(確認バージョンは1.98)にある、下記の赤色部分を削除し、青色部分を追加します。バージョンによって行が異なる場合は似たような箇所をみつけてください。
変更前(赤色を削除)
...前略...
if ($desc < 0) {
$str.= "document.write('<li class=\"rss-item\">');\n";
} elseif ($item['title']) {
// format item title
$my_title = addslashes(strip_returns($item['title']));
// create a title attribute. thanks Seb!
$title_str = substr(addslashes(strip_returns(strip_tags((htmlspecialchars($item['summary']))))), 0, 255) . '...';
// write the title strng
$str.= "document.write('<li class=\"rss-item\"><a class=\"rss-item\" href=\"" . trim($my_url) . "\" title=\"$title_str\"". $target_window . '>' . $my_title . "</a><br />');\n";
} else {
// if no title, build a link to tag on the description
$str.= "document.write('<li class=\"rss-item\">');\n";
$more_link = " <a class=\"rss-item\" href=\"" . trim($my_url) . '"' . $target_window . ">«details»</a>";
}
// print out date if option indicated
if ($date == 'y') {
if ($tz == 'feed') {
// echo the date/time stamp reported in the feed
if ($item['pubdate'] != '') {
// RSS 2.0 is alreayd formatted, so just use it
$pretty_date = $item['pubdate'];
} elseif ($item['published'] != "") {
// ATOM 1.0 format, remove the "T" and "Z" and the time zone offset
$pretty_date = str_replace("T", " ", $item['published']);
$pretty_date= str_replace("Z", " ", $pretty_date);
} elseif ($item['issued'] != "") {
// ATOM 0.3 format, remove the "T" and "Z" and the time zone offset
$pretty_date = str_replace("T", " ", $item['issued']);
$pretty_date= str_replace("Z", " ", $pretty_date);
} elseif ( $item['dc']['date'] != "") {
// RSS 1.0, remove the "T" and the time zone offset
$pretty_date = str_replace("T", " ", $item['dc']['date']);
$pretty_date = substr($pretty_date, 0,-6);
} else {
// no time/date stamp,
$pretty_date = 'n/a';
}
} else {
// convert to local time via conversion to GMT + offset
// adjust local server time to GMT and then adjust time according to user
// entered offset.
$pretty_date = date($date_format, $item['date_timestamp'] - $tz_offset + $tz * 3600);
}
$str.= "document.write('<span class=\"rss-date\">$pretty_date</span><br />');\n";
}
// link to podcast media if availavle
...後略...
変更後(青色を追加)
...前略...
if ($desc < 0) {
$str.= "document.write('<li class=\"rss-item\">');\n";
} elseif ($item['title']) {
// format item title
$my_title = addslashes(strip_returns($item['title']));
// create a title attribute. thanks Seb!
$title_str = substr(addslashes(strip_returns(strip_tags((htmlspecialchars($item['summary']))))), 0, 255) . '...';
// print out date if option indicated
if ($date == 'y') {
if ($tz == 'feed') {
// echo the date/time stamp reported in the feed
if ($item['pubdate'] != '') {
// RSS 2.0 is alreayd formatted, so just use it
$pretty_date = $item['pubdate'];
} elseif ($item['published'] != "") {
// ATOM 1.0 format, remove the "T" and "Z" and the time zone offset
$pretty_date = str_replace("T", " ", $item['published']);
$pretty_date= str_replace("Z", " ", $pretty_date);
} elseif ($item['issued'] != "") {
// ATOM 0.3 format, remove the "T" and "Z" and the time zone offset
$pretty_date = str_replace("T", " ", $item['issued']);
$pretty_date= str_replace("Z", " ", $pretty_date);
} elseif ( $item['dc']['date'] != "") {
// RSS 1.0, remove the "T" and the time zone offset
$pretty_date = str_replace("T", " ", $item['dc']['date']);
$pretty_date = substr($pretty_date, 0,-6);
} else {
// no time/date stamp,
$pretty_date = 'n/a';
}
} else {
// convert to local time via conversion to GMT + offset
// adjust local server time to GMT and then adjust time according to user
// entered offset.
$pretty_date = date($date_format, $item['date_timestamp'] - $tz_offset + $tz * 3600);
}
$pretty_date = substr($pretty_date, 0,-8);
}
// write the title strng
$str.= "document.write('<li class=\"rss-item\">$pretty_date <a class=\"rss-item\" href=\"" . trim($my_url) . "\" title=\"$title_str\"". $target_window . '>' . $my_title . "</a><br />');\n";
} else {
// if no title, build a link to tag on the description
$str.= "document.write('<li class=\"rss-item\">');\n";
$more_link = " <a class=\"rss-item\" href=\"" . trim($my_url) . '"' . $target_window . ">«details»</a>";
}
// link to podcast media if availavle
...後略...
2.西暦を2桁にする
表示されている西暦を4桁から2桁にするには、1項で追加した、
$pretty_date = substr($pretty_date, 0,-8);
を
$pretty_date = substr($pretty_date, 2,-8);
に変更します。
3.時刻を表示する
時刻を表示するには、1項で追加した、
$pretty_date = substr($pretty_date, 0,-8);
の1行を丸ごと削除してください。
Feed2JS の表示結果の title 属性をカスタマイズする
フィードの内容をブログ等に表示するツール「Feed2JS」を使ったときに、a 要素部分に設定される title 属性をカスタマイズする方法を紹介します。
Feed2JS の詳細については、「RSS Feed(フィード)を表示する」をご覧ください。
下の例は、はてなブックマーク「最近の人気エントリー」のフィードを表示した場合の、変更前と変更後です。変更前はリンクのツールチップをポイントすると、ずらずらと日本語が表示されますが、変更後はタイトルのみを表示します(title 要素の内容は RSS フィードの description 要素から取得しています)。
変更前

変更後

また、title 属性自体を削除することも可能です。

時々、Feed2JS の質問を頂くことがあるのですが、紹介してから個人的には使っていなかったため、質問を頂いてもスルーさせて頂いている状態でした。ということで、お詫びをかねて以前頂いた質問を元にエントリー致します。
1.title 属性にタイトルを適用する
自サーバにアップロードした feed2js ディレクトリ直下にある、feed2js.php の 202 行目(確認バージョンは1.98)にある、下記の赤色部分を青色部分のように変更します。バージョンによって行が異なる場合は似たような箇所をみつけてください。
変更前
...前略...
// write the title strng
$str.= "document.write('<li class=\"rss-item\"><a class=\"rss-item\" href=\"" . trim($my_url) . "\" title=\"$title_str\"". $target_window . '>' . $my_title . "</a><br />');\n";
...後略...
変更後
...前略...
// write the title strng
$str.= "document.write('<li class=\"rss-item\"><a class=\"rss-item\" href=\"" . trim($my_url) . "\" title=\"Jump to $my_title\"". $target_window . '>' . $my_title . "</a><br />');\n";
...後略...
2.title 属性を表示しない
1項と同じ、feed2js.php の 202 行目(確認バージョンは1.98)にある、下記の赤色部分を削除してください。バージョンによって行が異なる場合は似たような箇所をみつけてください。ダブルクォーテーションを消しすぎないように気をつけましょう。
変更前
...前略...
// write the title strng
$str.= "document.write('<li class=\"rss-item\"><a class=\"rss-item\" href=\"" . trim($my_url) . "\" title=\"$title_str\"". $target_window . '>' . $my_title . "</a><br />');\n";
...後略...
変更後
// write the title strng
$str.= "document.write('<li class=\"rss-item\"><a class=\"rss-item\" href=\"" . trim($my_url) . "\" ". $target_window . '>' . $my_title . "</a><br />');\n";
RSS Feed(フィード)を表示する(サービス利用編)
Feed2JS はフリーのサービスです。RSS フィードを HTML として表示させる仕組みは、まずこの Feed2JS に対し、ブログに表示したい RSS フィードのURLを入力して、それに対応する JavaScript を生成します。そしてこの JavaScript をブログに貼り付けまておきます。あとはページを表示することで、JavaScript から Feed2JS のPHPを起動し、さらにPHPのプログラムから RSS フィードを取得し、HTML に変換して表示する、という訳です。 なおこのサービスで日本語を利用する場合は UTF-8 での出力が前提とするため、他の文字コードで出力する場合は、前回の「RSS フィードをブログに表示する」で文字コードを変更する必要があります。 |
1.Feed2JS へのアクセス
2.RSSの設定
以下、設定項目について解説します。 |
- URL
- 表示させたい RSSフィードの URL を記入します。例えば、はてなブックマークの「最近の人気エントリー」の RSS であれば
を入力します。Atom も可能です。http://b.hatena.ne.jp/hotentry?mode=rss
- 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」をクリックすれば実際の表示を別ウィンドウで確認できます。表示を確認しながら設定を変更すると良いでしょう。
4.JavaScript 生成
設定が完了したらページ右側にある「Generate JavaScript」をクリックしてください。設定が確定していない場合でも、次のページで変更できますのでご安心ください。
生成されたスクリプトにある language="JavaScript" は非推奨ですので、貼り付けた後で削除しておくと良いでしょう。
5.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マークアップ
6.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 を利用するのが良いでしょう。
7.表示の遅延を解消する
サービスとして利用するため、サーバのレスポンス等によっては表示が遅延する可能性があります。そういう場合は「BlogPeople 等のリンクリストによる表示の遅延を解消する(その1:JavaScript編)」を試してみてください。
RSS Feed(フィード)を表示する
Feed2JS はフリーのツールです。RSS フィードを HTML として表示させる仕組みは、まずこの Feed2JS に対し、ブログに表示したい RSS フィードのURLを入力して、それに対応する JavaScript を生成します。そしてこの JavaScript をブログに貼り付けまておきます。あとはページを表示することで、JavaScript から Feed2JS のPHPを起動し、さらにPHPのプログラムから RSS フィードを取得し、HTML に変換して表示する、という訳です。 Feed2JS はサービスとして利用することもできますが、このエントリーでは公開されているソースをご自身がご利用されているサーバにインストールして利用するカスタマイズについて説明します。したがってサーバ上で PHP が動作可能であることが条件です。 |
1.Feed2JS のダウンロード
2.Magpie RSS のダウンロード
*この作業は Magpie RSS のアップグレードが必要な場合のみ(Magpie RSS は FeedRS に同梱されています)ですのでスキップしてください。
3.アップロード
/feed2js /magpie /style build.php :- リスト 3.1 アップロード後のディレクトリ構成
という構成になります。
2項の magpie をアップグレードする場合は、feed2js 配下にある magpie ディレクトリ配下のファイルを入れ替えます。
4.パーミッションの変更
4.1 ファイルのパーミッション変更
feed2js 直下にあるファイルで、拡張子が ".php" のファイル(下記)のパーミッションを 755 等(値はご利用のサーバによって異なりますので、適宜ご確認ください)に変更してください。
build.php feed2js.php feed2js_config.php magpie_debug.php magpie_simple.php nosource.php preview.php style.php style_preview.php- リスト 4.1 パーミッションを変更するファイル
先頭が "._" で始まっているファイルのパーミッションは変更する必要はありません。
4.2 ディレクトリのパーミッション変更
magpieディレクトリにある cache と cache_utf8 のパーミッションを 777に変更します。
5.Feed2JS の動作テスト
Feed2JS が正常に動作することをテストします。ブラウザに下記のURLを入力して実行してください。
http://[user-domain]/feed2js/magpie_debug.php- リスト 5.1 動作テスト用URL
user-domain の部分はご自身のURLを設定してください。
これがOKであれば、インストール完了です。
実際に RSS フィードから JavaScript を生成する方法については次項の内容にしたがってください。
6.RSSの設定
ブラウザに下記のURLを入力して実行してください。
http://[user-domain]/feed2js/build.php- リスト 6.1 Feed2JS実行用URL
以下、設定項目について解説します。 |
- URL
- 表示させたい RSSフィードの URL を記入します。例えば、はてなブックマークの「最近の人気エントリー」の RSS であれば
を入力します。Atom も可能です。http://b.hatena.ne.jp/hotentry?mode=rss
- 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」をクリックすれば実際の表示を別ウィンドウで確認できます。表示を確認しながら設定を変更すると良いでしょう。
8.JavaScript 生成
設定が完了したらページ右側にある「Generate JavaScript」をクリックしてください。設定が確定していない場合でも、次のページで変更できますのでご安心ください。
生成されたスクリプトにある language="JavaScript" は非推奨ですので、貼り付けた後で削除しておくと良いでしょう。
9.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>- リスト 9.1 HTMLマークアップ
10.CSS
冒頭のスクリーンショットの「はてなブックマーク:最近の人気エントリー」リストの CSS を掲載しておきます。
リストは「タイトル説明なし」「5件表示」「記事概要表示なし」という設定で、公開テンプレートに下記のセレクタを追加しています。
.rss-items, .side { margin: 3px 0 20px; background: none; color: #444444; font-size: 10px; _font-size: 9px; line-height: 150%; }- リスト 10.1 CSS
タイトル部分は手抜きで、手書きで、
<div class="sidetitle">はてぶ 最近の人気エントリー</div>
としていますがタイトル表示をさせて .rss-title を利用するのが良いでしょう。
11.文字コードについて
このツールでの日本語表示は UTF-8 での出力が前提となっているため、他の文字コードで出力する場合は、feed2js.php の 136 行目辺り(リスト11.1)のすぐ下に、11.1項(リスト11.2)、または11.2項(リスト11.3)の 1行を追加するといいようです。
指定行数はバージョンによって異なる可能性がありますのでご了承ください(リストの文字列で検索すると良いでしょう)。
$rss = @fetch_rss( $src );- リスト 11.1 文字コード変更ポイント
11.1 文字コードを EUC-JP にする場合
$rss = @fetch_rss( $src ); mb_convert_variables("EUC-JP","UTF-8",$rss);- リスト 11.2 文字コードを EUC-JP にする場合
11.2 文字コードを Shift_JIS にする場合
$rss = @fetch_rss( $src ); mb_convert_variables("SJIS","UTF-8",$rss);- リスト 11.3 文字コードを Shift_JIS にする場合
11項の参考サイトは下記です。ありがとうございました。
昨日紹介した「
