Google AJAX で複数RSS表示を簡単作成

Google AJAX で複数RSS表示を簡単作成

めちゃくちゃ簡単で、しかも凄い機能が備わっているGoogle AJAX Feed APIのDynamic Feed Control Wizard。難しいプログラムは必要ありません。必要なのは複数表示させたいRSSフィード(ホームページ)の名前だけです。ちなみにこのDynamic Feed Control Wizardはスマートフォンでも表示されます。

下記のDynamic Feed Control Wizardが完成サンプル(携帯では表示されませんがご了承下さい)です。

Loading…

複数RSS作成方法

Dynamic Feed Control Wizardに行き必要項目を入力するだけです。

  1. feedのStyle(スタイル)を選択。ちなみに上記サンプルのスタイルは、Vertical Stackedを選択して作成してあります。
  2. feedのTitle(タイトル)を入力
  3. Feeds Expression(RSSフィードのホームページのタイトル)を入力
  4. 入力したらPreviewをクリックしレイアウト確認。

dynamicfeed作成

入力し終えたらGenerate Codeをクリックすると下記のコードが表示されますので、そのコードを丸ごとコピーして後はホームページに貼り付けるだけです。

dynamicfeedコード

たったこれだけで簡単に凄い機能が備わっている複数RSSが作成できます。

但し中にはFeeds Expression(RSSフィードのホームページのタイトル)にタイトルを入れただけでは、RSSフィードのアドレスなどを探しきれない場合があります。その場合はとりあえずコードを取得して下記の図のように必要な箇所を書き直せば表示できます。又feedのTitle(タイトル)も変更できます。

dynamicfeed変更箇所

RSSフィードのアドレスは作成されているブログでも違うと思います。ちなみにWordPressで作成されている場合のRSSフィードのアドレスはWordPress Feedsを参考にしてみてください。

下記はWordPressで作成されているRSSフィードのアドレスの例です。

ホームページアドレスがhttp://detarame.moo.jp/の場合

  • http://detarame.moo.jp/feed/rss2/
  • http://detarame.moo.jp/?feed=rss2

などをアドレスの後ろに付け加えると表示されます。ちなみにhttp://detarame.moo.jp/feed/では最新記事が上手く表示されませんでした。

Dynamic Feed Control Wizardのカスタマイズ用スタイルシート

Dynamic Feed Control Wizardのレイアウトはデフォルトでも充分使えますが、レイアウトを変更することも出来ます。

取得したコードの中にcss(スタイルシート)が含まれています。そのcss(スタイルシート)を一旦パソコンにダウンロードして、css(スタイルシート)を書き直し自分のサーバーにアップロードしなおして、css(スタイルシート)のアドレスを変更すればレイアウトが変更できます。

コードにも書いてありますが、デフォルトのcss(スタイルシート)のアドレスはhttp://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.cssです。このアドレスにアクセスすればcss(スタイルシート)がダウンロードできます。

スタイルシートの変更

Dynamic Feed Control Wizardのスタイルシートの詳細

css(スタイルシート)の中で使われている名称は下記の図の位置になります。

gfdynamicfeedcontrolcssの名称と位置

