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 API のAPIキー取得

Google Blogger API はAPIキーが必要なので、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


ChromeやFirefoxではこのまま「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>

■参考

Feed API関連
Blogger JSON API 関連
Blogger関連

■ソースコード

Gistへと公開