marketing-shibata50/auto-project-management

柴田貴司 116bd7ac6f docs: Update installation and environment setup instructions

- Revised .env.example to include additional optional settings for Google Drive, Discord, and Todoist.
- Enhanced INSTALL.md with detailed setup steps, including clasp deployment instructions and troubleshooting tips.
- Updated README.md to streamline quick start guide and clarify environment variable setup.

2026-01-01 23:56:37 +09:00

17 KiB

Raw Permalink Blame History

インストールガイド - 完全セットアップ手順

クイックスタート: 基本的な使い方は README.md を参照してください。このガイドは詳細なセットアップ手順を提供します。

Claude Code対話型Ganttチャート自動生成システムの完全セットアップ手順を説明します。

📋 前提条件

Node.js: v20.x以上（node --versionで確認）
npm: v10.x以上（npm --versionで確認）
Claude Code CLI: インストール済み
Google Cloud Platform: アカウント作成済み
Google Apps Script: 基本的な知識（推奨）

🚀 セットアップ手順

1. リポジトリのクローン

git clone https://github.com/{your-username}/claude-gantt-chart.git
cd claude-gantt-chart

2. 依存関係のインストール

npm install

3. 環境変数の設定

.env.exampleをコピーして.envを作成:

cp .env.example .env

.envファイルを編集:

# Google Drive設定
GOOGLE_DRIVE_FOLDER_ID=your_folder_id_here
GOOGLE_CLIENT_ID=your_client_id_here
GOOGLE_CLIENT_SECRET=your_client_secret_here
GOOGLE_REDIRECT_URI=http://localhost:19204/oauth2callback

# スプレッドシートID（Discord通知用、オプション）
GOOGLE_SPREADSHEET_ID=your_spreadsheet_id_here

# Discord通知設定（オプション）
DISCORD_WEBHOOK_URL=your_webhook_url_here

# Todoist API設定（オプション）
TODOIST_API_KEY=your_todoist_api_token_here

4. Google Cloud Platformの設定

4.1 プロジェクト作成

Google Cloud Consoleにアクセス
新規プロジェクトを作成

4.2 Google Drive API有効化

「APIとサービス」→「ライブラリ」
「Google Drive API」を検索して有効化
- URL: https://console.cloud.google.com/apis/library/drive.googleapis.com

4.3 OAuth 2.0認証情報の作成

「APIとサービス」→「認証情報」
「認証情報を作成」→「OAuth 2.0 クライアントID」
アプリケーションの種類: デスクトップアプリ
リダイレクトURI: http://localhost:19204/oauth2callback
クライアントIDとシークレットを.envに設定

4.4 Google Driveフォルダ作成

Google Driveで新規フォルダを作成（例: Gantt-JSON-Files）
フォルダURLからフォルダIDを取得:
- URL形式: https://drive.google.com/drive/folders/{FOLDER_ID}
- {FOLDER_ID}の部分を.envのGOOGLE_DRIVE_FOLDER_IDに設定

5. Google OAuth認証

初回認証トークンを取得:

npm run gantt:auth

ブラウザが開き、Googleアカウントでログイン・認証します。認証完了後、.google-token.jsonが自動生成されます（gitignoreに含まれます）。

6. TypeScriptのビルド

npm run build

7. Google Apps Scriptの設定

7.1 スプレッドシート作成

Google Sheetsで新規スプレッドシートを作成
スプレッドシートのURLからIDを取得:
- URL形式: https://docs.google.com/spreadsheets/d/{SPREADSHEET_ID}/edit
- {SPREADSHEET_ID}を.envのGOOGLE_SPREADSHEET_IDに設定（オプション）

7.2 Apps Scriptプロジェクト作成

スプレッドシートを開く
「拡張機能」→「Apps Script」
新規プロジェクトが作成されます

7.3 GASコードのコピー

gas/フォルダ内の全ファイルをApps Scriptエディタにコピー:

Config.gs
SheetManager.gs
GanttRenderer.gs
Code.gs

7.4 Config.gsの設定

Config.gsを開き、以下を設定:

const CONFIG = {
  DRIVE_FOLDER_ID: 'あなたのフォルダID',  // .envと同じ値
  DISCORD_WEBHOOK_URL: 'あなたのWebhook URL',  // オプション
  TODOIST_API_KEY: 'あなたのTodoist APIトークン',  // オプション
  // ...その他の設定
};

