Google Formでリクエスト送信時Formの表示を変更する

こんばんは。

前回に引き続きGoogle Formでやった案件のメモを残しておきます。

rupic.hatenablog.com 

実現したい事

• Google Formで時間帯予約フォームを作成

• 予約データをスプレッドシートと連携

• 各時間帯には上限があり残席数を知らせたい(予約できなくする等の制限は不要)

• 登録時にユーザーIDを入力してもらい予約のキャンセル/変更ができる

• スプレッドシートのデータを検索し現在の登録状況を検索/表示する事ができる

• ユーザーはスマホ、Webブラウザからのアクセスのみ(ガラケは無視でおｋ)

• 尚、ユーザーはGoogleアカウントでログインしない事とする（震

各時間帯毎の予約件数をフォームに表示する

 そもそもそんな事が出来るのか謎なままネットサーフィンしていたら、非常に分かりやすいブログを発見しました。

どうやらGoogleではGoogleが提供するGoogle Formやカレンダー、スプレッドシート等のサービス上で動作するスクリプトを使ってアプリの機能を拡張したり連携したり出来るらしいデス。便利ですねw

developers.google.com

スクリプトを書いていきましょう

Google Formデザイナー画面右上のメニューより「スクリプトエディター」を選択します。

こんな感じでJavaScriptで書きましょう。

今回は前回の記事でスプレッドシートに回答結果を同期させているので、スプレッドシートよりデータを取得する事にしました。(実はちょっとした事情があってw

フォームの説明の箇所に取得したデータを表示するには以下でOKみたい。

　var form = FormApp.getActiveForm();

　form.setDescription(joinStr);

本当はセクション毎に表示したかったのですが、どうやってもセクション毎の説明を取得する方法がわからなくて致し方なく全てTopに表示です。

function endFormCheck_Ontheway(){
  var description = [];
  var weeks = CreateWeeks(1);
  var target = CreateTarget(1);
      
  description.push('■■■■■■行き便の空席状況■■■■■■\n');
  description.push('\n')
  
  description.push.apply(description,CreateDescription(weeks,target));

  return description;
}

function endFormCheck_Onthewayback(){
  var description = [];
  var weeks = CreateWeeks(2);
  var target = CreateTarget(2);
    
  description.push('■■■■■■帰り便の空席状況■■■■■■\n');
  description.push('\n')
  
  description.push.apply(description,CreateDescription(weeks,target));

  return description;
}
function CreateTarget(mode){  
  if(mode === 1){
    return ["5時","6時"];
  }else{
    return ["17時","18時"];
  }
}

function CreateDescription(weeks,target){
  var LIMIT_COUNT = 50;
  
  var id = '***ここはスプレッドシートのシートIDを入力しましょう***';
  var sheetname = '回答';
  
  //シートの読み込み
  var spsheet = SpreadsheetApp.openById(id)
  var sheet = spsheet.getSheetByName(sheetname);

  var description = [];
  
  for(var i = 0; i < weeks.length; i++){
    const list = sheet.getDataRange().getValues();
   
    description.push("・" + weeks[i][1]+'の予約状況\n')
    for(var j = 0; j < target.length; j++){
      description.push(GetSeatCount(list,i,weeks,target[j],LIMIT_COUNT));
    }
    description.push('\n')
  }
  return description;
}

function GetSeatCount(dat,count,weeks,target,LIMIT_COUNT){
  const tmp = dat.filter(function(item){return item[weeks[count][0]] === target});
  var seat = LIMIT_COUNT-tmp.length;
  return '　　' + target + ' → 残り' + seat + '席です\n';
}

function CreateWeeks(mode){
  if(mode === 1){
    return [[2,"3月4日"],[3,"3月5日"],[4,"3月6日"]];
  }else{
    return [[5,"3月4日"],[6,"3月5日"],[7,"3月6日"]];
  }
}

function GetReserveToSetFormDescription(){
  var description = [];
  
  description.push('注意：人数オーバーの場合は各自責任にて交通手段を確保下さい。\n');
  description.push('\n')
  
  //行き便
  description.push.apply(description,endFormCheck_Ontheway());
  //帰り便
  description.push.apply(description,endFormCheck_Onthewayback());
  
  //配列を合体
  var joinStr = description.join("");
  //フォームに値をセット
  var form = FormApp.getActiveForm();
  form.setDescription(joinStr);  
}

トリガーの設定

スクリプトを書いたら、保存アイコンと再生アイコンの間にある時計っぽいアイコンをクリックしてスクリプトをどのタイミングで動作させるかの設定をします。

新規スクリプトをクリックすると以下の画面が出てきますので設定していきます。

1. 実行したい関数名を選択
2. イベントソースを選択
3. イベントの種類を選択
4. 必要があればエラー通知を設定

ちなみにイベントソースは○時間毎や○月○日に実行など、バッチ的な動作も可能みたいですね。

こんな感じで作成したトリガーの一覧が表示されます。

結果はこんな感じ。

まとめ

• GAS(Google Apps Script)でFormだけでは実現が難しい機能を追加出来る
• スクリプトはJavaScriptで書けるよ！
• 作成したスクリプトは実行タイミングの設定が可能

次回はいつになるか分かりませんが、残りのタスクもメモしていきます。

年度末と言うこともあり最近は無駄に忙しいwwww