SQLの窓 イラストAC フリー素材

2009年03月15日

GoogleVisualizationAPIのテーブルでリンクリストを作成する

正直 Google の API はいつも調べるのに苦労します。
特にこれは、「そんなはずはない」と、メインのドキュメントに無い実装したい方法
を探し当てるのに、えらい時間かかりました。基本1日では無理です > Google

とにかく、見たほうが早いので結果をまず表示します。

↓タイトルをクリックするとソートされます(ソートはHTML内容でソートされています:href)


ソースコードや解説は長くなるので続きを読んで下さい。

続きを読む
続きを読む





Google のローダで利用できる Google Visualization API ですが、
結果としてとても使いやすいものなのですが、説明無いから使え無い・・・
たいていは諦めて、YUI のほうへ行くと思います。間違い無く。

YUI は YUI で見た目が綺麗ですし、説明も豊富ですし目的にあった実装を
じっくり考えれるのでそれははれで良いのですが、この Google の Table
は凄い簡単なんです。

1) 列定義
2) 行追加
3) カラム追加
4) 適用

と、プログラマですと「これはいい」となるはずです。

このサンプルの元データとしては、アンカーデータでウインドウを開く の続きとして作ってますので、
既存データを利用もできます。Ajax で読み込んだサーバ側のデータは、どういうフォーマットかに
よりますが、プログラマにとったら自動的に適用されるメソッドはちょっと対応しづらいので、
簡単な実装ならこれでいいです。絶対楽です。

大昔からVC++でテーブルウインドウを使っていろいろなアプリ作って来ましたが、
この Google Visualization API の考え方は、それと全く合致します。
まさにプログラマ向けです。

JavaScript ベースですが、HTA で使うのも便利に違い無いので
近いうちにアプリを作成する予定です。




<style type="text/css">
.google-visualization-table-table td {
	padding:7px!important;
	border-style: solid;
	border-color: #A0A0A0;
	border-width: 1px;
}
</style>
<script
	type="text/javascript"
	src="http://www.google.com/jsapi"
	charset="utf-8"
></script>
<script type="text/javascript">
google.load("prototype", "1.6.0.3");
google.load('visualization', '1', { packages: ['table'] });
</script>

<script type="text/javascript">

function drawVisualization() {

	// テーブル用データ作成
	var data = new google.visualization.DataTable();

	data.addColumn('string', 'リンクタイトル');
	data.addColumn('string', '説明');

	// prototype を使って セレクタでオブジェクト配列取得
	var list = $$("#targetLink A");
	var description = $$("#targetLink PRE");
	for( i = 0; i < list.length; i++ ) {
		data.addRows(1);
		data.setCell(i, 0,
			"<A href='" +
			list[i].href +
			"' target='" +
			list[i].target +
			"'>" +
			list[i].innerHTML +
			"</" + "A>"
		);
		data.setCell(i, 1,
			"<PRE>" +
			description[i].innerHTML +
			"</PRE>"
		);
	}

	// テーブル作成
	visualization = 
		new google.visualization.Table(
			document.getElementById('table_area')
		);
	visualization.draw(data,
		{
		// オプションの指定( 詳細は2番目のリンク )
			allowHtml: true,
			showRowNumber: true
		}
	);

}


google.setOnLoadCallback(drawVisualization);
</script>

タイトルをクリックするとソートされます
<div id="table_area"></div>

<!-- この DIV 内の リンクは表示されません -->
<div id="targetLink" style='display:none'>
<A
 href="http://code.google.com/apis/visualization/documentation/reference.html"
 target="_blank">Google Visualization API Reference</A><br> 
<pre>
この API の 総合説明
</pre>

<A
	href="http://code.google.com/apis/visualization/documentation/gallery/table.html"
	target="_blank">Visualization: Table</A><br>
<pre>
この API の TABLE の説明
( draw メソッドのオプションはここ )
</pre>

<A
 href="http://code.google.com/apis/visualization/documentation/gallery.html"
 target="_blank">Google Visualization API Gallery</A><br> 
<pre>
<img src="http://lightbox.cocolog-nifty.com/photos/app5/vi_ex.png" />
</pre>

</div>

今回、必要なかったので使っていませんが、選択用の処理のイベントとメソッドが
用意されています。ですから、複数選択可なテーブルになっています。

WEB ではそれより「リンク」が重要なのでそちらの実装に重点を置いています。
Visualization: Table にある Configuration Options が最も重要で、
その中でも allowHtml がデフォルトで false になっているのを true にする
事によって、内部に自由にコンテンツはめ込めます。

このサンプルでは画像を入れましたが、入力フィールドや Flash もありのはずです。
それと、フィールドにデータ型を指定できますが、ちょっとうさんくさいので使わないほうが
良いです
。少なくとも Boolean 型はバグってますし。

テーブルのスタイルについては、ドキュメントに記述無かったので直接アプリで
innerHTML 内を見て使っています。ですから、仕様変更の可能性はありますが、
まず変わらないでしょう。見たい人は、Firebug 使って見るのがてっとりばやいです。

ここではそれを利用してスタイルを適用していますが、場合によって important でないと、
効果が無い可能性もあるので注意して下さい。




 
【Googleの最新記事】
posted by at 2009-03-15 16:56 | Google | このブログの読者になる | 更新情報をチェックする


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX