Zenn
🚀

【GAS×Github×Clasp】複数のGASプロジェクトを効率的に一元管理する方法

2025/02/10に公開
GitHub
GAS
clasp
tech

はじめに

Google Apps Script（GAS）を使って複数のプロジェクトを開発していると、ソースコード管理をしたくなりませんか？
また、Github 上で１つのリモートリポジトリで複数プロジェクトのソースを管理出来たら便利ですよね。

そんなときは、Clasp を利用すると効率的に開発・デプロイできます。

本記事では、複数のGASプロジェクトを効率的に一元管理する方法を、具体的な手順とともに紹介します。特に、コマンド実行時のディレクトリの移動や構成が重要になるため、実際に私が苦労したポイントも含めて詳しく説明します。私の実体験から少し細かい部分まで記載していますが、スムーズな開発のために参考になれば幸いです。

この記事の対象者

  • GAS を複数プロジェクト管理したい
  • Clasp を使った GAS 開発をしたい
  • GAS と GitHub の CI/CD をしたい

Clasp とは？

Clasp（Command Line Apps Script Projects）は、Google が提供する CLI ツールで、ローカル環境で GAS を管理・デプロイできます。

本記事の管理方法のメリット

  1. すべての GAS プロジェクトを一元管理できます。
    以下のディレクトリ構成図のように、Project1/, Project2/ とディレクトリを分け、1つのリポジトリ内で複数の GAS プロジェクトをまとめて管理できます。

  2. バージョン管理が容易です。
    Git を使用して、変更履歴を追跡し、以前の状態に戻すことが可能です。

  3. GitHub Actions で CI/CD を自動化
    main ブランチに変更をプッシュするだけで、GitHub Actions により clasp push が実行され、GAS に自動反映されます。

ディレクトリ構成図

Github 上での複数 GAS プロジェクトを管理するため、以下のようなディレクトリ構成となります。

.
|–– Project1 # GAS プロジェクト
|   |–– .clasp.json # 対象の GAS ID を管理
|   |__ src
|       |–– appsscript.json # GAS のライブラリや設定を管理
|       |__ index.js # ソースコード # 任意のファイル名で可
|__ Project2
    |–– .clasp.json
    |__ src
        |–– appsscript.json
        |__ index.js

セットアップ手順：GitHub リポジトリとの連携

1️. Github 上でリモートリポジトリを作成し、ローカルにクローン

$ git clone <repository-url>
$ cd <repository-name>

2. README ファイルを作成

$ echo "# GAS Multi-Project Repository" > README.md

3. README を Git に追加してコミット

$ git add .
$ git commit -m "Add README"
$ git push origin main

4. Github の Repository secrets に CLASP_TOKEN を設定

Clasp を GitHub Actions 上で動作させるために、Google 認証情報を GitHub のシークレットとして設定します。

  1. clasp login を実行し、Google アカウントで認証を行います。
$ clasp login
  1. 認証が成功すると、以下のファイルが生成されます。
$ cat ~/.clasprc.json
  1. .clasprc.json 内の JSON の "token" の すべての値 をコピーし、以下の GitHub リポジトリの設定画面において CLASP_TOKEN という名前で保存します。
GitHub repository > Settings > Secrets and variables > Actions > New repository secret

これにより、GitHub Actions が clasp コマンドを実行する際に適切な認証情報を利用できるようになります。

(参考) 取得する範囲

.clasprc.json 以下の JSON の "token" の すべての値 をそのまま保存します。

~/.clasprc.json の内容

.clasprc.json
{
  "token": {
    "access_token": "xxx…",
    "refresh_token": "yyy…",
    "scope": "https://www.googleapis.com/auth/…",
    "token_type": "Bearer",
    "id_token": "zzz…"
    "expiry_date": 1700000000000
  },
  …
  ,
  "isLocalCreds": false
}

保存する値

Repository secrets に CLASP_TOKEN という名前で次の内容を保存する

{
  "token": {
    "access_token": "xxx…",
    "refresh_token": "yyy…",
    "scope": "https://www.googleapis.com/auth/…",
    "token_type": "Bearer",
    "id_token": "zzz…"
    "expiry_date": 1700000000000
  }
}

セットアップ手順：Clasp との連携

1️. Clasp のインストール

Clasp を使用するために、まず Node.js のパッケージマネージャ（npm）を使ってインストールします。

$ npm install -g @google/clasp

2️. Clasp の認証

