コメント |
リンクデータは 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" は、必須である事を示しています。
|