Discord Post Manager

ブログ記事をDiscordコミュニティに投稿するための管理画面です。

機能概要

• 📝 ブログ記事の一覧表示
• 🤖 AIによるDiscord投稿文の自動生成
• 📤 Discord Webhookへの投稿
• ✅ 投稿状況の管理
• 🔍 フィルタリング機能（全て/未投稿/投稿済み）

セットアップ

1. 環境変数の設定

.env ファイルに以下の環境変数を追加してください：

# Discord Webhook URL（必須）
DISCORD_WEBHOOK_URL=https://discord.com/api/webhooks/YOUR_WEBHOOK_ID/YOUR_WEBHOOK_TOKEN

# Adminページのアクセストークン（本番環境での認証用）
ADMIN_TOKEN=your-secret-admin-token

# OpenAI API Key（AI機能を使う場合、任意）
OPENAI_API_KEY=your-openai-api-key

2. Discord Webhookの取得

1. Discordサーバーで投稿したいチャンネルを選択
2. チャンネル設定 → 連携サービス → Webhook
3. 「新しいWebhookを作成」をクリック
4. 名前を設定し、Webhook URLをコピーして .env に設定

3. アクセス方法

開発環境

http://localhost:4321/admin/discord

本番環境

https://your-domain.com/admin/discord

本番環境では ADMIN_TOKEN による認証が必要です。

使い方

1. 記事一覧の確認

   • 管理画面にアクセスすると、ブログ記事の一覧が表示されます
   • 下書き記事は除外され、公開記事のみ表示されます

2. AIコメントの生成

   • 記事カードの「生成」ボタンをクリック
   • 記事のタイトル、説明、カテゴリー、タグから投稿文が自動生成されます
   • テンプレートベースで複数のパターンからランダムに生成

3. コメントの編集

   • 生成されたコメントは手動で編集可能
   • ハッシュタグや絵文字を自由に調整

4. Discordへの投稿

   • 「投稿」ボタンをクリックしてDiscordに送信
   • 確認ダイアログが表示されます
   • 投稿が完了するとカードがグレーアウトされ「投稿済み」と表示

5. フィルタリング

   • 「全て」「未投稿」「投稿済み」で表示を切り替え可能
   • 投稿状況の管理に便利

技術仕様

フロントエンド

• Framework: Astro 5 (Hybrid)
• UI: React + Tailwind CSS + DaisyUI
• Icons: Lucide React

バックエンド

• API Routes: Astro API Routes
• 認証: 簡易的なBearer Token認証（本番環境のみ）

APIエンドポイント

POST /api/discord/generate-comment

記事情報からDiscord投稿文を生成します。

Request:

{
  "title": "記事タイトル",
  "description": "記事説明",
  "category": "カテゴリー名",
  "tags": ["タグ1", "タグ2"]
}

Response:

{
  "comment": "生成された投稿文"
}

POST /api/discord/send

Discord Webhookに投稿を送信します。

Request:

{
  "content": "投稿本文",
  "embed": {
    "title": "記事タイトル",
    "description": "記事説明",
    "url": "記事URL",
    "color": 0x3B82F6,
    "timestamp": "2025-01-11T..."
  }
}

Response:

{
  "success": true,
  "messageId": "discord_message_id",
  "message": "Discordへの投稿が完了しました"
}

カスタマイズ

AIコメント生成の改善

現在はテンプレートベースの生成ですが、OpenAI APIを設定することでより高度な生成が可能です。

src/pages/api/discord/generate-comment.ts を修正してOpenAI APIを有効化してください。

デザインの調整

• DaisyUIのテーマカラーでサイト全体と統一
• カテゴリーカラーは getCategoryColor 関数で調整可能
• カードデザインは既存の ProductCard コンポーネントのスタイルを踏襲

セキュリティ

• Adminページは本番環境で認証が必要
• APIキーはサーバーサイドでのみ使用
• Webhook URLは環境変数に保存

トラブルシューティング

投稿が失敗する場合

1. Discord Webhook URLが正しいか確認
2. Webhookの権限設定を確認
3. 記事のURLが正しいか確認

AI生成がうまくいかない場合

1. 記事データが正しく取得できているか確認
2. テンプレートの内容を調整

アクセスできない場合

1. 開発環境では認証不要
2. 本番環境では ADMIN_TOKEN の設定とAuthorizationヘッダーが必要