この図を参考に必要なcss(スタイルシートの箇所を変更すればカスタマイズも出来ます。

最終更新日: 2013年2月4日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

Google AJAX で複数RSS表示を簡単作成の関連記事

Google AJAX で複数RSS表示を簡単作成” への6件のコメント

    • コメントありがとうございます。
      下記がコードになります。

      <!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
        <!--
        // Created with a Google AJAX Search and Feed Wizard
        // http://code.google.com/apis/ajaxsearch/wizards.html
        -->
      
        <!--
        // The Following div element will end up holding the actual feed control.
        // You can place this anywhere on your page.
        -->
        <div id="feed-control">
          <span style="color:#676767;font-size:12px;margin:11px;padding:4px;">Loading...</span>
        </div>
      
        <!-- Google Ajax Api
        -->
        <script src="http://www.google.com/jsapi?key=notsupplied-wizard"
          type="text/javascript"></script>
      
        <!-- Dynamic Feed Control and Stylesheet -->
        <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
          type="text/javascript"></script>
        <style type="text/css">
          @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
        </style>
      
        <script type="text/javascript">
          function LoadDynamicFeedControl() {
            var feeds = [
          {title: 'コンピュータ関連',
          url: 'http://dailynews.yahoo.co.jp/fc/computer/rss.xml'},
          {title: 'Webmaster Central 日本版',
          url: 'http://feeds.feedburner.com/WebmasterCentral'},
                      {title: 'WordPress開発ブログ',
           url: 'http://ja.wordpress.org/feed/'}];
            var options = {
              stacked : true,
              horizontal : false,
        title : "IT関連情報・ニュース"
            }
      
            new GFdynamicFeedControl(feeds, 'feed-control', options);
          }
          // Load the feeds API and set the onload callback.
          google.load('feeds', '1');
          google.setOnLoadCallback(LoadDynamicFeedControl);
        </script>
      <!-- ++End Dynamic Feed Control Wizard Generated Code++ -->
  1. コードソースを教えていただきましたが、GoogleBloggerにコピー&ペイストした結果、作成されたHTMLファイルは承認できません: SCRIPTタグが破損しています: 表示がでます。またFC2ホームページでも正常に表示できません。
    どのようにコピーしたらよろしいでしょうか?教えて下さい。

  2. 山梨旅案内人さんへ

    紹介したコードが自動で整形されていてアンカータグが自動で入っているのが原因だったと思います。すみませんでした。

    一応紹介したコードを訂正しましたのでもう一度上記に書いてあるコードをコピーして使ってみてください。又FC2のブログの方では確認しましたので大丈夫だと思います。

  3. お教えいただいたコードの貼り付けによりFC2ホームページでは確認することができました。
    しかしGoogleBloggerでは作成されたHTMLファイルは承認できませんタグが破損しています:BR とエラーがでます。
    どのようにコピーしたらよろしいでしょうか?教えて下さい。

  4. 山梨旅案内人さんへ

    GoogleBloggerだとjavascriptによってはjsファイルを用意しないと上手く呼び出せない事があるみたいです。bloggerでjavascriptを使う方法 に書いてありました。技術的なことは分かりませんが(^^;

    そこで今回紹介してあるコードでjsファイルになってない所をjsファイルにします。FC2も利用されているみたいですので、FC2だとサーバーにjsファイルが置けるのでそれを利用します。(一応私もFC2サーバーにjsファイルをアップロードしてjsファイルを作ってみました。)

    まずは下記のコードをコピーしてGoogleBloggerの投稿に貼り付けて確認してみてください。一応私もGoogleBloggerで確認したところ、動的ビュー以外のテンプレートだとうまく表示できます。

    <div id="feed-control">
    <span style="color: #676767; font-size: 12px; margin-bottom: 11px; margin-left: 11px; margin-right: 11px; margin-top: 11px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px;">Loading...</span></div>
    <script src="http://www.google.com/jsapi?key=notsupplied-wizard"
        type="text/javascript"></script>
    <!-- Dynamic Feed Control and Stylesheet -->
      <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
      <style type="text/css">
        @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
      </style>
    <!-- feedの設定用jsファイル -->
    <script src="http://downy1.web.fc2.com/js/feeds.js"></script>

    確認できたら

    <!-- feedの設定用jsファイル -->
    <script src="http://downy1.web.fc2.com/js/feeds.js"></script>

    の部分のjsファイルのアドレスとjsファイルを書き換えてください。

    jsファイルはIEでhttp://downy1.web.fc2.com/js/feeds.jsのアドレスを入れるとダウンロードできるので必要な箇所を書き換えて使ってください。書き換えが終わったら山梨旅案内人さんのFC2サーバーにアップロードしてあとはjsファイルのアドレスを書き換えればOKです。

    説明が長くなったので又分からない事があったらお気軽にコメントください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*