<ねこフォーム7>ねこあつめフォームに「プルダウンリスト」を追加する

この記事では、GAS(Google Apps script)でねこあつめフォームに「プルダウンリスト」を追加します。
また、ラジオボタンや、チェックボックスも、スプレッドシートからデータを取得してフォームに表示出来るように致します。

お世話になっているサイトは、いつも隣にITのお仕事さんの

GASでGoogleフォームにプルダウンリストの質問を追加する方法

Googleフォームの質問の選択肢をスプレッドシートのデータから生成するGAS関数の作り方

です。

まずは、前回のおさらいをします。
チェックボックスを追加するのに、下記のコードを追加しました。

//←チェックボックスを追加する
  form.addCheckboxItem()
    .setTitle('種類は何系?(チェックボックス)')
    .setChoiceValues(['みけ','とら']) 
    .showOtherOption(true)//その他のチェックボックスを作っている
    .setRequired(true); 

実行して、プレビュー画面です。

前回のコードのまとめです。

function myFunction() {

  //SpreadsheetAppから現在のスプレッドシートにアクセス
  const ss=SpreadsheetApp.getActiveSpreadsheet();

  //シート名「イベント概要」のデータを配列として取得する
  const values=ss.getSheetByName('イベント概要').getDataRange().getValues();
  const formTitle=values[0][1];//タイトル
  const formDescription=values[1][1];//概要
  
  //フォームを作成
  const form=FormApp.create(formTitle);

  //ここでプロパティストアに格納したFOLDER_IDを使って、指定のフォルダにフォームを作成する
  const id=PropertiesService.getScriptProperties().getProperty('FOLDER_ID');//idにFOLDER_IDを格納する
  const formFile=DriveApp.getFileById(form.getId());//作成したフォームのIDをformFileに格納する
  DriveApp.getFolderById(id).addFile(formFile);//指定のフォルダにフォームを格納する
  DriveApp.getRootFolder().removeFile(formFile);//マイドライブに作成されたフォームを削除する

  //フォームの説明を作成
  form.setDescription(formDescription);

  //テキストアイテムを追加する
  form.addTextItem().setTitle('おなまえ').setRequired(true);//trueにすることで、入力必須にしている。
  form.addTextItem().setTitle('あそんだグッズ');

  //メールアドレスのテキストアイテムを加える
  const validationEmail=FormApp.createTextValidation().requireTextIsEmail().build();
  form.addTextItem().setTitle('めあど').setRequired(true).setValidation(validationEmail);

  //ラジオボタンを加える
  form.addMultipleChoiceItem()
    .setTitle('種類は何系?(ラジオボタン)')
    .setChoiceValues(['みけ','とら'])
    .setRequired(true);

  //←チェックボックスを追加する
  form.addCheckboxItem()
    .setTitle('種類は何系?(チェックボックス)')
    .setChoiceValues(['みけ','とら']) 
    .showOtherOption(true)//その他のチェックボックスを作っている
    .setRequired(true); 

}

今回の内容に入る前に、ねこあつめ画像に癒されます。
紙袋に入った、「赤毛ねこのアンちゃんのお尻」が可愛すぎて反則なぐらいです(=^x^=)

さて、今回はスプレッドシートからデータを取得して、フォームのアイテムに反映させて、リストアイテムも新たに作ります。

スプレッドシートは、この2枚を用意します。

フォームを作成するのに使う「イベント概要」は、今まで通りこのように配置しています。

また、フォームに追加するアイテムは、シート「項目データ」にこのように配置しています。

猫ちゃん達の出身地は47都道府県なので、それを全部コードにベタ打ちするのは大変です。なので、スプレッドシートから取得するように致します。
この都道府県リストは総務省統計局さんの「2-2 都道府県別人口と人口増減率」のExcelからコピーして頂きました。

今回作成するねこあつめフォームの、「なまえ」、「1番お気に入りのグッズ」、「めあど」はプログラムからテキストアイテムを作って、上記のスプレッドシートからは、

・A列(ラジオボタン)・・・ねこ種類「みけ、とら、その他」を選択
・B列(チェックボックス)・・・他にあそんだことのあるグッズ「まるこたつ、ゆたんぽ・・・」などのグッズをチェックします。
・C列(リストアイテム)・・・ねこちゃん達の出身地を「北海道・・・沖縄」まで、プルダウンリストで選択します。

また、スプレッドシートのデータを二次元配列として取得する為、下記のコードを加えます。最初の行はタイトルなので、shift()を使って取り除いています。

//シート「項目データ」から、フォームに追加するアイテムの内容を二次元配列として取得する
  const dataValues=ss.getSheetByName('項目データ').getDataRange().getValues();
  dataValues.shift();

この二次元配列dataValuesと列数を渡すことで、その列のデータを一次元配列として取得する関数を作成しました

/**
   * シート「項目データ」の値を二次元配列として取得して、指定の列を抜き出し一次元配列を構成する
   * 
   * @param{Object[][]}シート「項目データ」を二次元配列として取得したデータ
   * @param{number} 配列の列数(0以上のインデックス)
   * @return{Object[]} 指定の列の見出しタイトル行を除くデータによる一次元配列
   * 
   */
  function generateArray(values,column){
    return values.map(record=>record[column]).filter(value=>value);
  }

