Google スプレッドシート で入力フォームを無理やり作ってみた。
求人票をweb化してみた。の続編です。
入力してもらっている事務の方から、
👩(事務職員)：エクセルだったらフォームで入力できるじゃん？ Google スプレッドシート ではできないの？
👨(私)：えー・・・ちょっと調べてみます！
といった形で、言われたことは断れない。いや・・・私にはなかったアイディアをもらってありがとう！
という気持ちで、ChatGPT様に聞いてみました。
GASの知識はゼロですが、ChatGPT様はこんな願い事も叶えてくれるのです・・・
以下のGASはやりたいことをChatGPT様に相談し、完成したGASです。
ちなみに、記事の文章もChatGPT様に作成してもらっています。
※ Google スプレッドシート の構成については先ほどもリンクを貼っていますが、こちらから確認できます。
Googleスプレッドシートでカスタムメニューとフォームを使用する方法
Google Apps Script (GAS) を使用して、Googleスプレッドシートにカスタムメニューを追加し、特定のフォームを介してデータを簡単に入力・保存する方法を紹介します。この機能は、データ入力作業を効率化し、ユーザーインターフェイスを改善するのに役立ちます。
ステップ1: カスタムメニューの作成
最初のステップは、スプレッドシートが開かれた際に自動的にカスタムメニューを追加することです。
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('カスタムメニュー')
.addItem('フォームを開く', 'openForm')
.addToUi();
}このコードスニペットにより、「カスタムメニュー」という名前の新しいメニューがスプレッドシートのメニューバーに追加されます。このメニューには、「フォームを開く」というオプションが含まれ、これを選択すると`openForm`関数が呼び出されます。
ステップ2: フォームの表示
ユーザーが「フォームを開く」を選択すると、HTMLベースのフォームがモーダルダイアログとして表示されます。このフォームは、ユーザーがデータを入力できるように設計されています。
function openForm() {
// スプレッドシートとアクティブシートの取得
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
// 特定の範囲からデータを取得
var range1Values = sheet.getRange("B1:F1").getValues()[0];
var range2Values = sheet.getRange("H1:L1").getValues()[0];
// データを結合
var fieldNames = range1Values.concat(range2Values);
// アクティブなセルの位置情報を取得
var activeCell = sheet.getActiveCell();
var row = activeCell.getRow();
var column = activeCell.getColumn();
// HTMLフォームを作成し、データを渡す
var htmlOutput = HtmlService.createTemplateFromFile('Form');
htmlOutput.fieldNames = fieldNames;
htmlOutput.row = row;
htmlOutput.column = column;
// フォームを表示
var output = htmlOutput.evaluate().setWidth(500).setHeight(300);
SpreadsheetApp.getUi().showModalDialog(output, 'Enter Details');
}この関数では、スプレッドシートから特定の範囲のデータを取得し、それらをフォームに渡します。フォームは、これらのデータを元にユーザーからの入力を受け付ける質問を生成します。
ステップ3: フォームからのデータ保存
ユーザーがフォームに入力したデータは、`handleFormSubmit`関数を通じてスプレッドシートに保存されます。
function handleFormSubmit(formObject) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var rowData = [];
// フォームオブジェクトからデータを取得し、配列に格納
for (var i =
1; i <= 5; i++) {
rowData.push(formObject['field' + i]);
}
rowData.push(""); // G列を空白に
for (var i = 6; i <= 10; i++) {
rowData.push(formObject['field' + i]);
}
// 取得したデータをスプレッドシートに書き込み
var row = formObject.row;
var column = formObject.column;
sheet.getRange(row, column, 1, rowData.length).setValues([rowData]);
}このステップでは、フォームから受け取ったデータを適切なスプレッドシートの位置に保存します。特に、データはB列からL列に配置され、G列は空白のままになります。
注意点
アクティブセルの選択: フォームを開く前に、アクティブセルを正しく選択しておく必要があります。これは、データを保存する場所を決定するために使用されます。
権限の許可: GASを初めて実行する際には、スプレッドシートへのアクセスを許可する必要があります。
スプレッドシートの構造: スクリプトは特定のセル範囲からデータを取得するように設計されているため、スプレッドシートの構造を変更する場合は、スクリプトもそれに合わせて更新する必要があります。
この記事を通じて、GASを利用してスプレッドシートのデータ管理を効率化する方法を学びました。GASは、Googleスプレッドシートをより動的でインタラクティブにする強力なツールです。
最後に
ちょっとした悩みを解決しながら、自分の知識も増える。
信頼関係を築く。
このGAS関係は教えれないけど、アプリの基本的な操作方法はその場で伝えて解決。
この地道なステップが大事なんだな〜と改めて気づいてきました。
スキ ボタン押してもらえると励みになります。