はてなダイアリーで特定カテゴリーの記事をお知らせとしてトップに掲出する方法を考えてみた。

f:id:daruyanagi:20150502105752p:plain

これな。ドメイン失くしてごめんなさい的な告知を出しておきたかった。

カテゴリーのフィードを探す。

まずはカテゴリーのフィードを探す。カテゴリーページを開いてソースを見ると……

f:id:daruyanagi:20150502110020p:plain

こんな風に書いてある。

<link rel="alternate" type="application/atom+xml" title="Atom"
href="https://blog.daruyanagi.jp/feed/category/%E5%91%8A%E7%9F%A5"/>
<link rel="alternate" type="application/rss+xml" title="RSS2.0"
href="https://blog.daruyanagi.jp/rss/category/%E5%91%8A%E7%9F%A5"/>

なんでもいいと思うのだけど、今回は RSS2.0 の方を使った。

JavaScript でフィードを取得して主力する

Google Feed API を利用するのが一般的な方法らしい。

Google Developers

最初の1個だけ取得して、#target 要素を書き換えるようにしてみる。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    function GetAnnouncement(target, url) {
        google.load("feeds", "1");

        function initialize() {
            var feed = new google.feeds.Feed(url);
            feed.setNumEntries(1);
            feed.load(function (result) {
                if (!result.error) {
                    var container = document.getElementById(target);
                    var feed = result.feed.entries[0];
                    var html = "<a href='" + feed.link + "'>" + feed.title + "</a>";
                    container.innerHTML = html;
                } else {
                    console.log(result.error.code + ":" + result.error.message);
                }
            });
        }

        google.setOnLoadCallback(initialize);
    }

    GetAnnouncement("feed", "https://blog.daruyanagi.jp/rss/category/%E5%91%8A%E7%9F%A5");
</script>

<span id="feed">ここにはいる</span>