7.5 時間トリガーの設定

Apps Scriptエディタで「トリガー」アイコン（⏰）をクリック
「トリガーを追加」をクリック
以下のように設定:
- 実行する関数: checkForNewJsonFiles
- イベントのソース: 時間主導型
- 時間ベースのトリガーのタイプ: 分ベースのタイマー
- 時間の間隔: 1分おき
「保存」をクリック

8. Todoist統合（オプション）

Todoistと連携する場合:

8.1 Todoist APIトークン取得

Todoist設定にアクセス
「開発者」タブ→「APIトークン」をコピー
.envのTODOIST_API_KEYに設定
Config.gsのTODOIST_API_KEYにも設定

8.2 Todoistトリガー設定

Apps Scriptで以下のトリガーを追加:

Todoistタスク同期:
- 実行する関数: syncTodoistTasks
- イベントのソース: 時間主導型
- 時間の間隔: 30分おき
期日切れタスク通知:
- 実行する関数: sendOverdueTasksNotification
- イベントのソース: 時間主導型
- 時間ベースのトリガーのタイプ: 日タイマー
- 時刻: 午前9時～10時

9. Discord通知設定（オプション）

Discord通知を有効にする場合:

Discordサーバーで「サーバー設定」→「連携サービス」→「ウェブフック」
新しいウェブフックを作成
ウェブフックURLをコピー
.envのDISCORD_WEBHOOK_URLに設定
Config.gsのDISCORD_WEBHOOK_URLにも設定

10. clasp を使った自動デプロイ（オプション）

手動でApps Scriptエディタにコードをコピーする代わりに、claspを使ってコマンドラインから自動デプロイできます。

10.1. claspのインストール

npm install -g @google/clasp

10.2. Google認証

clasp login

ブラウザが開くので、Googleアカウントでログインして認証します。

10.3. 新規GASプロジェクト作成

# スプレッドシート紐付け型のプロジェクトを作成
clasp create --title "Gantt Chart Generator" --type sheets

または、既存のGASプロジェクトを使用する場合:

# Apps Scriptエディタで「プロジェクトの設定」からスクリプトIDを取得
clasp clone <スクリプトID>

10.4. .clasp.json 設定

プロジェクトルートに.clasp.jsonを作成:

{
  "scriptId": "your-script-id-here",
  "rootDir": "./gas"
}

⚠️ 注意: .clasp.jsonはスクリプトIDを含むため、.gitignoreで除外されています。

10.5. コードをプッシュ

# gas/ディレクトリ内のコードをGASプロジェクトにアップロード
clasp push

10.6. ブラウザで開く

# Apps Scriptエディタをブラウザで開く
clasp open

10.7. トリガー設定

claspでコードをプッシュした後、Apps Scriptエディタで時間トリガーを設定してください（上記のセクション7を参照）。

clasp コマンド一覧

コマンド	説明
`clasp push`	ローカルコード → GASにアップロード
`clasp pull`	GASコード → ローカルにダウンロード
`clasp open`	ブラウザでGASエディタを開く
`clasp logs`	実行ログを表示
`clasp deploy`	デプロイメント作成

✅ 動作確認

1. Claude Codeで動作確認

# プロジェクトディレクトリで
claude code

Claude Codeのプロンプトで:

/gantt

スキルが正常に認識されれば成功です。

2. JSONファイル生成テスト

/ganttコマンドで対話形式でプロジェクト情報を入力
完了後、以下を実行:

npm run gantt:save

output/フォルダにJSONファイルが生成されることを確認
Google Driveにアップロードされることを確認

3. Ganttチャート生成テスト

JSONファイルがGoogle Driveにアップロードされた後、1分以内に自動処理される
スプレッドシートに以下のシートが作成されることを確認:
- プロジェクト一覧
- 全プロジェクトタスク
- 期日切れタスク
- 個別Ganttチャート

🛠️ トラブルシューティング

セットアップ関連

Q1. `npm install` でエラーが発生する

A: Node.jsのバージョンを確認してください。

node --version  # v20.x.x 以上を確認
npm --version   # v10.x.x 以上を確認

古いバージョンの場合は Node.js公式サイトから最新LTS版をインストールしてください。

Q2. OAuth認証がうまくいかない

A: 以下を段階的に確認:

