Difyとn8nの連携プレゼンテーション

Difyとn8nの統合による業務自動化の可能性を紹介するインタラクティブなプレゼンテーションシステムです。

概要

このプロジェクトは、DifyのAI機能とn8nのワークフロー自動化機能を組み合わせた業務効率化ソリューションについての包括的なプレゼンテーションを提供します。

特徴

• 📱 レスポンシブデザイン: 様々な画面サイズに対応
• ⌨️ キーボードナビゲーション: 矢印キー、数字キー、フルスクリーンモード
• 🖱️ マウス操作: サムネイル、ナビゲーションボタンでの直感的操作
• 📊 インタラクティブチャート: D3.jsによるデータ可視化
• 🎯 9つのスライド: プロジェクト概要から導入ステップまで

クイックスタート

# リポジトリをクローン
git clone [repository-url]
cd dify_and_n8n

# ブラウザでプレゼンテーションを開く
open slides.html

ファイル構成

├── slides.html           # メインプレゼンテーションファイル
├── original_parts/       # 元となったHTMLスライド（アーカイブ）
│   ├── page_1.html      # Skywork.aiで生成
│   ├── page_2.html      # Skywork.aiで生成
│   └── ...              # 全9ページ Skywork.aiで生成
├── TaskIntakeBot.yml     # Difyからエクスポートしたアプリ定義
├── TaskToSheet.json      # N8nからエクスポートしたワークフロー
├── CLAUDE.md            # 開発者向け詳細ドキュメント
└── README.md            # このファイル

操作方法

キーボードショートカット

• ←/→: 前/次のスライド
• 1-9: 特定のスライドにジャンプ
• F: フルスクリーンモード切替

マウス操作

• 右側サムネイル: クリックでスライドジャンプ
• 下部ナビゲーション: 前後ボタンとスライド番号表示

スライド内容

1. タイトル: プロジェクト概要
2. 比較: Difyとn8nの特徴と役割
3. 連携例: 具体的なタスク自動化フロー
4. 技術詳細: 連携メカニズム
5. 効率向上: 業務時間削減の効果（チャート付き）
6. カスタマイズ性: 柔軟な設定とカスタマイズ
7. スケーラビリティ: 拡張性の利点
8. 活用シナリオ: その他の使用例
9. 導入ステップ: 実装への次のアクション

技術スタック

• HTML5/CSS3: 基本構造とスタイリング
• Tailwind CSS: ユーティリティファーストCSS
• JavaScript (ES6+): スライドナビゲーションとインタラクション
• D3.js v7: データ可視化（スライド5のチャート）
• Font Awesome 6.4.0: アイコンライブラリ
• Skywork.ai: original_parts内のHTMLスライド生成に使用

ブラウザサポート

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

貢献

プレゼンテーションの改善や新機能の提案は歓迎します。

ライセンス

このプロジェクトはMITライセンスの下で公開されています。

実装例ファイル

エクスポート済みアプリケーション

• TaskIntakeBot.yml: Difyからエクスポートしたタスク抽出ボットアプリの定義ファイル
  • GPT-4を使用してユーザー入力からタスク情報を抽出
  • N8nのWebhookにHTTPリクエストを送信
• TaskToSheet.json: N8nからエクスポートしたワークフロー定義ファイル
  • DifyからのWebhookを受信
  • Google Sheetsにタスク情報を自動追加

作成ツール

• original_parts内のHTMLファイル: Skywork.ai AIエージェントサービスを使用して生成
• 統合プレゼンテーションシステム: Claude Codeで開発
• TaskIntakeBot.yml: Difyプラットフォームで作成・エクスポート
• TaskToSheet.json: N8nプラットフォームで作成・エクスポート

関連リンク

• Dify公式サイト
• N8n公式サイト
• Skywork.ai