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);
google.setOnLoadCallbackで、読み込み完了後に実行される処理、つまり今回行いたい処理を記載します。
細かいことは一旦気にせず、スプレッドシートのURLを用いて、その表をまさにデータベースのテーブルの用に扱い、SQLのようなクエリでデータを検索、クエリを実行して結果が取得できたら、その結果を用いて一行ずつデータを取りだしていく、という処理を行なっています。
VisualizationAPIを使うと、非常に簡易的なデータベースを構築できるので、こういった用途にはオススメです。
これらを組み合わせて、内線表ガジェットができていくのですが、続きは後編で。
参考資料
- Gadgets API: https://developers.google.com/gadgets/?hl=ja
- Google Visualization API Reference - Google Chart Tools: https://developers.google.com/chart/interactive/docs/index
- Google Loader: https://developers.google.com/loader/