2009年 04月 27日
複数のRSSフィードをひとつのタブにまとめて読み込み、そんなタブを最大５つまで表示させるスクリプトジェネレーター、作っちゃいました！
その名も「複数RSSまとめ＆タブ化ジェネレーター」!!
Yes！そのまんま！Yes!!
タブに表示させたいタイトルと、それぞれのタブで読み込みたいRSSフィードのURLを入力するだけで、いともたやすくスクリプトが生成されます。あとはそのスクリプトを自分のサイトに貼っ付けるだけ。
どなたでも簡単に実装できます。もちろん使用無料のMIT-lisenceなフリーウェア！今回のエントリーは、smkn渾身のWEBサービス「複数RSSまとめ＆タブ化ジェネレーター」のご紹介です！
「複数RSSまとめ＆タブ化ジェネレーター」について
まずはどんなモンが生成されるのか、以下のサンプルをご覧ください。
上記サンプルページのようなものを実装するために必要なマークアップ(xhtml)～スクリプト(Javascript)を生成します。
生成されるスクリプト以外に必要なもの（各種JSライブラリやcssなど）は、「必須データ詰め合わせ.zip」として一括ダウンロードできます。
なお、複数のRSSフィードをひとつにまとめる部分には「Google feed API」を利用し、切り替え可能なタブの実装には「jQuery」と「jQuery-tabs（from ´jQuery UI´）」を使用しています。
以下より、この「複数RSSまとめ＆タブ化ジェネレーター」で生成されるスクリプトの詳細な使用法です。
「複数RSSまとめ＆タブ化ジェネレーター」の使い方
1.「Google AJAX Feed APIキー」の取得。
「複数RSSまとめ＆タブ化ジェネレーター」では、複数のRSSフィードをひとつにまとめる部分に「Google AJAX Feed API」を利用しています。
「Google AJAX Feed API」の利用には登録申請が必要なので、まずはこの登録申請を行い、APIのキーを取得します。
「Google AJAX Feed API」キーを取得する方法。
- 事前にGoogleアカウントでGoogleにログインしておいてください。
- Google AJAX Feed API への登録ページに飛ぶ。
- 利用規約に同意のうえ、使用するサイトのURLを登録してください。
- Google AJAX Feed APIキーが生成されます。
上記手順でAPIキーを入手したら、次項に進みます。
2.「必須データ詰め合わせ」のダウンロード。
タブ回りのJavaScriptやCSS、画像データなんかをzipでまとめましたので、これをダウンロードします。
zipの中にはcss / js / imgの各フォルダ＋template.htmlが同梱されています。
template.htmlでは、あらかじめ各JavaScriptやcssへのリンクパスを合わせていますので、ジェネレーターで生成されたスクリプトをtemplate.htmlのbodyの内側に貼り付ければ、まず問題なく動作すると思います。
もし既存のサイトに導入する場合は、各フォルダの中身をお持ちのサイトの適切なフォルダに移動させたのち、CSS内の画像リンクパスを修正して利用してください。
※imgフォルダ内の画像（タブに使用しています）は、cssで設定しています。Template.zipとフォルダ構成が違う場合は、css内のimgへのパスを書き換えてください。
次はいよいよスクリプトの生成です！
3.「複数RSSまとめ＆タブ化ジェネレーター」ページでスクリプトを生成する。
「複数RSSまとめ＆タブ化ジェネレーター」ページに飛び、各フォームにタブのタイトルやRSSフィードなどを入力していきます。
RSSフィードのURLは、１ＵＲＬごとに改行してくだしあ。
タブは最大５つまで生成可能です。読み込むRSSのURLやフィードの数に関してですが、１タブにつき「読み込むフィードURLの数×取得する記事数」が50以内、っていう規制を設けました。
あと、タブの名前を長くし過ぎると、ちょっと不恰好になるかもです。
ITキヲスクのRSSがタブ１か２に必ず読み込まれる仕様となっておりますが、こちらは当ブログの宣伝的なモノと捉えていただければと思います。いわゆる下心です♪
どーしても気に食わない・要らないよーって場合は、削除しちゃっても構いません。
ですが、もしこのジェネレーターを良く思ってくださったなら、投げ銭と思ってお許しくださいm(_ _)m
そんなこんなで生成したら、そのスクリプトを使用するサイトの<body></body>の中にぶっ込んでください。
タブの大きさや文字サイズなんかは、「必須データ詰め合わせ.zip」の中にあるcssをサイトに合わせて修正してください。
「複数RSSまとめ＆タブ化ジェネレーター」使用に関する諸注意
以上、smkn初のWEBサービス「複数RSSまとめ＆タブ化ジェネレーター」のご紹介でした。
最後に、ご利用に関しての注意事項＆お願いを。
フィードタイトルだけでも著作物です。
当ジェネレーターで生成されるタブには、各フィードのタイトルだけが表示されます。
しかし、タイトルだけとはいえ、それでも立派な著作物です。ご利用には配信者への敬意と配慮をお忘れなく。
不具合やバグがあったら教えてください。
分かる人が見れば一発だと思うんですが、綺麗にまとまった流暢なスクリプトではありません。エレガンスの対極にあるような。
また、色々と検証を行い動作確認はしっかりやっていますが、不具合やバグがあるかもしれません。
もし改善策や問題点などありましたら、ぜひご教示ください。
ご利用は自己責任でお願いします。
「複数RSSまとめ＆タブ化ジェネレーター」で生成されるスクリプトは、MIT-lisenceで提供しています（MITに関しての解説エントリーはコチラ）。
改変も商用利用も問題ありませんが、ご利用は自己責任の上でお願い致します。
さーて、次はどんなの作ろーかなー。
ソーシャルブックマーク:
付けられたタグ: 
関連した記事:
はじめまして
検索エンジンで偶然、知りました。
ぜひ、利用させていただきたいと思います。
ただ、できましたら各ブログ部分へのリンクを target=”_blank”にしたいのですが、その方法をご教授いただけないでしょうか。
当方、超々シロートです。
よろしくお願いします。
コメントありがとーございます！
さっそくですが、生成されたコードの中に「ｆｅｅｄＬｉｓｔ０１ ＋＝ ”＜ｌｉ＞＜ａ ｈｒｅｆ＝￥”” ＋ ｅｎｔｒｙ．ｌｉｎｋ ＋ ”￥” ｒｅｌ＝”ｎｏｆｏｌｌｏｗ”＞” ＋ ｅｎｔｒｙ．ｔｉｔｌｅ ＋ ”＜／ａ＞”；」という部分があるかと思います。
この部分を、「ｆｅｅｄＬｉｓｔ０１ ＋＝ ”＜ｌｉ＞＜ａ ｈｒｅｆ＝￥”” ＋ ｅｎｔｒｙ．ｌｉｎｋ ＋ ”￥” ｔａｒｇｅｔ＝￥”＿ｂｌａｎｋ￥” ｒｅｌ＝”ｎｏｆｏｌｌｏｗ”＞” ＋ ｅｎｔｒｙ．ｔｉｔｌｅ ＋ ”＜／ａ＞”；」と書き換えてください。
同様に「ｆｅｅｄＬｉｓｔ０２ ＋＝ ”＜ｌｉ＞＜ａ ｈｒｅｆ＝￥”” ＋ ｅｎｔｒｙ．ｌｉｎｋ ＋ ”￥” ｒｅｌ＝”ｎｏｆｏｌｌｏｗ”＞” ＋ ｅｎｔｒｙ．ｔｉｔｌｅ ＋ ”＜／ａ＞”；」という部分もあると思いますので、こちらを「ｆｅｅｄＬｉｓｔ０２ ＋＝ ”＜ｌｉ＞＜ａ ｈｒｅｆ＝￥”” ＋ ｅｎｔｒｙ．ｌｉｎｋ ＋ ”￥” ｔａｒｇｅｔ＝￥”＿ｂｌａｎｋ￥” ｒｅｌ＝”ｎｏｆｏｌｌｏｗ”＞” ＋ ｅｎｔｒｙ．ｔｉｔｌｅ ＋ ”＜／ａ＞”；」に書き換えてください。
３タブ以上ある場合も、同様の記述部分を書き換えれば、ご要望どおりの挙動になるかと思います。
ちなみに、上記は全て全角で記述しちゃってますので、実際に書き換えるときは必ず半角に直してくださいね☆（空白スペースも半角で記述してください。）
見辛くてスミマセン。これでうまく設置できたら良いのですが…。
早速の対応ありがとうございました。
無事、設置することができました。
今、作成中の新サイトで使わしていただきます。
お手数をおかけしました。感謝します。
[...] 複数RSSまとめ＆タブ化ジェネレーター [...]
はじめまして！
Feed APIは便利だけど、デフォルトじゃ物足りないし、自分でスクリプトを作成する技術も無いので、ブラブラと探索していましたら、こちらにたどり着く事が出来ました。
ITキヨスクさんが作成されたタブメニューは理想のタブメニューでして一方的ですが、ぜひ利用させて頂きたいと思います。
それから、あつかましい要望なんですが、表示されたRSSの先頭か末端に、日付の取得は出来ないのでしょうか？
出来るので有ればご指導お願い出来ないでしょうか？
宜しくお願いいたします。
＞ぽこサマ
ソレ、いただきっ！
というコトで、早速ジェネレーターの方で「日付け取得しますか？」という項目を新設しちゃいました！
選択制にしてあるので、必要ならつけられるようにしてありますよー。
こちらこそ、有用なアイディアをありがとーございましたっ!!
こちらこそ、要望搭載ありがとうございました。
これからもご活躍期待しております。
がんばってください。
追記
何度も申し訳ありません。
日付の取得うまく行きましたありがとうございます。
度々ご指導お願いしたく投稿させて頂きました。
ブロック幅が少ないのでどうしても日付の折り返しがでて、見苦しいのでタグで段落を起こそうと思ったのですが、上手く行きませんでしたので、日付のみ段落させる方法等有りましたらご指導願えませんでしょうか？
宜しくお願い致します。
＞ぽこサン
はいはいー☆
生成されたスクリプトの中に、
ｆｅｅｄＬｉｓｔ０１ ＋＝ ”＜ｌｉ＞＜ａ ｈｒｅｆ＝￥”” ＋ ｅｎｔｒｙ．ｌｉｎｋ ＋ ”￥”＞” ＋ ｅｎｔｒｙ．ｔｉｔｌｅ ＋ ”＜／ａ＞” ＋ ａｄｄＤａｔｅ；
という部分があるかと思います。
そこの
”＜／ａ＞”
の部分を
”＜／ａ＞＜ｂｒ＞”
に変更してください。
２つ目以降もタブがある場合は、同じような部分をそれぞれ同様に修正すれば、全部改行されると思います。
頑張ってくださいねー♪
＞ITキヨスクさん
ありがとうございます。
完璧です。
頼り過ぎですが、勉強しながら頑張って完成させようと思います。
この度はありがとうございました。
はじめましてでぶしつけですがすみません、
タブの中にテキストを入れたいんですがどのようにしたらいいでしょうか。
教えて下さい、お願い致します。
＞keyさん
いえいえ、お構いなくー☆
さて本題ですが、正直この「複数RSSまとめ＆タブ化ジェネレーター」では難しそうです。
というのも、コレは単純に「RSSを読み込んで吐き出す」というだけのモノなので、読み込んだRSSフィードの１つ１つに対してアレコレするって前提ではない仕組みになっちゃってるんです。
出来ないことは無いんですが、すごく管理が面倒になって汎用性に欠けちゃうのです。
お役に立てずゴメンナサイですm(_ _)m
いえいえ、こちらこそ
丁寧なご回答ありがとうございました。
はじめまして。
すごく軽くてソースも分かりやすく最高です！ありがとうございます。
しかしこの機能があれば僕の中で完璧なのですが、
日付順でソートするって事は可能でしょうか？
＞TADA-C さん
お返事おそくなっちゃってゴメンナサイですm(_ _)m
さっそく本題なんですが、調べてみたところ不可能ではないみたいなんですが、ちょっと実現は難しいかもです。
というのも、「ジェネレーター」という仕組み上、元々があんまり汎用性に欠ける作りになっちゃってて、機能追加するのがかなり難しいシステムなんです。
こんなコトなら最初からもっと考えて作るべきだったなーと後悔しきりなんですが。。。
というワケで、申し訳ありませんです。。。
[...] 複数RSSまとめ＆タブ化ジェネレーター [...]
[...] 本日の朝方、ワタクシの公開した「『複数RSSまとめ＆タブ化ジェネレーター』、公開します！」に関して、果たして検索順位はどんなモンなのさ？と思い、 [...]
[...] →ITキヲスク | 「複数RSSまとめ＆タブ化ジェネレーター」、公開します！ [...]
検索してたどり着き、早速やってみました！
すごい！ ありがとうございます。
で… 登録させると
●ブログのタイトルのみが表示されるのですが、ブログのブログ名を表示させることはできますか？
●登録された、ニュースを日付順にならべることはできますか？（ずれるのは最初だけであとは追々日付順になるのかな…）
タイトル＆ブログ名だと嬉しいのですが… よろしくお願います！
＞みちづれ サン
こちらこそ、見つけていただきありがとーございます！
「登録日時」の件ですが、各ブログ単位でしたら日付け順になるんですが、フィード単位だとちょっと難しそうです。ごめんなさい＞＜
ですが、「ブログタイトル」の件は、ちょっと手を加えたらイケそうなので、実装してみようかと思います！少々お待ち下さいませm(_ _)m
＞みちづれ サン
できますた＾＾
おおおおおおおおおおおおおおおおおおお
こんなに早い対応！ すごいです。
では、ホームページ熟読して、早速やってみます。
日付順だと最高なんですけどね…
グーグルリーダーのサイトクリップみたいな感じですかね。
とにかく使ってみます
ありがとうございました。
ありがとうございました。
表示は素敵です！
新しいニュースが下の方へいってしまうのが残念でなりませんが…
ありがとうございました。
はじめまして。利用させていただいています。
１つ質問なのですが、リンク先を新しいウインドウで表示させるにはどうすればいいのでしょうか？
＞さと さん
ご利用ありがとーございますっ！
早速ですが、生成されたスクリプトの中の
feedList●● += “＜li＞” + ‘[' + result.feed.title + ']‘ + “＜a href=\”" + entry.link + “\”＞” + entry.title + “＜/a＞” + addDate;
という部分（●●には数字が入ってます）の、
“＜a href=\”" + entry.link + “\”＞”
というトコを
“＜a href=\”" + entry.link + “\” target=”_blank”＞”
ってすればOKだと思いますよー！
お早い返答ありがとうございます。無事できました。
あともう１つ、ブログなどから記事の最初の画像を抽出したりは可能でしょうか？
＞さと さん
いえいえこちらこそー！
画像の抽出はAPIの仕様的に出来ないっぽいですねー。
お役に立てず申し訳ないです m(_ _)m
まさに探し続けていたものなので本当に感動です！
どうして誰も作らないのかってずっと思ってました！！
使わせて頂きます。ありがとうございます。
＞あらぽん 様
お役に立てて何よりですっ☆
ぜひともご利用くださいまし♪
いいですね。これ。使わせていただきたく思います
質問ですが、僕もtarget=”_blank”にしたいので
「ｆｅｅｄＬｉｓｔ０１ ＋＝ ”＜ｌｉ＞＜ａ ｈｒｅｆ＝￥”” ＋ ｅｎｔｒｙ．ｌｉｎｋ ＋ ”￥” ｔａｒｇｅｔ＝￥”＿ｂｌａｎｋ￥” ｒｅｌ＝”ｎｏｆｏｌｌｏｗ”＞” ＋ ｅｎｔｒｙ．ｔｉｔｌｅ ＋ ”＜／ａ＞”；」
これを半角で入れたのですが、表示が全て消えてしまいます。何か間違っているのでしょうか
＞ｆｒ 様
ありがとーございます！
早速ですが、もしかして ｒｅｌ＝”ｎｏｆｏｌｌｏｗ” の、 ”の前に￥マークが入ってなかったら入れてみてください☆
smkn さん
ありがとうございます
早速やってみましたがダメでした
＞ fr 様
うーん、そーするとAPIアカウントがきちんと取得できてないとか、サーバ自体がなんか問題があるとか、でしょうか、、、ちょっと自分にも分かりませんです。。。
お力になれず申し訳ありませんm(_ _)m