G Suiteのアドオンのほとんどは英語版のみで、日本語向けにリリースされているアドオンは殆ど見かけないのが残念なところ。アドオンの審査や申請が面倒であるのと、アドオンのような追加機能を作る、作り手も少ないという特性かもしれません。

今回は前回の活用するその②に引き続き、「なくても困らないけれど、あると助かる」そんな機能を装備してみたいと思います。その代表例として「指定時刻が来たらフォームの受付を自動停止する」機能があります。今回はこれをお手軽に装備できるようにしてみたいと思います。

今回使用するファイル類

事前準備

今回は、指定時刻に発火するトリガーを利用します。また、指定時刻を指定する為にダイアログを用意し、その上では日付と時刻をセットできるように、jQueryのDatePickerとTimePickerを装備します。事前準備として、以下の作業を行います。

  1. jQueryおよびjQuery UIのライブラリはGoogle CDNを利用する
  2. TimepickerアドオンをこのサイトよりClone or Downloadする
  3. 2.を解凍して、distにあるjquery-ui-timepicker-addon.jsおよびjquery-ui-timepicker-addon.cssをhttpsの使えるサーバにアップロードしておく(CloudFlareなどを利用しましょう)。
  4. さらにi18nの中にあるjquery-ui-timepicker-ja.jsも同様にアップロードしておく

この3つのファイルは今回の時刻をピックするパーツで利用するものになります。これらをHTML側コードのheadにて読み込みます。

ソースコード

GAS側コード

  • フォームを開くと、パズルアイコンが出てくるので、セットアップを実行し、formのidをスクリプトプロパティに格納しておく。
  • 時限設定を実行すると、設定用のダイアログが開かれます。そこで設定した内容は、setTriggerにて指定時刻で発火するように、トリガーがセットされます。その際に既存のトリガーを全削除するようにしてます。
  • また、既存の時限設定を解除する為のlimitbrake関数を用意してあります。トリガーの解除とフォームクローズの解除を行っています。
  • closeform関数にて、フォームの受付をクローズする処理が入っています。setAcceptingResponsesがFalseで閉じます。
  • FormAppでは、showでダイアログを表示できないので、ui.showModalDialogにてHTMLダイアログを生成します。

図:これを自動で行なうのが今回の目的

図:トリガーはこんな感じでセットされます。

HTML側コード

  • $(‘#datetimepicker’).datetimepickerにて、日付と時刻設定ピッカーをセットしています。
  • 取得した日付は一旦整形してから、GAS側のsetTrigger関数に渡しています。
  • getMonthは0〜11の値を返すようになってるため、必ず+1を加算しないといけません。
  • Google CDNには、jquery.ui.datepicker-ja.jsがあるので、これでDatePickerを日本語化しています。

図:日付と時刻をセットするダイアログを表示してます。

関連リンク

共有してみる: