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

某組織向けにGoogle Sitesを利用しているが、お知らせ/Announcementsページテンプレートを利用したお知らせページの投稿要約出力機能（ガジェット）は好みの出力ができないし、カスタマイズできるところも限られていて残念なのである。直ぐには思い通りの要約が貼れるGoogle Apps Script(GAS)やGoogle Gadget(GG)を見つけられなかったので、指定したお知らせページの要約出力機能を持つGASまたはGGを作成してみることにした。

一つのガジェットの作成だけに留めず、Googleはもとより、これまでの数年間で相当の利用者・開発者のオープンなネット上で読めるドキュメントが蓄積されているが、まとまっていて特定の目的に絞ったものがないので（書籍やオライリーのネット無料版にあるのかもしれないが）、開発備忘録代わりに残しておくことも念頭にあった。また、この記事に正確なタイトルを付けるなら「RSS JSON出力からタイトルや要約などを抜き出すGoogle Gadgetの作り方」だが、他に応用が利くのと、周辺予備知識の備忘録、GASで最初に実装してみたので、少々曖昧なタイトルのままにしておく。使っていて自然にわかるということは解説しない。（でも稀に簡単なことが思い出せなくて数時間潰す事があるよね？）

最初はサーバーサイドで全て処理させようと思い、Google SitesのGASエディタを利用してスクリプトを書いてみた。タイトルと異なる内容になるが、GASでの実装方法も備忘録代わりに書いていく。実は2種類のスクリプトを書いてみた。一つはHTMLドキュメント中に差し込みを行う方法である。もう一つはパネルやラベルなどのウィジット(widget)を利用したものである。まずは前者の実装を紹介する。

実は、思ったとおりに作れなかった。差し込みを行った後、呼び出されたGASがHTMLドキュメント内から消えてしまい、一度しか更新できないのである。何か知らないこと、見逃していることがあるのであろうが、この方法は使えない。ページに任意の文字列を差し込み・置換しているサンプルスクリプトを拝見してはいるが、ひょっとしてタイムイベントのトリガーで呼び出しているのではと推測している。とりあえず、スクリプトを掲載する。

var MAIL = "メールアドレス";
var DEBUG_MAIL_SUBJECT = "【DEBUG】最新のお知らせ";
var FEED_URL = "http://www.hoge.com/info/posts.xml";
var LINK_URL = "http://www.hoge.com/infoe";
var SITE_NAMESPACE_URL = "http://schemas.google.com/sites/2008";
var TITLE = "お知らせ";
var TARGET = "recent_announcements";
var zero_suppress = false;
var japanese_date_format = true;

function getJapaneseFormatDate( date ) {
  var html = "";
  html += date.getFullYear() + "年";
  var m = date.getMonth() + 1;
  if ( !zero_suppress && m < 10 ) html += "0";
  html += m + "月";
  var d = date.getDate();
  if ( !zero_suppress && d < 10 ) html += "0";
  html += d + "日";
  html += " ";
  var h = date.getHours();
  if ( !zero_suppress && h < 10 ) html += "0";
  html += h + "時";
  m = date.getMinutes();
  if ( !zero_suppress && m < 10 ) html += "0";
  html += m + "分";
  var s = date.getSeconds();
  if ( !zero_suppress && s < 10 ) html += "0";
  html += s + "秒";
  return html;
};

function makeSummary( url ) {
  var content = "";
  var doc = Xml.parse( UrlFetchApp.fetch( url ).getContentText() );
  // title of the feed
  //content += "<b>" + doc.getElement().getElement( "title" ).getText() + "</b><br><br>"
  content += "<b>" + TITLE + "</b><br><br>"
  var entries = doc.getElement().getElements( "entry" );
  for ( var entry in entries ) {
    // date of a entry
    var date = new Date( entries[entry].getElement( "published" ).getText() );
    if ( japanese_date_format ) {
      content += getJapaneseFormatDate( date ) + " ";
    } else {
      content += date;
    }
    // link and title of a entry
    content += "<a href='" + LINK_URL       +  entries[ entry ].getElement( SITE_NAMESPACE_URL, "pageName" ).getText() + "'>";
    content += entries[ entry ].getElement( "title" ).getText() + "</a><br>";
  }
  return content;
}