Google アカウントと Clasp をリンクさせるために、以下のコマンドを実行します。

$ clasp login

これにより ~/.clasprc.json が生成されます。

3️. 新規 GAS プロジェクトの作成

  1. 新規ディレクトリを作成し、移動
$ mkdir Project1
$ cd Project1
$ mkdir src
  1. Clasp の設定ファイルを作成
$ clasp create --type standalone --rootDir ./src
$ mv src/.clasp.json .
  1. GAS の設定ファイルを追加
    src/appsscript.json に以下の内容を追加。
appsscript.json
{
  "timeZone": "Asia/Tokyo",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER"
}
  1. スクリプトの作成
    src/index.js を作成し、サンプルコードを記述します。
index.js
function helloWorld() {
  Logger.log("Hello, Google Apps Script!");
}
  1. GAS にプッシュ
$ cd Project1
$ clasp push

4️. 既存 GAS プロジェクトを追加

  1. 新しいディレクトリを作成し、移動
$ mkdir Project2
$ cd Project2
$ mkdir src
  1. GAS プロジェクトをクローン
$ clasp clone <GAS_PROJECT_ID> --rootDir ./src
$ mv src/.clasp.json .

GAS_PROJECT_ID は、Google Apps Script のエディタのURLから確認できます。

  1. 変更をプッシュ
$ cd Project2
$ clasp push

困ったときは

エラー等で困ったときはこちらを確認してみてください。
要確認ポイントは以下の3点です。

  • .clasp.json を各プロジェクト配下に配置されているか
  • .clasp.json ファイル内の GAS ID は適切か
  • clasp コマンドを実行する際は、各Project 配下のディレクトリに移動できているか
.
|–– Project1 # コマンド実行時にいる必要のあるディレクトリ
|   |–– .clasp.json # Project1配下に配置されていること/ファイル内の GAS ID を確認
|   |__ src
|       |–– appsscript.json
|       |__ index.js
|__ Project2 # コマンド実行時にいる必要のあるディレクトリ
    |–– .clasp.json # Project2配下に配置されていること/ファイル内の GAS ID を確認
    |__ src
        |–– appsscript.json
        |__ index.js

GitHub Actions を使った CI/CD の自動デプロイ設定

GitHub Actions を利用することで、main ブランチへプッシュした際に自動で GAS にデプロイできます。

ルートディレクトリ配下に ./.github/workflows/deploy.yml を作成し、以下の内容を記述します。

deploy.yml
name: clasp_push  # workflow の名前

on:
  push:
    branches:
      - main  # main ブランチにプッシュされたときに実行
  workflow_dispatch:  # 手動実行も可能にする

jobs:
  clasp_push:
    runs-on: ubuntu-latest  # 実行環境として Ubuntu を使用

    steps:
    - name: Checkout repository
      uses: actions/checkout@v4  # リポジトリの最新コードを取得

    - name: Set up Node.js
      uses: actions/setup-node@v4
      with:
        node-version: 20  # Node.js のバージョンを指定

    - name: Install dependencies
      
      # Clasp をグローバルインストール
      run: |
        npm install -g @google/clasp  
        
    - name: Authorize Clasp
      env:
        CLASP_TOKEN: ${{ secrets.CLASP_TOKEN }}  # GitHub Secrets からトークンを取得

      # 認証情報を保存
      run: |
        echo $CLASP_TOKEN > ~/.clasprc.json
    
    # 各ディレクトリをチェックし、`clasp push -f` を実行
    - name: Clasp push by directories
      
      # 以下の処理を実行
        # すべてのディレクトリを取得
        # Clasp の状態を確認し、プロジェクトならプッシュ または、強制プッシュ
        # 元のディレクトリに戻る
      run: |
        for dir in $(ls -d */); do
          cd $dir
          if clasp status; then  
            clasp push -f  
          fi
          cd ..
        done

この設定により、main ブランチへプッシュされた変更が自動で Google Apps Script にデプロイされます。

以上となります。

おわりに

本記事では、Clasp を活用して同一リポジトリで複数の GAS プロジェクトを管理する方法 を解説しました。
この記事を通じて、GAS の開発・デプロイを自動化し、より効率的にプロジェクトを管理できるようになったと感じてもらえたら幸いです。

株式会社ONE WEDGE

【Serverlessで世の中をもっと楽しく】
ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。
https://onewedge.co.jp/

GitHubで編集を提案

Discussion