Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

Feed2JS

Oct102007
Vote:
http://bizcaz.com/archives/2007/10/10-000829.php
Categories: JavaScript
Tags: JavaScript
Social Bookmark

Prev Page: リンクテキストをロールオーバする（scrollover.js）
Next Page: ブラウザのスクロールに連動する RSS アイコン表示

こんばんわ^^

さすがに T シャツ、ショートパンツだけじゃ寒くっていられなくなってしまいました。
なので、去年誕生日プレゼントでもらった 'ペンギンの着ぐるみ' を着てる bzbell です。

ダボダボしてるせいで中がスースーしてあまり温かくないわ、着脱しにくいわであまり活躍しないと思う (;￣∇￣A 着れるのは秋だけかな。

さてさて、今回は訪問者さんのブログやお気に入りのブログさんのフィードを読込んで最近のエントリを自分のサイトにリンクしてみたのでご紹介です。

以前、小粋空間さんのところで紹介されてた、Feed2JS を使用します。

Feed2JS とは、RSS フィードを (X)HTML で表示できるよう変換してくれるツールです。
フリーで配布されていて、自分のサーバ上にアップロードして使います。

サービスとしても提供されているようですが、いろんなサイトを見るとやっぱり重たいらしく、サーバ上にアップロードして使ったほうがいいみたいですの。

ということで、Feed2JS のインストールから設定までを説明します。

Feed2JS のインストール

まず、Feed2JS をダウンロードします。
こちらの Download ページ内に「1. Get the Latest Source Code now available on eduforge 」とありますので、「eduforge」のリンクをクリックしてください。

feed2js.zip ファイルをダウンロードします。
2007.10.09 付けの最新バージョンは ver1.91b です。
次に、Feed2JS をサーバにアップロードします。
feed2js.zip を適当なフォルダに展開して feed2js/ フォルダを丸ごとサーバにアップロードしてください。
ファイルおよび、ディレクトリのパーミッションを変更します。
アップロードしたすべての PHP ファイルのパーミッションを、お使いのサーバに合わせて変更します。
たとえば、CORESERVER では 705 としています。さくらインターネットでは 755 になります。

以下に PHP ファイルの一覧を記します。
1. feed2js/
2. |
3. +-- build.php
4. +-- feed2js.php
5. +-- feed2js_config.php
6. +-- magpie_debug.php
7. +-- nosource.php
8. +-- preview.php
9. +-- magpie_simple.php
10. +-- style.php
11. +-- style_preview.php
12. |
13. +-- style
14. | +-- style_pile.php
次に以下のディレクトリのパーミッションを変更します。
こちらもお使いのサーバに合わせて変更してください。CORESERVER では 755 です。
Feed2JS の動作確認を行います。
アップロードした feed2js/magpie_debug.php をブラウザで表示します。
こちらのようなページが表示されれば OK です。
表示されなかった場合、PHP ファイルのパーミッションなどを再確認してください。

以上で Feed2JS のインストールは完了です。

Feed2JS の使い方

ブラウザで feed2js/build.php を表示します。
こちらのようなページが表示されるはずです。
各項目を入力します。
項目の説明をカンタンに記します。
- URL
  
  表示させたいサイトさんの RSS フィードの URL を入力します。ブログの URL ではないのでご注意ください。
- Show channel?
  
  ブログタイトル／ブログ説明の表示有無を選択します。
  yesはブログタイトルとブログ説明が表示されます。
  titleはブログタイトルのみ表示されます。
  noはブログタイトル、ブログ説明共に表示されません。
  
  わたしは 'no' を選択しました。
- Number of items to display
  
  表示したいエントリ数を入力します。最新のエントリから入力した数分表示されます。 0 だと RSS で公開されているすべてのエントリが表示されます。
  
  わたしは最新のエントリ 3 件分を表示させてます。
- Show/Hide item descriptions? How much?
  
  各エントリの概要の文字数を入力します。
  0 だとエントリの概要は表示されません。
  1 だと RSS で公開されている概要すべてが表示されます。
  -1 は何も表示されません。
  
  わたしは任意の文字数(48)としました。
- Use HTML in item display?
  
  エントリ内の (X)HTML の扱いについて選択します。
  yes は (X)HTML を有効にします。
  no は (X)HTML を除外して、テキストのみ表示されます。
  -preserve paragraphs only は改行(<br />)のみ有効とします。
  
  わたしは 'no' を選択しました。
- Show item posting date?
  
  エントリの投稿日時の表示／非表示を選択します。
  yes は投稿日時が表示されます。
  no は投稿日時は表示されません。
  
  わたしは 'yes' を選択してます。
- Time Zone Offset
  
  タイムゾーンを入力します。
  ここは +9 と入力してください。また、RSS 内の時刻を使用したい場合には、feed と入力するよう明記されてます。
  
  わたしは '+9' としました。
- Target links in the new window?
  
  リンクをクリックしたときの動作を選択します。
  n はそのまま同じウィンドウに表示されます。
  y は別ウィンドウを開いて表示されます。
  xxxx はフレームを使用している場合、フレームのウィンドウ名を指定することができるようです。
  popup は JavaScript を使用するみたいです。
  
  わたしは 'n' としました。
- UTF-8 Character Encoding
  
  文字コードを選択します。
  UTF-8 を使用している場合はチェックするのかな!? それとも、日本語使用の場合はチェックするのかなぁ･･･。
  
  わたしはチェックしました。
- Podcast enclosures
  
  メディアファイルのリンク有無を選択します。
  yes はリンクが表示されます。
  no は表示されません。
  
  わたしは 'no' を選択しました。
- Custom CSS Class
  
  任意のクラス名称を指定できます。
  デフォルトでは <div class="rss-box">～</div> で囲われたタグが出力されますが、rss-box-XXXX の XXXX を指定することで任意のボックス名称を指定することができます。
  
  たとえば、複数のフィードを表示した場合、それぞれ異なるスタイルを適用させたい場合にいいかも、です。
一通り入力したら、ページ真ん中の右側にある「Preview Feed」ボタンで確認します。
自分の期待通りの出力がされてるなら、「Generate JavaScript」ボタンをクリックします。
後は出力された JavaScript を貼り付けて、サイトデザインに合わせて CSS で定義するだけです。
出力されるスタイルは、こちらのページの CSS classes に明記されています。