はじめに
個人開発でタイマートリガーを利用したLineへの通知アプリを作成した際にGoogle Apps Script(GAS)を利用してみました！
GASは無料で使えるし、専用のエディタの補完機能も良い感じですが、個人的にはVSCodeを用いてローカル開発したり、TypeScriptを用いて型付けをしっかりしたり、デプロイは自動でしたりしたいな～という思いからその環境を作ってみたので備忘録として残します。
前提
- Node.jsがインストール済み
Google Apps Script APIを有効にする
まずは外部からGASプロジェクトを操作できるようにGoogle Apps Script APIを有効にします。
Apps Script – Google Apps Script
claspとTypeScriptの導入と認証
対象のフォルダ内で以下のコマンドを実行します。
npm init
npm install @google/clasp
GAS関連のスクリプトもインストールしておきます。
npm install @types/google-apps-script
claspの導入後、以下のコマンドで認証を行います。
clasp login
ログイン後、Windowsユーザの場合はC:\Users\{ユーザ名}フォルダに.clasprc.jsonファイルが出来ています。Github Actionsの設定で後々使うのでファイルの場所は忘れないようにしましょう。
以下のコマンドでプロジェクトを新規作成します。
clasp create
※ちなみにTypeScriptはclaspが最初からサポートしているので独自にインストールする必要はありません。
eslintとpretterの導入
こちらは個々人の好みかと思いますが、eslintとpretterも導入しておきます。
npm install eslint prettier eslint-config-prettier eslint-plugin-googleappsscript
※eslintがなかなか効かなくてハマってしまったのですが、どうやら.eslintrc.jsファイルにてparserOptions.project項目へ対象のtsconfig.jsonファイルのパスを追加する必要があるみたいでした。
parserOptions: {
/* 省略 */
project: ["tsconfig.json"],
},
Pretterについても.vscode\settings.jsonファイルに設定を書いて動くようにします。今回は保存時にフォーマット警察が動くようにしています。
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }
Github Actionsにて自動デプロイ
.github\workflowsフォルダにrun.ymlファイルを作成します。
中身は以下のような感じにして、masterブランチにマージ(もしくは直接プッシュ)されたときに自動デプロイが走るようにしました。
name: cicd-notificate-app
on:
push:
branches:
- master
workflow_dispatch:
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v3
- name: setup Node.js
uses: actions/setup-node@v3
with:
node-version: "16"
- name: install Clasp
run: |
npm init -y
npm install clasp
- name: create clasprc.json
# scopeは長いのでこの記事では空にしてます。
run: |
echo \{\"token\":\{\"access_token\":\"${{ secrets.ACCESS_TOKEN}}\",\"scope\":\"\",\"token_type\":\"Bearer\",\"id_token\":\"${{ secrets.ID_TOKEN }}\",\"expiry_date\":1673089616269,\"refresh_token\":\"${{ secrets.REFRESH_TOKEN }}\"\},\"oauth2ClientSettings\":\{\"clientId\":\"${{ secrets.CLIENTID }}\",\"clientSecret\":\"${{ secrets.CLIENT_SECRET }}\",\"redirectUri\":\"http://localhost\"\},\"isLocalCreds\":false\} > ~/.clasprc.json
- name: deploy
run: |
clasp push
ポイントはコメントを書いている下のrun項目の部分でしょうか。
こちらはデプロイの際にGASプロジェクトへアクセスする際に必要な内容(.clasprc.jsonファイルの内容)です。
secrets.・・・と書いている部分はGitHubのSecretを利用しています。
直接機密情報をアップするのは好ましくないので、こういうサービスは積極的に使っていきたいですね。
以上でmasterブランチにマージされた後にGASプロジェクトへ自動デプロイされることが出来るかと思われます。
おわりに
最初はなんとなく触ったGASでしたが、一気に技術幅が広がって結構楽しい！
