フォームとウェブアプリケーション (7/7)
作成:2011-06-29 08:13
更新:2011-11-04 16:15
更新:2011-11-04 16:15
■フォーム送信の処理とdoPost
では、このフォームを送信したときの処理を作成しましょう。フォームからの送信には、「doPost」というイベントハンドラが用意されています。この関数を用意しておくことで、送信時の処理を行わせることができます。これは以下のような形をしています。
下のリスト欄に、doGet/doPostのサンプルを挙げておきます。例によって、★マークの文には、それぞれのスプレッドシートのIDを記述してください。――これらを記述し、ページを公開したら、スクリプトエディタの<実行>メニューからdoGetを実行して「承認が必要です」のアラートで「承認」ボタンを押して許可をします。これで完成ですね。
今回のサンプルでは、ページにアクセスし、テキストを書いて送信すると、ラベルに「you typed:○○」というように入力されたテキストが表示されます。同時に、スプレッドシートにも送信されたテキストが保管されていきます。
実際にやってみるとわかりますが、このサンプルでは、日本語を書いて送信するとスクリプトエラーになってしまうようです。どうやら、日本語はまだ対応していないようですね。とりあえず半角英数字で動作確認をしてみてください。
また、フォームを送信すると、フォームの部分が消えることがわかります。これは、二重送信を防ぐためわざとそうなっているのか、あるいはそうでないのか、よくわかりません。ただ、「現時点では、フォームを送信するとフォームが消える」というのは頭に入れておきましょう。リロードすればちゃんとフォームは復活します。
ここでは、doGetでは単純にMyGuiをロードして表示する処理だけを用意してあります。そしてdoPostでは、送られた内容をとり出し、スプレッドシートとLabelに設定しています。doPostの処理を見てみましょう。まず、UiInstanceを取得します。
ただし! 勘違いしてはいけないのは、「このgetElementByIdで取得されるのは、HTMLのDOMオブジェクトではない」ということでしょう。このdoPostの処理は、実際にクライアントに表示されているコンポーネントを操作するわけではなく、あくまでサーバー内で実行されています。従って、このgetElementByIdで得られるオブジェクトも、通常のDOMオブジェクトではなく、Google Apps Scriptに用意された独自のオブジェクトである、ということを忘れないで下さい。
――とりあえず、これでGui ビルダーを使って作成した画面をWeb上に公開し、フォーム送信する、といった「サービスの基本的な使い方」はできるようになりました。この他、前回やったように、コンポーネントのonchangeやonclickイベントを使って処理を行わせることもできます。この場合は、フォーム送信ではなくAjaxを使ってサーバとやり取りする形になります。
しかし、これでもまだ「どうもすっきりしないやり方だな」と思うかも知れませんね。――大丈夫! 次回、「なるほど、つまりこれが正式なやり方なんだな!」というGUI利用の扱い方をようやく説明できる予定です。あと少しの我慢ですよ!
function doPost(e){送信されたフォームなどの情報は、すべて引数のeオブジェクト内にまとめられています。ここから必要な情報を取得して処理していけば良いのです。――では、簡単なサンプルスクリプトを作成してみましょう。
……送信時の処理……
}
下のリスト欄に、doGet/doPostのサンプルを挙げておきます。例によって、★マークの文には、それぞれのスプレッドシートのIDを記述してください。――これらを記述し、ページを公開したら、スクリプトエディタの<実行>メニューからdoGetを実行して「承認が必要です」のアラートで「承認」ボタンを押して許可をします。これで完成ですね。
今回のサンプルでは、ページにアクセスし、テキストを書いて送信すると、ラベルに「you typed:○○」というように入力されたテキストが表示されます。同時に、スプレッドシートにも送信されたテキストが保管されていきます。
実際にやってみるとわかりますが、このサンプルでは、日本語を書いて送信するとスクリプトエラーになってしまうようです。どうやら、日本語はまだ対応していないようですね。とりあえず半角英数字で動作確認をしてみてください。
また、フォームを送信すると、フォームの部分が消えることがわかります。これは、二重送信を防ぐためわざとそうなっているのか、あるいはそうでないのか、よくわかりません。ただ、「現時点では、フォームを送信するとフォームが消える」というのは頭に入れておきましょう。リロードすればちゃんとフォームは復活します。
ここでは、doGetでは単純にMyGuiをロードして表示する処理だけを用意してあります。そしてdoPostでは、送られた内容をとり出し、スプレッドシートとLabelに設定しています。doPostの処理を見てみましょう。まず、UiInstanceを取得します。
var app = UiApp.getActiveApplication();createApplicationではなく、「getActiveApplication」というメソッドを使っています。これは、現在アクティブなアプリケーションのオブジェクトを取得するものです。doPostは、既にアプリケーションが実行されている状態で送られ呼び出されますので、新たに作り直すのではなく、このように「既に使われているもの」を取得します。
var str = e.parameter.strBox1;続いて、送信されたテキストをとり出します。フォームの送信内容は、引数の「parameter」というプロパティ内にまとめられています。ここでは「strBox1」という値をとり出しています。このようにparameter内には、フォームに配置したコンポーネントの名前でそれぞれの値が保管されています。
var label = app.getElementById("aMsgLabel");続いて、Labelにテキストを設定しています。フォームに配置されたコンポーネントは、UiInstanceの「getElementById」メソッドで取り出すことができます。こうして取得したオブジェクトの「setText」を呼び出し、表示テキストを変更すればいいのです。
label.setText('you typed: ' + str);
ただし! 勘違いしてはいけないのは、「このgetElementByIdで取得されるのは、HTMLのDOMオブジェクトではない」ということでしょう。このdoPostの処理は、実際にクライアントに表示されているコンポーネントを操作するわけではなく、あくまでサーバー内で実行されています。従って、このgetElementByIdで得られるオブジェクトも、通常のDOMオブジェクトではなく、Google Apps Scriptに用意された独自のオブジェクトである、ということを忘れないで下さい。
――とりあえず、これでGui ビルダーを使って作成した画面をWeb上に公開し、フォーム送信する、といった「サービスの基本的な使い方」はできるようになりました。この他、前回やったように、コンポーネントのonchangeやonclickイベントを使って処理を行わせることもできます。この場合は、フォーム送信ではなくAjaxを使ってサーバとやり取りする形になります。
しかし、これでもまだ「どうもすっきりしないやり方だな」と思うかも知れませんね。――大丈夫! 次回、「なるほど、つまりこれが正式なやり方なんだな!」というGUI利用の扱い方をようやく説明できる予定です。あと少しの我慢ですよ!
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
function doGet(e){ var app = UiApp.createApplication().setTitle("Sample Page"); app.add(app.loadComponent("MyGui")); return app; } function doPost(e){ var app = UiApp.getActiveApplication(); var str = e.parameter.strBox1; var label = app.getElementById("aMsgLabel"); label.setText('you typed: ' + str); var count = ScriptProperties.getProperty("sample_service_count") * 1; count++; ScriptProperties.setProperty("sample_service_count",count); var sheets = SpreadsheetApp.openById("0Agf1……"); //★ var sheet = sheets.getSheetByName("service_data"); sheet.getRange(count,1).setValue(str); return app; }
※関連コンテンツ
「初心者のためのGoogle Apps Scriptプログラミング入門」に戻る