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

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

Googleが提供する「Gmail」や「スプレッドシート」、「カレンダー」、「ドキュメント」などの各種アプリをJavaScriptで操作し、お互いを繋げたり組み合わせたり、動かしたり出来るサービス「Google Apps Script」をご存知でしょうか？

かく言う私もつい最近まで知らなかったのですが、先日営業チームから、クライアント先訪問後の営業レポートを社内で共有できるシステムがほしいとの要望があったので調べてみたところ、このGoogle Apps Script（頭文字をとってGASと表記されているようなので、以下そのように記載させていただきます）を発見しました。

普段使っているGoogleの各アプリが自動で連携する様がとても面白かったので、備忘録も兼ねて3部作でご紹介いたします。

関連記事：

目次

Google Apps Scriptって？

Google Apps Scriptというくらいなので記述するのに多少専用のスクリプトは使いますが、基本的にJavaScriptの知識があれば簡単に、短期間で作成出来ます。が！

私は主に社内サイトのデザインやコーディング、バナーの作成などを担当していますが、JavaScriptの知識が全くありません。コーディングの際にプラグインを実装しようとたびたび挑戦してみたりしますが、それをカスタマイズ出来ないという有様です。

ただ、GASは開発環境をGoogleが用意してくれているので導入のハードルは低く、アカウントがあれば誰でもどこでも使えます。なので、私も勉強のために作ってみることにしました。

営業チームからの要件はこんな感じ

  • フォームに入力するとその内容がスプレッドシートに出力される
  • アポイントメント日時がカレンダーに登録される
  • 調整中のアポイントメントは、その調整範囲がカレンダーに表示される
  • 顧客名など、セレクトボックスに表示されるリストをスプレッドシートから読み込む
  • レポートを一覧から検索し、その結果をHTMLページで表示する
  • そのHTMLページで項目別にリストをソートできる
  • 営業レポートと案件詳細レポートを紐付ける
  • 入力フォームは全員使えて、出力先のスプレッドシートだけ編集制限を付ける

さっそく使ってみる

公式のリファレンスはこちらから。

まず、Googleドライブの左サイドメニューから「新規」ボタンをクリックし、「その他」からGoogleが提供するオンラインエディタ「Script Editor（Google Apps Script）」を開きます。

エディタの開き方

※Google Apps Scriptを初めて使う場合は「アプリを追加」から追加してくださいね！

すると下記のようなエディタがドライブ上に作成されるので、プロジェクト名を入力して準備をします。

Script Editor

入力フォームをつくってみよう！

ファイルタブの「新規作成」からHTMLファイルを作成し、簡単な入力フォームを作っていきます。

作成したHTMLページのURLは、公開タブの「ウェブアプリケーションとして導入」からURLを取得できます。

ウェブアプリケーションとして導入

記載されているURLをコピーしてページを開いてみると…

doGetエラー

あれ？開けないですね…。

doGetというエラーが出ているのでその後調べてみて分かったことなのですが、実は作成したフォームを開くには、エディタを作成した際に出てきた「コード.gs」に以下のdoGet関数を記述します。


function doGet() {
  var html = HtmlService.createTemplateFromFile('reportInput');
  return html.evaluate();
}

このdoGetはGASにおいてとても重要な関数で、ブラウザからHTMLファイルが呼ばれたときにHtmlService.createTemplateFromFileを実行し、()内のreportInputという名前のHTMLファイルを生成して返すという役割をしています。

()内に記載するHTMLのファイル名は拡張子を付けないようです。

もう一度URLを取得してページを開いてみようと思います。

入力フォーム

入力フォームが開けました！

さて、次はいよいよ、フォームに入力した内容が複数のスプレッドシートに登録されるようなスクリプトをかいていきます！

次回の記事「Google Apps Script」で社内システムをつくってみた～GASとの出会い編～)はこちら

Page Top