JSON出力を処理するGoogle Gadgetの作り方#4

前回、環境を整えた。今回からやっと本題に入れる。まずは「gadgets.* API デベロッパー ガイド」の「リモートコンテンツの処理」、より本題に近い内容の「フィードの処理」をよく読んで、利用させてもらえばよい。実は、テーマにJSONとあるが、実際はFEEDを読み取るガジェットを作る。FEEDを読み取った後のデータの扱いがJSONなだけなのである。

早速、プログラムを示す。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Chou Feed Gadget"
  title_url =http://code.google.com/p/chou-feed-gadget/ description = "Mainly, this gadget exstracts titles of an announcement page from a posts.xml feed in a Google site."
author =Matthew / Ken ichi AKIMOTO author_email = screenshot = ""
thumbnail = scrolling =false height = "200">
    <Require feature="dynamic-height"/>
  </ModulePrefs>
  <UserPref name="title" display_name="Title" default_value=""/>
  <UserPref name="show_date" display_name="Show Dates?" datatype="bool" default_value="true"/>
  <UserPref name="num_entries" display_name="Number of Entries:" default_value="5"/>
  <UserPref name="show_summ" display_name="Show Summaries?" datatype="bool" default_value="false"/>
  <UserPref name="feed_url" display_name="Feed URL" default_value="" />
  <UserPref name="japanese" display_name="Japanese Format?" datatype="bool" default_value="true"/>
  <UserPref name="zero_suppress" display_name="Zero Suppress?" datatype="bool" default_value="false" />
  <UserPref name="link_url" display_name="Link URL" default_value="" />
  <Content type="html">
  <![CDATA[
  <style> 
  #content_div { font-size: 80%;  margin: 5px; background-color: transparent;}
  body {background-color: transparent;}
  </style>
  <div id="content_div"></div>
  <script type="text/javascript">

  // Get userprefs
  var prefs = new gadgets.Prefs();
  var title = prefs.getString("title");
  var showdate = prefs.getBool("show_date");
  var entries = prefs.getInt("num_entries");
  var summaries = prefs.getBool("show_summ");
  var feed_url = prefs.getString("feed_url");
  var japanese = prefs.getBool("japanese");
  var link_url = prefs.getString("link_url");
  var zero_suppress = prefs.getBool("zero_suppress");

  function getFeed() {
    var params = {};
    params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.FEED;  
    params[gadgets.io.RequestParameters.NUM_ENTRIES] = new Number(entries);  
    params[gadgets.io.RequestParameters.GET_SUMMARIES] = summaries; 
    gadgets.io.makeRequest(feed_url, response, params);
  };
  
  function getJapaneseFormatDate(date) {
    var html = "";
    html += date.getFullYear() + "年";
    m = date.getMonth() + 1;
    if (!zero_suppress && m < 10) html += "0";
    html += m + "月";
    d = date.getDate();
    if (!zero_suppress && d < 10) html += "0";
    html += d + "日";
    html += " ";
    h = date.getHours();
    if (!zero_suppress && h < 10) html += "0";
    html += h + "時";
    m = date.getMinutes();
    if (!zero_suppress && m < 10) html += "0";
    html += m + "分";
    s = date.getSeconds();
    if (!zero_suppress && s < 10) html += "0";
    html += s + "秒";
    return html;
  };

  function response(obj) { 
    // obj.data contains the feed data
    var feed = obj.data;
    var html = "";

    // Display the feed title and description
    html += "<b>" + title + "</b><br>";
    html += feed.Description + "<br>";
    // Access the data for a given entry
    if (feed.Entry) {
      for (var i = 0; i < feed.Entry.length; i++) {
        //html += "<div>"
        if (showdate==true) 
        { 
          var date = new Date(feed.Entry[i].Date); 
          if (japanese)
          {
            html += getJapaneseFormatDate(date);
          }
          else {
            html += date.toLocaleDateString();
            html += " ";
            html += date.toLocaleTimeString(); 
          }
        }
        html += " ";
        var page_url = feed.Entry[i].Link;
        if (link_url.length > 0) // brush up point
        {
          page_url = link_url + "/" + page_url.split("/").pop();
        }
        html += "<a target='_blank' href='" + page_url + "'>"
             +  feed.Entry[i].Title
             +  "</a> ";
        if (summaries==true) 
        { 
          html += "<br><i>" + feed.Entry[i].Summary + "</i>";
        }
        html += "<br>";
        //html += "</div>";
      }
    }
    document.getElementById('content_div').innerHTML = html;
    gadgets.window.adjustHeight(); // for iGoogle
  };
  gadgets.util.registerOnLoadHandler(getFeed);
  gadgets.window.adjustHeight(); // for Google Site
  </script>
  ]]>
  </Content>
</Module>

3行めから13行目までの<ModulePrefs>セクションは、ガジェットのすべてのメタデータ、機能、処理規則のコンテナ要素として機能し、より詳細には、がジェットのタイトルや作者などの情報を記述しておくところである。詳しくは、「ガジェット XML リファレンス」の「ModulePrefs 要素と属性」を理解して実践するとよい。とりあえず、

• title
• title_url
• description
• author

114行目は、最初にGASで作ろうとした特別な差込のための<div>要素をみつけて差込むトリックだ。１行でかけるから簡単だ。

115行目と118行目は、表示件数に応じてガジェットの高さ（縦方向の長さ）をジャストフィットさせるためのおまじないみたいなもので、iGoogleとGoogle Sitesでは何かが違うために異なるタイミングで実行させることにした。

117行目はこのファイルが読み込まれたときに実行する関数を設定している。

あとは、プログラムを読んだらおおよそわかるだろうから説明しない。

気をつけるべきところ

実は、ガジェットのソースを変更してブラウザでリロードしてもその変更は即座に反映されない。ブラウザかiGoogle/Google Sitesのキャッシュ更新タイミングが合わないのか、数分経ってからじゃないと更新されない。テストをして修正しなくてはならなくなり、即座に変更されないからといって慌てないように。iGoogleにはキャッシュをさせない機能がデベロッパーモードにあるので開発中はその機能を利用するとよい。

テスト・デバッグ・公開

iGoogleの場合は「ガジェットの追加」ボタンをクリックして、さらに画面左下にある「フィードやガジェットを追加」をクリックし、現れる横に細長いポップアップウィンドウのURL入力欄にガジェットを置いているURLを入力する。今回の場合はGoogle codeのホスティングを利用しているので、raw fileのURLを入力する。raw fileのURLは”Source”->”Browse”画面で”details”の一番したにある”View raw faile”のリンク先である。

Google Sitesの場合は、テストのためのページや、いきなり貼りたいページに、「その他ガジェット」メニューを選択し、URLを指定し、追加ボタンをクリックすればよい。あとは各種設定を行えばよい。

iGoogleもGoogle Sitesも設定した値が個別に保存されている。

参照・参考：

1. ガジェット XML リファレンス, 2012年2月29日閲覧
2. gadgets.* API デベロッパー ガイド, 2012年2月29日閲覧

タグ: Google Apps Script, Google code, Google Gadget, Google Site, iGoogle, JSON