ブログテンプレートならHKDjavascriptだけでできるCustomRssReader(jqueryプラグインRSSリーダー)完成!RSSはこちらブログテンプレートならHKDブログタイトルを3時間悩んでやっと思いつきました。変にこだわるデザインです。変にこだわって時間をロスしています。MAP更新休止のお知らせ現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。2011⁄05⁄29(Sun)17:02javascriptだけでできるCustomRssReader(jqueryプラグインRSSリーダー)完成!comment:30trackback:0このテンプレートの質問受付は終了しましたやっと完成しました。ブログ組み込み型RSSリーダーです。ご自身のブログにお友達のブログの更新状況や、yahooニュースのヘッドライン、ニコニコ動画、はてブ、twitter等の最新情報を表示する事ができます。特徴として以下のものがあります。【1.jqueryプラグインなのでFC2ブログ以外でも使える】FC2ブログの共有プラグインとして公開していますがjqueryプラグインとしてjavascriptファイルをアップロードしているのでそれを落としてFC2ブログ以外やホームページ等で使えます。【2.サーバーサイドプログラミングがいらない】ブログ組み込み型RSSリーダーは外部のWEBサービス等に登録して、そこで読み込みたいRSSを登録するなどの手順が必要です。登録となるとアカウントにパスワードやメールアドレスが必要となり、それらを忘れると再登録などいろいろと不便な所があります。CustomRssReaderは、FC2ブログのプラグインの編集画面から全てのカスタマイズを行えます。【3.豊富なカスタマイズ機能】カスタマイズ方法はそれぞれのリンク先を参照してください。部分的に表示されないものがあります。FC2ブログユーザー以外の方。jqueryプラグインとして使いたい方。http://jquery.com/よりjquery本体をダウンロードし自分のサイトにアップロード。CustomRssReaderプラグインをダウンロードし自分のサイトにアップロードFC2プラグインと違って余計なコメントは省略しています。<head>内に次のように記述しjquery本体とプラグインファイルをサイトに組み込み。charset="utf-8"></script></head>CustomRssReaderの設定を記述。});--></script></head><body>内にCustomRssReaderを表示する領域を作成。id="CustomRssReaderArea"></div>の中にRSSリーダーが表示されます。***********/--></style></head>全体のコードとサンプルを別ページに用意しました。本プログラムは以下の外部WEBサービスを利用しています。仕様変更等により予告なく作動しなくなる可能性がある事をご了承下さい。・アニメーションの動き。口で説明しにくいですが、一つ目のRSSを読み込んで記事表示から二つ目のRSSを読み込んで記事表示の時、一つ目の記事と記事の間にスペースを設けてから、そのスペースに二つ目の記事がフワッと浮かび上がるようにしています。RSSリーダーにアニメーションをつけるというのはほとんど意味がないのですが、なかなかおもしろく出来のではと思います。アニメーション実行時間を長くすると動きがよく分かるかも。閲覧環境(PCスペックやブラウザの種類等)により滑らかに動いたりカクカクしたりします。私の非力なPCでも滑らかに動くので大丈夫だとは思うのですが・・・。思いついた機能をどんどん取り入れてみた。【最後に】みなさんよかったら使ってみてくださいね。(2011/01/20)スポンサーサイトcategoryプラグインtagjQueryプラグインjavascriptRSSgenreブログthemeFC2ブログ共有プラグインページの先頭へ戻る初コメ失礼。記事はいいのですがほかが邪魔で、、YAHOOニュースとか消したら他の記事も表示されなくなったので今は最初の状態にしていますできるだけ優しく教えていただけませんでしょうか?2011⁄06⁄16(Thu)16:36URLラリッツラリッツさんへプラグインのご利用ありがとうございます。動画のラインキングBEST3(全カテゴリ)にできませんかね?作ってみましたのでこちらをご覧下さい。http://blog-imgs-46.fc2.com/h/k/d/hkdesign/sample_nicoran3.html赤字のHTMLコードをコピペすると動作します。>できるだけ優しく教えていただけませんでしょうか?こちらのエントリーをご覧下さい。http://hkdesign.blog91.fc2.com/blog-entry-120.html説明が難しくてすみません。Yahooニュースを消すと他の記事も表示されない・・・ということは、YahooニュースのRSSを消した時に、間違ってプログラムに必要な部分も消してしまった恐れがあります。RSSのURLの前後、特に””のダブルクォーテーションや()のカッコ、そして;のセミコロン等をもう一度チェックしてみてください。これらが1つでもおかしくなると、javascriptはエラーを吐き出して何も表示されなくなります。2011⁄06⁄17(Fri)19:36URLHellow質問ですはじめまして。昨日から使わせていただいてます。質問なのですがブログを10件以上登録してたのですが今朝ひらくと2件しか読み込めません。昨夜まではすべて読み込めていたのですが、、、2011⁄06⁄21(Tue)11:00URLななななさんへプラグインのご利用ありがとうございます。ブログを10件以上登録してたのですが、今朝ひらくと2件しか読み込めません。こちらのほうではFC2プラグインに登録後、なにも修正や変更等を加えていないので、原因が分かりません。よければ、お使いのOSとブラウザとブログURLを教えていただけないでしょうか?こちらのほうで検証してみようと思います。表示したくてダウンロードさせていただきました。PIYOをそのままフリーエリア等に表示させると余計なボタンやらが出てましたが、このプラグインなら自分好みのシンプルな表示にできました。愛用させていただきます。2011⁄07⁄03(Sun)09:04URLありちゃん[edit]ありちゃんさんへご利用ありがとうございます。今度、私もPIYOを触ってみようっと。Blogを利用しています。ブログパーツで、設定できなかったので、メッセージボードにCustomRssReaderを表示するようにしたのですが、GoogleChromeだと表示できません。15:36の匿名さんへメールを出しましたのでそちらをご覧下さい。2011⁄07⁄06(Wed)18:53URLHellow[edit]オニオンさんへ返信が遅れてすみません。原因の解明には至りませんでしたが、エラーが出る部分を特定し修正を施したファイルをアップしましたので、そちらの方にバージョンアップしていただけますでしょうか。これでうまくいくと思うのですが、またなにかあればご連絡下さい。【バージョンアップ方法】ダウンロードして頂いたHTMLの中にある”CustomRssReader_Ver0100-min.js”を”CustomRssReader_Ver0101-min.js”に変更してください。記述部分はダウンロードして頂いたHTMLの上から3行目辺りにあります。よければこちらの画像も参考にしてください。赤丸部分が変更箇所です。http://blog-imgs-46.fc2.com/h/k/d/hkdesign/ver0101syuuseikasyo01.gif【原因】プログラム実行途中に配列の末尾に新たなメソッドが格納される。(なぜそうなるか不明)その結果ループ処理でエラーがでる。他のjavascriptと干渉したせいかもしれません。サイトをローカルで構築し、FireFox5、IE8、GoogleChrome12、safari5、opera11で正常動作を確認。2011⁄07⁄06(Wed)20:19URLHellow[edit]正常になりました。ありがとうございます。ご指摘の"CustomRssReader_Ver0101-min.js"だけではうまくいかなかったので、参考画像のとおりにしたら、正常になりまいた。http://blog-imgs-46.fc2.com/h/k/d/hkdesign/CustomRssReader_Ver0101-min.js2011⁄07⁄07(Thu)23:56URLオニオン質問ですお世話になります。RSSリーダーのブログツールを色々探してCustomRssReaderを見つけました。同一カテゴリ内に複数設置すると表示が乱れます。何か回避方法はありますか?2011⁄08⁄23(Tue)18:56URLフロッピィフロッピィさんへプラグインのご利用ありがとうございます。同一カテゴリ内に複数設置すると表示が乱れます。試したのですが、こちらでは再現できませんでした。こちらのほうで検証するので、ブログURLを教えていただけませんか?もしくは、表示が乱れた時のHTMLソースでも構いません。2011⁄08⁄24(Wed)18:01URLHellow[edit]URLです返信が遅れて申し訳ございません。同現象が発生するものを送ります。2011⁄08⁄27(Sat)19:20URLフロッピィフロッピィさんへURLの掲載ありがとうございます。このプラグインは同一ブログに1つしか使用できません。2つ使用するとプログラムが上書きされてしまい表示が乱れます。前回コメント時に質問内容をはきちがえておりました。お手数をお掛けしてすみません。現在、2つ以上でも使えるように修正中です。次回のバージョンアップで実装予定ですので、もうしばらくお待ちいただければなと思います。2011⁄08⁄28(Sun)14:21URLHellow[edit]回答ありがとうございますやはり仕様なのですね。修正をしていただけるとのこと。バージョンアップを楽しみに待っています。2011⁄08⁄28(Sun)15:15URLフロッピィ質問させてくださいはじめまして。CustomRSSReaderを使わせて頂いております。不具合が解決できないのでご助力をお願いします。表示される記事の順序がブラウザによってバラバラになってしまいます。新1⇔古5クローム:12345IE6.0:23451サファリ:54321恐らく読み込んでいるRSSの記事日付が全て同じになっていることに起因するかと思われますが、何かよい解決方法はありますか?ちなみに読み込んでいるRSSフィードは下記になります。http://asgard.nexon.co.jp/rss/update_rss.xml以上、よろしくお願いいたします。付加情報たびたび失礼いたします。情報を書き忘れていたので追記いたします。・ソート方法と記事数の設定は下記のとおりです。5;・希望は、クロームでの表示のように、記事を新しい順に上から並べることです。以上、よろしくお願いいたします。秋色さんへはじめまして。HKD管理人のHellowです。詳細な情報ありがとうございます。おかげですぐに問題解決の糸口が見つかりました。解決には問題点を修正した暫定的な最新バージョン(ver0102)のプラグインをご利用下さい。http://blog-imgs-43.fc2.com/h/k/d/hkdesign/ver0102HtmlText.html上のURLを開いた後ソースを表示し、HTMLソースを全てコピー、それをプラグインの管理画面からHTMLの編集をクリックしたところに全てペーストしてください。このver0102を後ほど共有プラグインに修正申請するつもりです。申請してからFC2公式からの許可がおりるまで少し時間がかかるため、面倒ですがこの方法でバージョンアップを施してください。秋色さん用にカスタマイズした物を別個に用意させていただきました。http://blog-imgs-43.fc2.com/h/k/d/hkdesign/ver0102HtmlText_akiirosannyou.htmlrssのURL、タイトルの数、ソート方法、表示アイテム、CSS等に変更を加えております。よければ参考にご利用下さい。------ここから解説------教えていただいたRSSの中身を調べると日付情報という物がありませんでした。09:00)という日付を強制的に適用させていたようです。日付情報がないままソートを実行したのでぐちゃぐちゃになったという事になります。RSSに日付情報がない場合に、displayItemにdateを指定した場合は、"日付情報なし"と表示されるよう修正しました。見た目的に悪いので、秋色さん用にカスタマイズした方ではこのdateを除外しています。あと、新たにseqという表示アイテムとソート方法を追加しました。なっていますがupをdownに変えると、ソートの方向が逆になります。これで日付情報がなくてもソートの順番が変更できるようになります。秋空さんの希望とは関係ありませんが、ソートを逆順にする場合は参考にしてください。長くなってもうしわけありません。これでうまくいかないなど、また何かありましたらご連絡下さい。2011⁄10⁄02(Sun)16:43URLHellow[edit]ありがとうございました。Hellowさん秋色用にカスタマイズしたプラグインまでご用意いただき、まことにありがとうございました!おかげさまで、手持ちの全てのブラウザで更新順序を統一することができました。ちなみにご用意いただいたHTMLにおいて、クロームのソース表示だと日本語部分が文字化けしてそのままコピペできませんでした。IE8.0に切り替えてソース表示は上手くいき、問題は解決済みです。ご参考までにご報告いたします。ありがとうございました。ありがとうございました。秋色さんへうまくいけたようでよかったです。文字化けの件は、HTMLに文字コードの指定がないのでブラウザがうまく解釈できなかったためだと思われます。ご報告ありがとうございます。なにかあればいつでもご連絡くださいね。2011⁄10⁄03(Mon)00:51URLHellow[edit]質問です><今回、多機能でカスタマイズが色々出来そうなのでDLさせてもらったんですが、未来日付の記事を表示しない機能、というのはありますでしょうか?他のサイトでは一つだけ見つかったんですが、出来ればHellow様のプラグインを使いたかったので質問しました。質問です><らびさんへ管理人のHellowです。プラグインのご利用ありがとうございます。もうしわけありませんが、未来日付の記事を表示しない機能は現在のバージョンにはございません。新しくVer0103として機能を追加したものを作ってみました。バージョンアップには次の方法をお試し下さい。次のURLを開き内容を全てコピーしてください。http://blog-imgs-47.fc2.com/h/k/d/hkdesign/CustomRssReader_Ver0103_html.txt内容が文字化けする場合は文字コードをEUC-JPに設定してください。【プラグインの設定】から該当するプラグインの【HTMLの編集】をクリック。ここにペーストするのですが、ペーストする前に以前の状態をバックアップすることをおすすめします。ペーストして完了です。面倒ですが、共有プラグインに申請して許可がおりるまで2週間ほどかかるため、この方法でお試し下さい。後ほどこのVer0103を共有プラグインに申請するつもりです。(現在登録されているのはVer0102)あとこの機能についての説明エントリーも作りましたので、よろしければごらん下さい。http://hkdesign.blog91.fc2.com/blog-entry-154.htmlもしなにか不都合などございましたら、いつでもご連絡ください。2011⁄11⁄20(Sun)18:30URLHellow[edit]ありがとうございます!迅速な対応ありがとうございます。こんなに早くお返事がもらえると思っていなかったのでびっくりしました。説明もすごくわかりやすく、設定も無事終わって正常に表示されています。他サイトのを使おうか迷っていましたが、思い切って質問して良かったです。ありがとうございます!らびさんへうまくいってよかったです。なにかありましたら、いつでもおっしゃってくださいね。2011⁄11⁄22(Tue)00:39URLHellow[edit]読み込めなくなってしまいました・・Hellowさん上記でプラグインをカスタマイズして頂いた秋色です。found」という赤文字が出て、新着記事が全く読み込めない状態です。すればよいかご教示いただけますでしょうか。秋色さんへお久しぶりです。管理人のHellowです。いつもご利用ありがとうございます。found」と表示される件ですがこれは外部WEBサービスのYQLがRSSを解析できない場合に表示されます。YQLというのはRSSを解析し、必要な情報をjavascriptで扱えるデータに整形してくれているのですが、このYQLがRSSを解析できない以上、こちらでは問題を解決する事ができません。原因を調べてみたのですが、アスガルドさんのrssを私のブログにアップロードして、それとYQLの通信を行ったのですがそれは正常に行えていました。推測なのですがアスガルドさんの方でネットワークレベルのセキュリティがかかっているものと思われます。YQL以外にXMLのバリデートチェックというWEBサービスも試したのですが、これも通信不可で5xxというサーバーエラーが吐き出されていたので、この線が濃厚だと思います。使っていただいてたのに、お力になれなくて申し訳ありません。2011⁄12⁄01(Thu)19:30URLHellow[edit]ご回答ありがとうございました。Hellowさんアスガルド側のセキュリティの問題でRSSが読み込めなくなったとのこと、承知いたしました。詳しいご解説ありがとうございました。2011⁄12⁄01(Thu)20:42URL秋色こんばんは!CustomRessReaderは設定も易しく、非常に簡単でとても便利に使わせてもらっています。素敵なプラグインをありがとうとざいます!カスタマイズについてちょっと質問があります。タイトルなし雪だるまさんへこんばんは。プラグインのご利用ありがとうございます。現在公開中のバージョンでは実装しておりませんでしたので、新しくver0104として実装してみました。次のURLのHTMLテキストをコピペしてお使い下さい。http://blog-imgs-37.fc2.com/h/k/d/hkdesign/CustomRssReader_Ver0104_html.txt文字化けする場合はEUC-JPで開いてください。念のため、現在使用中のCustomRssReaderのバックアップを取ってからのペーストをお勧めします。問題がなければ、後ほどFC2共有プラグインの方にもアップロードしたいと思います。解説ページも作りましたのでよろしければご確認下さい。http://hkdesign.blog91.fc2.com/blog-entry-190.htmlプログラムの仕様上、各RSSから○件取得後にソートを実行しさらに○件に絞り込む、という形での実装になりました。「全RSS中から最近更新された順に10件なら10件だけ・・・」という風にする場合は、rssItemLimit(各RSSからの記事取得数)の数を多めに設定して、さらにdisplayLimitで10に設定してください。それではよろしくお願いいたします。Entry検索フォームプロフィールAuthor:Hellowmail:hkdesign.mail☆gmail.com☆を半角@に変えてください。HenniKodawaruDesign略してHKDブログテンプレートならHKDにようこそ!このサイトではFC2で使える共有テンプレートを配布しています。サイトについての説明はこちらをどうぞ。like!」を作りました。機能1:はてなハイクをサイト上に投稿できる機能2:はてなハイク投稿時に同時にtwitterにも投稿する詳しくは次のURLへお越しくださいhk-factoryGoogleウェブストアプラグインギャラリーブログ管理画面の共有プラググイン追加から、作者:hkdesignと検索してダウンロードしてください。日付が未来になっている記事の表示設定CustomRssReaderを2つ同時に使う方法カスタムデザインサンプルImageClock詳しくはこちらカスタマイズはこちらImageClockを二つ以上表示する方法ImageClockカスタマイズ用Flashを作成テンプレートギャラリーブログ管理画面の共有テンプレート追加から、作者:hkdesignと検索してダウンロードしてください。詳しくはこちら動作環境についてテンプレートは以下の環境・方法で動作確認を行ってからFC2に申請しています。記載の環境でも表示が崩れて見えない場合は連絡してくれるとありがたいです。BrowserLabを使ってチェックしています。BrowserLabhttps://browserlab.adobe.com/ライセンスについてライセンス形態はGPLライセンスをとります。簡単に言うと次の4つです。カスタマイズ・再配布など連絡なしに使用OK。著作権表示は消したらダメです。なんらかの損害が出た場合は自己責任です。再配布する場合、GPLライセンスが適用されます。ブログテンプレートならHKD。