function insertToPage( html, s, target ) {
  var i = html.indexOf( 'name="' + target + '"', 0 );
  i = html.indexOf( '>', i );
  var j = html.indexOf('</div>', i + 1 );
  return html.substring( 0, i + 1 ) + '<div name="' + target + '">'
    + s + '</div>' + html.substring( j );
}

function debug() {
  var content = makeSummary( FEED_URL );
  Logger.log( content );
  var html = insertToPage( '<div name="recent_announcements"></div>', content, 'recent_announcements');
  Logger.log( html );
  MailApp.sendEmail( MAIL, DEBUG_MAIL_SUBJECT, Logger.getLog() );
}

function doGet(e) {
  var app = UiApp.createApplication();
  var page = SitesApp.getActivePage();
  var content = page.getHtmlContent();
  var insertion = makeSummary( FEED_URL );
  content = insertToPage( content, insertion, TARGET );
  page.setHtmlContent( content );
  app.add(app.createLabel(TITLE));
  return app;
}

少々、幼稚なプログラムだが、備忘録としてエッセンスを分かりやすくしておいている。ネット上のスクリプトのサンプル、インテリセンスによってメソッドなどが補完されるので、簡単に10分ぐらいでコーディングが終了し、幾つかのテストを経て感性するのかと思いきや、そうはならなかった。嵌りどころ、気づかないことが多かった。

11行目からの日本風の日付時間文字列の生成を行うgetJapaneseFormatDate()という関数が書いてあるが、引数に渡された日付時間情報をブラウザがあるPCのローカル時間に変換している。Google Sitesがお知らせページで出力するposts.xmlのページ公開時間などは全てUTCで記録されており、特にタイムゾーンを設定しなくても、ローカルの時間を返す関数を利用してれば、閲覧している環境の時間に自動的に合わせることができる。どの地点の時間かが必要な場合にはタイムゾーンも文字列に付加しておくことも必要だが、国内向け専用であれば、これで十分だ。また、ゼロサプレスをするかしないかを指定できるようにしておいた。ゼロをつけないと見た目に崩れた印象を与えてしまう。ゼロサプレスをしないようにしておけば、崩れない。

33行目からの、タイトル・要約の文字列を作成するmakeSummary()という関数は、単純にXMLドキュメントをパースして目的のエレメントの属性やテキストを抜き出して、HTML形式のドキュメントに作り直しているだけで、スクリプトも簡単に書けているが、簡単に書くために幾つかのツールや知っていなければならないことがある。まず、Google Sitesが出力するお知らせページのRSSフィード(posts.xml)内容を詳しく知る必要がある。また、XMLの名前空間とその扱い方についても知っておかないといけない。

Google Sitesを使っているのが理由ではないのだが、Chromeブラウザでposts.xmlのようなXMLファイルを人間に見やすく、構造がよくわかるようにインデントをいれてくれるXVというXMLドキュメントビューワーがChromeプラグインとして登録されている。posts.xmlファイルのようなXMLドキュメントにブラウザでアクセスすると自動的にこのXVの画面になり、ドキュメントが非常に見やすく表示される。ドキュメントのタグや属性、テキストなどをクリックすると、画面上部のウィンドウにそのエレメントまでに至るパスを表示してくれる。

XML Viewer for Google Chrome

<sites:pageName>のような名前空間が指定されているタグを指定・アクセスするには、getElement()メソッドで最初の引数に名前空間を示す文字列を指定すればよいが、XMLのハンドリング、特にGoogle Apps Scriptでの扱いに慣れていないと戸惑う。この引数には、XMLドキュメントの先頭で指定されているxmlns属性で定義されている名前空間のURLを指定すればよい。本当は、XMLをハンドリングするオブジェクトに名前空間のファイルを読み込ませておいて、名前空間の識別子を引数に与えるだけでよいのかもしれない（要調査）。

56行目からのinsertToPage()関数で、既存のページにある<div name=”TARGET NAME”></div>（TARGET NAMEは任意）を見つけ、このタグの間にmakeSummary()が返す内容を差し込んでいる。Google Sitesのページには<div name=”TARGET NAME”></div>を記述しておけばよい、というトリックである。

タグ: Google Apps Script, Google Gadget, Google Site, JavaScript, XML, XV