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

前の関連記事：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桁まであることに要注意です。

ブログ最終更新日時: 2025-03-26T16:45:01.630+09:00
0番目のラベル: 旧ブログ
ラベル数: 7
ラベルリスト: 旧ブログ KDE neonを使おうその他 Bloggerカスタマイズ Bodhi Linux LibreOffice Debianを使おう
ブログタイトル: p--q
0番目のブログ投稿者: Unknown
全投稿数: 1233
開始投稿番号: 1
JSONPで得た投稿数: 25
0番目の投稿のタイトル: VirtualBox7.0にDebian12.9をインストール
0番目の投稿の公開日時: 2025-02-18T16:59:00.001+09:00
0番目の投稿の更新日時: 2025-02-18T16:59:34.894+09:00
0番目の投稿の0番目のラベル: Debianを使おう
0番目の投稿のラベル数: 1
0番目の投稿のラベルリスト: Debianを使おう
0番目の投稿の0番目の投稿者: Unknown
0番目の投稿の画像のｻﾑﾈｲﾙ:

取得した投稿のタイトル一覧:

VirtualBox7.0にDebian12.9をインストール

SDカードをOSインストールディスクとして活用する

ASUS RT-AC65UにSSHでログインしてDNLAの設定を確認する

TestDiskでSSDのパーティションテーブルを作り直す

ExifToolで写真と動画を日付フォルダに自動整理する

写真と動画の撮影日時をExif情報から得る

NASにあるファイルをKonsoleで引数に使えるようにする

PS4ProのHDDをSSDに換装

Nintendo SwitchのCapcom Arcade Stadium「1943 - ミッドウェイ海戦 -」を縦画面でやる

Bluetooth機器のバッテリー残量を表示させる

Nintendo Switchで複数人プレイができる無料ゲーム

Steamのインストール

ゲームパッドELECOM JC-U2912Fを使う

ブックマークのファビコンを更新するアドオン

KDEシステム設定の「地域と言語」が反映されない問題

KDE neon 5.27のインストールと日本語入力

KDE neonにVirtualBox7.0のインストール

KDE neonでPDFファイルを扱う手段

Adobe Acrobat Readerのコメントツールバーの機能一覧

WINEのアンインストール

Microsoft EdgeとAdobe Acrobat拡張機能

フォトブックの作成手順

Phockupで写真を日付フォルダに整理する

Bloggerテーマの作成(7)マークダウンを書き込むタグ

Bloggerテーマの作成(6)数式表示ライブラリ KaTeXの導入

ｊ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を使うと便利です。

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

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

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

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

ｊQueryでJSONPを受け取る場合

参考にしたサイト

0 件のコメント:

コメントを投稿

ブログ検索 by Blogger

Translate

最近のコメント

全記事