前提
下記のサイトを参考に、phpとjQueryを使用してサイトにRSSを出力しています。
https://on-ze.com/archives/5062
ただ、複数のRSSには対応していないようで、ID名を変えて全く同じものを幾つも用意しなければなりません。
どうにかしてjsの記述を簡略化をしたいです。
※現状、3つのRSSを1つのページに表示させています。
※1つは表示件数3件、2つが表示件数5件です。
実現したいこと
- RSSを出力するjsを簡略化したい。
該当のソースコード
php
1【boaters-ne.php】 2<?php 3$url = "https://www.news-boaters.com/news/feed/"; 4$xml = file_get_contents($url); 5 6header("Content-type: application/xml; charset=UTF-8"); 7print $xml; 8?> 9 10【resuco-blog.php】 11<?php 12$url = "https://blog.resuco.com/feed"; 13$xml = file_get_contents($url); 14 15header("Content-type: application/xml; charset=UTF-8"); 16print $xml; 17?> 18 19【staff-blog.php】 20<?php 21$url = "https://blog.resuco.com/nikki/?feed=rss2"; 22$xml = file_get_contents($url); 23 24header("Content-type: application/xml; charset=UTF-8"); 25print $xml; 26?> 27
javascript
1 2$(function() { 3 $.ajax({ 4 url: '/info/common/js/rss/boaters-ne.php', 5 xmlType: 'xml', 6 cache: false, 7 }).done(function(xml) { 8 var row = 0; 9 var data = []; 10 var nodeName; 11 var output = $('#feedbts'); 12 13 14 $(xml).find('item').each(function() { 15 data[row] = {}; 16 $(this).children().each(function() { 17 nodeName = $(this)[0].nodeName; 18 data[row][nodeName] = {}; 19 attributes = $(this)[0].attributes; 20 for (var i in attributes) { 21 data[row][nodeName][attributes[i].name] = attributes[i].value; 22 } 23 data[row][nodeName]['text'] = $(this).text(); 24 }); 25 26 row++ 27 }); 28 29 output.wrapInner('<div class="bts-box"></div>'); 30 for (i in data) { 31 if ( i >= 3 ) break; // 記事の表示件数 32 33 var date = new Date(data[i].pubDate.text); 34 var strdate = date.getFullYear() + '.' + (date.getMonth() + 1) + '.' + date.getDate() + ''; // 日付 35 36 var link = data[i].link.text; // 記事URL 37 var title = data[i].title.text; // 記事タイトル 38 var description = data[i].description.text; // 記事抜粋 39 var img = data[i].image.text; // サムネイルURL 40 41 42 output.find('div.bts-box').append( 43 '<div class="dis-tbl_tab">' 44 + '<div class="dis-tblcl01 vat ta_c">' 45 + '<a href="' + link + '" target="_blank"><span class="img" style="background-image: url(' + img + ')"></span></a>' 46 + '</div>' 47 + '<div class="dis-tblcl02 vat">' 48 + '<a href="' + link + '" target="_blank">' + title + '</a>' 49 + '<p class="dis-non">' + description + '</p>' 50 + '<span>' + strdate + '</span>' 51 + '</div>' 52 + '</div>'); 53 //console.log (data[i]); 54 } 55 56 }); 57 58 59 60 $.ajax({ 61 url: '/info/common/js/rss/resuco-blog.php', 62 xmlType: 'xml', 63 cache: false, 64 }).done(function(xml) { 65 var row = 0; 66 var data = []; 67 var nodeName; 68 var output = $('#feedmain'); 69 70 71 $(xml).find('item').each(function() { 72 data[row] = {}; 73 $(this).children().each(function() { 74 nodeName = $(this)[0].nodeName; 75 data[row][nodeName] = {}; 76 attributes = $(this)[0].attributes; 77 for (var i in attributes) { 78 data[row][nodeName][attributes[i].name] = attributes[i].value; 79 } 80 data[row][nodeName]['text'] = $(this).text(); 81 }); 82 83 row++ 84 }); 85 86 output.wrapInner('<ul></ul>'); 87 for (i in data) { 88 if ( i >= 5 ) break; // 記事の表示件数 89 90 var date = new Date(data[i].pubDate.text); 91 var strdate = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日'; // 日付 92 93 var link = data[i].link.text; // 記事URL 94 var title = data[i].title.text; // 記事タイトル 95 var description = data[i].description.text; // 記事抜粋 96 var img = data[i].image.text; // サムネイルURL 97 98 output.find('ul').append( 99 '<li class="dis-tbl_tab">' 100 + '<div class="dis-tblcl01 vat"><a href="' + link + '" target="_blank"><img src="' + img + '" /></a></div>' 101 + '<div class="dis-tblcl02 vat">' 102 + '<a href="' + link + '" class="title" target="_blank">' + title + '</a>' 103 + '<span>' + description + '</span>' 104 + '<a href="' + link + '" target="_blank">[続きを読む]</a>' 105 + '<p class="date">' + strdate + '</p>' 106 + '</div>' 107 + '</li>'); 108 //console.log (data[i]); 109 } 110 111 }); 112 113 114 115 $.ajax({ 116 url: '/info/common/js/rss/staff-blog.php', 117 xmlType: 'xml', 118 cache: false, 119 }).done(function(xml) { 120 var row = 0; 121 var data = []; 122 var nodeName; 123 var output = $('#feednikki'); 124 125 126 $(xml).find('item').each(function() { 127 data[row] = {}; 128 $(this).children().each(function() { 129 nodeName = $(this)[0].nodeName; 130 data[row][nodeName] = {}; 131 attributes = $(this)[0].attributes; 132 for (var i in attributes) { 133 data[row][nodeName][attributes[i].name] = attributes[i].value; 134 } 135 data[row][nodeName]['text'] = $(this).text(); 136 }); 137 138 row++ 139 }); 140 141 output.wrapInner('<ul></ul>'); 142 for (i in data) { 143 if ( i >= 5 ) break; // 記事の表示件数 144 145 var date = new Date(data[i].pubDate.text); 146 var strdate = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日'; // 日付 147 148 var link = data[i].link.text; // 記事URL 149 var title = data[i].title.text; // 記事タイトル 150 var description = data[i].description.text; // 記事抜粋 151 var img = data[i].image.text; // サムネイルURL 152 153 output.find('ul').append( 154 '<li class="dis-tbl_tab">' 155 + '<div class="dis-tblcl01 vat"><a href="' + link + '" target="_blank"><img src="' + img + '" /></a></div>' 156 + '<div class="dis-tblcl02 vat">' 157 + '<a href="' + link + '" class="title" target="_blank">' + title + '</a>' 158 + '<span>' + description + '</span>' 159 + '<a href="' + link + '" target="_blank">[続きを読む]</a>' 160 + '<p class="date">' + strdate + '</p>' 161 + '</div>' 162 + '</li>'); 163 //console.log (data[i]); 164 } 165 166 }); 167 168 169 170});
試したこと
phpのほうで複数のfeedの設定ができないかを試したり、feedから読み込むURL、タイトル、サムネイルなどが共通にできないかを試みましたが、双方とも失敗しました。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。