Google Drive APIが有効化されているか:
- Google Cloud Console で確認
- 「有効」と表示されていればOK
.envファイルの設定が正確か:
```
cat .env | grep GOOGLE_  # 設定値を確認
```
- クライアントID、シークレットにスペースや改行が含まれていないか確認
- リダイレクトURIが正確に http://localhost:19204/oauth2callback か確認
OAuth同意画面が設定されているか:
- Google Cloud Consoleで「OAuth同意画面」を確認
- テストユーザーに自分のGoogleアカウントが追加されているか確認

認証トークンを再取得:

rm .google-token.json  # 古いトークンを削除
npm run gantt:auth     # 再認証

Q3. JSONファイルが生成されない

A: 以下の順で確認:

TypeScriptがビルドされているか:

npm run build
# dist/ フォルダが生成されることを確認
ls -la dist/

ヘルパースクリプトが実行されているか:
```
npm run gantt:save
```
エラーメッセージが表示される場合は内容を確認

outputs/ フォルダの権限:

ls -la outputs/  # フォルダの存在と権限を確認
mkdir -p outputs # 存在しない場合は作成

Q4. Google Driveアップロードがスキップされる

A: 以下を確認:

.envにGOOGLE_DRIVE_FOLDER_IDが設定されているか:
```
grep GOOGLE_DRIVE_FOLDER_ID .env
```
認証トークンが存在するか:
```
ls -la .google-token.json
```
存在しない場合は npm run gantt:auth を実行
フォルダIDが正しいか:
- Google DriveでフォルダのURLを確認
- URL形式: https://drive.google.com/drive/folders/{FOLDER_ID}
- {FOLDER_ID} 部分が .env と一致しているか確認

GAS関連

Q5. Ganttチャートが自動生成されない

A: 以下を段階的に確認:

時間トリガーが正しく設定されているか:
- Apps Scriptエディタで「トリガー」アイコン（⏰）をクリック
- checkForNewJsonFiles 関数のトリガーが存在するか確認
- 間隔が「1分おき」に設定されているか確認

Config.gsのDRIVE_FOLDER_IDが正しいか:

// Config.gs を開いて確認
DRIVE_FOLDER_ID: 'あなたのフォルダID',  // .envと同じ値

JSONファイルが正しいフォルダにアップロードされているか:
- Google Driveで該当フォルダを開く
- JSONファイルが存在するか確認
- ファイル名が processed_ で始まっていないか確認
GASの実行ログを確認:
- Apps Scriptエディタで「実行ログ」を開く
- checkForNewJsonFiles の実行ログを確認
- エラーメッセージがあれば内容を確認
手動実行でテスト:
- Apps Scriptエディタで testGenerateGantt() 関数を実行
- エラーが出る場合は実行ログで詳細を確認

Q6. 処理済みファイルが増えすぎた場合

A: 処理済みファイル（processed_ で始まるファイル）は手動で削除またはアーカイブできます:

Google Driveで該当フォルダを開く
processed_ で始まるファイルを選択（複数選択可能）
別のフォルダに移動するか削除する

推奨: 定期的にアーカイブフォルダを作成して移動することで、メインフォルダを整理できます。

Q7. 特定のJSONファイルだけ処理したい

A: 手動実行を使用:

Google DriveでJSONファイルを右クリック → 「リンクを取得」
URLからファイルIDを取得（/d/ と /view の間の文字列）
Apps Scriptエディタで Code.gs を開く
processJsonFile('ファイルID') を直接実行

Todoist統合関連

Q8. Todoistタスクが同期されない

A: 以下を確認:

Config.gsのTODOIST_API_KEYが正しく設定されているか:
- Todoist設定でAPIトークンを確認
- Config.gsに正しく貼り付けられているか確認
- APIキーにスペースや改行が含まれていないか確認
トリガーが正しく設定されているか:
- Apps Scriptエディタで「トリガー」アイコン（⏰）をクリック
- syncTodoistTasks 関数のトリガーが存在するか確認
手動実行でテスト:
```
// Apps Scriptエディタで実行
testTodoistIntegration()
```
実行ログでエラーメッセージを確認
Inboxプロジェクトが存在するか:
- Todoistアプリで「Inbox」プロジェクトが存在するか確認
- プロジェクト名が正確に「Inbox」であることを確認（大文字小文字区別）

API接続をテスト:

// Apps Scriptエディタで以下を実行
function testTodoistAPI() {
  const url = 'https://api.todoist.com/rest/v2/projects';
  const options = {
    'method': 'get',
    'headers': {
      'Authorization': 'Bearer ' + CONFIG.TODOIST_API_KEY
    }
  };
  const response = UrlFetchApp.fetch(url, options);
  Logger.log(response.getContentText());
}

