2019年5月12日 / 最終更新日時 : 2023年5月22日 officeの杜 Google

新しいGoogle Formに時限設定を施す【GAS】

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

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

1 今回使用するファイル類
2 事前準備
3 ソースコード
4 関連リンク

今回使用するファイル類

今回使用するフォームファイル

事前準備

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

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

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

ソースコード

GAS側コード

function onOpen() {
    var ui = FormApp.getUi();
    ui.createMenu('▶セッティング')
    .addItem('セットアップ', 'getMyFormId')
    .addItem('時限設定', 'limitdialog')
    .addItem('制限解除', 'limitbreak')
    .addToUi();
}

//自分自身のIDを取得するコード
function getMyFormId(){
  var form = FormApp.getActiveForm();
  var ui = FormApp.getUi();
  var myid = form.getId();
 
  var Properties = PropertiesService.getScriptProperties();
  Properties.setProperty("myformid", myid);
  
  ui.alert("セットアップ完了")
  return myid;
}

//フォームを閉じる関数
function closeform(){
  //フォームのIDを取得する
  var Properties = PropertiesService.getScriptProperties();
  var myformid = Properties.getProperty("myformid");
  
  //フォームをクローズする
  var myForm = FormApp.openById(myformid);
  myForm.setAcceptingResponses(false);
}

//トリガーに時限設定を追加する
function limitdialog(){
  //formを取得する
  var form = FormApp.getActiveForm();
  var ui = FormApp.getUi();
  
  //HTMLダイアログを表示する
  var html = HtmlService.createHtmlOutputFromFile('index').setTitle('フォームを閉じる日付').setWidth(500).setHeight(600);
  ui.showModalDialog(html, "時限設定をする");
}

//制限解除するコード
function limitbreak(){
  //トリガーを全削除
  var allTriggers = ScriptApp.getProjectTriggers();
  for(var i=0; i < allTriggers.length; i++) {
      ScriptApp.deleteTrigger(allTriggers[i]);
  }
  
  //フォームのIDを取得する
  var Properties = PropertiesService.getScriptProperties();
  var myformid = Properties.getProperty("myformid");
  var ui = FormApp.getUi();
  
  //フォームをオープンする
  var myForm = FormApp.openById(myformid);
  myForm.setAcceptingResponses(true);
  
  //メッセージ表示
  ui.alert("制限を解除しました");
}

//日時トリガーを設定する
function setTrigger(dateman,timeman){
  //トリガーを全削除
  var allTriggers = ScriptApp.getProjectTriggers();
  for(var i=0; i < allTriggers.length; i++) {
      ScriptApp.deleteTrigger(allTriggers[i]);
  }

  //特定日時を作成する(時間はhh:mmで引数を受け取る）
  var trigger1 = new Date(Utilities.formatDate(new Date(dateman) , 'JST' , getDate(dateman,timeman)));

  //指定の日付と時刻でトリガーをセットする
  var onChangeTrigger = ScriptApp.newTrigger("closeform")
      .timeBased()
      .at(trigger1)
      .create();

  //メッセージを表示
  var ui = FormApp.getUi();
  ui.alert("クローズする日付を設定しました。");
}

//日付を整形して返す関数
function getDate(dateman,clockman){
  var date = new Date(dateman);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var date = date.getDate();
  
  if (month < 10) {
    month = "0" + month;
  }
  if (date < 10) {
    date = "0" + date;
  }
  
  var strDate = year + "/" + month + "/" +date + " " + clockman;
  return strDate;
}

100

101

102

103

104

function onOpen() {

var ui = FormApp.getUi();

ui.createMenu('▶セッティング')

.addItem('セットアップ', 'getMyFormId')

.addItem('時限設定', 'limitdialog')

.addItem('制限解除', 'limitbreak')

.addToUi();

}

//自分自身のIDを取得するコード

function getMyFormId(){

var form = FormApp.getActiveForm();

var ui = FormApp.getUi();

var myid = form.getId();

var Properties = PropertiesService.getScriptProperties();

Properties.setProperty("myformid", myid);

ui.alert("セットアップ完了")

return myid;

}

