Google Apps ユーザーフォーラムでSidebarガジェットの発表をしてきました（後編）
続編だよ！
続編では、jQueryのプラグインであるquicksearchをご紹介します。
前回作ったプログラムを動作させると、下記のHTMLを実行したのと似たような状態になります（※ pはやめてul/liを使いました）
<html> <head> <meta http-equiv="Content-type" content="text/html;charset=utf-8"> </head> <body> <ul id="result"> <li>苗字=ito,名前=hirobumi,番号=1</li> <li>苗字=kuroda,名前=kiyoyaka,番号=2</li> <li>苗字=yamagata,名前=aritomo,番号=3</li> <li>苗字=matsukata,名前=masayoshi,番号=4</li> <li>苗字=ito,名前=hirobumi,番号=5</li> <li>苗字=matsukata,名前=masayoshi,番号=6</li> <li>苗字=ito,名前=hirobumi,番号=7</li> <li>苗字=ookuma,名前=shigenobu,番号=8</li> <li>苗字=yamagata,名前=aritomo,番号=9</li> <li>苗字=ito,名前=hirobumi,番号=10</li> </ul> </body> </html>
jquery.quicksearch.js を導入しよう
このデータに対して、今回は検索Windowを設定し、JavaScriptを用いてサーチします。（※単純なテキストサーチになるので、データの数があまりに多い、とかだと性能上の工夫が必要になってしまうかもしれません。）
まずは上記に対して、検索フォームをつけます。
<input type="text" id="search">
JSで起動させるために、IDを振っておきます。Submitボタンは特に必要ないのでおきません。
このテキストボックスの中に文字が入力された場合に検索を行うため、jQueryプラグインであるjquery.quicksearch.js を導入します。
jQueryプラグインなのでjQueryのロードを忘れずに。（現在のプラグインは1.7.0くらいでないと動かないみたいです）
前回説明したようにGoogle AJAX APIを利用します。
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.7.0"); </script> <script type="text/javascript" src="jquery.quicksearch.js"></script>
読み込みが終わったあとのinit関数を設定、実装します。
google.setOnLoadCallback(init);
// quicksearchの入力欄のトリガー、検索先のデータを設定します
function init() {
// 検索テキストボックスにはid=searchを振ってありました
$("input#search").quicksearch("ul#result li");
}
これで、下記のように動的に表示させることができるようになりました。
動作するソースはこちらです：https://dl.dropbox.com/u/2374674/googleappsuserforum/quicksearch.html
あとはくっつけるだけ
読み込み順などを変更したり、ガジェットの設定を書き換えたりはしますが、これらを結合することで、サイドバーで動作する、Spreadsheet検索ガジェットが作成できます。
このままでは見づらいので
li { font-size:80%;list-style-type:none;} .option { font-size:50%;} ul{padding:0px;}
のようにスタイル定義もしてあげるとよいでしょう。
以下に全ソースを載せます。
<?xml version="1.0" encoding="utf-8"?> <Module> <ModulePrefs title="Spreadsheetの検索" description="Spreadsheetからデータを検索します" author="ITO Tetsunosuke" author_email="tetsunosuke.ito@photocreate.co.jp" /> <Content type="html"> <![CDATA[ <style type="text/css"> li { font-size:80%;list-style-type:none;} .option { font-size:50%;} ul{padding:0px;} </style> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1"); google.load("jquery", "1.7.0"); </script> <script type="text/javascript" src="https://dl.dropbox.com/u/2374674/googleappsuserforum/jquery.quicksearch.js"></script> <script type="text/javascript"> // 読み込み完了したら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); list = "<li>" + line + "</li>"; // HTMLのid="result"にこの結果を追加していく $("#result").append(list); } // quicksearchを実行 $("#search").quicksearch("ul#result li"); } // 読み込み完了時に実行される 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> <!-- 検索ボックス--> <input type="text" id="search" /> <!-- 結果をここに表示する--> <ul id="result"/> ]]> </Content> </Module>
ソースのダウンロードはこちら： http://dl.dropbox.com/u/2374674/googleappsuserforum/myspreadsheetsearchgadget.xml
参考URL
jQuery quicksearch plug-in: https://github.com/riklomas/quicksearch
面白いガジェットができたらぜひ教えて下さい！
現在は、Gmail Contextual Gadget に取り組もうと思っています： https://developers.google.com/google-apps/gmail/contextual_gadgets
