ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
Google Visualization API と HTMLタイプの Google ガジェットで汎用リンクリストを作る
日時: 2009/03/23 16:32
名前: lightbox



リンクデータは Google DOC のスプレッドシートで作成します。


上記データをシート毎に WEB ページとして公開できるので、( 共有メニュー )
それを使ってリンクリストを作成します




↓以下は公開している実際のリンクです
http://spreadsheets.google.com/pub?key=p6PfePgDMJFCPr9vyjbWFFg&output=html&gid=0&single=true

ユーザは、このデータを自分でメンテナンスして、リンクリスト用のデータを作成してから、
ガジェットのパラメータとして、URL をセットします。

↓以下は、ガジェットの貼り付けコードを取得するページへのリンクです。
プレビューとコード取得

公開リンクを、プレビュー画面の 「データドキュメント*」に入力して変更をプレビューすると、
テストが可能です。Google ドキュメントはご自分の URL でも結構です。

( コード取得時には注意事項がありますので  こちら  を参照して下さい )


以下は、

1) Google Visualization API の テーブルでリンクリストを作成する
2) Google Visualization API の テーブルデータをGoogle DOCのスプレッドシートより取得する

という二つの内容を合体させた Google Visualization の処理をガジェットに組み込んだソースです。

拡張子:
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs
    title="リンクリスト" 
    author="lightbox"
    author_link="http://winofsql.jp"
    width="180"
    author_email="winofsql@nifmail.jp"
  >
    <Require feature="idi"/>
    <Require feature="locked-domain"/>
  </ModulePrefs>
  <UserPref name="src" display_name="データドキュメント" required="true" />
  <Content type="html">
    <![CDATA[
<!-- 開始 --------------------------------------->

<style type="text/css">
.google-visualization-table-table td {
	padding:2px!important;
	border-style: solid;
	border-color: #E0E0E0;
	border-width: 0px;
}

.google-visualization-table-table a:link,a:visited {
	color: #001db3;
	text-decoration: none;
}
.google-visualization-table-table a:active,a:hover {
	color: #ffffff;
	background-color:forestgreen;
	text-decoration: underline;
}


.google-visualization-table-th {
	display:none;
}
</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">

var prefs = new _IG_Prefs();
var src = prefs.getString("src");

var dataArray;
var arr;

function drawVisualization() {

	var query = new google.visualization.Query( src );

	query.setQuery("select A,B,C");
	query.send( responseGet );

}
function responseGet(response) {

	if ( response.isError() ) {
		alert(getDetailedMessage());
		return;
	}

	var data = new google.visualization.DataTable();

	var dataTbl = response.getDataTable();
	var rows = dataTbl.getNumberOfRows();
	dataArray = response.getReasons();
	arr = dataArray.toArray();


	data.addColumn('string', 'URLでソート');

	var ttl,href,target,link;
	for( i = 0; i < rows; i++ ) {
		data.addRows(1);
		ttl = dataTbl.getValue(i, 0);
		href = dataTbl.getValue(i, 1);
		target = dataTbl.getValue(i, 2);
		link = 
			"<A href='" +
			href +
			"' target='" +
			target +
			"'>" +
			ttl +
			"</" + "A>"

		data.setCell(i, 0, link );
	}


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


google.setOnLoadCallback(drawVisualization);
</script>

<div id="table_area"></div>

<!-- 終了 --------------------------------------->
    ]]>
  </Content>
</Module>
今回、ガジェットの登録は、一般ユーザインターフェイスでは無く、開発者用の Google ガジェットを送信 というページから行っています。 登録される時に、メールアドレスが無いと拒否されますが、Google 側としては、 スパムの問題を回避する為に、このアドレスに個人のアドレスを使わないように と注意しています
拡張子:
author_email="winofsql@nifmail.jp"
この部分がそれに該当しますが、作ったきり一度も使っていないフリーメールを記述しています
拡張子:
    <Require feature="idi"/>
    <Require feature="locked-domain"/>
上記定義は、Google Visualization API で書かれていますが、常に最新データを取得する設定です( スプレッドシート )
拡張子:
<UserPref name="src" display_name="データドキュメント" required="true" />
この記述はガジェットをカスタマイズする際のオプションパラメータですが、 required="true" は、必須である事を示しています。
メンテナンス


日時: 2009/03/23 16:32
名前: lightbox