ホームページは Vue.js
で作ってるけど だいたいこんな感じ
<template>
<div class="feed">
<table>
<tbody>
<tr v-for="item in sortedFeedItems" :key="item.guid">
<td>
<p class="date">{{ item.pubDate }}</p>
<p class="title"><a :href="item.link" target="_blank">{{ item.title }}</a></p>
</td>
<td> <a :href="item.feedLink" target="_blank">
<p class="feed-title">{{ item.feedTitle }}</p>
</a></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: "RSSFeed",
data() {
return {
feedItems: [],
};
},
components: {
},
computed: {
sortedFeedItems() {
// pubDataを基準に記事を降順にソート
return this.feedItems.sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate));
},
},
mounted() {
this.fetchRSSFeeds();
},
methods: {
fetchRSSFeeds() {
const requests = [
// RSS Feed URL
].map(url =>
axios.get(`https://api.rss2json.com/v1/api.json?rss_url=${url}`)
);
axios.all(requests)
.then(responses => {
responses.forEach(response => {
const data = response.data;
const fixedData = data.items.map(item => {
item.feedTitle = data.feed.title;
item.feedLink = data.feed.link;
return item;
});
this.feedItems = this.feedItems.concat(fixedData);
});
})
.catch(error => {
console.error('Error fetching RSS feeds:', error);
});
},
},
};
</script>
rss2json
というAPIがあったのでこれにURLを投げてJSONにして受け取っています。