注目のセミナー

申込受付中！

危機に強い
プロマネ養成
実践ﾄﾚｰﾆﾝｸﾞ

火消しのプロが、 実践演習と個別の メンタリングを通じ、 強いPMを2ヵ月で育成!

ソフト開発

ITpro ＞ ソフト開発
ソフト開発

かんたん10分プログラミング

ITpro

第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●カーソルをテーブル上に移動すると行に背景色が付く
図2●カーソルをテーブル上に移動すると行に背景色が付く

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

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

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

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

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

>>コード内容をじっくり吟味してみる
次ページ以降はITpro会員(無料)の方のみお読みいただけます。
会員の方は、 ログインしてご覧ください。
まだ会員でない方は、ぜひ登録（無料）していただき、ITproの豊富なコンテンツをご覧ください。
Twitter Facebook

この記事に対するfacebookコメント

nikkeibpITpro

新しいコメント機能について
▲ ページトップ

読みましたか？ 〜 未読記事をご紹介

ソフト開発の最新記事>>一覧