この記事はNOTE(メモ)として作成された単一記事です。
2015年4月11日Google APIとrssを利用して、外部サイトの新着タイトル・サムネイルを取得・表示
Google APIを利用して、外部サイトのタイトル・サムネイルを取得して表示する方法
*サムネイルは最初にくる画像
*WordPressでも、そのまま利用可
1.rss.jsの作成
- 留意点
- *8行目:対象feedのURLを記入
- *20行目:HTML上で記述するIDに合わせる
- *32〜39行目:繰り返し出力される部分。必要に応じて整形する。(今回はBootstrapのlist-groupにあわせた記述になっています。)
- *53〜56行目:複数サイトのrssを読み込みたい場合はのコメント
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
//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行目と合わせる
1 2 3 4 5 6 7 8 |
<!-- 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> |