- 公開日:
スプレッドシートでプルダウンを複数選択する方法
スプレッドシートを使ってリストから複数の選択肢を選ぶ際、プルダウンリストを活用すると効率的にデータ入力ができます。
しかし、通常のプルダウンリストでは一つの選択肢しか選べないため、複数選択したい場合は工夫が必要です。
今回は、スプレッドシートでプルダウンを複数選択する方法について解説します。
スプレッドシートでプルダウンを複数選択する方法
結論を申し上げると、スプレッドシートでプルダウンから複数選択する機能は、デフォルトでは提供されていません。
ですが、チェックボックスやGoogle Apps Scriptを使用することで、その機能を模倣することができます。
以下に、チェックボックスを使用する方法とGoogle Apps Scriptを使用する方法の2つの方法を順を追って説明します。
チェックボックスを使用する方法
この方法では、選択肢ごとにチェックボックスを用意し、それを使って複数選択を実現します。
下記の記事にて、スプレッドシートでチェックボックスを作成する方法と、その使用方法について解説していますのでご参照ください。
Google Apps Scriptを使用する
Google Apps Scriptでサイドバーを表示させて、複数選択の入力装置を作成する方法についてご紹介します。
HTMLとJavaScriptを使って、チェックボックスを含むフォームを作成し、ユーザーがマウスのみで選択肢を選べるように作成します。

スプレッドシートを開き、①メニューバーの拡張機能をクリックし、②「Apps Script」をクリックします。

①「ファイルを追加」をクリックしファイルを開き、②「HTML」をクリックします。

①ファイルには適切な名前を付け(例:SidebarForm.html)、②下記のコードをコピー&ペーストし、③「保存」ボタンをクリックします。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form id="myForm">
<input type="checkbox" name="choice" value="リンゴ">リンゴ<br>
<input type="checkbox" name="choice" value="バナナ">バナナ<br>
<input type="checkbox" name="choice" value="オレンジ">オレンジ<br>
<button type="button" onclick="submitForm()">送信</button>
</form>
<script>
function submitForm() {
google.script.run.withSuccessHandler(function() {
google.script.host.close();
}).processForm(document.getElementById("myForm"));
}
</script>
</body>
</html>
このコードは、複数選択を可能にするチェックボックスのリストを含むフォームを追加できます。
今回の選択肢(例:リンゴ、バナナ、オレンジ)の文字を変更することで、オリジナルのリストを作成することが可能です。

①「ファイルを追加」をクリックし、②「スクリプト」をクリックします。

ファイル名はオリジナルで構いません。
①下記のコードをコピー&ペーストして、②「保存」ボタンをクリックします。
function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile('SidebarForm')
.setTitle('選択肢')
.setWidth(300);
SpreadsheetApp.getUi().showSidebar(html);
}
function processForm(formObject) {
var choices = formObject.choice;
Logger.log(choices); // 選択された値をログに記録する
// ここで選択された値を処理するコードを追加します
}
このコードは、スプレッドシートにサイドバーを表示させるためのものです。

①また新たなファイル(スクリプト)を作成し、②下記のコードをコピー&ペーストして、③「保存」ボタンをクリックします。
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('カスタムメニュー')
.addItem('選択肢を表示', 'showSidebar')
.addToUi();
}
このコードは、スプレッドシートが開かれたときにカスタムメニューから選択しを表示させるためのものです。

ここで入力したコードが正しく実行できるかを確認します。
①実行させるファイルを選択し、②「実行」ボタンをクリックします。

スクリプトの実行が初めての場合、アクセスの承認を求められます。
「権限を確認」ボタンをクリックします。

「詳細」をクリックします。

「無題のプロジェクト(安全ではないページ)に移動」をクリックします。

「許可」ボタンをクリックします。

再度、「実行」ボタンをクリックすると、実行ログが表示されます。
コードが正しく機能している場合、「実行完了」と表示されます。
同様に、もう一つのスクリプトも確認しましょう。

次に、①新たなファイル(スクリプト)を作成し、②下記のコードをコピー&ペーストして、③「保存」をクリックします。
function processForm(formObject) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var choices = formObject.choice;
// 単一選択の場合、choicesを配列に変換
if (typeof choices === 'string') {
choices = [choices];
}
// 選択された選択肢をカンマ区切りの文字列に変換
var choicesString = choices.join(", ");
// カンマ区切りの文字列をA列の新しい行に追加
if (choices) {
sheet.appendRow([choicesString]);
}
}
このコードは、選択した文字列をカンマ区切りでA列に記録させるためのものです。

スプレッドシートに戻ると、メニューバーに「カスタムメニュー」が表示されます。
①「カスタムメニュー」をクリックし、②「選択肢を表示」をクリックします。

選択肢のリストが表示されるので、①表示させたい選択肢のチェックボックスをクリックし、②「送信」ボタンをクリックします。

チェックを入れた選択肢が、セル上に表示されました。