Google APIとrssを利用して、外部サイトの新着タイトル・サムネイルを取得・表示

この記事はNOTE（メモ）として作成された単一記事です。

2015年4月11日

Google APIとrssを利用して、外部サイトの新着タイトル・サムネイルを取得・表示

Google APIを利用して、外部サイトのタイトル・サムネイルを取得して表示する方法＊サムネイルは最初にくる画像
＊WordPressでも、そのまま利用可

1.rss.jsの作成

留意点: ＊８行目：対象feedのURLを記入; ＊20行目：HTML上で記述するIDに合わせる; ＊32〜39行目：繰り返し出力される部分。必要に応じて整形する。（今回はBootstrapのlist-groupにあわせた記述になっています。）; ＊53〜56行目：複数サイトのrssを読み込みたい場合はのコメント

//APIを読み込む
google.load("feeds", "1");
  
//初期関数
function initialize(){
  
//読み込むフィードを設定する
var feed = new google.feeds.Feed('読み込むfeedを記入');
  
//読み込む件数を設定する
feed.setNumEntries(5);
feed.load(dispfeed);
//フィードを読み込む
function dispfeed(result){
  
//エラーチェック
if(!result.error){
  
//表示するエレメントを設定する
var container = document.getElementById("feed");//HTML上でのIDを合わせる
var htmlstr = "";
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)|(\.gif))/);

if(imgCheck){
         eimg += '<img ' + imgCheck[0] + '" alt ="" >';
      }

//Start 出力したいHTMLに成形する部分 
htmlstr += '<a class="list-group-item" href="' + entry.link + '">';
htmlstr += '<div class="row">';
htmlstr += '<div class="col-xs-4">' + eimg + '</div>';
htmlstr += '<div class="col-xs-8" style="padding-left:0;"><p class="end"><b>' + entry.title + '</b></p></div>';
htmlstr += '</div>';
htmlstr += '</a>';
//End  出力したいHTMLに成形する部分
 
}
 
container.innerHTML = htmlstr;
var elems = container.getElementsByTagName('a'); // containerに含まれるa要素
for (var j = 0, l = elems.length; j < l; j++) {
elems[j].target = '_blank'; // targetに'_blank'を設定
}
}
}
}
google.setOnLoadCallback(initialize);

/*
複製サイトを読込みたい場合は、「初期関数」以下を複製し、関数名を変更
例）initialize1()、initialize2()....とする
*/

//APIを読み込む

google.load("feeds", "1");

//初期関数

function initialize(){

//読み込むフィードを設定する

var feed = new google.feeds.Feed('読み込むfeedを記入');

//読み込む件数を設定する

feed.setNumEntries(5);

feed.load(dispfeed);

//フィードを読み込む

function dispfeed(result){

//エラーチェック

if(!result.error){

//表示するエレメントを設定する

var container = document.getElementById("feed");//HTML上でのIDを合わせる

var htmlstr = "";

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)|(\.gif))/);

if(imgCheck){

eimg += '<img ' + imgCheck[0] + '" alt ="" >';

}

//Start 出力したいHTMLに成形する部分

htmlstr += '<a class="list-group-item" href="' + entry.link + '">';

htmlstr += '<div class="row">';

htmlstr += '<div class="col-xs-4">' + eimg + '</div>';

htmlstr += '<div class="col-xs-8" style="padding-left:0;"><p class="end"><b>' + entry.title + '</b></p></div>';

htmlstr += '</div>';

htmlstr += '</a>';

//End 出力したいHTMLに成形する部分

}

container.innerHTML = htmlstr;

var elems = container.getElementsByTagName('a'); // containerに含まれるa要素

for (var j = 0, l = elems.length; j < l; j++) {

elems[j].target = '_blank'; // targetに'_blank'を設定

}

google.setOnLoadCallback(initialize);

複製サイトを読込みたい場合は、「初期関数」以下を複製し、関数名を変更

例）initialize1()、initialize2()....とする

2.HTML上で表示させる

留意点: ＊5行目：環境に応じて、「1」で作成したrss.jsを読み込むパスを記述; ＊8行目：feedを出力したい場所に記述（出力したい場場所にscriptも含め記述するだけでOK）; ＊8行目：rss.js20行目と合わせる

<!-- Google APIの読込み -->
<script src="https://www.google.com/jsapi" type="text/javascript"></script>

<!-- rss.jsの読込み -->
<script src="環境に応じたパスを記述/rss.js" type="text/javascript"></script>

<!-- feedを表示させる -->
<div id="feed"></div>

カテゴリー： GoogleAPI　JavaScript

タグ：

◀ ▶