【見た目も中身も大切だ】WordPressで画像つきのrssフィードを取得。静的htmlに表示

API このページをあとで読む

最近放置ぎみのメインサイトをちょっと手直ししました。というのも、画像を使いすぎて、ページ自体が重かったんです。最近ちょくちょくこのブログもなんですが、メインサイトも訪問していただけるようになってきて、とても申し訳ない・・・！と思ってましてね。で、マイナーチェンジしました。とは言ってもまだまだ構築中。60%くらい達成ってとこですね。まぁ、それはよしとして。

本題です。rssフィードをgoogleのAPIを利用して取得、別サイトに表示・・・ なんてことをやられてる方は結構多いと思います。私もそうで、このブログのrssフィードを外部（といってもメインサイトですが）htmlページで読み込んでます。そこで、以前から気になっていたことがあります。

「rssフィードの取得時にアイキャッチ画像も表示したいんだけどなぁ・・」

調べていると、ああ、同じようなことをされている方、いらっしゃいました。「google feed api で画像付きのリスト表示」ここのサイトを参考にしました。ありがとうございます。

というわけで、早速導入方法です！

１．「どの」rssフィードを「どこ」に表示するのかを決める

rssフィードを取得する前に・・・ 「まず、どのサイトのrssフィードを取得するか」 を決めましょう。私の場合、このブログのrssフィードを取得して、

https://www.imamura.biz/index.html

の「indexhtml」というファイルに「アイキャッチ付きのrssフィードを取得して表示」

することとします。

２．google APIキーを取得する

（※2014/02/20追記：APIキーは必要なくなったみたいですね。一応当時書いたことは残しておきます～）

それでは、前準備をしましょう。googleはrssフィードを取得してくれる便利なサービスを提供してくれています。今回はそれを利用します。下のリンク先から、googleのapiを使うための「キー」を取得しましょう。

http://code.google.com/intl/ja/apis/loader/signup.html

rssフィードを表示したいurlを入力します。「https://www.imamura.biz」にrssフィードを表示したいので、https://www.imamura.biz   と入力します。すると、下の画像のようにキーが作成されます。

このキーはメモ帳とかにコピーしておいてください。（キーはあえてモザイクにしましたが、べつにソース見ればばれちゃいますね・・・）要は、「https://www.imamura.biz/」配下のディレクトリで利用可能ってことです。そのまんまです。

とりあえずこれで、準備完了です。

３．表示するためのスクリプトファイルを作る

では、早速スクリプトファイルを作りましょう。

rss.js

