未分類

GASでフォームの選択肢を動的に更新！MultipleChoiceItem.setChoiceValuesでWebアプリ開発を効率化

GASでフォームの選択肢を動的に更新！MultipleChoiceItem.setChoiceValuesでWebアプリ開発を効率化

Webアプリケーション開発において、フォームの作成は頻繁に行われるタスクです。特に、ユーザーの選択肢に応じて動的にフォームの内容を変化させる機能は、より柔軟で使いやすいアプリケーションを作る上で重要です。本記事では、Google Apps Script（GAS）のMultipleChoiceItem.setChoiceValuesメソッドに焦点を当て、Webアプリ開発、特にフォーム作成、API連携、ダッシュボードなどでの利用シチュエーションにおける具体的な活用方法を解説します。

MultipleChoiceItem.setChoiceValuesとは？

MultipleChoiceItem.setChoiceValuesは、Googleフォームの複数選択式（ラジオボタンまたはドロップダウン）の項目の選択肢を動的に設定するためのGASのメソッドです。このメソッドを使用することで、スプレッドシートのデータやAPIから取得した情報に基づいて、フォームの選択肢をリアルタイムに更新することができます。

基本的な使い方

まず、フォームオブジェクトを取得し、複数選択式の項目（MultipleChoiceItem）を取得します。次に、setChoiceValuesメソッドに選択肢の配列を渡すことで、選択肢が更新されます。

function updateChoices() {
  // フォームを開く
  const form = FormApp.openById("YOUR_FORM_ID");
  
  // 複数選択式の項目を取得（項目IDは適宜変更）
  const item = form.getItemById(123456789).asMultipleChoiceItem();
  
  // 選択肢の配列
  const choices = ["選択肢1", "選択肢2", "選択肢3"];
  
  // 選択肢を更新
  item.setChoiceValues(choices);
}

利用シチュエーション別の実装方法

ここでは、MultipleChoiceItem.setChoiceValuesメソッドをWebアプリ開発の様々なシチュエーションで活用する方法を解説します。

1. スプレッドシート連携：都道府県選択フォーム

スプレッドシートに都道府県名がリストされている場合、そのデータを読み込んでフォームの選択肢として表示することができます。これにより、都道府県リストの変更に柔軟に対応できます。

function updatePrefectures() {
  // スプレッドシートを開く
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName("都道府県リスト");
  
  // 都道府県名の範囲を取得
  const range = sheet.getDataRange();
  const values = range.getValues();
  
  // 1列目のデータを選択肢の配列に変換
  const prefectures = values.map(row => row[0]);
  
  // フォームを開く
  const form = FormApp.openById("YOUR_FORM_ID");
  
  // 複数選択式の項目を取得
  const item = form.getItemById(123456789).asMultipleChoiceItem();
  
  // 選択肢を更新
  item.setChoiceValues(prefectures);
}

2. API連携：外部データに基づいた選択肢の動的生成

APIから取得したデータに基づいてフォームの選択肢を生成することも可能です。例えば、特定のカテゴリーの製品リストをAPIから取得し、その製品名をフォームの選択肢として表示するといった活用が考えられます。

function updateProducts() {
  // APIから製品リストを取得（APIのURLは適宜変更）
  const response = UrlFetchApp.fetch("https://api.example.com/products");
  const data = JSON.parse(response.getContentText());
  
  // 製品名の配列を作成
  const productNames = data.map(product => product.name);
  
  // フォームを開く
  const form = FormApp.openById("YOUR_FORM_ID");
  
  // 複数選択式の項目を取得
  const item = form.getItemById(123456789).asMultipleChoiceItem();
  
  // 選択肢を更新
  item.setChoiceValues(productNames);
}

3. ダッシュボード：リアルタイムデータ反映

ダッシュボード上で、ユーザーの操作やデータの変更に応じてフォームの選択肢を動的に更新することで、よりインタラクティブなダッシュボードを作成できます。例えば、あるグラフのデータ範囲を選択すると、その範囲に対応した選択肢がフォームに表示されるようにするといった使い方が考えられます。

