[Google Feed API]サイトのRSSフィードを取得し画像付きで記事の内容を表示する
[Google Feed API]サイトのRSSフィードを取得し画像付きで投稿の内容を表示する
背景
現状、３つのブログを運営しています((1)capture (2)curation (3)diary)。現状のポータルサイト(nakamurayuji portal)では、各ブログのリンクを貼っているだけですが、これを各ブログの最新記事を表示しつつ、固定ページにはリンクをはるようなポータルサイトに変更したいと思っておりまして、一昨日ぐらいから、突然思い立って、最新記事を表示する方法を実験しているわけです(おかげで昼夜逆転してしまっている。このブログも早く書き終えて寝なければ！)。
当初は、Wordpressでアンテナサイトに適したテーマとかがあるのかなあ、と色々調べたのですがどうもデザイン的にしっくり来ない。
であれば、Wordpress使わずに、久しぶりに、HTML/CSS/Javascriptでコード書こうよ！と思い、あっさり！実験成功したので(まだ基礎的な技術実験が成功したにすぎないのでポータルサイトリニューアルはまだまだ先の話です)、この投稿に至っております。
概要
Google Feed APiで複数のブログのRSSフィードを取得し、その内容(画像も含みます)をサイトに表示する方法を記載します。
百聞は一見にしかずということで次の画像が表示例です。
あと、実際に表示したサイトはこちらになります→Google Feed APIを使用したデモ
前提
・取得する画像は、Wordpressのアイキャッチ画像ではなく、記事の中の最初に掲載されている画像とします。
参考サイト
今回、これを実現するにあたり、こちらのサイトを参考にさせて頂きました。いや、参考にさせて頂いたというより、そのまま流用してます。本当にありがとうございました。
【Google Feed APIを使用して、複数のサイトのRSSフィードを取得して更新日順でソート（並び替え）して、さらにそれを「サムネイル付きで」表示する方法】 | 今村だけがよくわかるブログ
もちろん、ポータルサイトリニューアルの際は表示する内容や、CSSで定義するレイアウト/色情報など変更する予定です。
手順概要
・手順1；「Google Feed API」でフィードを読み込み
・手順2；「JavaScript」で記事のタイトルや内容、画像等を配列に代入し、その配列を使用して、HTMLコード用の文字列を生成します。
・手順3；手順2で生成された文字列を、HTMLに反映させるためのコードを記述します。
手順1；Google Feed APIを読み込みます
・<header></header>～内に書きます。
<script src=”https://www.google.com/jsapi”></script>
手順2；JavaScriptを準備します
・これも、<header></header>～内に書きます。※JavaScriptを外部ファイルに記述しそのファイルを読み込んでももちろん構いません。
・参考サイトでは日付で並び替えていますが、筆者は並び替えないので、ソート部分はコメントにしています。※そうすると配列のインデックスがずれるので注意します。
—
<script type=”text/javascript”> — <div id=”googlefeed”></div> ※参考サイトでは「googlefeed」のところが、「feed」になっています。 お疲れ様でした。
google.load(“feeds”, “1″);
var FA = new Array( //配列です。ここに、取得したいRSSフィードを加えるだけです
“http://diary.nakamurayuji.com/feed”, //diaryブログのフィードURL
“http://curation.nakamurayuji.com/feed”, //curationブログのフィードURL
“http://capture.nakamurayuji.com/feed” //captureブログのフィードURL
);
function initialize() {
var feedsArr = new Array();
var numEntr = 3; //各サイトのフィードを読み込む数（3サイトなので、投稿が9(=3*3)個表示されます）
var container = document.getElementById(“googlefeed”);
var cnt = FA.length;
for (var k=0; k
※参考サイトでは「googlefeed」のところが、「feed」になっています。
※記事に画像が１枚もなかった際の代用画像は適当に作りました！(相当適当ですが、今後はこの画像が表示されることのないよう、記事には必ず画像を含むようにしたいと思います。)
手順3；表示したい部分にHTMLコードを記述します
実際に表示してみます
最後に
今回、Wordpressでなんとかしようと思ったのが、つまづきの始まりで、昨日、あれほど、これでもないあれでもないと時間をかけたのに(動作はしたのですがデザイン的にしっくり来なかったもので)、もうこの際だから、HTML/CSS/JavaScriptで書けば良いじゃん、と思ってこの動作確認したところ、とてもあっさりと動作したので最初からこの方法でやればよかったです。
もちろん、JavaScriptで取得する内容や表示する内容は、僕の思っているものに近づけないといけないですが、それは今後の課題ということで。
