GASのダイアログのデータをフォーム要素を渡すことでまとめてサーバー側に渡す方法

Google Apps Script

photo credit: dejankrsmanovic Old Elevator Button via photopin (license)

2019.12.032020.07.13

photo credit: dejankrsmanovic Old Elevator Button via photopin (license)

みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。

Google Apps Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズです。

前回の記事はこちら。

GASのダイアログのボタンクリックでサーバー側の関数を呼び出すgoogle.script.run

Google Apps Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えしています。今回はダイアログのボタンクリックでサーバー側の関数を呼び出すgoogle.script.runの使い方です。

作成したダイアログのボタンから、サーバー側のGASを呼び出す方法をお伝えしました。

ただ、呼び出してログ出力しただけでしたので、もう少し先に進めていきますよ。

今回は、GASのダイアログのデータをフォーム要素を渡すことでまとめてサーバー側に渡す方法をお伝えします。

では、行ってみましょう！

前回のおさらい
フォームを使ってデータを渡す
1. formタグとその役割
2. フォーム要素をサーバー側に渡す
サーバー側でフォーム要素からデータを取り出す
フォーム要素を渡す動作確認
まとめ
連載目次：GASのダイアログでcsvファイルアップローダーを作ろう

前回のおさらい

前回までのおさらいをしておきましょう。

まず、ダイアログの表示部を作るHTMLファイル「dialog.html」ですが、以下のコードです。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <input type="file">      
    <button onclick="google.script.run.logTest('クリックされました');">アップロード</button> 
  </body>
</html>

8行目ですが、onclick属性にサーバー側のlogTest関数に「クリックされました」という文字列を渡しつつ呼び出すスクリプトを仕込んでいます。

サーバー側のgsファイル「コード.gs」がこちら。

function showDialog(){
  var html = HtmlService.createHtmlOutputFromFile('dialog');
  SpreadsheetApp.getUi().showModalDialog(html, "CSVアップロード");
}

function logTest(text){
  Logger.log(text);
}

showDialog関数は実行すると、以下のようなダイアログを表示します。

logTest関数はクライアント側からgoogle.script.runで呼び出されるもので、うまく呼び出された後にログを確認すると、こうなります。

今回は、ボタンクリックでフォームの内容をサーバー側に渡す

フォームを使ってデータを渡す

formタグとその役割

クライアント側にあるデータをサーバー側に渡すときには、formタグを使うと便利です。

formタグはフォームを作る際に使用するタグで、以下記述のformタグに挟まれたinputタグなどの内容をまとめてサーバー側に渡すことができます。

<form>フォームの部品となる要素</form>

サーバー側にデータを渡すには、フォーム要素自体を渡した上でそれに含まれるデータを取り出すという段取りをとります。

フォーム要素をサーバー側に渡す

今回は、フォームに含まれるbutton要素のonclick属性からgoogle.script.runでサーバー側を呼び出していますよね。

その場合は、以下の記述でフォーム要素をサーバー側に渡すことができます。

<form>
  <input type="file">
  <input type="text">
  <button onclick="google.script.run.logTest(this.parentNode);">アップロード</button>
</form>

え？type属性がtextのinputタグがしれっと追加されているですって？…まあ、これは今回の検証で使うので、まあ気にしすぎずに進めみましょう。

ここで「this」はbutton要素自身を表します。

ですから、以下はその直近の親要素、すなわち今回の場合はフォーム要素となります。

HTML要素.parentNode

サーバー側でフォーム要素からデータを取り出す

次に、GAS側でフォーム要素を受け取ったら、そのフォーム要素の中からデータを取り出す必要があります。

その場合は、各要素に付与したname属性を使って、以下のように記述します。

フォーム要素.name属性

つまり、logTest関数を以下のようにすれば、受け取ったフォーム要素から、name属性myTextの要素のデータを取得できるというわけですね。

function logTest(form){
  Logger.log('送信したテキストは %s', form.myText);
}

フォーム要素を渡す動作確認

では、フォーム要素を渡す動作確認をしていきましょう。

「dialog.html」は2つのinputタグにname属性を付与して、以下のようにしました。

<form>
  <input name="myFile" type="file">
  <input name="myText" type="text">
  <button onclick="google.script.run.logTest(this.parentNode);">アップロード</button>
</form>

フォームを表示すると以下のようになります。

「ファイルを選択」はいったん無視して、テキストボックスに「テスト用のテキスト」と入力、その上で「アップロード」をクリックします。