Google Apps ユーザーフォーラムでSidebarガジェットの発表をしてきました（前編）

Google Apps ユーザーフォーラムへ行ってきたよ

会社の人事総務部で導入しているGoogleAppsのユーザフォーラムが開催（主催：株式会社電算システム様）されたので、ちょっとお手伝いに行ってきてついでに（？）発表してきました。

弊社では、社員の内線番号を氏名から検索できるGmail Sidebar ガジェットを導入しています。

このお話を5分程度させていただいたところ、思いの外好評でしたので、そのノウハウを書いておきます。

今回作ってみるガジェットについて

GoogleSpreadSheetにデータを保存し、そのデータをSQLのような方法で取得し、検索をするという動作をするものです。

Gmail Sidebar ガジェットについて

Sidebar　ガジェットは、GmailのLabsを有効にし、”Add any gadget by URL” という機能を有効にして利用します。ここにガジェット自体のXMLを登録することで、サイドバーに表示されるというものです。ガジェットは一般的なガジェット（iGoogleなどに追加できるガジェット）のすべてを登録できます。

今回はその自作ガジェットの超基本についてです。

極めてシンプルなガジェットを作ってみました。

<?xml version="1.0" encoding="utf-8"?>
<Module>
<ModulePrefs title="はじめてのSideBarGadget"
             description="サイドバーにhello gadgetと時刻を表示します"
             author="ITO Tetsunosuke"
             author_email="tetsunosuke.ito@photocreate.co.jp"
/>
<Content type="html">
<![CDATA[
  <p>hello gadget!</p>
  <p id="time"></p>
  <script type="text/javascript">
  // 時刻を生成して、id="time"の中に表示
  var d = new Date();
  var textNode = document.createTextNode(d.toString());
  document.getElementById("time").appendChild(textNode);
  </script>

]]>
</Content>
</Module>

CDATAの中にHTMLやJavaScriptを書くことができます。
このガジェットファイルをXMLとして保存し、Webサーバにアップします。今回はHTTPS領域にファイルを置きたいため、DropBoxを利用しました。ファイルの実体はこちらにあります：https://dl.dropbox.com/u/2374674/googleappsuserforum/googlesidebargadget.xml

SpreadSheetにアクセスする

「ガジェットから」を一旦忘れ、単なるHTML＋JavaScriptでGoogleSpreadSheetとのデータのやりとりをしてみます。

SpreadSheetとのやりとりは、Visualization APIを用います。

まずは仮のデータとして日本の歴代総理大臣のシートを作った（けど10代で挫折した）ので、こちらのデータを取得して表示してみるプログラムを作ってみます。

歴代総理大臣のシート： https://docs.google.com/spreadsheet/ccc?key=0AvdfXiBhjpT3dHdNY1ZIV053Nnd6d0s5Y240Z0h1Znc#gid=0

プログラムはこちらで実行、ソースの確認ができます：https://dl.dropbox.com/u/2374674/googleappsuserforum/spreadsheet.html

<html>
<head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
      google.load("visualization", "1");
      google.load("jquery", "1.4.2");
      // 読み込み完了したらinitメソッドを呼ぶ
      google.setOnLoadCallback(init);
      
      
      // クエリ実行後のコールバック
      function handleQueryResponse(response) {
        var data = response.getDataTable();
      
        // 結果を一行ずつ処理
        for (var row = 0; row < data.getNumberOfRows(); row++) {
            a = data.getFormattedValue(row, 0); // 1列目つまりA列
            b = data.getFormattedValue(row, 1); // 2列目つまりB列
            c = data.getFormattedValue(row, 2); // 3列目つまりC列
        
            line = ("苗字=" + a + ","
                  + "名前=" + b + ","
                  + "番号=" + c);
            p = "<p>" + line + "</p>";
            // HTMLのid="result"にこの結果を追加していく
            $("#result").append(p);
        }
      }
      
      // 読み込み完了時に実行される
      function init() {
        // スプレッドシートのURL
        var spreadsheet_url = "https://docs.google.com/spreadsheet/ccc?key=0AvdfXiBhjpT3dHdNY1ZIV053Nnd6d0s5Y240Z0h1Znc";
        var query = new google.visualization.Query(spreadsheet_url);
        // 引っ張ってくる列
        query.setQuery("select A, B, C");
        // クエリを実行し、handleQueryResponseメソッドを実行
        query.send(handleQueryResponse);
      }
  </script>
</head>
<body>
<div id="result"></div>
</body>
</html>

今回利用するのはVisualizationAPIですが、その他にHTMLに対して簡単にアクセスしたいため、jQUeryも利用することにします。Google AJAX API を使えば、これらのライブラリを簡単に利用することができます。

それがこの部分です。

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
      google.load("visualization", "1");
      google.load("jquery", "1.4.2");
      // 読み込み完了したらinitメソッドを呼ぶ
      google.setOnLoadCallback(init);