【GAS】Googleフォームの日付項目がスマホからだと入力しづらいのでプルダウンにあらかじめ値を入れておく方法

Googleフォームをスマホから回答するときに、日付がめちゃくちゃ入力しづらくて困ったことはありませんか？

PCだと以下のようにカレンダーが表示されるので簡単に入力できるのですが、

スマホだとカレンダーが表示されず、おまけにキーボードが日本語入力になっているのでわざわざ数字にしてから入力するというなんとも煩わしい状態となっています。今回はGoogleフォームの日付入力を、スマホから楽に行えるようにするための方法をご紹介します。

「日付」の項目を選択形式にしてしまう

テキスト形式にして入力させたり、年・月・日それぞれ項目を分けて入力させたりと色々試してみましたが、結局スマホのキーボードに依存するのでどうしても日本語入力からの切り替えが必要となってしまいます。

そこで、「日付」の項目を選択形式にして入力の手間を省くようなフォームに変更します。

フォームを開いた時点で本日の日付がプルダウンに出ており、

他の日付を選択する場合はプルダウンを操作するようにしました。

これでスマホからの煩わしい日付入力を楽にすることができます。

実現方法

ここからは実現方法を解説します。手順通りに設定していけば動くかと思います。ソースコードを記載する部分もありますがコピー&ペーストでOKですので、試してみてください。

Googleフォーム側の設定

Googleフォームに「日付」選択用の質問を追加します。

質問の種類は「プルダウン」、タイトル部分を入力します。

Google Apps Scriptの設定

つづいて、Google Apps Script(GAS)の設定です。GASとは、Googleフォームやスプレッドシートなどグーグルのサービスに関連付けて設定することができるスクリプトです。

Googleフォームの右上メニュー（縦向きの3点マーク）から、「スクリプト エディタ」を選択します。

そうすると、別タブでApps Scriptという画面が開きます。

Google Apps Scriptでは、

• スクリプトの設定
• トリガーの設定

上記2箇所の設定を行います。どちらもコピペ&そのまま同じ設定で動きますので、是非参考にしてみてください。

スクリプトの設定

これを以下のコードに置き換えます。

▼コピー用

function createList() {
  
  // 対象となるフォームを取得
  const form = FormApp.getActiveForm();
  // フォームにある質問を取得
  const item = form.getItems();

  // 現在日付を取得
  var day = new Date();

  // 当月の末日を取得
  var endMonth = new Date(day.getFullYear(), day.getMonth() + 1, 0);

  // 配列に当月日付を順に追加
  let choices = [];
  for (let i = 0; i < endMonth.getDate(); i++) {
    let dayStr = Utilities.formatString("%04d/%02d/%02d", day.getFullYear(), day.getMonth() + 1, i +1);

    // 配列に選択肢を追加
    choices.push(dayStr);
  }

  // プルダウンに配列の内容をセット
  item[0].asListItem().setChoiceValues(choices);
}

このサンプルでは、1番目の質問に日付のプルダウンを追加していますが、それ以外の場所に追加している場合は「item[0].asListItem().setChoiceValues(choices);」の部分を変更してください。

  // プルダウンに配列の内容をセット
  item[0].asListItem().setChoiceValues(choices);

1番目ならitem[0]、2番目ならitem[1]、3番目ならitem[2]・・・といったかんじで、質問がある場所マイナス1の値をセットします。

トリガーの設定

次に、トリガーの設定です。スクリプトの設定では、プルダウンに表示させる日付を作成しました。しかし、次の日になったら次の日の日付を取得して、それをもとに表示させる日付を作成する必要があります。そこで、毎日プルダウンの日付が更新されるように設定します。

左側のメニューから「トリガー」を選択します。

右下の「トリガーを追加」を押下します。

設定内容を以下のようにします。

• 実行する関数：createList
• イベントのソースを選択：時間主導型
• 時間ベースのトリガーのタイプを選択：日付ベースのタイマー
• 時刻を選択：午後11〜午前0時

他はそのままでOKです。

これで、日跨ぎのタイミングでプルダウンに表示される日付を更新することができます。

動作確認

ここまで設定が完了したら、きちんと動くかどうか確認してみます。

左側のメニューからスクリプトを開き、「実行」を押下します。

初回実行時は、「承認が必要です」と表示される場合があります。その場合はダイアログに小さく出ている「詳細」を押下して、「GAS bot（安全ではないページ）に移動」を押下して実行してください。

実行ログに以下のように「実行開始」「実行完了」が出ていれば成功です。

本日から一か月分をプルダウンに設定する場合

本日から1ヶ月分(2023/07/24～2023/08/24)をプルダウンに設定する場合は、以下のようなソースコードになります。

function createList() {

  // 対象となるフォームを取得
  const form = FormApp.getActiveForm();
  // フォームにある質問を取得
  const item = form.getItems();

  // 現在日付を取得
  var day = new Date();

  // 当月の末日を取得
  var endMonth = new Date(day.getFullYear(), day.getMonth() + 1, 0);

  // 現在日付 +1ヶ月を取得
  var nextMonth = new Date(day.getFullYear(), day.getMonth() + 1, day.getDate());

  // 配列に当月日付を順に追加
  let choices = [];
  for (let i = day.getDate(); i <= endMonth.getDate(); i++) {
    let dayStr = Utilities.formatString("%04d/%02d/%02d", day.getFullYear(), day.getMonth() + 1, i);

    // 配列に選択肢を追加
    choices.push(dayStr);
  }

  // 配列に来月日付を順に追加
  for (let i = 0; i < nextMonth.getDate(); i++) {
    let dayStr = Utilities.formatString("%04d/%02d/%02d", nextMonth.getFullYear(), nextMonth.getMonth() + 1, i + 1);

    // 配列に選択肢を追加
    choices.push(dayStr);
  }

  // プルダウンに配列の内容をセット
  item[0].asListItem().setChoiceValues(choices);
}

当月日付、来月日付のプルダウンをそれぞれのforループ内で作成しています。同じ要領で再来月や先月のプルダウンも追加可能です。

スクリプトを実行した日付を起点として1ヶ月分のプルダウンが作成されますので、こちらは毎日トリガーを実行すると良いかと思います。

まとめ

最近では美容室やイベントの予約フォームとして利用されていたり、メルカリが利用者アンケートに利用したりとかなりいろんなところで使われるようになったGoogleフォームですが、いまいちスマホからの操作がめんどくさい部分があります。でもこれだけ利用者が増えてきたら操作性の改善もされるのではないかなーと期待しています。特に、日付入力や電話番号、メールアドレス、住所の自動入力などがあったら嬉しいなと思います。

今回の知識を応用して、スプレッドシートに購入品を転記する家計簿アプリ的なものが作れたらなと思っています。なにもないところからアプリを作るよりも、私のような初心者はベースがあるものをカスタマイズしていくほうが挫折せずにやっていけそうな気がしています。いい感じにできたらみなさんに共有できればと思っています♪