Discord通知関連

Q9. 期日切れタスク通知が送信されない

A: 以下を確認:

Discord Webhook URLが正しく設定されているか:
- Config.gsのDISCORD_WEBHOOK_URLが正しいか確認
- URLが https://discord.com/api/webhooks/... の形式か確認
期日切れタスクが存在するか:
- 「期日切れタスク」シートを開く
- 実際に期日切れタスクが存在するか確認
トリガーが正しく設定されているか:
- sendOverdueTasksNotification 関数の日タイマーが設定されているか確認

手動実行でテスト:

// Apps Scriptエディタで実行
testOverdueTasksFeature()

Webhook URLをテスト:

// Apps Scriptエディタで以下を実行
function testDiscordWebhook() {
  const payload = {
    'content': 'テスト通知: GASからの接続確認'
  };
  const options = {
    'method': 'post',
    'contentType': 'application/json',
    'payload': JSON.stringify(payload)
  };
  UrlFetchApp.fetch(CONFIG.DISCORD_WEBHOOK_URL, options);
}

clasp関連

Q10. claspコマンドがエラーになる

A: 以下を確認:

claspがインストールされているか:
```
clasp --version
```
エラーが出る場合は再インストール:
```
npm install -g @google/clasp
```
Google認証が完了しているか:
```
clasp login
```
.clasp.jsonが正しく設定されているか:
```
cat .clasp.json
```
scriptIdとrootDirが正しく設定されているか確認
スクリプトIDが正しいか:
- Apps Scriptエディタで「プロジェクトの設定」を開く
- スクリプトIDが.clasp.jsonと一致しているか確認

📚 関連ドキュメント

README.md - プロジェクト概要、クイックスタート、基本的な使い方
gas/README.md - GAS側の詳細ドキュメント、API仕様
問題が発生した場合 - このページのトラブルシューティングセクションを参照

🎯 セットアップ完了後

セットアップが完了したら、README.md の「使い方」セクションを参照して、実際にプロジェクトを作成してみましょう。

# Claude Codeを起動
claude code

# 対話形式でプロジェクト作成
> /gantt

📝 ライセンス

MIT License

17 KiB Raw Permalink Blame History Unescape Escape

インストールガイド - 完全セットアップ手順

📋 前提条件

🚀 セットアップ手順

1. リポジトリのクローン

2. 依存関係のインストール

3. 環境変数の設定

4. Google Cloud Platformの設定

4.1 プロジェクト作成

4.2 Google Drive API有効化

4.3 OAuth 2.0認証情報の作成

4.4 Google Driveフォルダ作成

5. Google OAuth認証

6. TypeScriptのビルド

7. Google Apps Scriptの設定

7.1 スプレッドシート作成

7.2 Apps Scriptプロジェクト作成

7.3 GASコードのコピー

7.4 Config.gsの設定

7.5 時間トリガーの設定

8. Todoist統合（オプション）

8.1 Todoist APIトークン取得

8.2 Todoistトリガー設定

9. Discord通知設定（オプション）

10. clasp を使った自動デプロイ（オプション）

10.1. claspのインストール

10.2. Google認証

10.3. 新規GASプロジェクト作成

10.4. .clasp.json 設定

10.5. コードをプッシュ

10.6. ブラウザで開く

10.7. トリガー設定

clasp コマンド一覧

✅ 動作確認

1. Claude Codeで動作確認

2. JSONファイル生成テスト

3. Ganttチャート生成テスト

🛠️ トラブルシューティング

セットアップ関連

Q1. npm install でエラーが発生する

Q2. OAuth認証がうまくいかない

Q3. JSONファイルが生成されない

Q4. Google Driveアップロードがスキップされる

GAS関連

Q5. Ganttチャートが自動生成されない

Q6. 処理済みファイルが増えすぎた場合

Q7. 特定のJSONファイルだけ処理したい

Todoist統合関連

Q8. Todoistタスクが同期されない

Discord通知関連

Q9. 期日切れタスク通知が送信されない

clasp関連

Q10. claspコマンドがエラーになる

📚 関連ドキュメント

🎯 セットアップ完了後

📝 ライセンス

17 KiB

Raw Permalink Blame History

Q1. `npm install` でエラーが発生する