忍者ブログ

2018
07
24

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2018/07/24 (Tue.)

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 で表示する。その2」でそのやり方を知っています。これを応用すればよいでしょう。

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

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

PR

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

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

06 2018/07 08
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア