HTMLフォームの値を処理して返す～GAS～

備忘録記事です。社内の備忘録として掲載しております。一般公開しておりますが、この解説記事での動作保証やご質問等は承っておりませんので予めご了承下さい。

やりたいこと

GAS内で生成したhtmlファイルにフォームを配置し、フォーム上のボタンをクリックすると、gsファイル内のスクリプトを呼び出して処理し、実行結果を元のhtmlファイル上へ返して表示する、というもの。より具体的には

社員コードを入力させてEnterキーを押すと、社員コードから該当する社員の名前を参照して取得し、同じWebページ上へ表示させたい

というものです。

処理の流れ

この解説ページでは、大まかな「処理の流れ」だけを記載しておきます。個別のスクリプトやhtmlの書き方についてはこのページでは解説していません（今後機会があれば、スクリプトの中身も解説するかも？です）

図の中にも記載してありますが、概略としては

１．GASスクリプトファイル内にスクリプトとhtmlを用意する

• • ページ出力させるためのhtmlファイルを用意しておきます。
  • 処理させたい内容を記載したスクリプトを用意しておきます。

２．上記の図の流れのようにして仕組みを整える

具体的には

1. 1. html上にフォームなどを配置して、フォームボタンをクリックしたときにスクリプトを呼び出す（このとき呼び出すスクリプトは、同じhtml内に書いたJavaScript）
   2. 呼び出しすスクリプト内に、gasのスクリプトを呼び出す処理を記述する
      このとき、google.script.run.withScuccessHandler(◯◯◯）.△△△　のように呼び出す。
      △△△　が、gsファイル内のスクリプト。◯◯◯は、同じhtmlファイル内に、この処理が成功したときに実行する処理として別に書いておく。
   3. gsファイル内の関数（△△△）を実行して、結果を変える
   4. ３．で返された結果を引数として、html内の◯◯◯関数を実行する
   5. ◯◯◯関数では、同じページ内の、例えばinputboxなどを出力先として、結果（引数resultで返されている）を表示させる処理を書く

実際の動き

上記の流れに沿って作ってみたWebアプリ。動作の様子を動画で御覧ください。