追記：20167/01/31
ということで、当記事のサンプルは動作しなくなったと思います。
・【YQL API利用】JavascriptでRSSを読み込んで表示する方法【2017年】 – 某氏の猫空
そこで、 YQL APIを利用した方法を試してみました。試す限りは、Google Feed API並みに簡単です。
このAPIは正式に廃止されており、12月15日後に動作を停止します、
Google Feed API | Google Developers
ということで、当記事のサンプルは動作しなくなったと思います。
・【YQL API利用】JavascriptでRSSを読み込んで表示する方法【2017年】 – 某氏の猫空
そこで、 YQL APIを利用した方法を試してみました。試す限りは、Google Feed API並みに簡単です。
以下のサンプルで、Yahooニュースのトピックストップ の５件がリンクつきで表示されます。ローカルにhtmlファイルとして保存して、ブラウザで開けば動作を確認することができます。
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
//読み込み最大記事数
var max_length = 5;
//RSSを指定
var feed = new google.feeds.Feed("http://rss.dailynews.yahoo.co.jp/fc/rss.xml");
feed.setNumEntries(max_length);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length ; i++) {
var entry = result.feed.entries[i];
var title = entry.title; //記事タイトル
var link = entry.link; //記事へのリンク
var content = entry.content; //記事の内容
var snippet = entry.contentSnippet; //記事の要約
var publishedDate = entry.publishedDate; //投稿日
var category = entry.categories[0]; //カテゴリー
//タイトルを挿入
$('#feed').append("<li><a href='" + link +"'>"+ title +"</a></li>");
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="feed"><!-- この位置に挿入される --></div>
</body>
</html>
#1 Google Feed API Developer's Guide - Google Feed API — Google Developers
#2 簡単！RSS（XML）を取得&表示させる方法 – jQuery + Google Feed APIを使用してFeedを表示させる方法 | superChemical
上記の２サイトを主に参考に作成しました。
ほとんど＃1のサンプルのままです。
RSSの指定を別のところに変えても動作します。ソースのコメントを参考にしてください。
取得できる情報については、＃1のJSONの項目だと思います。
実際、ソースで変数に代入している項目に関しては、取得できてることを確認しました。
JavascriptでRSSを読んで、変数に代入することができれば、あとは自由に加工できると思うので、他のサービスやブログパーツに頼らずにいろいろできるかと思います。
Google Feed APIというのは、RSS/ATOMをJSON形式にしてくれるサービスのようです。
スポンサーリンク
コメントを残す