GAS template with clasp and esbuild

🎨 Features

• clasp
• TypeScript
• esbuild
• ESLint
• prettier
• Tailwind CSS

🚀 Try it now

git clone https://github.com/x7ddf74479jn5/gas-starter

またはhttps://github.com/x7ddf74479jn5/gas-starterをテンプレートにして新規レポジトリを作成。

⚒ Usage

Install clasp CLI if not installed

npm i -g @google/clasp
clasp login

Config

mv .clasp.example.json .clasp.json

.clasp.jsonのscriptIdを自身のAppScriptのIDで書き換えてください。
※ AppScriptのIDはAppScript管理画面のプロジェクト設定から確認できます。
※ フォームのAppScript IDではなくスプレッドシートのAppScript IDです。

{
  "scriptId": "<YOUR_SCRIPT_ID>",
  "rootDir": "./build"
}

環境変数の設定

.envに書く場合

config.propertyをenvに設定

cp .env.example .env
SLACK_WEBHOOK_URL="https://hooks.slack.com/services/*************************"

GASのスクリプトプロパティに設定する場合

プロジェクトのダッシュボードから設定しください。
「プロジェクトの設定」>「スクリプトプロパティの追加」

スコープの設定

static/appsscript.jsonを編集して使いたいスコープを指定してください。

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/spreadsheets.currentonly",
    "https://www.googleapis.com/auth/spreadsheets",
    "https://www.googleapis.com/auth/gmail.send",
    "https://www.googleapis.com/auth/gmail.compose",
    "https://www.googleapis.com/auth/script.external_request",
    "https://www.googleapis.com/auth/script.scriptapp",
    "https://www.googleapis.com/auth/forms.currentonly",
    "https://www.googleapis.com/auth/forms",
    "https://www.googleapis.com/auth/script.container.ui"
  ]
}

Template

HtmlServiceのテンプレート機能を使いたい場合は/staticディレクトリ下に任意のhtmlファイルを置いてください。
claspのデフォルトの設定ではpushするファイルの明示的な指定が必要です.claspignoreに作成したファイル名を追記してください。
Tailwind CSSのスタイリングを適用するためにテンプレートファイルのhead内でglobal.cssを読み込んでください。

Build

npm run build

Deploy

npm run push

Trigger Setting

GASのダッシュボードからトリガーを設定してください。
config.tsでtriggerを設定している場合、main関数が実行されると自動的に各関数のトリガーが設定されます。
「エディター」>「main.gs」>「プルダウンメニューからmain関数を選択」>「実行」
初回実行時はアプリを承認する必要があります。
「ポップアップ中の詳細をクリック」>「元のページへ戻るをクリック」
ローカルのターミナルから実行する場合（claspの設定によっては失敗する可能性があります）

npm run set-triggers

「トリガー」>「トリガーを追加」

毎日定時にトリガーを設定
実行する関数を選択	onScheduleから始まる関数
実行するデプロイを選択	HEAD
イベントのソースを選択	時間主導型
時間ベースのトリガーのタイプを選択	日付ベースのタイマー
時刻を選択	任意の時間帯

フォーム送信時にトリガーを設定
実行する関数を選択	onFormSubmitから始まる関数
実行するデプロイを選択	HEAD
イベントのソースを選択	フォームから
イベントの種類を選択	フォーム送信時

Appendix

> GAS Reference