寝太郎の江戸風呂。ね！

[PR]

2024/11/23 (Sat.)

Google Visualization の Query で並べ替えを指定する。

前回の記事「Google Spreadsheets のフォーム機能とGoogle Visualization API」は、Google Visualization を使って Google Spreadsheets のデータを表示していますが、その並び順が日付の古いものから順に並んでいます。掲示板は、通常、日付の新しいものから順に並べますので、これをどのように実現すればよいか考えてみましょう。

並べ替えについてはいくつかの方法が考えられます。
１．データを取得する際に並べ替えておく。
２．データを取得後に並べ替える。
３. 元のデータの並び順は変えないで、並べ替えた場合の行番号の配列を取得する。

今回は、１．の「データを取得する際に並べ替えておく。」方法について説明しましょう。

Google Visualization API を利用して、Google Spreadsheets のデータを取得するには、Google.visualization.Query クラスのメソッドを用います。
new 演算子を使って生成した Query のインスタンスついて setQuery メソッドを適用することにより、クエリを設定できます。このクエリで「order by」句を付加することで、指定したカラムによって並べ替えを行なえます。

（例）クエリ
var var query = new google.visualization.Query(DATA_SOURCE_URL);
query.setQuery('select * order by A desc');
query.send(handleResponse);

例文の「DATA_SOURCE_URL」には、データソースとする Google Spreadsheets の URL を入れます。
クエリの「select * 」は、すべてのカラムのデータを要求していることを示します。特定のカラムを選ぶ場合には、カラム名をカンマ区切りで記述します。
「order by 」に続く「A」はカラム名です。「Public Message Board」の第１カラムは「タイムスタンプ」というラベルになっていますが、カラム名は「A」

です。その次の「desc」は「降順」を示します。「desc」がない場合は、「昇順」とみなされます。
このようにクエリ文を組み立てて、setQueryメソッドを適用した後、send メソッドを実行すると、レスポンスが返ってきたときに handleResponse 関数が実

行されます。レスポンスにあるデータの処理は、このコールバック関数「handleResponse」で定義します。

（例）レスポンス処理
function handleResponse(response){
  var data = response.getDataTable();
  var table = new google.visualization.Table(TARGET_ELEMENT);
  table.draw(data);
}

返ってきたクエリレスポンスに対して、getDataTable()メソッドを適用して、dataTable オブジェクトを取得します。
次にデータをテーブルとして表示する位置を指定します。これは、visualization のコンストラクタを呼び出して、そのインスタンスを生成する形を取ります

。「TARGET_ELEMENT」には、テーブルを表示する位置のHTML要素を記述します（例 document.getElementById("example")）。
そして、Table インスタンスのdraw()メソッドを実行します。drawメソッドの引数には dataTable オブジェクトを指定します。これを実行すると、

「TARGET_ELEMENT」要素の内部にテーブルが展開されます。

上記のような流れで、「Public Message Board」のデータを日付の新しい順に並べ替えたものが、次のサンプルです。
■　サンプル「Public Message Board(gVss_2)」

今回のテーブルは、draw()メソッドを用いたテーブルですので、若干の機能が付加されています。
たとえば、カラム名をクリックすると、そのカラムで並べ替えや逆順の並べ替えを行なえたりします。

2010/09/27 (Mon.) Trackback() Comment(0) Google Visualization

Google Spreadsheets のフォーム機能とGoogle Visualization API

「Google Spreadsheets のフォーム機能を利用して　掲示板を作成する。」の記事では、Google Spreadsheets へのデータの入力とデータの出力の双方について、それぞれインラインフレームを使ってページを表示することで、簡易掲示板の機能を実現しました。ただし、データの出力については、Google Spreadsheets の公開ページをそのまま表示するだけなので、見栄えはよくありませんでした。そこで触れていたように、これを改善するために Google Visualization API を利用することでができるはずです。今回は、その部分の仕組みについて記事にします。

これを実現する仕組みは、データの入力がされたら、そのイベントを捉えて、Google Visualization API で Google Spreadsheets のデータを取得して親ページに表示するというものです。

