Googleスプレッドシートで複数選択可能なプルダウンを作る

過去の記事でGoogleスプレッドシートのプルダウンの作り方を掲載しました。

この記事に、「スプレッドシート　プルダウン　複数選択」のようなキーワードでたどり着く人も結構いるようすが、残念ながら、複数選択できるプルダウンの説明は書いていません。

今回は、複数選択ができるプルダウンの作り方を調べてみたので、紹介したいと思います。

*記事を書き終わってから気づいたのですが、他のユーザーにこのプルダウンを初めて使わせる時、スクリプトへのアクセス許可をしてもらわないといけないですね・・・これはかなりのマイナスポイントです・・・。あまりおすすめしません。

完成イメージ

標準的なスプレッドシートの機能では、複数選択可能なリストの作成はできません。

なので、ちょっと無理やりですが・・・今回作ったのはこんな感じのものです。

作り方

スプレッドシートとGoogle Apps Scriptで作成をしていきます。
今回は、シートのB2セルにラベル（好きな果物）、C2セルに選択した値（いちご等）を配置する例になります。

スクリプトを作成

ツール > スクリプトエディタで、スクリプトエディタを起動します。

function showListBox(){
  const html = HtmlService.createHtmlOutput(`
  <div>
    <select id="list" multiple>
      <option value="いちご">いちご</option>
      <option value="りんご">りんご</option>
      <option value="ブルーベリー">ブルーベリー</option>
    </select>
  </div>
  <div>
    <button onclick="submit()">決定</button>
  </div>
  <script>
    function submit() {
      const list = document.getElementById("list");
      const arr = [];
      for ( const item of list ) {
        if ( item.selected ) { arr.push(item.value); }
      }
      google.script.run.setSelectedValues(arr.join(","));
      google.script.host.close();
    }
  </script>
  `);
  SpreadsheetApp.getUi().showModalDialog(html, "選択してください");
}

function setSelectedValues(items){
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = spreadsheet.getActiveSheet();
  sheet.getRange("C2").setValue(items);
}

実際に利用する際に変更すべき部分は下記のとおりです。

選択肢

選択肢を変えたい場合は、この部分を修正してください。

      <option value="いちご">いちご</option>
      <option value="りんご">りんご</option>
      <option value="ブルーベリー">ブルーベリー</option>

ボタンに表示する文字

「決定」の部分を書き換えればOK

   <button onclick="submit()">決定</button>

ダイアログのタイトル

「選択してください」の部分を書き換えればOK

  SpreadsheetApp.getUi().showModalDialog(html, "選択してください");

選択した値が設定されるセル

C2の部分を、ご希望のセル番地に書き換えればOK

  sheet.getRange("C2").setValue(items);

▽ボタンを作る

次に、プルダウン的な▽ボタンを作りました。
（別に▽じゃなくても構いません）

これで完成です。

補足

今回は最もシンプルなコードを目指したので見た目がダサかったですが、CSSで装飾もできるので、知識がある人は試してみてください。

また、Htmlの部分は、HtmlService.createTemplateFromFileを使えば、別ファイルに切り分けることも可能です。より複雑な処理を行いたい場合等に使ってみるとよいかと思います。

参考

Class Ui  |  Apps Script  |  Google for Developers

developers.google.com