google-calendar-template

インストール・使用方法ガイド

Google Calendar Template 拡張機能のインストールと使用方法を説明します。

---

📦 インストール手順

方法1: Chrome Web Store（推奨）

最も簡単な方法です。

1. Chrome Web Storeにアクセス
2. 「Chromeに追加」ボタンをクリック
3. 確認ダイアログで「拡張機能を追加」をクリック
4. ツールバーにアイコンが表示されます

方法2: 開発者モード（開発者向け）

ソースコードから直接インストールする方法です。

1. リポジトリのクローン（または ZIP ダウンロード）

git clone https://github.com/maru0014/google-calendar-template.git
cd google-calendar-template

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

npm install

3. ビルド

npm run build

ビルドが成功すると、dist/ フォルダが作成されます。

4. Chrome に拡張機能を読み込む

1. Chrome を開き、アドレスバーに chrome://extensions/ と入力
2. 右上の「デベロッパーモード」をONにする
3. 「パッケージ化されていない拡張機能を読み込む」をクリック
4. dist/ フォルダを選択

拡張機能が読み込まれ、ツールバーにアイコンが表示されます。

---

🎨 使い方

テンプレートの作成

1. Chrome ツールバーの拡張機能アイコンをクリック
2. 「+ 新規作成」ボタンをクリック
3. テンプレート情報を入力:
   • テンプレート名 *（必須）: 管理用の名前
   • タイトル *（必須）: 予定のタイトル
   • 説明: 予定の説明
   • 場所: 予定の場所
   • ゲスト: 招待するゲスト（カンマ区切り）
   • 期間: 予定の期間（分単位 - 例: 60分=1時間、90分=1.5時間）
4. 「保存」をクリック

テンプレートの編集

1. テンプレート一覧から「編集」ボタンをクリック
2. 内容を変更
3. 「保存」をクリック

テンプレートの削除

1. テンプレート一覧から「削除」ボタンをクリック
2. 確認ダイアログで「OK」をクリック

テンプレートの並び替え

1. テンプレート左側のハンドル（⋮⋮）をドラッグ
2. 希望の位置にドロップ
3. 自動的に保存されます

---

🚀 テンプレートの適用

Google Calendar で予定を作成

1. Google Calendar を開く
2. 任意の日時をクリック（またはダブルクリック）して予定作成画面を開く
3. 画面上部に表示される「テンプレート:」ドロップダウンからテンプレートを選択
4. テンプレートが自動的に適用されます

ポップアップウィンドウで適用

• 日付セルをシングルクリックすると、小さいポップアップウィンドウが表示されます
• 画面上部のテンプレート選択UIからテンプレートを選択
• 対応フィールド: タイトル、説明、場所、ゲスト、期間

フルページエディタで適用

• 日付セルをダブルクリックすると、フルページエディタが表示されます
• タイトルフィールドの上にテンプレート選択UIが表示されます
• テンプレートを選択すると、すべてのフィールドに値が設定されます
• 対応フィールド: タイトル、説明、場所、ゲスト、期間、終日、ゲスト権限

💡 ヒント

• 期間設定: 開始時刻から指定した分数後の終了時刻が自動計算されます
• 時刻プルダウン: 適用後にプルダウンが開いたままの場合がありますが、別のフィールドをクリックすれば自動で閉じます
• テンプレート選択: 適用後も選択が保持されるため、どのテンプレートを使用したか確認できます

---

🔧 変数機能

テンプレートには以下の変数を使用できます：

日付・時刻

• `` - 2025-10-24
• `` - 2025年10月24日
• `` - 2025年 10月 24日
• `` - 20:15
• `` - 2025/10/24 20:15:34
• `` - 金曜日
• `` - 2025
• `` - 10
• `` - 24

ユーザー情報

• `` - あなたのGoogleアカウントのメールアドレス
• `` - あなたのGoogleアカウントの名前

使用例

タイトル:

チームミーティング 

→ チームミーティング 2025年10月24日

説明:

作成者:  ()
日時: 年月日 

→

作成者: marumo (maru0014@gmail.com)
日時: 2025年10月24日 金曜日

---

🐛 トラブルシューティング

拡張機能が動作しない

1. Chrome を再起動してみてください
2. 拡張機能を再読み込みしてみてください
   • chrome://extensions/ で「更新」ボタンをクリック
3. コンソールエラーを確認してください
   • chrome://extensions/ で拡張機能の「詳細」→「エラー」を確認

テンプレート選択UIが表示されない

1. Google Calendar のページを更新してみてください
2. 予定作成画面を閉じて再度開くしてみてください
3. コンソールを確認してください（F12 → Console タブ）
   • 正常に動作している場合、以下のログが表示されます:

     📅 Google Calendar Template - Content Script Loaded
     🚀 Initializing Calendar Templates extension...
     👀 Watching for event editors...
     📝 Editor detected: popup (or fullpage)
     ✅ Template selector injected
     

テンプレートが適用されない

1. フィールドセレクタが正しいか確認
   • Google Calendar の UI が変更された可能性があります
   • src/constants/selectors.ts を参照してセレクタを確認
2. コンソールエラーを確認
   • テンプレート適用時のエラーメッセージを確認
3. 変数が正しく置換されているか確認
   • コンソールに変数置換のログが表示されます

---

🛠️ 開発モード

開発中は npm run dev でViteの開発サーバーを起動できます：

npm run dev

ファイルを変更すると自動的にリビルドされます。ただし、Chromeに反映するには拡張機能の「更新」ボタンをクリックする必要があります。

---

📚 参考資料

• README.md: プロジェクト概要と開発状況
• manifest.json: 拡張機能の設定
• src/: ソースコード
  • constants/selectors.ts: GoogleカレンダーのDOMセレクタ定義
  • utils/: ユーティリティ関数
  • types/: TypeScript型定義

---

💡 よくある質問

Q: テンプレートはどこに保存されますか？

A: Chrome の Local Storage に保存されます。ブラウザのデータをクリアしない限り、永続的に保存されます。

Q: 複数のデバイスで同期できますか？

A: 現在は Local Storage を使用しているため、同期機能はありません。将来的に Sync Storage に対応する予定です。

Q: テンプレートのインポート/エクスポートはできますか？

A: Phase 1 では未対応です。Phase 2 以降で実装予定です。

Q: 予定の時間を指定できますか？

A: 「期間」を分単位（1分刻み）で指定できます。開始時間の指定は Google Calendar の UI で行ってください。

---

🙋 サポート

問題が解決しない場合は、以下の情報を添えてお問い合わせください：

• Chrome バージョン
• 拡張機能バージョン
• エラーメッセージ（コンソールのログ）
• 再現手順

---

Google Calendar Template をお楽しみください！ 🎉

This site is open source. Improve this page.