|
日時: 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 側としては、
スパムの問題を回避する為に、このアドレスに個人のアドレスを使わないように と注意しています
この部分がそれに該当しますが、作ったきり一度も使っていないフリーメールを記述しています
上記定義は、Google Visualization API で書かれていますが、常に最新データを取得する設定です( スプレッドシート )
この記述はガジェットをカスタマイズする際のオプションパラメータですが、
required="true" は、必須である事を示しています。
|