Blogger:JSONPを使ってJSON形式で引き出したブログデータを加工する

前の関連記事：Blogger:JSONPを使ってJSON形式でブログの情報を引き出す

JSON形式で取り出したデータは&callback=関数名で指定した関数で受け取れます。その関数でいろいろ項目の情報を取り出します。

&callback=関数名でJSON形式のデータを受け取る

http://p--q.blogspot.jp/feeds/posts/default?alt=json-in-script&callback=関数名

&callback=関数名でJSON形式のデータが関数名で指定した関数の引数として渡されます。

関数を定義してブログの情報を取り出します。

JSONPはドメイン外にあるJSON形式のデータを受け取れるのでテストブログの投稿編集画面のHTMLモードにコードをペーストして公開するとデータが表示されます。

<script type="text/javascript">
function jsonp_test(json) {
  document.write("全公開投稿数は"+json.feed.openSearch$totalResults.$t+"です。");
}    
</script>
<script type="text/javascript" src="http://p--q.blogspot.jp/feeds/posts/default?alt=json-in-script&callback=jsonp_test"></script>

「全公開投稿数は170です。」と表示されるはずです。

関数定義をJSONPを呼び出す後に書くと動きません。

6行目の&callback=jsonp_testでjsonp_testという名前の関数にJSON形式のデータを渡しています。

2行目のfunction jsonp_test(json) でjsonp_testという名前の関数定義をしていますが、そこでJSON形式のデータをjsonという引数で受け取ることにしています。

関数でJSONデータから各情報を取り出す

Chromeの拡張機能のJSON Formatterで整形したJSONデータを「openSearch$totalResults」で検索してみるとこのようになっています。



JSONデータの冒頭は"feed"から始まっているのでこれらのカスケードを「.」でつないでjson.feed.openSearch$totalResults.$tと辿ると170にたどり着くということですね。


ラベル名はこのようになっているのでjson.feed.category.termということになりそうですが、複数あるためにこのままではundefinedと表示されてしまいます。

同一項目を複数持っている項目は配列になっているようで、この場合はcategoryが配列として扱われます。

ということでjson.feed.category[i].termとするとi番目のラベル名が表示されます。

iは0から始まることに注意が必要です。

配列の長さはlengthで得られるので全ラベル数はjson.feed.category.lengthで得られることになるので全ラベルを表示するためには以下のようにします。

document.write("ラベルリスト:");
for(var i=0;i<json.feed.category.length;i++){document.write(json.feed.category[i].term+" ");}

for(var i in json.feed.category){document.write(json.feed.category[i].term+" ");}

とも書けます。

categoryのほかauthor、entryも配列になっています。

entryが各投稿の配列になります。

0番目の投稿タイトルの表示はこのようになります。

document.write("0番目の投稿のタイトル: "+json.feed.entry[0].title.$t);

さらに各投稿につけられているラベルも配列になっているため投稿についているラベルの表示は以下のようにします。

document.write("0番目の投稿の0番目のラベル: "+json.feed.entry[0].category[0].term);

JSONから抜き出した情報を表示するJavaScritpを作ってみました。

