n8nとChrome拡張で地味に面倒くさいGoogleカレンダー登録を楽チンにした話

Last updated at 2025-01-25Posted at 2025-01-24

はじめに

世の中って地味に面倒臭いことが多いですよね〜〜

Googleカレンダーのイベント登録はその一つだと思います。
予定が決まったら、Googleカレンダーを開いて、タイトルと日時をぽちぽち入力して登録しなければなりません。

私は大のめんどくさがり屋なので、その作業を怠って予定をブッキングさせてしまうことも多々あります...。

この記事では、そんな面倒臭い作業を「n8n」というワークフロー自動化ツールとChrome拡張を使って楽チンに行えるツールを開発した話を書いていきます！

n8nを使ってみたい方もぜひ読んでみてください！

作ったもの

脱出ゲームの予約をカレンダーに登録する例を紹介します！

Webサイトに表示されている予約日時を選択して、ショートカットキー（Cmd + Shift + G）を押すと、、、

以下のようにGoogleカレンダーに登録されます！

また、柔軟な入力に対応できるため、以下のようなGoogleフォームや、

Gmailの予約完了画面などでも使えます！

どうなってんの？

Chrome拡張部分

割とシンプルです。以下の処理を行なっています。

ショートカットを検知
文字選択がされている部分を含むhtml要素を検出
n8nで設定しているエンドポイントに送信

リポジトリはこちらになります。

拡張機能として公開はしていないので、もし使いたい場合は開発者モードで試してみてください。
（方法はREADME参照）

n8n部分

ワークフローは以下のようになっています。

それぞれのノードについて簡単に解説すると、

①Webhookノード：Chrome拡張から送信されたデータをPOSTメソッドで受け取ります

②OpenAI Message Modelノード：html要素からカレンダーイベントをJSON形式で抽出します

ここでLLMを使っているため、柔軟な入力に対応できます！

OpenAIで用いたプロンプト詳細

以下のHTMLから、フォームで選択されているイベント情報を抽出してください。未選択の情報は結果に含めないでください。

### 出力フォーマット
出力はJSON形式で、各イベントを以下のフィールドに基づいて記載してください。
- `start`: イベントの開始日時（YYYY-MM-DD HH:MM:SS形式）。
- `end`: イベントの終了日時（YYYY-MM-DD HH:MM:SS形式）。
- `title`: イベントのタイトル（可能な場合）。
- `additional_info`: フォーム内で特定のイベントに関連する補足情報（該当する場合）。

### 特記事項
1. フォームで「選択済み」の情報のみを出力してください。未選択の情報やデフォルト表示は結果に含めないでください。
2. 情報が不足している場合は、`null`を指定してください。

### 出力例
以下は、選択された情報に基づく例です：

```json
[
  {
    "start": "2025-01-19 13:00:00",
    "end": "2025-01-19 16:00:00",
    "title": "イベント1",
    "additional_info": null
  },
  {
    "start": "2025-01-28 13:00:00",
    "end": "2025-01-28 16:00:00",
    "title": "イベント2",
    "additional_info": "オンライン開催"
  }
]
## 入力HTML
{{html_body}}

## 注意事項
- フォームの選択状態を考慮し、選択されていない情報は除外してください。
- JSON形式以外の出力を含めないでください。
- 情報が不足している場合やフォーマットが異なる場合でも柔軟に処理してください。
- 終了時間がわからない場合は、開始時間から1時間後にしてください
- 可能な限り、予定をこなすのに必要だと思われる追加情報や、選択されたテキストの情報をadditinal_infoに入れるようにお願いします。予約番号や必要なURLや持ち物や場所などです。記述内容を省略しないでください。記述がなければ大丈夫です。

③Codeノード：OpenAIが出力するのは以下のようなJSONであり、イベントの情報部分が構造化されていないため、JavaScriptで整形する必要があります。

コーディング初心者の方は難易度が高いと感じるかもしれませんが、「Ask AI」ボタンを押すと、どのようなコードを書いて欲しいかAIに命令するだけで、コードを生成してくれます！（もちろん別の生成AIを用いてもいい！）

OpenAI Message Modelから出力されるJSON

[
    {
        "index": 0,
        "message": {
            "role": "assistant",
            "content": "```json\n[\n {\n "start": "2025-01-25 11:40:00",\n "end": "2025-01-25 12:40:00",\n "title": "海賊王が遺した部屋からの脱出",\n "additional_info": "null"\n }\n]\n```",
            "refusal": null
        },
        "logprobs": null,
        "finish_reason": "stop"
    }
]