Google Spreadsheetsのデータをフィルター付きHTMLで表示する

Google Spreadsheetsのデータを公開するときのHTMLは、機能が不足していると思っていました。

大きな表の場合、ソートとフィルターができなければ、目的のデータの参照と比較がしづらいものです。

ソートに限れば、Yahoo!UIは、可能ですが、フィルターがありません。そこで、Javascriptでフィルターできる物がないかと探していたのですが、「Google Spreadsheets Data API Overview」の「Google Spreadsheets Autofilter」に、フィルター機能のサンプルが掲載されていましたので、使ってみました。

以下に、SPECint_rate_base2006のデータを使ったフィルター付きの表を挿入します*1。

サンプルソースのdefaultKeyを修正するだけで、Google Spreadsheetsにあるデータを、フィルター付きの表にしてくれます。

defaultKeyは、Feedのkeyに該当します。それは、以下の手順で参照可能です。

Google Spreadsheetsで、公開タブをクリックし、RSSアイコンの登録をクリックすると、フィードの画面が出ます。そのURLは、以下の様な構成になっています。

http://spreadsheets.google.com/feeds/list/?/od6/public/basic

このURLのlistの次の"?"の部分が、keyになりますので、それをdefaultKeyに設定します。

これで、HTMLで、フィルター付きの表が参照可能になります。できれば、ソート機能も一緒にあるともっと使い勝手がいいのですが。

後は、条件付き書式でセルに色をつけられるともっといいのですが、Javascirptでがしがし書かないとできないですね。

それでも、Google Spreadsheetsは、外部からデータを取得できるため、Javascriptで加工できるところがいいですね。

*1：挿入しているスクリプトは、幅450pxにいれるために、手を入れています。Custom Filter機能を削除したり、フォントのサイズを変更したりしています。ソースは、「Google Spreadsheetsのデータを元に、HTMLにフィルター機能をつける」にあります。また、まったく変更せずに、SPECのデータを一覧できる表も作成しています。SPECint_rate_base2006とSPECfp_rate_base2006です。特に、最近発表されたOpteron 8350/2350も掲載してありますので、比較してみてください。