//フォームを閉じる関数

function closeform(){

//フォームのIDを取得する

var Properties = PropertiesService.getScriptProperties();

var myformid = Properties.getProperty("myformid");

//フォームをクローズする

var myForm = FormApp.openById(myformid);

myForm.setAcceptingResponses(false);

}

//トリガーに時限設定を追加する

function limitdialog(){

//formを取得する

var form = FormApp.getActiveForm();

var ui = FormApp.getUi();

//HTMLダイアログを表示する

var html = HtmlService.createHtmlOutputFromFile('index').setTitle('フォームを閉じる日付').setWidth(500).setHeight(600);

ui.showModalDialog(html, "時限設定をする");

}

//制限解除するコード

function limitbreak(){

//トリガーを全削除

var allTriggers = ScriptApp.getProjectTriggers();

for(var i=0; i < allTriggers.length; i++) {

ScriptApp.deleteTrigger(allTriggers[i]);

}

//フォームのIDを取得する

var Properties = PropertiesService.getScriptProperties();

var myformid = Properties.getProperty("myformid");

var ui = FormApp.getUi();

//フォームをオープンする

var myForm = FormApp.openById(myformid);

myForm.setAcceptingResponses(true);

//メッセージ表示

ui.alert("制限を解除しました");

}

//日時トリガーを設定する

function setTrigger(dateman,timeman){

//トリガーを全削除

var allTriggers = ScriptApp.getProjectTriggers();

for(var i=0; i < allTriggers.length; i++) {

ScriptApp.deleteTrigger(allTriggers[i]);

}

//特定日時を作成する(時間はhh:mmで引数を受け取る）

var trigger1 = new Date(Utilities.formatDate(new Date(dateman) , 'JST' , getDate(dateman,timeman)));

//指定の日付と時刻でトリガーをセットする

var onChangeTrigger = ScriptApp.newTrigger("closeform")

.timeBased()

.at(trigger1)

.create();

//メッセージを表示

var ui = FormApp.getUi();

ui.alert("クローズする日付を設定しました。");

}

//日付を整形して返す関数

function getDate(dateman,clockman){

var date = new Date(dateman);

var year = date.getFullYear();

var month = date.getMonth() + 1;

var date = date.getDate();

if (month < 10) {

month = "0" + month;

}

if (date < 10) {

date = "0" + date;

}

var strDate = year + "/" + month + "/" +date + " " + clockman;

return strDate;

}

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

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

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

HTML側コード

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="https://officeforest.org/wp/library/timepicker/jquery-ui-timepicker-addon.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/i18n/jquery.ui.datepicker-ja.js"></script>
  <script src="https://officeforest.org/wp/library/timepicker/jquery-ui-timepicker-addon.js"></script>
  <script src="https://officeforest.org/wp/library/timepicker/jquery-ui-timepicker-ja.js"></script>
  
  <script>
    //ピッカーを設定する
    $( function(){
      $('#datetimepicker').datetimepicker({
        //timeFormat: "HH:mm z",
        hourGrid: 4,
        minuteGrid: 10,
      });
    });
    
    //ボタンにイベントを割り当て
    $(function() {
      $( "input[type=submit], a, button" )
        .button()
        .click(function() {
          settime();
        });
    });
    
    function settime(){
      //日時データを取得する
      var element = document.getElementById("datetimepicker").value;
      var dateman = new Date(element);
      
      //日付だけを取り出す
      var month = dateman.getMonth() + Number(1);
      var date = dateman.getFullYear() + "/" + month + "/" + dateman.getDate();
      
      //時刻だけ取り出す
      var time = dateman.getHours() + ":" + dateman.getMinutes();
      
      //GAS側へ処理を渡す
      google.script.run.setTrigger(date,time);
      
    }
    
  </script>