google.load("feeds", "1");
function initialize() {
  var feedurl = "https://www.imamura.biz/blog/feed/"; //rssフィードのurlを指定。wordpressの場合はurl/feed/で取得できる。
  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(4); //フィードの表示数
  feed.load(dispfeed);

  function dispfeed(result){
    if (!result.error){
      var container = document.getElementById("feed");
      var htmlstr = "";

      htmlstr += "<ul>";
      for (var i = 0; i < result.feed.entries.length; i++) { //ループ処理
        var entry = result.feed.entries[i];

		var eimg = ""; //画像取得（初期値設定）
		var imgCheck = entry.content.match(/(src="http:){1}[\S_-]+((\.png)|(\.jpg)|(\.JPG))/); //該当する拡張子のデータを画像として取得している
		if(imgCheck){
				 eimg += '<img ' + imgCheck[0] + '" width="100" >'; //eimgにはimgタグを挿入するように設定、大きさは100ピクセル

      }

        htmlstr += '<li class="kiji">'
        var strdate = createDateString(entry.publishedDate);

        htmlstr +=  '<p class="kiji_img"><a href="' + entry.link + '" target="_blank">' + eimg + '</a></p>';
        htmlstr +=  '<p class="kiji_body"><span class="kiji_title"><a href="' + entry.link + '" target="_blank">' + entry.title + '</a></span>' + '<span class="kiji_entry">' + entry.contentSnippet.substr(0,140) + '</span><span class="kiji_date">' + strdate + '</span></p>';

        htmlstr += "</li>"
      }
      htmlstr += "</ul>";

       container.innerHTML = htmlstr;

    }else{
       alert(result.error.code + ":" + result.error.message);
    }
  }
}

function createDateString(publishedDate){
  var pdate = new Date(publishedDate);

  var pday = pdate.getDate();
  var pmonth = pdate.getMonth() + 1;
  var pyear = pdate.getFullYear();
  var phour = pdate.getHours();
  var pminute = pdate.getMinutes();
  var psecond = pdate.getSeconds();
  var strdate = pyear + "/" + pmonth + "/" + pday ;

  return strdate;
}
google.setOnLoadCallback(initialize);

ちょっと長いでしょうか。 これを「rss.js」というファイル名で保存してください。

４．表示したいhtmlページにスクリプトファイルを読み込む

rss.jsファイルができたので、今度は「https://www.imamura.biz/index.html」のファイルに表示するために「rss.js」を読み込みます。

index.htmlを開いてください。

index.html

<script src="https://www.google.com/jsapi?key=さっき取得したキー" type="text/javascript"></script>
<script type="text/javascript" src="./js/rss.js"></script>

index.htmlファイルの<head>～</head>の間に、上のスクリプトを入れてください。

（さっき取得したキーの値と、rss.jsへのパスは、ご使用の環境に合わせて変更してください。）

次は表示したいところに、

<div id="feed"></div>

を入れます。なぜ「idをfeedにするのか」と言いますと、 これは先ほどの「rss.js」で

var container = document.getElementById("feed");

のfeedの箇所と対応しています。もし、idを変えたいのであれば、この2箇所の値を同じにしてください。

５．出来上がり！

では、実際にアクセスしてみましょう。「https://www.imamura.biz/index.html」下のような表示になっているでしょうか。（追記：ちょっと仕様が変わったみたいなので、いつかなおします～）

私はスタイルシートで表示をいろいろいじくってるので、お好みのスタイルにカスタマイズしましょう。

６．まとめ

今回のキモはここです。

      for (var i = 0; i < result.feed.entries.length; i++) { //ループ処理
        var entry = result.feed.entries[i];
		var eimg = ""; //画像取得（初期値設定）
		var imgCheck = entry.content.match(/(src="http:){1}[\S_-]+((\.png)|(\.jpg)|(\.JPG))/); //該当する拡張子のデータを画像として取得している
		if(imgCheck){
				 eimg += '<img ' + imgCheck[0] + '" width="100" >'; //eimgにはimgタグを挿入するように設定、大きさは100ピクセル
      }

エントリーを取得するfor文のループ処理ですが、画像取得を加えています。そして、該当する拡張子を取得しています。ここで私は .png .jpg .JPG の3つのみの取得をしているのですが、「アイキャッチの画像の拡張子は、gifなんだ」って場合は、gifを取得できるようにしてあげましょう。

gifを追加するだけ

var imgCheck = entry.content.match(/(src="http:){1}[\S_-]+((\.png)|(\.jpg)|(\.JPG)<strong>|(\.gif)</strong>)/); //該当する拡張子のデータを画像として取得している

必ず、パイプ「 | 」でつなげてくださいね。

このプログラムを使うときの注意事項

あと、一つ注意事項ですが、WordPressのアイキャッチが使えるバージョンでないと、 これはできません。アイキャッチが使える最新版は、3.2.1（2011/9/21時点）ですので、アップグレードしましょう。また、利用中のテーマによっては、アイキャッチを指定してても 反映されないことがあります。

その場合、WordPressのfunctions.phpをいじくります。下記を参考ください。

【WordPressでアイキャッチ（サムネイル）を扱う関数について、知りたくて調べた】このページをみる

rssフィードを表示するにはgoogle APIを利用したほうがラクです。理由は、 一度スクリプトを作ってしまえば、応用が利く（プログラムの再利用ができる） からです。rssフィードを表示することは、サイトへの誘導にも役立ちますね。メインのサイトがあって、「ブログではこんな記事書いてます。見てね！」 ってのが、まさに私のケースです。

ただ、その場合は表示方法も工夫しないといけない。やっぱり視覚的には画像なんかがアクセントとしてあると、いいですね。単純にコンテンツボリュームを増やしたいだけなら、そこいらの適当なニュースサイトを 機械的にテキストのみで、バシバシ表示すればいいんですがね。ですが、それではかっこ悪いです。

本当に見てもらいたいなら、どうするか。記事の中身ももちろんですが、外見（視覚的にうったえる部分）も重要ですね。そういう意味で、このWordPressのアイキャッチを使わない手はない・・・と思います。人と人との第一印象も同じですよね。というわけで、以上でした。

著者:bouya Imamura