寝太郎の江戸風呂。ね！

[PR]

2024/11/23 (Sat.)

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