Inbox Zero AI MCP

🚀 翻訳結果

🚀 クイックスタートガイド

プロジェクトの設定

1. 新しい Next.js プロジェクトの作成

以下のコマンドを使用して、全く新しい Next.js プロジェクトを作成します：

npx create-next-app next-door && cd next-door

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

プロジェクトのルートディレクトリで以下のコマンドを実行し、必要な依存関係をインストールします：

npm install nextjs googleapis @google-cloud/pubsub express cors dotenv

3. 環境変数の設定

.env ファイルを作成し、以下の内容を追加します（プレースホルダーを実際の値に置き換えてください）：

GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secret
GOOGLE_PUBSUB_PROJECT_ID=your_project_id
GOOGLE_PUBSUB_TOPIC_NAME=your_topic_name
GOOGLE_PUBSUB_VERIFICATION_TOKEN=your_verification_token

4. Next.js 環境変数の設定

next.config.js ファイルを変更して、環境変数が本番環境でも使用できるようにします：

/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
    GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
    GOOGLE_PUBSUB_PROJECT_ID: process.env.GOOGLE_PUBSUB_PROJECT_ID,
    GOOGLE_PUBSUB_TOPIC_NAME: process.env.GOOGLE_PUBSUB_TOPIC_NAME,
    GOOGLE_PUBSUB_VERIFICATION_TOKEN: process.env.GOOGLE_PUBSUB_VERIFICATION_TOKEN
  }
};

module.exports = nextConfig;

Gmail プッシュ通知の実装

1. PubSub トピックとサブスクリプションの作成

Google Cloud Console で、PubSub API に移動し、新しいトピックを作成します。例えば、inbox-zero-updates という名前を付けることができます。

次に、このトピックからの通知を受け取るためのサブスクリプションを作成します。開発環境では、ngrok を使用してコールバック URL を処理できます：

ngrok http --domain=your-domain.ngrok-free.app 3000

その後、PubSub コンソールで、サブスクリプションに以下の属性を設定します：

• コールバック URL: https://your-domain.ngrok-free.app/api/google/webhook?token=TOKEN
• 検証トークン: .env ファイルで設定した GOOGLE_PUBSUB_VERIFICATION_TOKEN
• プッシュプロトコル: HTTP を選択

2. Webhook 処理の実装

Next.js アプリで、Google のプッシュ通知を処理する API ルートを作成します：

import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req, res) {
  if (req.method !== 'POST') {
    res.status(405).json({ message: 'Method not allowed' });
    return;
  }

  // トークンを検証し、プッシュ通知を処理する
  const verificationToken = req.query.token;
  if (!verificationToken || verificationToken !== process.env.GOOGLE_PUBSUB_VERIFICATION_TOKEN) {
    res.status(401).json({ message: 'Unauthorized' });
    return;
  }

  // 実際のプッシュデータを処理する
  const data = JSON.parse(req.body);
  console.log('Received email notification:', data);

  res.json({ message: 'Notification processed successfully' });
}

3. メール監視の設定

アプリがリアルタイムで電子メール通知を受け取ることができるようにするには、定期的に Gmail API の変更を確認する必要があります。このために、cron ジョブを設定して、一定時間ごと（例えば 5 分ごと）に /api/google/watch/all エンドポイントを呼び出すことができます。

cron ジョブの設定

プロジェクトのルートディレクトリに crons.json ファイルを作成し、以下の内容を追加します：

{
  "crons": [
    {
      "path": "/api/google/watch/all",
      "schedule": "0 */5 * * *"
    }
  ]
}

Upstash を使用して cron ジョブを実行するには、Upstash ドキュメント に従って設定することができます。

完全なコード例

1. pages/_app.tsx

import { NextApp } from 'next/app';
import type { AppProps } from 'next/app';

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <NextApp>
      <Component {...pageProps} />
    </NextApp>
  );
}

2. pages/index.tsx

import { useState, useEffect } from 'react';

export default function Home() {
  const [emailNotifications, setEmailNotifications] = useState([]);

  useEffect(() => {
    // 定期的に Gmail API の変更を確認する
    const interval = setInterval(() => {
      fetch('/api/google/watch/all')
        .then((response) => response.json())
        .then((data) => setEmailNotifications(data))
        .catch((error) => console.error('Error:', error));
    }, 5000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <h1>リアルタイム電子メール通知</h1>
      <ul>
        {emailNotifications.map((notification, index) => (
          <li key={index} >{notification.subject}</li>
        ))}
      </ul>
    </div>
  );
}

3. api/google/watch/all.ts

import type { NextApiRequest, NextApiResponse } from 'next';
import { google } from 'googleapis';

export default function handler(req, res) {
  const oauth2Client = new google.auth.OAuth2({
    client_id: process.env.GOOGLE_CLIENT_ID,
    client_secret: process.env.GOOGLE_CLIENT_SECRET
  });
}