フォームとウェブアプリケーション (7/7)

では、このフォームを送信したときの処理を作成しましょう。フォームからの送信には、「doPost」というイベントハンドラが用意されています。この関数を用意しておくことで、送信時の処理を行わせることができます。これは以下のような形をしています。

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.setText('you typed: ' + str);

続いて、Labelにテキストを設定しています。フォームに配置されたコンポーネントは、UiInstanceの「getElementById」メソッドで取り出すことができます。こうして取得したオブジェクトの「setText」を呼び出し、表示テキストを変更すればいいのです。

ただし！　勘違いしてはいけないのは、「この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;
}