Google Spread Sheet Lab for Vite

Google Spread Sheet に Vite + React + TypeScript から書き込みを行うテストファイルです。(for Suiran Sell)

使い方

1. Google Spread Sheet の準備

1. Google Spread Sheet で適当なファイルを作成
2. アクセス権限を"リンクを知っている全員"、"編集者"に変更¹
3. ID をメモしておく
   (ID とは、リンク https://docs.google.com/spreadsheets/d/<ID>/edit?gid=0#gid=0 の <ID> の部分
   例: https://docs.google.com/spreadsheets/d/abcdefghijklmn/edit?gid=0#gid=0 では abcdefghijklmn)

2. Google Cloud の準備

1. 18歳以上のアカウントを準備 / Google Cloud にアクセス
2. 新しいプロジェクトを作成
3. API とサービスから API とサービスを有効にするボタンを押し、Google Sheets API を追加
4. また、サイドバーの API とサービスから認証情報を開く
5. API キーを作成し、そのキーをメモしておく
6. OAuth 2.0 クライアントを作成し、承認済みの JavaScript、リダイレクト URI は http://localhost:5173 とする (実環境では https://sell.suiranfes.blue)
7. OAuth 2.0 クライアント の クライアント ID (メアド) をメモする

3. プログラムの動作

1. npm と git をインストール
2. このリポジトリをクローンする
3. .env.local ファイルを作成し、先ほどメモした情報を利用し、入力する

   # スプレッドシートの URL に含まれる文字列
   VITE_GOOGLE_SPREADSHEET_ID=シートのID
   # OAuth 2.0 クライアント ID (**.apps.googleusercontent.com)
   VITE_GOOGLE_CLIENT_ID=メアド
   # API キー
   VITE_GOOGLE_API_KEY=キー

4. npm i
5. npm run start
6. これで、表示される下のボタンを押すと、Sheet1 の A1-A2 に Hello World と表示されます。(これにより、書き込み実験成功です)

注意

Google Spread Sheets API の制限 (公式ページより引用)

読み取りリクエスト
1プロジェクト、1分あたり	300
1プロジェクト、1ユーザー、1分あたり	60

書き込みリクエスト
1プロジェクト、1分あたり	300
1プロジェクト、1ユーザー、1分あたり	60

参考

• GSheetLab | SUIRANFES

Footnotes

1. 後述する、"作成したアカウントのメールアドレス (***@***.***.gserviceaccount.com)"を追加し、そのアカウントのみに編集権限を付与するのでも、動く可能性あり。 ↩