function updateDashboardChoices(choices) {
  // フォームを開く
  const form = FormApp.openById("YOUR_FORM_ID");
  
  // 複数選択式の項目を取得
  const item = form.getItemById(123456789).asMultipleChoiceItem();
  
  // 選択肢を更新
  item.setChoiceValues(choices);
}

// ダッシュボード側の操作に応じて、choices配列を生成し、この関数を呼び出す

実用的なコード例

例1：フォーム送信時に選択肢を更新

フォームが送信された際に、回答に基づいて選択肢を更新する例です。例えば、アンケートフォームで「その他」が選択された場合、具体的な内容を記述するためのテキストフィールドを表示するといった処理が考えられます。

function onFormSubmit(e) {
  // 回答を取得
  const responses = e.response.getItemResponses();
  
  // 複数選択式の項目の回答を取得（項目IDは適宜変更）
  const itemResponse = responses.find(response => response.getItem().getId() === 123456789);
  
  // 「その他」が選択された場合
  if (itemResponse.getResponse() === "その他") {
    // テキストフィールドを表示する処理（実装は省略）
    Logger.log("「その他」が選択されました");
  }
}

例2：時間帯によって選択肢を変化させる

時間帯によって表示する選択肢を変化させる例です。例えば、予約フォームで、午前と午後で選択できる時間帯を変化させるといった使い方が考えられます。

function updateChoicesByTime() {
  // 現在時刻を取得
  const now = new Date();
  const hour = now.getHours();
  
  // 時間帯によって選択肢を変化させる
  let choices = [];
  if (hour < 12) {
    choices = ["9:00", "10:00", "11:00"];
  } else {
    choices = ["13:00", "14:00", "15:00"];
  }
  
  // フォームを開く
  const form = FormApp.openById("YOUR_FORM_ID");
  
  // 複数選択式の項目を取得
  const item = form.getItemById(123456789).asMultipleChoiceItem();
  
  // 選択肢を更新
  item.setChoiceValues(choices);
}

よくある問題とトラブルシューティング

  • 選択肢が更新されない：フォームID、項目IDが正しいか確認してください。また、スクリプトの実行権限が付与されているか確認してください。

  • API連携でエラーが発生する：APIのURL、認証情報が正しいか確認してください。また、APIのレスポンス形式がスクリプトで想定している形式と一致しているか確認してください。

  • 文字化けが発生する：文字コードがUTF-8になっているか確認してください。

カスタマイズ方法と応用例

  • 選択肢の表示順を制御する：setChoiceValuesメソッドに渡す配列の順序を変更することで、選択肢の表示順を制御できます。

  • 選択肢に画像を表示する：現状、GASの標準機能では選択肢に画像を表示することはできません。

  • 条件分岐による複雑な選択肢の制御：複数の条件を組み合わせることで、より複雑な選択肢の制御が可能です。

まとめ

MultipleChoiceItem.setChoiceValuesメソッドは、GASを使ったWebアプリ開発において、フォームの選択肢を動的に更新するための強力なツールです。スプレッドシートやAPIとの連携、ダッシュボードとの連携など、様々なシチュエーションで活用できます。本記事で紹介したコード例やトラブルシューティングを参考に、より柔軟で使いやすいWebアプリケーションを開発してください。

PR

未経験からSNSデザインを学び、在宅ワークで収入を得たい方へ。
Flap DESIGNは、デザインスキルから案件獲得までを徹底サポートするオンラインスクールです。現役プロがマンツーマンで指導するため、挫折しにくい環境が強み。
さらに、受講期間中に案件を獲得できなかった場合は、売上が立つまで営業サポート期間を延長する「売上保証制度」も魅力です。
副業として月8〜20万円を目指したい会社員の方、出産・育児を機に新しい働き方を求める方、フリーランスとして独立を目指す方など、ライフスタイルに合わせた働き方を実現したい方にぴったりのサービスです。まずは無料相談で詳細を聞いてみませんか？

未経験から始める！SNSデザインスクール