<script type="text/javascript">
function jsonp_test(json) {
  document.write("ブログ最終更新日時: "+json.feed.updated.$t+"</br>");
  document.write("0番目のラベル: "+json.feed.category[0].term+"</br>");
  document.write("ラベル数: "+json.feed.category.length+"</br>")
  document.write("ラベルリスト: ");for(var i=0;i<json.feed.category.length;i++){document.write(json.feed.category[i].term+" ");}document.write("</br>");
  document.write("ブログタイトル: "+json.feed.title.$t+"</br>");
  document.write("0番目のブログ投稿者: "+json.feed.author[0].name.$t+"</br>");
  document.write("全投稿数: "+json.feed.openSearch$totalResults.$t+"</br>");
  document.write("開始投稿番号: "+json.feed.openSearch$startIndex.$t+"</br>");
  document.write("JSONPで得た投稿数: "+json.feed.openSearch$itemsPerPage.$t+"</br>");

  document.write("0番目の投稿のタイトル: "+json.feed.entry[0].title.$t+"</br>");
  document.write("0番目の投稿の公開日時: "+json.feed.entry[0].published.$t+"</br>");
  document.write("0番目の投稿の更新日時: "+json.feed.entry[0].updated.$t+"</br>");
  document.write("0番目の投稿の0番目のラベル: "+json.feed.entry[0].category[0].term+"</br>");
  document.write("0番目の投稿のラベル数: "+json.feed.entry[0].category.length+"</br>")
  document.write("0番目の投稿のラベルリスト: ");for(var i=0;i<json.feed.entry[0].category.length;i++){document.write(json.feed.entry[0].category[i].term+" ");}document.write("</br>");
 // document.write("0番目の投稿本文: "+json.feed.entry[0].content.$t+"</br>");//長いのでコメントアウトしています。
 // document.write("0番目の投稿サマリ: "+json.feed.entry[0].summary.$t+"</br>");//summary?alt=json-in-scriptのときのみ。
  document.write("0番目の投稿の0番目の投稿者: "+json.feed.entry[0].author[0].name.$t+"</br>");
  document.write("0番目の投稿の画像のｻﾑﾈｲﾙ: <img src=\'"+json.feed.entry[0].media$thumbnail.url+"\'></br>");
  document.write("取得した投稿のタイトル一覧:</br>");for(var i=0;i<json.feed.entry.length;i++){document.write("<li"+">"+json.feed.entry[i].title.$t+"</li"+">");}
}    
</script>
<script type="text/javascript" src="http://p--q.blogspot.jp/feeds/posts/default?alt=json-in-script&callback=jsonp_test"></script>

23行目は<li>などのタグをdocument.write()の中に書くと投稿編集画面で開くと自動的に改行が入ってしまうのでわざと分割して書いています。

(2016.12.18追記。max-resultsを設定してフィードを得た場合はtotalResultsがフィードで得た投稿数、itemsPerPageがブログ内の全投稿数になっていました。Blogger:カレンダー(6)Calendar_Bloggerモジュールの作成その5のカレンダーのJavaScriptではそう処理しました。)

これを実行すると以下のようになります。日時が秒の小数点以下3桁まであることに要注意です。

ｊQueryでJSONPを受け取る場合

ｊQueryの使用にはあらかじめjquery.jsをロードしておく必要があります。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/></script>

jQueryではコールバック関数名はｊQueryが勝手に決めるので「&callback=関数名」は「&callback=?」とします。

<script>
$.getJSON("http://p--q.blogspot.jp/feeds/posts/default?alt=json-in-script&callback=?",
  function(json){
    $("#output").html("ブログ最終更新日時: "+json.feed.updated.$t+"</br>");
 });
</script>
<div id="output"></div>

以下は単にｊQueryの使い方の私のお勉強です。どれも同じ結果になるはずです。

JSONをeachに渡す。

<script>
$.getJSON("http://p--q.blogspot.jp/feeds/posts/default?alt=json-in-script&callback=?",
  function(json){
    $.each(json.feed.category,function(){
      $("#output").append("<li>"+this.term+"</li>")
    })
  }
);
</script>
<div id="output">ラベルリスト:</div>

json.feed.categoryをeachに渡す。

<script>
$.getJSON("http://p--q.blogspot.jp/feeds/posts/default?alt=json-in-script&callback=?",
  function(json){
    $(json.feed.category).each(function(){
      $("#output").append("<li>"+this.term+"</li>")
    })
  }
);
</script>
<div id="output">ラベルリスト:</div>

参考にしたサイト

Chrome ウェブストア - JSON Formatter
ChromeでJSON形式のデータを見やすくしてくれます。

Basic Blogger JSON Feed Api
BloggerがJSON形式で提供しているブログデータの抽出方法一覧が載っています。

JSONPで悩むある程度の人々へ
jQueryでは受け取る関数名はjQueryが勝手に決めてくれます。

JSONをjQueryで扱う方法 : ずっと工事中
ｊQueryではeachを使うと便利です。