ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文

  メンテナンス 前画面に戻る

対象スレッド 件名: Google Visualization API と HTMLタイプの Google ガジェットで汎用リンクリストを作る
名前: lightbox
処理選択
パスワード

件名 Google Visualization API と HTMLタイプの Google ガジェットで汎用リンクリストを作る
名前 lightbox
コメント
リンクデータは http://docs.google.com/?hl=ja&tab=wo(Google DOC) のスプレッドシートで作成します。
http://lightbox.cocolog-nifty.com/photos/app5/ggdoc.png

上記データをシート毎に WEB ページとして公開できるので、( 共有メニュー )
それを使ってリンクリストを作成します
http://lightbox.cocolog-nifty.com/photos/app5/ggdoc_2.png



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

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

↓以下は、ガジェットの貼り付けコードを取得するページへのリンクです。
http://www.gmodules.com/ig/creator?synd=open&url=http%3A%2F%2Fwinofsql.jp%2Fgadget%2Flink_list.xml?new&lang=ja(プレビューとコード取得)

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

[[( コード取得時には注意事項がありますので http://lightbox.matrix.jp/ginpro/patio.cgi?mode=view2&f=289&no=4&type=ref&opt=text-align:left;margin-left:5px;&xml=y( こちら ) を参照して下さい )]]


以下は、

1) http://maglog.jp/lightbox/Article530065.html(Google Visualization API の テーブルでリンクリストを作成する)
2) http://maglog.jp/lightbox/Article530260.html(Google Visualization API の テーブルデータをGoogle DOCのスプレッドシートより取得する)

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

@DIV
<?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>
@END


今回、ガジェットの登録は、一般ユーザインターフェイスでは無く、開発者用の
http://www.google.com/ig/submit?hl=ja(Google ガジェットを送信) というページから行っています。

登録される時に、メールアドレスが無いと拒否されますが、Google 側としては、
スパムの問題を回避する為に、[[このアドレスに個人のアドレスを使わないように]] と注意しています

@DIV
author_email="winofsql@nifmail.jp"
@END

この部分がそれに該当しますが、作ったきり一度も使っていないフリーメールを記述しています


@DIV
    <Require feature="idi"/>
    <Require feature="locked-domain"/>
@END

上記定義は、http://code.google.com/intl/ja/apis/visualization/documentation/spreadsheets.html(Google Visualization API) で書かれていますが、常に最新データを取得する設定です( スプレッドシート )


@DIV
<UserPref name="src" display_name="データドキュメント" required="true" />
@END

この記述はガジェットをカスタマイズする際のオプションパラメータですが、
required="true" は、必須である事を示しています。