Google Feed APIを使って複数RSSフィードを表示する【簡易版】

Publish:

Category:JavaScript

Tag:

  • Hatena Bookmark:
  • Twitter:

今更ながら…Google Feed APIのfeedControlを使った時の個人的まとめ。
表示形式にあまり拘らない時は便利。
複数RSSと書いたけどもちろん1つのフィードでも大丈夫。

ページ内の見出し一覧

標準表示

AJAX APIs Blog|Introducing the AJAX Feed API FeedControlに掲載されているものを参考に、RSSフィードURLとタイトルのみを設定した場合の記述。

JavaScript

google.load("feeds", "1");
var getRssFeed = function () {
	var feedControl = new google.feeds.FeedControl();

	//読み込むRSSの設定
	//feedControl.addFeed('フィードのURL', 'フィードの名前')
	feedControl.addFeed('RSSフィード1', 'RSSフィード1の名前');
	feedControl.addFeed('RSSフィード2', 'RSSフィード1の名前');
	
	//出力
	feedControl.draw(document.getElementById('feed'));
};
google.setOnLoadCallback(getRssFeed);

デモで確認する

表示方法はライン形式とタブ形式の2通りから選べる

表示はデフォルトのLinerと、タブ形式のTABBEDがある。
feedControl.draw時にdrawModeを指定することができる。

デフォルト google.feeds.FeedControl.DRAW_MODE_LINER
タブ形式 google.feeds.FeedControl.DRAW_MODE_TABBED

表示方法をタブにする場合は以下に。

JavaScript

//出力
feedControl.draw(document.getElementById("feed"), 
	{drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED}
);

デモで確認する

表示エントリー数を設定できる

feedControl.draw前に表示数を記述することで表示するエントリー数を指定できる。
何も指定しない場合は4つ表示される。

JavaScript

//表示エントリー数の指定
feedControl.setNumEntries(10);
//出力
feedControl.draw(document.getElementById('feed'));

デモで確認する

リンクターゲットの設定ができる

デフォルトでは別ウィンドウで開く設定だけど、リンクターゲットを記述することでリンク方法を変更できる。

別ウィンドウに表示 google.feeds.LINK_TARGET_BLANK
現在のウィンドウに表示 google.feeds.LINK_TARGET_SELF
フレームを解除して表示 google.feeds.LINK_TARGET_TOP
親フレームに表示 google.feeds.LINK_TARGET_PARENT
任意のフレームに表示 フレーム名

表示方法をタブにする場合は以下に。

JavaScript

//リンクターゲットの指定
feedControl.setLinkTarget(google.feeds.LINK_TARGET_SELF);

デモで確認する

CSSを変更してデザイン・表示をカスタマイズ

各々に細かくclassが設定されているので、表示したくない要素はdisplay:noneなんかで隠してしまってもいいかも。

デフォルト表示のときのエントリー部分のHTML

<div class="gfc-resultsRoot">
	<div class="gfc-resultsHeader">
		<div class="gfc-title">サイトタイトル</div>
	</div>
	<div class="gfc-results">
		<div class="gfc-result">
			<div class="gf-result">
				<div class="gf-title">
					<a href="リンク先" class="gf-title" target="_blank">記事タイトル</a>
				</div>
				<div class="gf-relativePublishedDate">
					更新日
				</div>
				<div class="gf-snippet">
					コンテンツ概要
				</div>
			</div>
		</div>
	</div>
	<div class="gfc-results">
		・・・・
	</div>
</div>

CSSでデザイン・表示を変更したデモを確認する

タブ表示のときのエントリー部分のHTML

<div class="gfc-control">
	<div class="gfc-tabsArea">
		<div class="gfc-tabHeader gfc-tabhActive">総合</div>
		<div class="gfc-tabHeader gfc-tabhInactive">生活・人生</div>
		<div class="gfc-tabHeader gfc-tabhInactive">スポーツ・芸能・音楽</div>
		<div class="gfc-tabHeader gfc-tabhInactive">コンピュータ・IT</div>
		<div class="gfc-tabHeader gfc-tabhInactive">ゲーム・アニメ</div>
		<div class="gfc-tabHeader gfc-tabhInactive">おもしろ</div>
	</div>
	<div class="gfc-resultsbox-visible">
		<div class="gfc-resultsRoot gfc-tabData gfc-tabdActive">
			<div class="gfc-resultsHeader">
				<div class="gfc-title">総合</div>
			</div>
			<div class="gfc-results">
				<div class="gfc-result">
					<div class="gf-result">
						<div class="gf-title">
							<a href="リンク" class="gf-title" target="_blank">記事タイトル</a>
						</div>
						<div class="gf-relativePublishedDate">
							15 時間前
						</div>
						<div class="gf-snippet">
							コンテンツ概要
						</div>
					</div>
				</div>
				<div class="gfc-result">
					・・・・・
				</div>
			</div>
		</div>
	</div>
</div>

CSSでデザイン・表示を変更したデモを確認する

Post Comment

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

Return to page top