寝太郎の江戸風呂。ね！

[PR]

2024/04/20 (Sat.)

Googleドキュメントのスプレッドシートからグラフを作る。

前回の「GoogleドキュメントのスプレッドシートのデータをWEBページに表示する。」では、Google Spreadsheets のデータを Googele Visualization API を用いて、WEBページのテーブルを作成する方法を説明しました。そして、公開されている URL を指定することにより、テーブルにするサイト「Google Spreadsheet Visualization Table」を紹介しました。

今回は、Google Spreadsheets のデータを Googele Visualization API を用いて取得し、さらにグラフにするページを紹介します。

「Google Spreadsheet Chart」

公開されているスレッドシートの URL を入力すると、スプレッドシートのデータをグラフにするとともに、データをテーブル形式でページに表示します。






 

Googleドキュメントのスプレッドシートのデータを取得して、グラフにする方法

「Google Spreadsheet Chart」では、入力した URL のスプレッドシートのデータを表示しますが、以下の説明では簡略化して、固定した１つのシートのみを対象とします。また、グラフの種類も１種類とします。なお、Google Spreadsheets のデータを取得するまでは、前回の「Googleドキュメントのスプレッドシートのデータを取得して、WEBページに表示する方法」とほぼ同じです。

スプレッドシートの URL の確認

公開設定したスプレッドシートの URLは次のようなフォーマットになっています 。

https://spreadsheets.google.com/spreadsheet/ccc?key=スプレッドシートのID&hl=言語

jsapi.js のロード

データをテーブルとして表示するところで、Google Visualization API の table パッケージを利用します。そのパッケージをロードするためには、前提として Google Data API の Google AJAX API loader をサーバーから取り込んでおく必要があります。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

パッケージのロード

Google AJAX API loader を取り込んだら、JavaScript クライアントライブラリをロードします。テーブルの作成には、Googele Visualization モジュールの table パッケージが必要です。また、標準的なグラフを利用するには　corechart パッケージも必要です。

google.load("visualization", "1", {'packages':['table','corechart']});

モジュールのロード完了後の初期化処理

モジュールのロードが完了した際に行う処理を記述します。これは　　　　　　google.setOnLoadCallback メソッドでイベント登録します。下記の例では、init という変数を与えていますが、この部分に直接、匿名関数を当てることもできます。

init=function(){
//初期化処理
}
google.setOnLoadCallback(init);

初期化処理の内容

google.visualization.Query のインスタンスを生成します。データソースを Google スプレッドシートの公開URL とし、send メソッドを実行すれば、Google スプレッドシートのデータ取得後、コールバック関数が実行されます。次の例では、コールバック関数は handleResponse です。

init=function(){
    var sourceSheet=GoogleスプレッドシートのURL;
    var query = new google.visualization.Query(sourceSheet);
    query.send(handleResponse);
}

コールバック関数の内容

次の例では、Google スプレッドシートからのレスポンスを 仮引数 response で受けています。そして、id属性が'res'である要素にテーブルを、id属性が'res'である要素に縦棒グラフを表示します。

var handleResponse=function(response){
  var div  =document.getElementById('res');
  var chart=document.getElementById('chart');
  if(response.isError()) {
    div.innerHTML = response.getDetailedMessage();
    return;
  }
  var data = response.getDataTable();
  var divTable  = new google.visualization.Table(div);
  divTable.draw(data);
  var divChart =  new google.visualization.ColumnChart(chart);
  divChart.draw(data);
}

レスポンスにエラーがあった場合には、エラーメッセージを表示し、正常な場合には、テーブルとグラフを表示します。

レスポンスの getDataTable メソッドで、Google Visualization の基本であるデータテーブルの形に Google スプレッドシートのデータが格納されます。

テーブルを表示する要素を指定して、google.visualization.Table のインスタンスを生成します。この google.visualization.Table の draw メソッドでデータテーブルを指定すると、指定した要素の中にデータテーブルのデータがテーブル形式で表示されます。

グラフを表示する要素を指定して、google.visualization.ColumnChart のインスタンスを生成します。この google.visualization.ColumnChart の draw メソッドでデータテーブルを指定すると、指定した要素の中にデータテーブルのデータがグラフで表示されます。

グラフの種類

上記では、縦棒グラフ(ColumnChart)を採用しましたが、他の種類のグラフを利用することもできます。その場合、次の場所の記述を変更します。

var divChart =  new google.visualization.ColumnChart(chart);

グラフの種類の主なものは次のとおり

AreaChart　　　　 面グラフ
BarChart 　　　　 横棒グラフ
CandlestickChart　蝋燭グラフ
Gauge 　　　　　　ゲージ
GeoChart　　　　　地域図
LineChart　　　　 折れ線グラフ
PieChart　　　　　円グラフ
ScatterChart　　　散布図
TreeMap　　　　　 階層図　　　　　 

2011/07/04 (Mon.) Trackback() Comment(0) Google Spreadsheets

Googleドキュメントのスプレッドシートのデータを表示する。