</head>
  <body>
    <p>日付時刻の選択: <input type="text" name="date" id="datetimepicker"></p>
    <button style="font-size: 14px;vertical-align: middle" title='時限設定をする'>時限セット</button>
  </body>
</html>

<!doctype html>

<html>

<head>

//ピッカーを設定する

$( function(){

$('#datetimepicker').datetimepicker({

//timeFormat: "HH:mm z",

hourGrid: 4,

minuteGrid: 10,

});

//ボタンにイベントを割り当て

$(function() {

$( "input[type=submit], a, button" )

.button()

.click(function() {

settime();

});

function settime(){

//日時データを取得する

var element = document.getElementById("datetimepicker").value;

var dateman = new Date(element);

//日付だけを取り出す

var month = dateman.getMonth() + Number(1);

var date = dateman.getFullYear() + "/" + month + "/" + dateman.getDate();

//時刻だけ取り出す

var time = dateman.getHours() + ":" + dateman.getMinutes();

//GAS側へ処理を渡す

google.script.run.setTrigger(date,time);

}

</script>

</head>

<body>

<p>日付時刻の選択: <input type="text" name="date" id="datetimepicker"></p>

<button style="font-size: 14px;vertical-align: middle" title='時限設定をする'>時限セット</button>

</body>

</html>

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

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

カスタムな受付終了メッセージ

デフォルトのままだと、現在受け付け終了していますメッセージは非常に簡素です。これを少しカスタマイズすることが可能です。その際に使うメソッドが「getCustomClosedFormMessage()」。引数にテキストを入れることによって、カスタムなクローズメッセージが表示可能です。

フォームの回答自体はもともと手動で「回答タブ」⇒「回答を受付中」のスイッチをオフにすることで閉め切れます。そこで回答締め切りメッセージ入力欄が出てくるので、入れておけばよいのですが、動的にこれを行う為のメソッドが今回のメソッド。

テキストしか利用出来ないので、HTMLなどは利用不可です。

//マニュアルでフォームをクローズする
function manualclose(){
  //フォームのIDを取得する
  var Properties = PropertiesService.getScriptProperties();
  var myformid = Properties.getProperty("myformid");

  //フォームをクローズする
  var myForm = FormApp.openById(myformid);
  myForm.setAcceptingResponses(false);
  
  //クローズメッセージを表示；
  try{
    myForm.getCustomClosedFormMessage("終了しちゃったよ");
    FormApp.getUi().alert("フォームを閉じました");
  }catch(e){
    //すでにクローズ済みなので何もしない
    FormApp.getUi().alert("フォームはすでに閉じられています");
  }

}

//マニュアルでフォームをクローズする

function manualclose(){

//フォームのIDを取得する

var Properties = PropertiesService.getScriptProperties();

var myformid = Properties.getProperty("myformid");

//フォームをクローズする

var myForm = FormApp.openById(myformid);

myForm.setAcceptingResponses(false);

//クローズメッセージを表示；

try{

myForm.getCustomClosedFormMessage("終了しちゃったよ");

FormApp.getUi().alert("フォームを閉じました");

}catch(e){

//すでにクローズ済みなので何もしない

FormApp.getUi().alert("フォームはすでに閉じられています");

}

フォームがすでに閉じられているとこのメソッドはエラーを出してしまうので、エラートラップして、エラー時には何もしないようにメソッドを組んで上げる必要があります。

新しいGoogle Formに時限設定を施す【GAS】

今回使用するファイル類

事前準備

ソースコード

GAS側コード

HTML側コード

カスタムな受付終了メッセージ

関連リンク

コメントを残すコメントをキャンセル

AirServerとスマフォでPCにミラーリング

Electronでタスクトレイ常駐のアプリを作る

今回使用するファイル類

事前準備

ソースコード

GAS側コード

HTML側コード

カスタムな受付終了メッセージ

関連リンク

コメントを残す コメントをキャンセル

AirServerとスマフォでPCにミラーリング

Electronでタスクトレイ常駐のアプリを作る

コメントを残すコメントをキャンセル