2024
04
19
2010
09
25
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
このサンプルページは、掲示板としてはまだまだ改善すべきところはあります。上記の考え方を反映しただけのものと認識して下さい。
PR
2010/09/25 (Sat.) Comment(0) Google Visualization
Comments
