読者です 読者をやめる 読者になる 読者になる

Ajax Feed API から Feed API に切り替え、Blogger JSON API も使ってみる

JavaScript Google

WebサイトにBloggerのFeedを載せるために Google Ajax Feed API を使っていたが、色々と変わったようなのでメモ。

Google Ajax Feed API から Google Feed API

いつの間にか名称が変わり、更にはAPIキーが不要になった模様。
Google Feed API — Google Developers


コードの変更部分は、単に jsapi のAPIキーを削除するだけで良い模様。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" >
    
    <!-- APIキーが必要な、以前の書き方
    <script src="https://www.google.com/jsapi?key=<YOUR-API-KEY>" type="text/javascript"></script>
    -->
    <!-- APIキーが不要な、今の書き方 -->
    <script src="https://www.google.com/jsapi" type="text/javascript"></script>

    <script type="text/javascript">
        google.load("feeds", "1");

        function initialize() {
            
            var today = new Date();
            var url = 'http://feeds.feedburner.com/GoogleJapanBlog?1';
            var feed = new google.feeds.Feed(url);

            feed.setNumEntries(5);
            
            
            feed.load(function(result){
                if(!result.error){
                
                    var container = document.getElementById("feed");
                    
                    var htmlstring = "";
                    for (var i = 0; i < result.feed.entries.length; i++)
                    {
                        htmlstring += '<div class="row">';
                        var entry = result.feed.entries[i];
                        
                        htmlstring += '<div class="span1 pull-left"><p>';

                        var publishedDate= new Date(entry.publishedDate);
                        var pYear = publishedDate.getFullYear();
                        var pMonth = padZero(publishedDate.getMonth() + 1);
                        var pDay = padZero(publishedDate.getDate());
                        htmlstring += pYear + "/" + pMonth + "/" + pDay+ '</p></div>';
                        
                        htmlstring += '<div class="span4"><a href="' + entry.link + '">' + entry.title + '</a></div></div>';  
                    }
                    
                    container.innerHTML = htmlstring;
                }
            }); 
        }

        //  targetが一桁の場合、先頭にゼロを一つパディングする
        function padZero(target){
            if(target < 10){
                return "0" + target;
            }
            else{
                return target;
            }
        }


        google.setOnLoadCallback(initialize);
    </script>
</head>

<body>
    <div id="feed">
    </div>
</body>
</html>

Google Feed API から Google Blogger JSON API

さらに、今回処理対象のBloggerに対してFeedAPIで取得しようとしたところ、なぜかBloggerのFeedが最近の記事だけ取得できない状態になっていた(上記のGoogle Japan Blogでは問題なく取得できる)。
仕方ないので、Google Blogger JSON API へと切り替えて表示することに。
(Blogger APIは、Courtesy limit: 10,000 requests/day のようだが、そんなにアクセス数はないので、気にしないこととした)

Google Blogger APIAPIキー取得

Google Blogger APIAPIキーが必要なので、API Consoleにて取得する。
Google Play Developer Console


初めての場合、新しいプロジェクトを作成するとAPIのAll Services の一覧が表示される。
Blogger API v3 は「Request Access」のリンクが貼られており、その先の「Blogger JSON API Quota Request」へ入力すると、APIキーがもらえる模様。
フォーラムには「It's a manual process at the moment, sorry about the delay.」と書かれていたりするので、気長に待つ。


もらえるとメールが届き、メール中のURLを確認することで、APIキーがもらえる。
もらえたAPIキーは、「API Access」→「Simple API Access」の欄に記載されている。



IE対応のため、W3CDTF形式の日付を変換

BloggerAPIより取得できるpublishedは、「2012-11-05T01:23:45.002Z」のようなW3CDTF形式の値となっている。
Blogs - Blogger — Google Developers


ChromeFirefoxではこのまま「new Date()」としてもJavaScriptの日付型になってくれるものの、IE8では変換ができないようで「NaN」が返ってくる。
自力で変換しても良いが、JavaScriptのライブラリ「W3CDTF.js」があったため、IE対策としてそちらを利用することにした。

ソースコード

今回は、jQuery + Blogger API + W3CDTF.js にて作成。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" >
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="https://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8" src="W3CDTF.js"></script>

    <script type="text/javascript">
        var blogId = "20042392";
        var apikey = <your api key>;
        var results = "5";
        var url = "https://www.googleapis.com/blogger/v2/blogs/"
                + blogId
                + "/posts?fetchBodies=false"
                + "&maxResults=" + results 
                + "&key=" + apikey;


        $(document).ready(function() {

            $.ajax({
                url: url,
                dataType: "jsonp",
                success: function(data, textStatus){
                    var items = [];

                    $.each(data.items, function(index, value) {
                        items.push('<div class="row"><div class="span1 pull-left"><p>');
                        
                        // W3CDTF.jsを使って、BloggerAPIにて取得したW3CDTF形式からJavascriptの日付型を生成する
                        // http://www.kawa.net/works/js/date/w3cdtf.html
                        var publishedDate= new Date.W3CDTF();
                        publishedDate.setW3CDTF(value.published);

                        var pYear = publishedDate.getFullYear();
                        var pMonth = padZero(publishedDate.getMonth() + 1);
                        var pDay = padZero(publishedDate.getDate());
                        items.push(pYear + "/" + pMonth + "/" + pDay+ '</p></div>');
                        
                        items.push('<div class="span4"><a href="' + value.url + '">' + value.title + '</a></div></div>');
                    });
                    
                    $(items.join("")).appendTo("#feed");
                }
            });
        });



        //  targetが一桁の場合、先頭にゼロを一つパディングする
        function padZero(target){
            if(target < 10){
                return "0" + target;
            }
            else{
                return target;
            }
        }
    </script>
</head>

<body>
    <div id="feed">
    </div>
</body>
</html>