第9回　Webページにきれいで多機能なテーブルを表示させる

園田誠

2009.10.26

今回のレシピ
プラットフォーム：Webブラウザ
使用言語：JavaScript（Google Visualization API）

　前回に続いてGoogle Visualization APIを使ったプログラムです。Visualization APIは，通常のHTMLだけでは作成が困難なビジュアルを簡単に作成できるJavaScriptライブラリです。今回はきれいで高機能なテーブルの作り方を解説します。

　Visualization APIの公式ドキュメントは執筆時点では英文のものしか公開されていません。ただし英文そのものは難しくないので，ある程度のスキルを持ったプログラマであれば十分に読破できると思います。

　早速基本形になるテーブルを作ってみることにしましょう。比較のために通常のHTMLで作成した同等のテーブルも併せて実装しておきます（リスト1）。作成したHTMLはローカルPC上でも動作します。デスクトップなどに保存してダブルクリックするとWebブラウザに表示されます。ただしgoogle.comから必要なモジュールを読み込む関係で，インターネットに接続している必要があります。

リスト1●Google Visualization APIでテーブルを作成するサンプル。比較のために通常のHTMLで同等のテーブルを作成した

<html><head>
<!--APIコアの読み込み-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>

<!--実際のテーブル内容記述部-->
<script type='text/javascript'>
    //テーブル・パッケージの読み込み
    google.load('visualization', '1', {packages:['table']});

    //コールバック関数
    google.setOnLoadCallback(drawTable);

    //テーブル内容となるfunction
    function drawTable() {
    var data = new google.visualization.DataTable();

        data.addColumn('string', '企業名');
        data.addColumn('number', '寄付金額');

        data.addRows(4);    //行数

        //以下2行がテーブル上での1行分データ
        data.setCell(0, 0, '加藤産業');
        data.setCell(0, 1, 100000, '100,000円');
        
        //同上，2行ずつでテーブル1行分のデータ
        data.setCell(1, 0, '田中興産');
        data.setCell(1, 1, 84000, '84,000円');
        data.setCell(2, 0, '鈴木商店');
        data.setCell(2, 1, 10000, '10,000円');
        data.setCell(3, 0, '山本屋');
        data.setCell(3, 1, 5000, '5,000円');

    //table_divというidを持つ<div>に対してテーブルを描画
     var table = new google.visualization.Table(document.getElementById('table_div'));
     table.draw(data, {showRowNumber: true});

    }
</script>
</head>

<body>
<p>平成22年度 ○○自治会ふるさと祭 寄付金額</p>
<hr />
<p>Google Visualization APIによるテーブル</p>
<!--下の行のdiv部分にテーブルが表示されます-->
<div id='table_div'></div>

<hr />
<p>通常のHTMLによるテーブル</p>
<table border="1">
<thead>
<tr>
<th>企業名</th>
<th>寄付金額</th>
</tr>
</thead>
<tbody>
<tr>
<td>加藤産業</td>
<td>100,000円</td>
</tr>
<tr>
<td>田中興産</td>
<td>84,000円</td>
</tr>
<tr>
<td>鈴木商店</td>
<td>10,000円</td>
</tr>
<tr>
<td>山本屋</td>
<td>5,000円</td>
</tr>
</tbody>
</table>
</body>
</html>

　ある町内会で祭礼に寄付してくれた企業名と金額を記録した表というイメージです（図1）。上部がGoogle Visualization APIを使ったテーブルで，下の方がHTMLで作成したテーブルになっています。HTMLそのものが簡略書式であったり，HTML側は境界線の表示にborder=という古いHTMLプロパティを使っていますが，ここは不問としてください。

図1●サンプルの実行画面。上がVisualization APIで作成したテーブル

[画像のクリックで拡大表示]

　まず第一印象としてVisualization APIの方がデザインとしてスッキリと洗練されているイメージです。もちろんここは単純比較は難しくて，HTML側にはCSSという装飾手段が残っていますから，何の装飾もしていないHTMLテーブルが野暮ったく見えるのは仕方ありません。時間をかければ外見は同等のものにできます。

　ポイントはVisualization APIでは特にデザインについての指定をコード内で行っていないのに（コード内容は後ほど吟味します），初期状態でこのデザインになるということです。つまりHTMLでテーブルを生成して，もう一手間二手間かけてデザインを洗練するというステップが省略できます。

図2●カーソルをテーブル上に移動すると行に背景色が付く

図3●金額でソートしたところ。再度クリックすると昇順降順が逆になる

　もう一点の違いです。Visualization APIで作成したテーブルはマウス・カーソルを持って行くと，カーソル位置の行に薄い灰色の背景色が付きます。行をクリックすると，その行は薄水色の背景色が付き，またCtrl+左クリックで任意複数行の選択，Shift+左クリックで連続した行の選択が可能です（図2）。こうしたマウスの動きに連動した背景色の変更や選択は生のHTMLだけでは実装できません。

　テーブルの一番上，「企業名」あるいは「寄付金額」というところをクリックするとデータがソートされます（図3）。

　こうしたギミックはHTMLテーブルでは望むべくもない機能です。このサンプルでは実装していませんが，テーブル上でデータをクリックしたというイベントを使ってプログラムを組むこともできます。

　テーブルの外観が洗練されているかどうかは実際にはどうでもいいことで，テーブルというHTML上でデータを並べたインタフェースを使って，プログラムが組めるというところがポイントなんですね。