【Google app script】HtmlService.SandboxMode.IFRAMEに対応したい

Question

###前提・実現したいこと
http://ascii.jp/elem/000/000/894/894480/
上記URLのサンプルコードをベースにして、
予約システムを作成していました。

ところが、6月末を持って停止する機能があることから、
「HtmlService.SandboxMode.NATIVE」⇒「HtmlService.SandboxMode.IFRAME」に変更しました。
しかし、単純にコードを変更しただけだと、
正常に動作しないようです。
コードのリファレンスを眺めて試してはいるものの
解決できないため、投稿させていただきました。
よろしくお願いします。

###発生している問題・エラーメッセージ

「予約」ボタンを押すと、予約しましたのメッセージが映るのですが、
今は、押してもなにも起きない状況です。
エラーコードも特にありません。

###該当のソースコード

function doGet(e){
  var output = HtmlService.createTemplateFromFile('test');
  return output.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME) //←問題と思われる部分
}

function checkData(frm){
var tenpo = frm['tenpo'];
var myoji = frm['myoji'];
var tel1 = frm['tel1'];
var tel2 = frm['tel2'];
var tel3 = frm['tel3'];
var seki = frm['seki'];
var mailaddress = frm['mailaddress'];
var namae = frm['namae'];
var kazu = frm['kazu'];
var jikan = frm['jikan'];
var yoyakucourse = frm['yoyakucourse'];
var bikou = frm['bikou'];
var addtantou = frm['addtantou'];
var date1 = new Date(frm['date']);


Logger.log(date1);
var cal = CalendarApp.getCalendarById('[e-mail]');
var result = '';
var evts = cal.getEventsForDay(date1);


if (evts.length > 100){
var frmdaystr = date1.getYear() + '-' +  date1.getMonth() + '-' + date1.getDate();
var evtday = evts[evts.length - 1].getAllDayStartDate();
var evtdaystr = evtday.getYear() + '-' +  evtday.getMonth() + '-' + evtday.getDate();
Logger.log(evts.length);
Logger.log(frmdaystr);
Logger.log(evtdaystr);

if (frmdaystr == evtdaystr){
result ='申し訳ありません。その日は既に予約済みです。';
} else {

cal.createAllDayEvent(myoji + ' ' + namae + '様 / ' + kazu , date1,
{description:'▼' + myoji + ' ' + namae + '様 ' + kazu + ' ▼連絡先：' + tel1 + '-' + tel2 + '-' + tel3 + ' / ' + mailaddress + ' / ' + jikan + ' / ' + yoyakucourse + ' / ' + seki +' / ' + bikou + ' / ▼入力者：' + addtantou , guests:mailaddress});
result = date1.getYear() + "年" + (date1.getMonth() + 1) + 
"月" + date1.getDate() + '日に予約しました。';

}
} else {

cal.createAllDayEvent(myoji + ' ' + namae + '様 / ' + kazu , date1,
{description:'▼' + myoji + ' ' + namae + '様 ' + kazu + ' ▼連絡先：' + tel1 + '-' + tel2 + '-' + tel3 + ' / ' + mailaddress + ' / ' + jikan + ' / ' + yoyakucourse + ' / ' + seki +' / ' + bikou + ' / ▼入力者：' + addtantou , guests:mailaddress});
result = date1.getYear() + "年" + (date1.getMonth() + 1) + 
"月" + date1.getDate() + '日に予約しました。';

}

return result;
};

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)

Answer 1

hiro54さんへ

はじめまして。
デベロッパーツール等のコンソールも確認されましたでしょうか？
HtmlServiceの場合、動作がおかしい時にはコンソールも確認したほうが良いです。
Syntax Errorを吐き出したりしています。

押してもなにも起きない、ということはgoogle.script.run実行時にfalseになっているかもしれません。
withFailureHandler()を実装して確認したほうが良いと思います。

Comments

[hiro54]

コンソールを確認してみました。
ReferenceError: e is not defined
onclick()
とエラーが出ていました。

ありがとうございます！
解決に向け、また動いてみたいと思います。

[退会済みユーザー]

もう１点だけ捕捉しておきますね。

スクリプトエディタのメニューより、表示 > 実行トランスクリプト　を選択して頂ければ、実行ログが表示されます。
ログの中身を確認すれば、実行が無事終了した扱いになっているのか、途中でストップしたのかがわかります。

ストップした場合はどこでストップしたのかがわかりますのでその辺りを重点的に確認してみてください。

[退会済みユーザー]

テンプレートとしている test.html ですが、DOCTYPEから記述されていますか？
IFRAMEモードでは必須です。

押してもなにも起きない、ということでしたのでHTMLは表示されている状態であるという認識でスルーしていましたが、念のための確認です。

Answer 2

既に2年経過しており、質問者の方も解決されているかもしれませんが、
他に、このスクリプトを使われていて、うまく動いていない方を発見しましたので、
こちらの回答にはなっていないと思いますが、一点、気付いた事を記させて頂きます。

まず、このURLにあるものを解説と全く同じ手順で制作してみましたが、
解説者さんのサンプルは動いているのにも係わらず、私の場合、送信ボタンが反応しませんでした。
何度も同じ手順で制作してみましたが、やはり、送信ボタンは全く反応しません。

そこで、「コード.gs」と「index.html」の中から、
index.htmlの中に書いてある「doAction(event)」という部分に着目しました。
文中、冒頭と文末に近い位置で出現します。
冒頭では、doAction(event)と書かれてあります。しかし、文末のonClickの中では、doAction(e)と書かれてあります。
これを、doAction(event)に統一してみたところ、動くようになりました。

あとは、必須項目チェック機能を追加すれば、いいものが出来そうな気がします。
現段階では、全ての項目が未入力でも、カレンダー登録出来てしまいます。

Answer 3

関係ないかもしれませんが、下記部分に ; が無いのが気になります。

  return output.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME) //←問題と思われる部分
```また、'test' のHTMLにGASを含まないようにして表示できるか試してみてはいかがでしょうか。

Comments

[hiro54]

最後を閉じてみました。
ありがとうございます！