公開設定されているGoogleドキュメントのスプレッドシートは、URL さえわかれば、誰でも閲覧することができます。また、Googele Visualization API を利用すれば、自分のページにデータを取り込むこともできます。

そこで、Google Spreadsheets の URL を指定して、データを表示するページを作成しました。

「Google Spreadsheet Visualization Table」

公開されているスレッドシートの URL を入力すると、スプレッドシートのデータがテーブル形式でページに表示されます。







 

Googleドキュメントのスプレッドシートのデータを取得して、WEBページに表示する方法

「Google Spreadsheet Visualization Table」では、入力した URL のスプレッドシートのデータを表示しますが、以下の説明では簡略化して、固定した１つのシートのみを対象とします。

スプレッドシートの URL の確認

公開設定したスプレッドシートの URLは次のようなフォーマットになっています 。

https://spreadsheets.google.com/spreadsheet/ccc?key=スプレッドシートのID&hl=言語

jsapi.js のロード

データをテーブルとして表示するところで、Google Visualization API の table パッケージを利用します。そのパッケージをロードするためには、前提として Google Data API の Google AJAX API loader をサーバーから取り込んでおく必要があります。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

パッケージのロード

Google AJAX API loader を取り込んだら、JavaScript クライアントライブラリをロードします。テーブルの作成には、Googele Visualization モジュールの table パッケージを利用するので、次のように記述します。

google.load("visualization", "1", {'packages':['table']});

モジュールのロード完了後の初期化処理

モジュールのロードが完了した際に行う処理を記述します。これは　　　　　　google.setOnLoadCallback メソッドでイベント登録します。下記の例では、init という変数を与えていますが、この部分に直接、匿名関数を当てることもできます。

init=function(){
//初期化処理
}
google.setOnLoadCallback(init);

初期化処理の内容

google.visualization.Query のインスタンスを生成します。データソースを Google スプレッドシートの公開URL とし、send メソッドを実行すれば、Google スプレッドシートのデータ取得後、コールバック関数が実行されます。次の例では、コールバック関数は handleResponse です。

init=function(){
    var sourceSheet=GoogleスプレッドシートのURL;
    var query = new google.visualization.Query(sourceSheet);
    query.send(handleResponse);
}

コールバック関数の内容

次の例では、Google スプレッドシートからのレスポンスを 仮引数 response で受けています。そして、id属性が'res'である要素に、処理結果を表示します。

var handleResponse=function(response){
  var div=document.getElementById('res');
  if(response.isError()) {
    div.innerHTML = response.getDetailedMessage();
    return;
  }
  var data = response.getDataTable();
  var divTable  = new google.visualization.Table(div);
  divTable.draw(data);
}

レスポンスにエラーがあった場合には、エラーメッセージを表示し、正常な場合には、テーブルを表示します。

レスポンスの getDataTable メソッドで、Google Visualization の基本であるデータテーブルの形に Google スプレッドシートのデータが格納されます。

テーブルを表示する要素を指定して、google.visualization.Table のインスタンスを生成します。この google.visualization.Table の draw メソッドでデータテーブルを指定すると、指定した要素の中にデータテーブルのデータがテーブル形式で表示されます。

結び

以上のようにすれば、Google スプレッドシートのデータを自分のホームページに表示できます。慣れてくれば、ページに TABLE,TR,TD といったタグを記述するよりも表作成が簡単だと感じるようになるでしょう。

2011/06/24 (Fri.) Trackback() Comment(0) Google Spreadsheets

Google Spreadsheets の入力フォームのページを作成する。

「Google Spreadsheets のフォーム機能を利用して　掲示板を作成する。」の記事では、Google Spreadsheets のフォーム機能で、Google Spreadsheets のデータを入力できるフォーム用のページを Google が作成してくれることを紹介しました。これは大変便利なことですが、１つだけ問題があります。それはスタイルが選べないことです。自動的に作成されるので、レイアウトの自由がありません。

特にインラインフレーム内に配置したときは、親ページとドメインが異なるので、そのスタイルを変更することは困難です（私はその方法を知りません）。フレームを用いない場合は、ブラウザのユーザースタイルシートを適用すればよいかもしれませんが、すべてのユーザーにそれを望むことはできません。

それでは、自由にレイアウトしたり、スタイルシートを適用することはできないのでしょうか。ここでフォーム(Form)の機能とは何かに思いを馳せましょう。フォーム(Form)は、データを送信するものです。送信(submit)したときに指定の方法(POSTなど)で指定の URL にデータを送信します。送信先のサーバーが、処理を行うものを特定のドメインや特定のファイルからの送信に限定したり、特別なデータがあるものに限定したりしていなければ、その送信が受理される可能性があります。もしかすると、自作のページから送信されたデータを Google のサーバーが受け取り、普通に処理してくれるかもしれません。