関数の呼び出しは、A列の「ねこ種類」の場合は、

generateArray(dataValues,0)

と記述し、引数に二次元配列のデータと列数を指定することで「ねこ種類」が呼び出せます。

B列の「他にあそんだことのあるグッズ」の呼び出しは、

generateArray(dataValues,1)

で、

C列の「全国のねこちゃんたちの都道府県」は

generateArray(dataValues,2)

と記述して、関数を呼び出して二次元配列から一次元配列にします。

このgenerateArray関数は、「map」を使うことで、スプレッドシートのデータが二次元配列の状態で格納されているのを一次元配列にして、フォームで選択出来る形に変換しています。

また、filterを使うことで、列に含まれる空のデータを取り除くことが出来ます。
例えばA列でしたら、「みけ、とら、その他」の後は空白です。
そこでfilterを使って、データがある「みけ、とら」のみを取得してフォームで使うことが出来る様になります。

以上をまとめたコードはこちらです。

function myFunction() {

  //SpreadsheetAppから現在のスプレッドシートにアクセス
  const ss=SpreadsheetApp.getActiveSpreadsheet();

  //シート名「イベント概要」のデータを配列として取得する
  const values=ss.getSheetByName('イベント概要').getDataRange().getValues();
  const formTitle=values[0][1];//タイトル
  const formDescription=values[1][1];//概要
  
  //フォームを作成
  const form=FormApp.create(formTitle);


  //ここでプロパティストアに格納したFOLDER_IDを使って、指定のフォルダにフォームを作成する
  const id=PropertiesService.getScriptProperties().getProperty('FOLDER_ID');//idにFOLDER_IDを格納する
  const formFile=DriveApp.getFileById(form.getId());//作成したフォームのIDをformFileに格納する
  DriveApp.getFolderById(id).addFile(formFile);//指定のフォルダにフォームを格納する
  DriveApp.getRootFolder().removeFile(formFile);//マイドライブに作成されたフォームを削除する


  //フォームの説明を作成
  form.setDescription(formDescription);

  //テキストアイテムを追加する
  form.addTextItem().setTitle('おなまえ').setRequired(true);//trueにすることで、入力必須にしている。
  form.addTextItem().setTitle('1番お気に入りのグッズ');


  //メールアドレスのテキストアイテムを加える
  const validationEmail=FormApp.createTextValidation().requireTextIsEmail().build();
  form.addTextItem().setTitle('めあど').setRequired(true).setValidation(validationEmail);


  //←シート「項目データ」から、フォームに追加するアイテムの内容を二次元配列として取得する
  const dataValues=ss.getSheetByName('項目データ').getDataRange().getValues();
  dataValues.shift();

  /**
   * シート「項目データ」の値を二次元配列として取得して、指定の列を抜き出し一次元配列を構成する
   * 
   * @param{Object[][]}シート「項目データ」を二次元配列として取得したデータ
   * @param{number} 配列の列数(0以上のインデックス)
   * @return{Object[]} 指定の列の見出しタイトル行を除くデータによる一次元配列
   * 
   */
  function generateArray(values,column){
    return values.map(record=>record[column]).filter(value=>value);
  }
  
  
  //ラジオボタンを加える
  form.addMultipleChoiceItem()
    .setTitle('ねこ種類')
    .setChoiceValues(generateArray(dataValues,0))
    .setRequired(true);

  //チェックボックスを追加する
  form.addCheckboxItem()
    .setTitle('他にあそんだグッズ')
    .setChoiceValues(generateArray(dataValues,1)) 
    .showOtherOption(true)//その他のチェックボックスを作っている
    .setRequired(true); 

  //←リストアイテムを追加する
  form.addListItem()
    .setTitle('ねこちゃんの都道府県')
    .setChoiceValues(generateArray(dataValues,2)) 
    .setRequired(true); 

}

このコードを実行した結果です。

シート「イベント概要」からは、フォームのタイトルと説明を取得しました。

シート「項目データ」からは、これらのアイテムを取得しました。

■参考文献の紹介■
初めてGASを学ぶ方向け。
スプレッドシートの基本的な使い方からGASのベースとなるJavaScriptの基礎文法、GASでの初歩的なプログラミングを学べます。

GASに少し慣れて来たら、基礎固めとリファレンスとしてこの本を通してじっくり学べます。

サイトマップはこちらから

GASサンプル集に戻る
メインメニューに戻る
これからプログラミングを始める方へ
基本情報技術者へ
自己紹介

←前に戻るにゃん        次行くにゃん

投稿者: nekosiestr

プログラミング学習中のロスジェネ(就職氷河期世代)の発達障害者です。 宜しくお願いします。 趣味で写真を撮っています。 プログラミングは、GAS/HTML/CSS/JavaScript/jQuery/PHP、 発達障害は、自閉症スペクトラムASD/ADHD、その他双極性障害やHSP(5人に1人の繊細さん)などの生きづらさを抱えておりますが、それでも楽しく生きて行きたいです!! 写真は、以前はコンパクトデジカメ、現在は、OLYMPUSミラーレス一眼を使っています。