Blogger:フィード情報をjson-in-script形式で取得して、JavaScriptでデータ処理する

イントロダクション

Google のブログサービス「Blogger」では、ブログのフィード情報を取得するときに様々なパラメータを指定することができます。

ブログのフィード情報を取得して、JavaScript でデータ処理を行いたいと考えているなら、データの応答フォーマットの種類(クエリパラメータ：alt)として、atom-in-script、rss-in-script、json-in-script を指定すると、スクリプトでそのまま利用可能な形式でフィード情報を取得できるので非常に便利です。

なかでも、json-in-script 形式では、フィード情報の各要素に直接アクセスできる形でデータを取得できるので非常に便利です。

ここでは、データの応答フォーマットの種類として、json-in-script を指定した場合について記載します。

データの応答フォーマット alt=json-in-script

ブログのフィード情報を取得して、JavaScript でデータ処理する場合のパラメータ指定例

Bloggr ブログのフィード情報はパラメータ次第で様々な情報を取得することができますが、ここでは例として、このブログ(http://upa-pc.blogspot.com)のフィード情報の要約 1 件を取得してみます。

その場合の URL は次のようになります。

ブログ(http://upa-pc.blogspot.com)のフィード情報の要約 1 件を取得するその場合の URL：
http://upa-pc.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&callback=callbackFunction

URL の各部の意味：
http://upa-pc.blogspot.com/feeds/posts/summary：
http://upa-pc.blogspot.com/ の投稿フィードの要約を取得する

alt=json-in-script：
json-in-script 形式でデータを取得する

max-results=1：
投稿データを 1 件取得する

redirect=false：
リダイレクトしない

callback=callbackFunction：
データの読み込み完了時に callbackFunction 関数を呼び出す

以上の URL によって取得したデータは次のようになります。
(2015/02/06 現在）

// API callback
callbackFunction({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-1123830661169787383"},"updated":{"$t":"2015-02-06T16:01:30.149+09:00"},"category":[{"term":"Blogger"},{"term":"JavaScript"},～～～～～～～～～～～省略～～～～～～～～～～～,{"term":"騒音"}],"title":{"type":"text","$t":"Dr.ウーパのコンピュータ備忘録"},"subtitle":{"type":"html","$t":"わたしが体験・気になったコンピュータ関係の情報のまとめ\u003Cbr\u003E\nタグ：Windows \/ Blogger \/ Programming \/ Computer \/ Security \/ Network \/ Android \/ Game \/ News \/\u003Cbr\u003E\nDr.Upa's notebook about computer informations\u003Cbr\u003E"},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http:\/\/upa-pc.blogspot.com\/feeds\/posts\/summary"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/1123830661169787383\/posts\/summary?alt=json-in-script\u0026max-results=1\u0026redirect=false"},{"rel":"alternate","type":"text/html","href":"http:\/\/upa-pc.blogspot.com\/"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"},{"rel":"next","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/1123830661169787383\/posts\/summary?alt=json-in-script\u0026start-index=2\u0026max-results=1\u0026redirect=false"}],"author":[{"name":{"$t":"Dr.ウーパ"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/01778686324734783630"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/1.bp.blogspot.com\/-SdXDrSYZgWc\/U8d3jijVCJI\/AAAAAAAAChI\/L5vZ3vN49yI\/s1600\/*"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"569"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"1"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-1123830661169787383.post-2497838614659836649"},"published":{"$t":"2015-02-05T19:49:00.000+09:00"},"updated":{"$t":"2015-02-06T12:00:52.910+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Google+"},{"scheme":"http://www.blogger.com/atom/ns#","term":"リンク"},{"scheme":"http://www.blogger.com/atom/ns#","term":"埋め込みコンテンツ"}],"title":{"type":"text","$t":"Blogger:過去の投稿へのスタイリッシュなリンク作成-Google+の埋め込みコンテンツを活用する！"},"summary":{"type":"text","$t":"\nイントロダクション\nGoogle のブログサービス「Blogger」にて、新しい投稿を作成しているときに、自分自身のブログの過去の投稿へのリンクを貼りたくなる時があります。\n\nしかし、この過去の投稿へのリンクを張る場合、ユーザがクリックしたくなるようなデザインでリンクを作成するのが面倒です。\n\n\n\n私がこのブログでよく使うリンクの表記方法\n残念ながら、クリックを誘うようなスタイリッシュさはない\n\n\n\nそこで、活用したいのは Google+ の埋め込みコンテンツです！\n\n\n\nGoogle+ の埋め込みコンテンツを活用して、スタイリッシュなリンクを作成する！\nGoogle+ では、Google+ へ投稿したコンテンツを、自分自身のブログページなどに埋め込むことができます。\n\n\nGoogle+ 投稿の埋め込み - Google+ ヘルプ\nhttps:\/\/support.google.com\/"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/upa-pc.blogspot.com\/feeds\/2497838614659836649\/comments\/default","title":"コメントの投稿"},{"rel":"replies","type":"text/html","href":"http:\/\/upa-pc.blogspot.com\/2015\/02\/blogger-link-google-plus-embedded-content.html#comment-form","title":"0 件のコメント"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/1123830661169787383\/posts\/default\/2497838614659836649"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/1123830661169787383\/posts\/default\/2497838614659836649"},{"rel":"alternate","type":"text/html","href":"http:\/\/upa-pc.blogspot.com\/2015\/02\/blogger-link-google-plus-embedded-content.html","title":"Blogger:過去の投稿へのスタイリッシュなリンク作成-Google+の埋め込みコンテンツを活用する！"}],"author":[{"name":{"$t":"Dr.ウーパ"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/01778686324734783630"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/1.bp.blogspot.com\/-SdXDrSYZgWc\/U8d3jijVCJI\/AAAAAAAAChI\/L5vZ3vN49yI\/s1600\/*"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-H1SJqoGRll4\/VNMvKPzyWnI\/AAAAAAAADus\/hLfkjS6hXC4\/s72-c\/blogger_link_my.png","height":"72","width":"72"},"thr$total":{"$t":"0"}}]}});

一部ラベルのデータ量が多かったため、「～～～～～～～～～～～省略～～～～～～～～～～～」にて省略しました。

コードが1行に圧縮されていて、このままでは非常に読みにくいので、コードを整形してみました。

// API callback
callbackFunction(
{
    "version" : "1.0", "encoding" : "UTF-8", "feed" : 
    {
        "xmlns" : "http://www.w3.org/2005/Atom", "xmlns$openSearch" : "http://a9.com/-/spec/opensearchrss/1.0/", 
        "xmlns$blogger" : "http://schemas.google.com/blogger/2008", "xmlns$georss" : "http://www.georss.org/georss", 
        "xmlns$gd" : "http://schemas.google.com/g/2005", "xmlns$thr" : "http://purl.org/syndication/thread/1.0", 
        "id" : {
            "$t" : "tag:blogger.com,1999:blog-1123830661169787383"
        },
        "updated" : {
            "$t" : "2015-02-06T16:01:30.149+09:00"
        },
        "category" : [ {
            "term" : "Blogger"
        },
        {
            "term" : "JavaScript"
        },
        
        ～～～～～～～～～～～省略～～～～～～～～～～～

        {
            "term" : "騒音"
        }], "title" : {
            "type" : "text", "$t" : "Dr.ウーパのコンピュータ備忘録"
        },
        "subtitle" : 
        {
            "type" : "html", "$t" : "わたしが体験・気になったコンピュータ関係の情報のまとめ\u003Cbr\u003E\nタグ：Windows \/ Blogger \/ Programming \/ Computer \/ Security \/ Network \/ Android \/ Game \/ News \/\u003Cbr\u003E\nDr.Upa's notebook about computer informations\u003Cbr\u003E"
        },
        "link" : [
        {
            "rel" : "http://schemas.google.com/g/2005#feed", "type" : "application/atom+xml", "href" : "http:\/\/upa-pc.blogspot.com\/feeds\/posts\/summary"
        },

        {
            "rel" : "self", "type" : "application/atom+xml", "href" : "http:\/\/www.blogger.com\/feeds\/1123830661169787383\/posts\/summary?alt=json-in-script\u0026max-results=1\u0026redirect=false"
        },
        {
            "rel" : "alternate", "type" : "text/html", "href" : "http:\/\/upa-pc.blogspot.com\/"
        },
        {
            "rel" : "hub", "href" : "http://pubsubhubbub.appspot.com/"
        },

        {
            "rel" : "next", "type" : "application/atom+xml", "href" : "http:\/\/www.blogger.com\/feeds\/1123830661169787383\/posts\/summary?alt=json-in-script\u0026start-index=2\u0026max-results=1\u0026redirect=false"
        }], "author" : [
        {
            "name" : {
                "$t" : "Dr.ウーパ"
            },
            "uri" : {
                "$t" : "http:\/\/www.blogger.com\/profile\/01778686324734783630"
            },
            "email" : {
                "$t" : "noreply@blogger.com"
            },
            "gd$image" : 
            {
                "rel" : "http://schemas.google.com/g/2005#thumbnail", "width" : "32", "height" : "32", 
                "src" : "http:\/\/1.bp.blogspot.com\/-SdXDrSYZgWc\/U8d3jijVCJI\/AAAAAAAAChI\/L5vZ3vN49yI\/s1600\/*"
            }
        }], "generator" : {
            "version" : "7.00", "uri" : "http://www.blogger.com", "$t" : "Blogger"
        },
        "openSearch$totalResults" : {
            "$t" : "569"
        },
        "openSearch$startIndex" : {
            "$t" : "1"
        },
        "openSearch$itemsPerPage" : {
            "$t" : "1"
        },
        "entry" : [
        {
            "id" : {
                "$t" : "tag:blogger.com,1999:blog-1123830661169787383.post-2497838614659836649"
            },
            "published" : {
                "$t" : "2015-02-05T19:49:00.000+09:00"
            },
            "updated" : {
                "$t" : "2015-02-06T12:00:52.910+09:00"
            },
            "category" : [ {
                "scheme" : "http://www.blogger.com/atom/ns#", "term" : "Blogger"
            },
            {
                "scheme" : "http://www.blogger.com/atom/ns#", "term" : "Google+"
            },
            {
                "scheme" : "http://www.blogger.com/atom/ns#", "term" : "リンク"
            },
            {
                "scheme" : "http://www.blogger.com/atom/ns#", "term" : "埋め込みコンテンツ"
            }], "title" : {
                "type" : "text", "$t" : "Blogger:過去の投稿へのスタイリッシュなリンク作成-Google+の埋め込みコンテンツを活用する！"
            },
            "summary" : 
            {
                "type" : "text", "$t" : "\nイントロダクション\nGoogle のブログサービス「Blogger」にて、新しい投稿を作成しているときに、自分自身のブログの過去の投稿へのリンクを貼りたくなる時があります。\n\nしかし、この過去の投稿へのリンクを張る場合、ユーザがクリックしたくなるようなデザインでリンクを作成するのが面倒です。\n\n\n\n私がこのブログでよく使うリンクの表記方法\n残念ながら、クリックを誘うようなスタイリッシュさはない\n\n\n\nそこで、活用したいのは Google+ の埋め込みコンテンツです！\n\n\n\nGoogle+ の埋め込みコンテンツを活用して、スタイリッシュなリンクを作成する！\nGoogle+ では、Google+ へ投稿したコンテンツを、自分自身のブログページなどに埋め込むことができます。\n\n\nGoogle+ 投稿の埋め込み - Google+ ヘルプ\nhttps:\/\/support.google.com\/"
            },
            "link" : [
            {
                "rel" : "replies", "type" : "application/atom+xml", "href" : "http:\/\/upa-pc.blogspot.com\/feeds\/2497838614659836649\/comments\/default", 
                "title" : "コメントの投稿"
            },

            {
                "rel" : "replies", "type" : "text/html", "href" : "http:\/\/upa-pc.blogspot.com\/2015\/02\/blogger-link-google-plus-embedded-content.html#comment-form", 
                "title" : "0 件のコメント"
            },

            {
                "rel" : "edit", "type" : "application/atom+xml", "href" : "http:\/\/www.blogger.com\/feeds\/1123830661169787383\/posts\/default\/2497838614659836649"
            },

            {
                "rel" : "self", "type" : "application/atom+xml", "href" : "http:\/\/www.blogger.com\/feeds\/1123830661169787383\/posts\/default\/2497838614659836649"
            },

            {
                "rel" : "alternate", "type" : "text/html", "href" : "http:\/\/upa-pc.blogspot.com\/2015\/02\/blogger-link-google-plus-embedded-content.html", 
                "title" : "Blogger:過去の投稿へのスタイリッシュなリンク作成-Google+の埋め込みコンテンツを活用する！"
            }], "author" : [
            {
                "name" : {
                    "$t" : "Dr.ウーパ"
                },
                "uri" : {
                    "$t" : "http:\/\/www.blogger.com\/profile\/01778686324734783630"
                },
                "email" : {
                    "$t" : "noreply@blogger.com"
                },
                "gd$image" : 
                {
                    "rel" : "http://schemas.google.com/g/2005#thumbnail", "width" : "32", "height" : "32", 
                    "src" : "http:\/\/1.bp.blogspot.com\/-SdXDrSYZgWc\/U8d3jijVCJI\/AAAAAAAAChI\/L5vZ3vN49yI\/s1600\/*"
                }
            }], "media$thumbnail" : 
            {
                "xmlns$media" : "http://search.yahoo.com/mrss/", "url" : "http:\/\/1.bp.blogspot.com\/-H1SJqoGRll4\/VNMvKPzyWnI\/AAAAAAAADus\/hLfkjS6hXC4\/s72-c\/blogger_link_my.png", 
                "height" : "72", "width" : "72"
            },
            "thr$total" : {
                "$t" : "0"
            }
        }]
    }
});

一部ラベルのデータ量が多かったため、「～～～～～～～～～～～省略～～～～～～～～～～～」にて省略しました。

なお、この JavaScript コードの整形は、この Web サービスを使用して行ってみました。

JavaScriptのコード整形＆色付け(貼り付け用)
http://www.enjoyxstudy.com/misc/20060911/code_paste.html

ここからわかるように、フィードの情報がデータ構造を持ったデータとして、callbackFunction関数の引数に渡されています。

従って、私たち利用者側としては callbackFunction 関数内で、引数として受け取ったフィード情報を処理すればよいわけです。

ブログのフィード情報を取得して、JavaScript でデータ処理する場合の取得方法例

ここまでで、特定の Bloggerブログのフィード情報を json-in-script形式で取得するための URL 形式を学びました。

次に、特定の Bloggerブログのフィード情報を json-in-script形式で取得して、JavaScript で処理する方法について学びます。

このブログのフィード情報を 1 件取得し、そのページタイトルを出力する JavaScript コードの例を以下に示します。

このブログのフィード情報を 1 件取得し、そのページタイトルを出力する JavaScript コードの例：

このブログの最新エントリのタイトル（フィードから JavaScript で取得した結果）<br />
<script type="text/javascript">
<!--
    function callbackFunction(data) {
        var title;      // ページタイトル
        if (data.feed.entry) {
            if (data.feed.entry.length > 0) {
                title = escapeHTML(data.feed.entry[0].title.$t);
                document.writeln(title);
                return;
            }
        }

        document.writeln("最新の投稿は見つかりませんでした。");
    }

    // テキストをエスケープ処理する
    function escapeHTML(html) {

        var div = document.createElement("div");
        if (div.innerText !== void 0) div.innerText = html;          // innerText が定義されていれば innerText へ設定
        else div.textContent = html;                                 // Firefox のように innerText がないブラウザ向け

        return div.innerHTML;
    }
//-->
</script>
<script type="text/javascript" src="http://upa-pc.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&callback=callbackFunction"></script>
<br />

実行結果：

このブログの最新エントリのタイトル（フィードから JavaScript で取得した結果）

コード解説：

フィード情報の取得は、以下の script タグにて行っています。

<script type="text/javascript" src="http://upa-pc.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&callback=callbackFunction"></script>

この script タグにより、フィード情報の取得が完了すると、callback に指定した callbackFunction 関数が呼び出されます。

callbackFunction 関数では、フィード内に 1 件以上の投稿（エントリ）が含まれていることを確認した後、最初のエントリのタイトルを取得して、ページに表示しています。

フィード内に投稿が見つからなかった場合には、"最新の投稿は見つかりませんでした。"が出力されます。

なお、エントリのタイトルにはエスケープ処理（escapeHTML）を実施してから、ページへ出力しています。
これは、エントリのタイトルに HTML のタグや < といった記号が含まれていた場合に、ページの表示が予期せぬ結果にならないようにするためです。

まとめ

Blogger のフィード情報を取得し、JavaScript で処理する場合には、json-in-script 形式が便利である理由を、実際にコード例を示すことで説明しました。

フィード取得時に指定できるパラメータなどについての詳しい話は、関連する投稿の「BloggerのフィードURL(RSS/Atom)についての貴重な情報が書かれているページまとめ」に記載してあります。

また、json-in-script 形式で取得できるデータの各要素については、以下のページに説明が記載されています。

Blogger JSON Feed API - DanPros
http://www.danpros.com/2013/08/blogger-json-feed-api

Dr.ウーパのコンピュータ備忘録

2015年2月6日金曜日