Google Apps Script で社内システムを作ってみた (2)

Google Apps Script で社内システムを作ってみた (2)

さて、前回(「Google Apps Script」で社内システムをつくってみた～GASとの出会い編～)はHTMLファイルの作成方法についてお話させていただきましたが、今回はいよいよスクリプトを使って、入力フォームと新規スプレッドシートの繋げ方について触れてみようと思います。

関連記事：

目次

いよいよスクリプトをかいてみる

前回doGet関数を書いた「コード.gs」に記述していきます。
以前も説明した通り、doGet関数はHTMLページを開くために必須の関数なのでくれぐれも消さないようにしてくださいね！

コードgs

doGet関数はそのままにしておきましょう！

まずは、入力フォームから送信した値がスプレッドシートに出力されるためのスクリプトを記述していきます。


function myFunction(form) {
  var id = "1c2hFskt3y1UOlDmx4F8P9W2BjbwePItY_nhIVzQumN0";
  var spreadSheet = SpreadsheetApp.openById(id);
  var sheet = spreadSheet.getSheetByName("営業レポート");
}

こんなスクリプトを書いてます

myFunction()の()内を引数と呼びますが、そこに記述したformは、前回作成したHTMLのフォーム部分を覆う形でタグとして以下のように記述します。
※実際のHTMLは長いので少し割愛します。


<body>
    <h1>営業レポート入力フォーム</h1>
    <form>
        <table>
            <tbody>
                <tr>
                    <th>担当者</th>
                    <td>
　　　　　               <input type="text" name="salesPerson">
                    </td>
                </tr>
                <tr>
                    <th>詳細情報</th>
                    <td>
                        <textarea name="infoDetail"></textarea>
                    </td>
                </tr>
            </tbody>
        </table><!-- end table -->
        <input type="button" name="btn" onclick="google.script.run.withSuccessHandler(update).myFunction(this.parentNode);" value="登録する">
    </form>
</body>

※入力フォームから登録ボタンまでをformタグで囲います！

つづいて、”SpreadsheetApp.openById(id)”を使って出力先のスプレッドシートをIDで取得し、それを”spreadsheet”という変数に代入します。スプレッドシートのIDはURLの/editより手前から取り、idという変数に代入します。


 var id = "1c2hFskt3y1UOlDmx4F8P9W2BjbwePItY_nhIVzQumN0";
 var spreadSheet = SpreadsheetApp.openById(id);

JavaScriptでは、このように変数と＝で関数を記述することによって（代入といいます）、その変数を書くだけで＝以降の処理が実行されるので、コードをすっきりキレイに書くことができます。

さらに、スプレッドシートの中の各シートまで指定してみましょう。


var sheet = spreadSheet.getSheetByName("営業レポート");

指定したいシート名を”spreadSheet.getSheetByName()”の()内にそのまま書くことによって、出力先のシートを”sheet”という変数に代入しています。
※シート名は日本語で指定できますが、その際は前後を””で囲うことを忘れずに！

はい、ついに出力先のシートまで特定できました！
JavaScript初心者な私は、ここでまたもやエラーを起こしてしまいます。
シートまで特定すれば入力した値が出力されると思った私は、早速入力フォームから値を送信してみます。

入力フォーム再挑戦

値を入力して送信すると…

スプレッドシート白紙

エラーが出ているどころか、スプレッドシートに一切の変化も見られませんね。

GASには想像以上にもっと色んな構文があった！

値を正しく出力させるために、どの値がどのセルに出力されるかということを指定できる構文もあるようです。

そんなわけで、以下のスクリプトを5行目から記述します。


 var range = sheet.getRange(1, 1);
 range.setValue(form.salesPerson);
 var range = sheet.getRange(1, 2);
 range.setValue(form.meetingDate);
 var range = sheet.getRange(1, 3);
 range.setValue(form.meetingPlace);
 var range = sheet.getRange(1, 4);
 range.setValue(form.infoDetail);

またまた解説

上記コードでは、どのセルにどの値を出力するかを”getRange()”で指定し、”range”という変数に代入しています。
()内には(行, 列)という順番で指定できるので、それぞれを数字で指定します。
各”getRange()”の次の行に記述してある”setValue()”で、値(value)を出力するというスクリプトを書いています。
“setValue()”の()内はHTMLのフォーム部分を囲ったformと、inputやtextareaなどスプレッドシートの項目と当てはまるフォームに付与してあるname属性を”.”で繋ぎます。

いかがでしょうか？

そろそろ訳分からなくなってくるところですが、設定はこれで今度こそ完了です！
入力フォームからもう一度値を送信してみましょう。

入力フォーム一回目

再挑戦です！

登録ボタンをクリックすると…

スプレッドシート

登録されました！わーい！

私のようにJavaScriptの知識が無い場合は少し難解ですが（というかすごく難しい）、これを応用してGoogleの各種アプリの連携を自動化すると、普段の仕事の効率化がはかれますね！

次は出力したリストを検索フォームから検索し、参照する方法について書きます！

次回もよろしくお願いします！

Page Top