小粋空間: ツールアーカイブ

Top ＞ツール [全て開く]

2009年6月16日

Feed2JS の表示結果のタイトルに日付を表示する

June 16,2009 1:55 AM
Tag：[Blog, Customize, Feed2JS, JavaScript, PHP, RSS, Tool]
Permalink

フィードの内容をブログ等に表示するツール「Feed2JS」を使ったときに、タイトル横に日付を表示する方法です。

Feed2JS の詳細については、「RSS Feed（フィード）を表示する」をご覧ください。

下の例は、はてなブックマーク「最近の人気エントリー」のフィードを表示した場合の、変更前と変更後です。変更前はタイトル下に日付と時刻が表示されますが、変更後はタイトルの左に日付を表示します（いずれも設定項目の「Show item posting date? 」を「Yes」に設定）。

変更前

変更後

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

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

１．タイトル横に日付を適用する

自サーバにアップロードした 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 . ">&laquo;details&raquo;</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 . ">&laquo;details&raquo;</a>";
}
 
// link to podcast media if availavle
...後略...

２．西暦を2桁にする

表示されている西暦を4桁から2桁にするには、１項で追加した、

$pretty_date = substr($pretty_date, 0,-8);

を

$pretty_date = substr($pretty_date, 2,-8);

に変更します。

３．時刻を表示する

時刻を表示するには、１項で追加した、

$pretty_date = substr($pretty_date, 0,-8);

の1行を丸ごと削除してください。

Comments [2] | Trackbacks [0]

2009年6月 9日

Feed2JS の表示結果の title 属性をカスタマイズする

June 9,2009 1:55 AM
Tag：[Blog, Customize, Feed2JS, JavaScript, PHP, RSS, Tool]
Permalink

フィードの内容をブログ等に表示するツール「Feed2JS」を使ったときに、a 要素部分に設定される title 属性をカスタマイズする方法を紹介します。

Feed2JS の詳細については、「RSS Feed（フィード）を表示する」をご覧ください。

下の例は、はてなブックマーク「最近の人気エントリー」のフィードを表示した場合の、変更前と変更後です。変更前はリンクのツールチップをポイントすると、ずらずらと日本語が表示されますが、変更後はタイトルのみを表示します（title 要素の内容は RSS フィードの description 要素から取得しています）。

変更前

変更後

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

時々、Feed2JS の質問を頂くことがあるのですが、紹介してから個人的には使っていなかったため、質問を頂いてもスルーさせて頂いている状態でした。ということで、お詫びをかねて以前頂いた質問を元にエントリー致します。

１．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";
...後略...

２．title 属性を表示しない

１項と同じ、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";

Comments [1] | Trackbacks [0]

2006年12月12日

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

December 12,2006 1:35 AM
Tag：[Blog, JavaScript, RSS]
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 フィードをブログに表示する」で文字コードを変更する必要があります。

１．Feed2JS へのアクセス

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

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

３．プレビュー

前項のページ右側にある「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編）」を試してみてください。

Comments [0] | Trackbacks [8]

2006年12月11日

RSS Feed（フィード）を表示する

December 11,2006 12:38 AM
Tag：[Blog, JavaScript, PHP, RSS, Tool]
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（フィード）を表示する（サービス利用編）」を参照ください。

１．Feed2JS のダウンロード

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

次のページで「Installation」の「1. Get the Latest Source Code now available on eduforge」の eduforge をクリック。

feed2js.zip をクリックして任意のフォルダに保存。

２．Magpie RSS のダウンロード

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

１項の最初のページにある「2. Download and install the Magpie RSS」の Magpie RSS をクリック。

「DOWNLOAD」のリンクをクリック。

「Download」のリンクをクリック。

ページ後方にある「magpierss-0.72.tar.gz」のリンクをクリック（0.72 の部分は変わるかもしれません）。

３．アップロード

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

/feed2js
　　/magpie
　　/style
　　build.php
　　　　：

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

という構成になります。

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

４．パーミッションの変更

４．１ファイルのパーミッション変更

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　パーミッションを変更するファイル

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

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

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

５．Feed2JS の動作テスト

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

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

リスト 5.1　動作テスト用URL

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

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

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

６．RSSの設定

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

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

リスト 6.1　Feed2JS実行用URL

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