まず、データの入力イベントをどう捉えるかが問題になります。これに対する案としては、入力フォームの submit ボタンが押されたタイミングを捉えるというのも考えられますが、これは早すぎるでしょう。ボタンが押されただけでは、サーバーにデータが送られていないはずです。同じようにフォームが submit されたタイミングを捉えるのも早すぎるでしょう。送信しただけでは、サーバーの処理が行われていません。送信したデータに対してサーバーの処理が完了するとレスポンスが返ってきます。そのレスポンスを捉えることが適切でしょう。

Google Spreadsheets のフォーム機能でデータを送信すると、「ありがとうございます。メッセージを登録しました。」などが記載されたページが返ってきます。このページが返ってきたことを捉えればよいでしょう。幸い前回の「iframe のロードイベントを捉える。」の記事では iframe のロードを捉えています。これを応用することが出きるはずです。

次に、Google Visualization API で Google Spreadsheets のデータを取得して親ページに表示する部分が問題となります。これについては、すでに「Google Spreadsheets のデータを Google Visualization API で表示する。その２」でそのやり方を知っています。これを応用すればよいでしょう。

上記の考え方に従って、作成したサンプルページが次のものです。
■　PublicMessageBoard2

このサンプルページは、掲示板としてはまだまだ改善すべきところはあります。上記の考え方を反映しただけのものと認識して下さい。

2010/09/25 (Sat.) Comment(0) Google Visualization

iframe のロードイベントを捉える。

前回の「iframe と親ページのロード、アンロードのタイミングを調べる。」では、あらかじめ親ページに iframe を埋め込んだもので、それぞれのロード、

アンロードのタイミングを調べました。そして、iframe ページ内のフォームが submit されたとき、いったん、iframe 　がアンロードとなり、その後、

iframe　のロード、アンロードを捉えることができないことを確かめました。

今回は親ページの読込み時に、iframe 要素を生成して親ページに追加した場合に、iframe のロードを捉えることができるかどうか確かめたいと思います。
実験用のページは、次のものです。

■　親ページの読込後に生成した iframe のロード、アンロードを捉える。

結果は、前回とは違って、iframe ページ内のフォームが submit されて、新しいインラインページがロードされた時に、そのロードイベントを捉えることが

できました。
この動きを利用すれば、新しいインラインページの読込み時に何らかのスクリプトを実行させることができます。次回は、これを用いて、簡易掲示板「Public

 Message Board」を改良してみましょう。

2010/09/24 (Fri.) Trackback() Comment(0) JavaScript

iframe と親ページのロード、アンロードのタイミングを調べる。

「Google Spreadsheets のフォーム機能を利用して掲示板を作成する。」の記事では、インラインフレームを用いて、Google Spreadsheets へデータを入力するフォームを表示しています。

このようにインラインフレームを使ったページが、最近多いようです。インラインフレームまわりの操作を JavaScript で制御しようとするならば、その動き方について知っておいたほうがよいでしょう。今回は、ロード(load)とアンロード(unload)のタイミングを確かめるページを作成したので紹介します。

結論としては、次のとおりです。
[1] ページを開くとき
1) ifrmae のウインドウが unload
2) ifrmae のウインドウが　load
3) 親ページのウインドウが load
[2] ページを閉じるとき
1) 親ページのウインドウが　unload
2) iframe のウインドウが　unload
[3] iframe 内の form を submit したとき
iframe のウインドウが　unload
レスポンスが返ってきても、iframe のウインドウは load とはならない。

上記のことは、「iframe と親ページのロード、アンロードのタイミングを調べる。」ページで確かめることができます。

2010/09/17 (Fri.) Trackback() Comment(0) JavaScript

Google Spreadsheets のデータを Google Visualization API で表示する。その２

前々回の記事「Google Spreadsheets のフォーム機能を利用して掲示板を作成する。」では、簡易掲示板の「Public Message Board」を作成しました。そこでは、インラインフレーム(iframe)を用いて、Google Spreadsheets の公開ページを表示する方法で掲示板データを表示しました。Google Spreadsheets のページが表示されるので、ツールバーなど余計なものが見えて、デザイン的にもすっきりしていません。

そこで、思い出したのが、Google Visualization API で Google Spreadsheets のデータを表示する方法です。これについては、以前の記事「Google Spreadsheets のデータを Google Visualization API で表示する。」で触れています。これを利用して、「Public Message Board」のデータを表示してみましょう。

■　サンプルページ
Public Message Board Data

[つづきはこちら]

2010/09/14 (Tue.) Trackback() Comment(0) Google Visualization