2012年8月9日 星期四

Blogger : DATA API 擷取 JSON feeds

2012年8月9日 星期四
Google 的服務有一個特點,它有完整的 DATA API ,讓我們可以輕鬆的用喜好的工具開發各式各樣的應用,因此,我們可以讓 Blogger 以 JavaScript 來擷取 Blogger 、Calendar ...... 上的資料,讓它呈現更多樣的風貌。以我用 Blogger 建置的班級網站來說,在首頁顯示「聯絡事項」、「最近行事」...... 就是用這種技巧。

JSON feeds

以這個 blog 來說,底下的網址可以擷取 blog 的文章,並以 JavaScript 可運用的 JSON 格式回傳給程式:
稍微分析一下這個網址 (JSON feeds) 中的參數:
  • alt=json-in-script :傳回 JavaScript 可用的 JSON 格式。
    如果是給 PHP 用的,就改為 alt=json ,並以 file_get_contents 來讀取網址的內容,再用 json_decode 來解析、建立新的物件。
  • max-results=3 :最多只傳回 3 筆
  • callback=myFunc :我們只要寫一個名為 myFunc 的函數,參數就以可接收 google 傳回來的 JSON 格式物件。例如:function myFunc(root) ,這裡的 root 就可以接收 google 傳回來的資料。如果沒有設定這個,預設是 gdata.io.handleScriptLoaded。 
如果是要擷取 Blogger 某一個「標籤」中的文章,以我的「Biking」為例:

也就是在「default/」和問號「?」之間再加入「標籤」的名稱即可。


以 JavaScript 來擷取資料

下面寫個簡單的範例擷取三筆文章並顯示標題:
<div id="show_data">載入資料</div>

<script type="text/javascript">
   //=====1==== JSON feed
   var feedUrl = 'http://gsyan888.blogspot.com/feeds/posts/default/-/Biking?alt=json-in-script&max-results=3&callback=myFunc';
 
   //=====2==== 讀入 JSON 物件並處理資料
   function myFunc(root) {
      var html = [''];
      var entries = root.feed.entry;
      for(var i=0; i<entries.length; i++) {
         html.push(entries[i].title.$t);   //擷取文章標題
         html.push('<'+'br />');
      }
      document.getElementById("show_data").innerHTML = html.join('');
   }
 
   //=====3==== 產生匯入外部 Javascript 檔案的語法
   function IncludeJavaScript(jsFile)  {
      document.write('<'+'script type="text/javascript" src="'+ jsFile + '"><'+'/script>');
   }
   //=====4==== 進行匯入 DATA API
   IncludeJavaScript(feedUrl);
</script>
程式簡單的說明如下:
  • 區塊 1 的部份:設定要讀取的 JSON feed,本例預備擷取 「gsyan888.blogspot.com」 中「Biking」標籤裡的文章「3 篇」,內容會以 JSON 物件的方式回傳給名為「myFunc」的函數當參數。
  • 區塊 2 的部份:建立一個名為「myFunc」的自訂函數,其中的參數「root」會接收傳自主機的 JSON 物件。
    以 Blogger 來說,最上層有個「feed」,其中的「entry」內有擷取回來的文章,所以 root.feed.entry 就是代表所有文章。接著可以用底下的語法擷取文章的相關資訊(以第一篇文章為例):
    「標題」:root.feed.entry[0].title.$t
    「日期」:root.feed.entry[0].published.$t
    「內容」:root.feed.entry[0].content.$t
    「網址」:root.feed.entry[0].link[4].href
    ...... 其它的就自己觀察看看,或是查 Blogger 的說明。
    有了這些資料,我們就可以依需要以程式自己組合成要呈現的資訊。
  • 區塊 3 的部份:建立名為「IncludeJavaScript」的自訂函數,讓我們可以動態載入外部的 JavaScript,參數就是要載入的程式路徑。
  • 區塊 4 的部份:開始載入 feedUrl 所指定的 JSON feed ,並誘發 myFun 中所指定的任務,顯示我們想要呈現的資訊。   

以 PHP 來擷取資料

如果是在 PHP 裡,則用不到 callback (myFunc),純粹把主機回傳的資料當一般串流來讀取後再處理:
<?php
$feedUrl =  'http://gsyan888.blogspot.com/feeds/posts/default/-/Biking?alt=json&max-results=3';
if( $json = file_get_contents($feedUrl) ) {
   if( $root = json_decode($json) ) {
      $entries = $root->feed->entry;
      foreach($entries as $entry) {
         echo $entry->title->{'$t'};
         echo '<br />';
      }
   }
}
?>
上面要注意的地方是 $feedUrl 中的資料回傳格式我們改為純 JSON (alt=json),而不是 json-in-script,不然,json_decode 會無法解析。


擷取 Google Calendar 的資料

如果是要擷取 Calendar 中的行事曆呢?
解析一下參數:
  • happy2011.lsps@gmail.com :是帳號。
  • orderby=starttime :排序是依行事的開始時間當關鍵。
  • sortorder=ascending :排序由小到大。
  • alt=json-in-script :傳回 JavaScript 可用的 JSON 格式。
  • start-min=2012-06-01 :擷取由 2012-06-01 開始的行事曆。
  • start-max=2012-06-30 :擷取至 2012-06-30 為止的行事曆。
  • callback=myFunc :寫個名為 myFunc 的函數,參數是 JSON 物件。
回傳的 JSON 常用的資料如下(以第一筆為例):
  • 「行事標題」:feed.entry[0].title.$t
  • 「行事內容」:feed.entry[0].content.$t
  • 「開始時間」:feed.entry[0]['gd$when'][0].startTime
  • 「結束時間」:feed.entry[0]['gd$when'][0].endTime

2 則留言:

  1. 文章中
    root.feed.entry[0].lini[4].href
    應改為
    root.feed.entry[0].link[4].href

    回覆刪除

 
雄::gsyan © 2009. Design by Pocket