1. ホーム >
  2. RSSフィードとAPI機能の活用法 >
  3. RSSフィードとAPI機能を活用して、効果的に新着情報を発信!

RSSフィードとAPI機能を活用して、効果的に新着情報を発信!

ウェブ上でブログを作成する人はほとんど意識することがないかもしれませが、ブログの記事を書いて投稿すると、通常目にするブログページとは別にRSSフィードのデータも連動して作成されています。

RSSフィード形式で作成されたブログの更新やホームページのお知らせなどのデータは、API(アプリケーション・プログラミング・インタフェース、Application Programming Interface)機能を使うと、その更新や新着情報を自社のウェブサイト内ならどのページでも表示することができるようになるばかりか、自分以外のホームページでも同じように更新・新着情報を表示することが可能となります。

逆に言うと、他のブログやウェブサイトの更新・新着情報を自分のホームページ内で表示することができるということでもあります。

APIを予めHTMLファイルに設定すれば、後はブログやホームページ(のRSSデータ)が更新される度に、APIを設定したHTMLファイル上の更新・新着情報が自動的に表示内容が新しいものに変わります

RSSフィードの更新情報を表示するAPIを組み込んだウェブページは、自動的に更新情報が反映されますから、そのウェブページの更新作業をホームページ制作会社に依頼して手動で更新してもらうといった時間と経費をカットできます

【RSSフィードとAPI機能を活用することで、こんなメリットが生まれます!】

  1. 一番目立つトップページに新着情報を表示することで、新しい情報を着実にお客様へ伝えることが可能になります。
  2. 更新された新着情報や新着ブログの「タイトル」や「日付」などをお客様に伝えられるので、単にリンクボタンやリンクバナーでお客様をお知らせやブログに誘導するよりずっと効果的に誘導することができます
  3. 自社サイト内だけでなく、自社のグループサイトにまで同じ内容の新着情報を掲載することで効果的なお客様の集客や囲い込みに繋がります

RSSフィードとAPIを組み込んだウェブページ、オススメの具体的利用例はこちら

先ずはRSSフィードとAPI機能を使った例を実際にご紹介しましょう。
(APIにはJavaScriptが使われています。ブラウザーの設定でJavaScriptがオフの場合は表示されません。特にオフの設定をしない限り、通常は初期設定通りオンになっています。)

繰り返しになりますが、以下のサンプルでの表示内容(=更新情報)はオリジナルのブログで更新される度に、自動的に新しい内容に変更されて表示されます。今こうしてご覧いただいているこのHTMLファイルを手動で書き換えて公開しているわけではありません。

なお、下に掲載の表示サンプルの表示項目やデザインついては変更可能です。
実際アレンジしてデザインなどを変更した見本がある場合、表示サンプル下のリンクで変更可能です。

例としてRSSフィードを取得するウェブサイトは、以下に挙げる弊社運営の4つのブログサイトと他の3つのRSSフィード配信サイトの合計7つのサイトとなります。
(一見するとデザクロブログというひとつのブログに見えますが、実際はそれぞれ独立したブログとなっています。)

  【公告・ビジネス・マーケティング】(http://marketing.designcross.org)
  【Webサイト・検索エンジン動向】(http://web-seo.designcross.org)
  【デザクロ技術メモ(HP・CSS・SEO)】(http://internet.designcross.jp)
  【ブログ番外編】(http://extra.designcross.co.jp)

また、設定を変更することで、表示するブログの種類と数、各ブログから取得する新着情報数などは変更可能です。

RSSフィードとAPIにより実現する表示サンプル〔1〕

最初の例は、指定した複数のブログの更新情報を時間の新しい順に並べて表示するもの。
表示する項目は次の3つです。各項目を独立して表示(表示文字数の省略有り)しています。

  「更新月日」・「投稿タイトル名」・「【ブログ名】

「投稿タイトル名」をクリックするとその記事の単独ページに、「ブログ名」をクリックするとそのブログのトップページにジャンプするようリンクが設定されています。(1-1のサンプル)

7種類のブログの各新着情報2つずつを新しい順に並べた例

初期表示〔1-1〕…各項目を独立して表示(表示文字数の省略有り)
アレンジ〔1-2〕…投稿年月日のうち年表示を割愛し、リストマーカーを付けて表示

 

上述の表示サンプルのようにRSSフィードとAPIを組み込んで情報発信するホームページのメリットと実際にどのようなカタチでホームページ展開するのに適しているかについては、次のページで具体的にご紹介します。

RSSフィードとAPIを組み込んだホームページのオススメ活用術 > > >

 

デザクロ・メモは、デザインクロスが制作・設定などの際に利用・参照可能な情報です

  • その他の表示サンプル

その他の表示サンプル

以下のの例は、指定した複数のブログの更新情報を時間の新しい順に並べて表示するもの。
表示する項目は次の3つです。項目を一行に続けて表示(省略有り)しています。

表示サンプル〔1-2・3〕が各項目を<div>タグで一つずつ指定しているのとは異なり、3つの項目全体をリストタグでマークアップしています。

デザインの自由度という点でも、またフィード取得の安定性の面でも表示サンプル〔1-2・3〕の方が好ましい。

7種類のブログの各新着情報2つずつを新しい順に並べた例

初期表示〔1-3〕…各項目を一行に続けて表示(省略有り)
アレンジ〔1-4〕…表示項目が長い場合、改行有りで全項目を省略することなく表示

確認されているバグとして、ブラウザーOpera 10.5(Win、Mac)でフィードを読み込めない。
また、Internet Explorer 6.0〜8.0 においてのみ、リンクにターゲット <a target="_parent"> を指定すると文字を表示しなくなる。背景画像とボーダーはなぜか表示する。(ターゲットを加えなければ通常通りの表示。)

 

※このページの表示サンプル内の中身の表示の変更は、表示元のHTMLファイルのインラインフレームタグに name="frame" を設定し、表示の中身のとなるファイルをリンクで呼び出す際のリンクタグ内にターゲット target="frame" を設定しておこなっています。

デザクロ・メモはここまで。クリックで閉まります

このページ「RSSフィードとAPI機能を活用して、効果的に新着情報を発信!」の更新履歴

直近の更新履歴

2011-01-09
RSSフィードとAPIにより実現する表示サンプル〔1〕内の初期表示〔1-1〕とアレンジ〔1-2〕のJavaScriptファイル内の記述date.getFullYear()*1000000)をdate.getFullYear()*10000000)に修正
2010-10-26
RSSフィードとAPIにより実現する表示サンプル〔1〕内の初期表示〔1-1〕のRSS表示サンプルに、「ブログ名」をクリックするとそのブログのトップページにジャンプするリンク設定を追加
2010-08-08
RSSフィードとAPI機能を活用して、効果的に新着情報を発信!を公開

以前の更新履歴

2011-01-09
RSSフィードとAPIにより実現する表示サンプル〔1〕内の初期表示〔1-1〕とアレンジ〔1-2〕のJavaScriptファイル内の記述date.getFullYear()*1000000)をdate.getFullYear()*10000000)に修正
2010-10-26
RSSフィードとAPIにより実現する表示サンプル〔1〕内の初期表示〔1-1〕のRSS表示サンプルに、「ブログ名」をクリックするとそのブログのトップページにジャンプするリンク設定を追加
2010-08-08
RSSフィードとAPI機能を活用して、効果的に新着情報を発信!を公開

ひとつ前のページにもどる

▲このページの先頭へ