ここは１つ、試してみましょう。
そのためには、Google が Google Spreadsheets のフォーム機能で作成してくれたページのソースを分析する必要があります。まず注目しなけれなばならないのは、Form 要素の属性です。これで、送信先の URL と method が分かります。formkeyの値は各スプレッドシートのフォームごとに異なるはずです。
action="https://spreadsheets.google.com/formResponse?formkey=dFpTWGUxSW9lcVNEeEYyeE9aM3B3RGc6MQ&embedded=true&ifq"
method="POST"
次に送られるデータは何で、その id 属性や name 属性や値は何かということです。これは、textarea 要素や input 要素に注目します。

(name)          (id)    (value)
entry.1.single  entry_1
entry.2.single" entry_2
pageNumber               "0"
backupCache              ""

入力カラムが２つの場合には、この４つをデータとして送信すればよいようです。

以上のように考えて、入力フォームを作成してみたサンプルページが次のものです。
果たして、思惑通りにいったでしょうか?

■サンプルページ
Public Messsage Board 入力フォーム
 

2010/09/30 (Thu.) Comment(0) Google Spreadsheets

Google Spreadsheets のフォーム機能を利用して　掲示板を作成する。

Google Spreadsheets には、フォーム( Form )機能というものがあります。それは、データの入力用のページを作成するというものです。そして、そのデータの入力用のページを知っている人は、誰でもそのシートにデータを入力することができます。Google のアカウントを持っていなくても、またログインしていなくても入力できるというのが特徴です。

メールに埋め込んで、アンケートを集めるというような使い方が考えられています。

一方、Google Spreadsheets は、非公開、限定公開、一般公開というように閲覧権限を区分することできます。この閲覧制限とフォーム機能を組み合わせることによって、プライベート用、グループ用、パブリック用に分けて、データ登録場所を作ることができます。

今回は、公開シートを利用した公開掲示板「Public Message Board」を作成してみました。

■　リンク先
Public Message Board

これは、公開している　Google Spreadsheets の「Public Message Board」でフォーム「Public Message Board」を作成して、それぞれを1つのページ内に表示させるようにしたものです。簡易掲示板といった趣です。

これを応用して非公開のシートで同じようなものを作成すれば、自分だけが見るプライベートメッセージや コメントの受付などに活用できるでしょう。

今回は、iframe を用いた簡便な方法でメッセージを表示しましたが、Google Visualization API などを利用すれば、もっと見栄えのあるものになるでしょう。その辺りについては、勉強しながら、順次考えていきたいと思います。

2010/09/03 (Fri.) Trackback() Comment(0) Google Spreadsheets

Google Spreadsheets のリストの取得

もし、Google Spreadsheets にログイン中なら、スプレッドシートのリストを取得することは簡単なことだ。次の URL にアクセスすれば、フィードが返ってくる。

https://spreadsheets.google.com/feeds/spreadsheets/private/full

フィードのフォーマットは、次のようなもの。

<?xml version='1.0' encoding='UTF-8'?>
<feed xmlns='http://www.w3.org/2005/Atom'
 xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/'>
 <id>
　https://spreadsheets.google.com/
  feeds/spreadsheets/private/full
 </id>
 <updated>2010-07-21T09:40:04.854Z</updated>
 <category scheme='http://schemas.google.com/spreadsheets/2006'
  term='http://schemas.google.com/spreadsheets/2006#spreadsheet'/>
 <title type='text'>
  Available Spreadsheets - ユーザー名@gmail.com
 </title>
 <link rel='alternate' type='text/html'
  href='http://docs.google.com'/>
 <link rel='http://schemas.google.com/g/2005#feed'
  type='application/atom+xml'
  href='https://spreadsheets.google.com/
  feeds/spreadsheets/private/full'/>
 <link rel='self' type='application/atom+xml'
  href='https://spreadsheets.google.com/
  feeds/spreadsheets/private/full'/>
 <openSearch:totalResults>2</openSearch:totalResults>
 <openSearch:startIndex>1</openSearch:startIndex>
 <entry>
  <id>https://spreadsheets.google.com/
   feeds/spreadsheets/private/full/
   識別文字列</id>
  <updated>2010-07-18T04:44:03.118Z</updated>
  <category 
   scheme='http://schemas.google.com/spreadsheets/2006'
   term='http://schemas.google.com/spreadsheets/
   2006#spreadsheet'/>
  <title type='text'></title>
  <content type='text'>シート名</content>
  <link
   rel='http://schemas.google.com/spreadsheets/
   2006#worksheetsfeed'
   type='application/atom+xml' 
   href='https://spreadsheets.google.com/
   feeds/worksheets/識別文字列/private/full'/>
  <link rel='alternate' type='text/html'
   href='https://spreadsheets.google.com/ccc
   ?key=キー値'/>
  <link rel='self' type='application/atom+xml'
   href='https://spreadsheets.google.com/
   feeds/spreadsheets/private/full/識別文字列'/>
  <author>
   <name>ユーザー名</name>
   <email>ユーザー名@gmail.com</email>
  </author>
 </entry>
 <entry>>
  同上
 </entry>
</feed>

2010/07/21 (Wed.) Trackback() Comment(0) Google Spreadsheets