以前、ブログのリンクに、エントリをロールしなから表示するＲＳＳを装備しました！ってのをやったのですが、そのときはPHPなんかを使わなくちゃならないし、エンコードの修正なんかも気にしなければならなくて、少し取っ付きづらい内容だったかもしれません。
ですが、もう少し簡単な方法が（同じく）ダイナミックドライブにありますので、紹介させていただきます。
尚、現在このページのナビゲーションバーで表示されているリンクはこの方法を適用しています。
今回の方法で必要な知識や制限は
- HTMLタグについて理解している
- javascript少し判る
- スタイルシート(css)が少し判る
- グーグルにアク禁くらってない
です。
４．はどういうことかといいますと、「人に聞いてばかりいないで少しは自分で調べてくれよ！」という暗喩ではなくて、実際にGoogle AJAX Feed APIというサービスを利用するためです。アク禁くらってる人なんていませんよね。へへへ。
＜適用までの概要＞
では概要を簡単に説明します。
まず、Google AJAX Feed APIで”API Key”というものを取得します。
次に用意されている javascript に API Key を貼り付けます。
ちょっとスタイルシートを修正や変更するなどして、
ご自身がリンクしたいページ（ html ）に script を書き込んであげます。
いかがでしょうか。簡単そうですね。では詳細説明に移ります。スクリーンショットなどを用意しておりますので、こちらも参考にしてください。
それではまず、ダイナミックドライブで公開しているgAjax RSS Pausing Scroller (hosted)を開いてください。
英文ですね。ちょっと見てみます。
”Description: gAjax RSS Pausing scroller is a flexible RSS scroller that's extremely easy to set up to boot. Using the gAjax RSS Displayer script engine, there's nothing to install or host on your server. Furthermore, you can display results from multiple feeds intermixed, sort them in a variety of ways, specify how many entries to show at once, what portion of each entry to show etc. There is simply no more versatile script RSS scroller out there!”
要約すると、
「この"gAjax RSS Pausing scroller"はセットアップが簡単。gAjax RSS Displayer script engine（外部API）を使ってるので、あなたが使っているサーバに何かインストールするようなことはありません。
カスタマイズにも富んでいて、例えば様々なサイトフィードを一度にまとめて見せるようなことまで出来ます。」
といった感じでしょうか。至れり尽くせりですね。
＜STEP1 - 資材集め＞
それではここで必要な資材をダウンロードしちゃいましょう。
- gfeedfetcher.js
- gajaxscroller.js
- indicator.gif ： なんかオレンジのくるくる回ってる gif 画像です。右クリックでダウンロードしましょう
- htmlのコピー ： HTML文書を記述したフィールドが、リンク先のページの step1 と step3 にありますのでコピーして、エディタにでも貼り付けて任意の名前（*.html）で保存してください。これは実際にスクリプトを実行する箇所ですね。
ダイナミックドライブでの資材は上記のとおり４つです。
そうしましたら、次にGoogle AJAX Feed APIへ移動して、API Keyを取得します。
規約に同意するチェックボックスにチェックを入れて、ご使用するページのURLを入力しGenerate API Keyを押下します。
すると
your key is の下に発行された API KEY が表示されます。これをまたエディタにでも貼り付けて置いてください。
その下部に表示されているのは、ご自身が入力したURLとサンプルスクリプトです。今回は"gAjax RSS Pausing Scroller"のスクリプトを使用するためこれらは特に必要ありません。
これで必要な資材５点がすべて整いました。
それではスクリプトの中身を見てみましょう。主だった注意点としては、これらの資材を置くパスくらいなので、ご自身の環境に合わせて読んでください。
＜STEP2 - スクリプトの修正＞
まず indicator.gif ですが、これはフィードを待ち受けている状態時に表示されるインジケーターイメージです。ご自身で用意したイメージファイルと差し替えることも出来ます。
差し替える場合は gajaxscroller.js の７行目
var gfeedfetcher_loading_image="indicator.gif"
のパスやファイル名に注意してスクリプトを変更してください。
ワタシが置いているパスはこんな感じになりました。
var gfeedfetcher_loading_image="http://mojalog.backdrop.jp/mojascript/indicator.gif"
同様に、 gfeedfetcher.js の６行目でも同じように修正してください。
用意されている２つのスクリプトは他にいじるところはありません。
＜STEP3 - 呼び出しスクリプトの作成＞
それではダイナミックドライブでコピーしたHTML文書を見てみましょう。
ここに記述されているのは
- Google AJAX Feed APIの呼び出しタグ
- gfeedfetcher.jsの呼び出しタグ
- gajaxscroller.jsの呼び出しタグ
- 適用スタイルタグ
- gAjax RSS Pausing Scrollerの起動スクリプトタグとスクリプト
です。
まず、１．の「Google AJAX Feed APIの呼び出しタグ」についてですが、<head>タグ内の
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY"></script>
というところを探してください。そのまま貼り付けていれば４行目になるかと思います。
このタグの後方YOUR-API-KEYという記述をGoogle AJAX Feed APIで取得した API KEY と差し替えます。差し替えると下記のようになるかと思います。
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAwDsQ33V9LWoWEupLBOM7fxTAn6B-3LYIdG1Qoai9MNolrihdFhSUR1QatK5Tv4****************"></script>
修正が済みましたら、次は２～３の「呼び出しタグ」です。６行目から１７行目にわたって記述されています。
"This notice MUST stay intact for legal use" とあるのでコメントも残します。使わせて頂いておりますよ。ありがとうございます(ﾟ∀ﾟ)ﾉシ
<script type="text/javascript" src="gfeedfetcher.js"></script>
<script type="text/javascript" src="gajaxscroller.js">
/***********************************************
* gAjax RSS Pausing Scroller- (c) Dynamic Drive (www.dynamicdrive.com)
* Requires "gfeedfetcher.js" class
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
とりあえず、ここまででスクリプトが動くかどうか確認が取れるはずです。このHTMLファイルをローカルに保存して、ブラウザで開いてみましょう！
いかがでしょうか。下から上に受けながｓ動いておりますね。すごい！
では、ご自身が拾いたいRSSフィードを用意して、起動メソッドの部分を見ていきましょう。
宣伝させていただきますと、 mojalog の RSS フィードは
http://mojalog.com/index.xml
で取得できます。いらないすか。そうすか。へへへ。
そうしましたら、とりあえず、４の「スタイルの適用」を飛ばして５に行きます。多分そうしたほうが流れが判りやすいと思ってのことです。
７７行目あたりからこのスクリプトの起動メソッドが記述されています。
例が３つほどありますね。
今ご自身が作られたhtmlファイルをブラウザで開きながらみたら判りやすいかもしれません
７７行目の"Example 1"がワタシが適用しているスクリプトです。
９４行目に"Example 2"、１１２行目に"Example 3"とありますね。動きはブラウザで見たとおりなのですが、ちょっと解説を入れてみます。
[ Example 1 ]
これは１つのRSSフィード（１サイト）を２秒毎に１０個のエントリでスクロールし続ける例です。
スクロールは表示エリアに１つずつですね。日付（ date ）もあわせて表示しています。
そして、この例では判りにくいですが（例２で判ると思います）エントリごとに div タグでラップしています。
[ Example 2 ]
これは、２つのRSSフィードを３秒毎に合計２０個のエントリで、交互に５エントリーずつ表示させています。
さらにエントリのラベル（サイト名などを自分でラベリングできます）と日時（ datetime ）を表示しています。
ラベルでソートしているため、サイトごとのフィードでかわりばんこに表示されます。
そして、エントリごとに li タグでラップしています。（「・」が文頭に打たれていますね。）
頻繁に更新されるニュースサイトなどのRSSを設定するといいかもしれませんね。
[ Example 3 ]
これは３つのRSSフィードを２．５秒毎にに合計８個のエントリで、交互に２エントリーずつ表示させています。
さらにエントリの要約を表示させています。日時でソート（規則的に並び替え）しているためそれぞれのフィードが新着順で表示されます。
そして、エントリごとに p タグでラップしています。
これはエントリの要約が入ってくるので、大きめのスペースを作ってあげる必要がありますね。
ということで、カスタマイズできる内容が盛りだくさんです。いろいろあわせ技でご自信のサイトにあった形で適用できますね！
一応カスタマイズできる要素を列挙しておきます。
- 表示時間
- ラベル
- 表示順
- 表示数
- 日付と日時表示
- 表示毎のラッパータグ
- 表示スタイルシート
- エントリクリック時の挙動
と、こんなところでしょうか。
では、[ Example 1 ] の実装を見てみましょう。
01:> <script type="text/javascript">
02:>
03:> var cssfeed=new gfeedpausescroller("example1", "example1class", 2000, "_new")
04:> cssfeed.addFeed( "CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed
05:> cssfeed.displayoptions("date") //show the specified additional fields
06:> cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
07:> cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
08:> cssfeed.entries_per_page(1)
09:> cssfeed.init()
10:>
11:> </script>
まず３行目で gfeedpausescroller を生成しています。
引数が４つありますね。
第１引数："example1"は適用されるタグのidです。（実際に使われるのは div タグなのですが、この id となります。つまり一意でなくてはなりませんね。※スタイルシートの適用の説明で後述します）
第２引数："example1class"は適用されるタグの class です。
第３引数：2000は何秒ごとにスクロールされるかですね。msecで与えてあげてください。
第４引数："_new"はエントリをクリックしたときに新しくブラウザを立ち上げるようになっています。えーと、リンクターゲットですね。
４行目のaddFeedメソッドは読んで字のごとく、フィードの追加処理です。
引数が２つあります。
第１引数："CSS Drive"はラベルです。ラベルを表示する場合はこの引数が表示されます。サイト名などを設定してあげれば言いと思います。
第２引数："http://www.cssdrive.com/index.php/news/rss_2.0/"はRSSフィードのURLですね。間違えないようにしてください。
５行目のdisplayoptionsメソッドも読んで字のごとくですが、ディスプレイオプションです。
引数が１つあります。
第１引数："date"は日付（例 9月2日）表示がエントリに追記できます。他にも"date", "time", "datetime", "label", "snippet", "description"が設定でき、文字列内でスペースで区切って複数指定できます。
例）"date label snippet"
６行目setentrycontainerメソッドはエントリごとにラップできるタグを与えることが出来るようです。
７行目のfilterfeedメソッドはエントリの表示数とソートを決定する処理です。
第１引数：10は、全部で１０エントリをスクロール数として持つということです。
第２引数："date"は、日付順（新着順）でスクロールされます。
８行目のentries_per_pageメソッドは１スクロールごとにいくつのエントリを表示させるかです。
９行目のinitメソッドは初期化メソッドのようです。必ず最後に呼び出さなければならないみたいですね。
尚、上記のメソッドの解説はダイナミックドライブでも詳しい解説があります。
英文で且つ技術的な説明ですが、このページと読み比べたりすれば多分プログラマじゃなくとも大丈夫だと思います。
ソースの解説はこんな感じになりますが、１つ注意しておくべき点は、インスタンスの変数名です。
ちょっとプログラムをやってない方は敷居が高いことかもしれませんが、一応記しておきます。
[ Example 1 / 2 / 3 ] の冒頭箇所にインスタンスの生成をしている箇所がありますが、もし、このように複数のスクリプトタグを１つのページに埋め込みたい場合は、スクリプトタグのスコープ（範囲）毎にこの変数名をそれぞれ異なった（任意の）ものにしてください。
下記のように、 Example のなかでも変数名が異なっていますね。また、このインスタンス（変数）からメソッドを呼び出すので、任意に作った変数を使う場合は、その箇所も合わせて変更してください。
[ Example 1 ]
var cssfeed=new gfeedpausescroller("example1", "example1class", 2000, "_new")
cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/")
・・・以下すべての変数名に注意
[ Example 2 ]
var socialfeed=new gfeedpausescroller("example2", "example2class", 3000, "")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot")
・・・以下すべての変数名に注意
[ Example 3 ]
var newsfeed=new gfeedpausescroller("example3", "example3class", 2500, "_new")
newsfeed.addFeed("BBC", "http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml")
・・・以下すべての変数名に注意
最後に飛ばした４適用スタイルタグについてです。
これは実際にブログなどに適用する際、*.cssファイルとしてもったほうが、場合によってはいいんじゃないかと思います。また、デザイン上の説明は特にいたしませんので、ご自身でいじくってみてください。
それでは、説明ですが、注意点がひとつだけありまして、スクリプトのコンストラクタである
gfeedpausescrollerメソッドの第１引数と、idとなる名称を合わせてください。
また、スクリプトをまたいで同じ id を指定すると、１番初めに取得した id 以降のスクリプトは正しい挙動が得られないようです。
わかりにくい説明ですね。。。
つまり、以下のようになります。
<style type="text/css">
#example1{
/* なんかデザインして */
}
</style>
<script type="text/javascript">
/* 第１引数のid名をスタイルから選ぶ "example1" */
var hogefeed=new gfeedpausescroller( "example1", "example1class", 2000, "_new" )
・・・
</script>
<script type="text/javascript">
/* 第１引数のid名を既に使われているスタイルから("example1")選ぶとこれは動かない（みたい） */
var mogefeed=new gfeedpausescroller( "example1", "example1class", 2000, "_new" )
・・・
</script>
とこんな感じです。なので、この生成するインスタンスごとに id を作成してください。
インスタンスを２つ使用するのであれば、別名の id をもった#example2を作成する必要があります。
尚、第２引数のクラス名はちょっとメソッドとスタイルの関係が読みきれていませんで（すみません）、とりあえず、例のようにサフィックスとしてclassと付与してあげるようなカタチで、第１引数名+classとしてあげればいいと思います。
それでは、ご自分でカスタマイズしたhtmlファイルを保存して動かしてみてください。
＜STEP4 - サイトやブログに適用＞
各々の環境の違いがありますので深くは説明しませんが、流れはおそらく以下のようになるかと思います。
- gfeedfetcher.jsのアップロード
- gajaxscroller.jsのアップロード
- indicator.gifのアップロード
- （cssファイルのアップロード。直接 html ファイルにスタイルタグを打つ場合はいらないです）
- blog や html にスクリプトを記述。
<script type="text/javascript" src="http://www.google.com/jsa～
<script type="text/javascript" src="gfeedfetcher.js～
<script type="text/javascript" src="gajaxscroller.js～
ご自身のカスタマイズスクリプトを記述。
※それぞれ、ファイルのパスの指定には注意してください。
うーん。いかがでしょうか。なるべく平易に書いてるつもりですが、わからなければコメントに記載いただければ、ワタシもわかる範囲でお答えします。ただ、ワタシはこのgAjax RSS Pausing scrollerを作成した本人ではありませんので、スクリプトの中身の動きについての質問はご容赦ください。
ほいでわ。
