Google Apps Scriptにて、様々なウェブアプリケーションを作る際に結構な頻度でぶつかる問題が「プルダウンで値を選択するのが大変」問題。選択肢が10個程度なら普通にプルダウンで作れば良いのですが、それが100個もあったら・・・そこで使うのが入力補完だったりするのですが、これは、利用者が言葉をきちんと断片でも知ってる必要があります。

そこで選択するレコードに分類を設けてフィルタしながらプルダウンを動的に生成して、選んでもらう方式ならば、100個もプルダウンで並べる必要はなくなり、利用者の負担も減ります。今回はこれをスプレッドシート連携で作ってみます。

※今回のコードはV8 Runtimeでテストしています。

難易度:


今回使用するスプレッドシート

2つのシートで構成されており、種類が1個目のプルダウンになります。これを選択するとキノコ名から同じ種類のキノコデータだけを引っ張ってきて、2個目のプルダウンを動的に生成します。

メニューからキノコ情報⇒ピックアップを選ぶとダイアログが出ます。プルダウンを選択すると2個目が動的に生成され、2個目を選ぶと説明文がalert()で表示される仕組みです。

図:キノコを選択は分類に応じて変化する

実行サンプル

ソースコード

GAS側コード

  • 今回はスプレッドシート上のダイアログとしてHTML Serviceを表示するようにしました。
  • bunruiは種類シートの値を取得してHTML側へ返します。
  • kinokoはHTML側からの分類を引数で取ってキノコ名シートのデータをフィルタしてデータを返します。

HTML側コード

  • グローバル変数kinokodbにはキノコ名シートのデータを格納します。
  • ダイアログ表示時は自動でbunrui()を実行して、まず分類のプルダウンをonSuccessで生成します。
  • 分類のプルダウンにはchangeman()というonChangeイベントを割り当てています。
  • changeman発動で、選んだ分類名を引数として取り、二個目のプルダウンデータをkinoko()を実行してonSuccess2で生成します。
  • キノコ名のプルダウンにはkinokoman()というonChangeイベントを割り当てています。
  • kinokoman()では、選んだキノコに該当するデータをkinokodbから検索し、ヒットした説明文データをalert()で表示しています。
  • 2個目のプルダウン領域には、progressの表示・非表示を入れていますがこれは、スプレッドシートからデータを取得してプルダウンを組み立てるまでに若干タイムラグがあるので、実運用時は実は大切な処理だったりします。その間にプルダウンをいじらせない為でもあります。

関連リンク

共有してみる: