このファイルは、このリポジトリでコードを操作するときにClaude Code (claude.ai/code) に対するガイダンスを提供します。
このリポジトリには「DifyとN8nの連携：業務自動化の新たな可能性」のプレゼンテーションシステムが含まれています。個別のHTMLスライドページが統合されたプレゼンテーションシステムで構成されています。
slides.html- インタラクティブナビゲーション付きのメイン統合プレゼンテーションファイル（実際に使用するファイル）original_parts/- 元となった個別のHTMLスライドページ（page_1.html～page_9.html）を含むアーカイブディレクトリ（参考用のみ、実行時は読み込まれない）TaskIntakeBot.yml- Difyからエクスポートしたタスク抽出ボットアプリの定義ファイルTaskToSheet.json- N8nからエクスポートしたワークフロー定義ファイル
メインプレゼンテーションファイルは、9個の個別スライドをインタラクティブなスライドショーに統合するシングルページアプリケーションです：
- スライド管理: 状態管理を伴うJavaScriptベースのスライドナビゲーション
- ナビゲーションコントロール:
- 前後ボタンとスライドカウンター付きの下部ナビゲーションバー
- キーボードショートカット（矢印キー、数字キー1-9、フルスクリーン用Fキー）
- クリックでジャンプ機能付きの右側サムネイルナビゲーション
- レスポンシブデザイン: 1300px、1040px、780pxのブレークポイントでビューポートサイズに基づく自動スケーリング
- インタラクティブ要素: スライド5の自動化時間削減を示すD3.jsチャート
- フルスクリーンサポート: フルスクリーンプレゼンテーションモードの切り替え
- ベースフレームワーク: ユーティリティファーストスタイリング用のTailwind CSS
- カスタムCSS: スライド固有コンポーネント用の広範なカスタムスタイル
- カラースキーム: ブルー（#0f4c81）、ティール（#00a6a6）、オレンジ（#ff6b35）を使用した一貫したグラデーションテーマ
- タイポグラフィ: タイトル用のグラデーションテキスト効果、レスポンシブフォントサイズ
original_parts/ディレクトリには統合されたソーススライドが含まれています：
- 各ページは一貫した1280x720pxスライド形式に従います
- ホバー効果とアニメーション付きの共有スタイリングパターン
- Font AwesomeアイコンとTailwind CSSスタイリング
- 生成ツール: これらのHTMLファイルはSkywork.ai AIエージェントサービスを使用して作成されました
ブラウザでslides.htmlを開くだけです。ビルドプロセスやサーバーは不要です。
- 矢印キー: スライド間のナビゲーション
- 数字キー（1-9）: 特定のスライドに直接ジャンプ
- Fキー: フルスクリーンモードの切り替え
- マウス: サムネイルナビゲーションのクリックまたは下部ナビゲーションボタンの使用
プレゼンテーションはDifyとN8n連携に関する9つのスライドをカバーしています：
- プロジェクト概要付きタイトルスライド
- 特徴と役割の比較
- 具体的な連携例（タスク自動化フロー）
- 連携メカニズムの技術詳細
- メリット：業務効率の向上（D3.jsチャート付き）
- メリット：高いカスタマイズ性
- メリット：優れたスケーラビリティ
- その他の活用シナリオ
- 導入ステップと次のアクション
- Font Awesome 6.4.0: CDN経由のアイコンライブラリ
- Tailwind CSS: CDN経由のユーティリティファーストCSSフレームワーク
- D3.js v7: スライド5チャート用のデータ可視化ライブラリ
- モダンブラウザAPI: Fullscreen API、CSS transforms、flexbox
スライドを修正する際は以下を維持してください：
- 固定スライド寸法（1280x720px）
- 一貫したパディングとマージンパターン
- 装飾要素とのコンテンツ重複を避けるための適切な下部スペース
- 異なるビューポートサイズでのレスポンシブスケーリング
- キーボードナビゲーションによるアクセシビリティ
スライド5には自動化時間削減を示すD3.js棒グラフが含まれています。チャートはスライドがアクティブになったときに動的に初期化され、重複レンダリングを防ぐためにinitChart()関数を使用します。
DifyとN8nの連携例として、以下のエクスポート済みファイルを含んでいます：
- 機能: ユーザー入力からタスク情報を抽出するAIボット
- モデル: GPT-4を使用したパラメータ抽出
- 出力:
task_titleとdescriptionをJSON形式でN8nに送信 - 連携: HTTPリクエストでN8nのWebhookにデータを送信
- トリガー: DifyからのWebhookを受信
- 処理: 受信したタスク情報をGoogle Sheetsに自動追加
- 結果: タスク管理シートの自動更新
- Dify:
TaskIntakeBot.ymlをDifyプラットフォームにインポート - N8n:
TaskToSheet.jsonをN8nプラットフォームにインポート - 設定: Google Sheetsの認証とWebhook URLの設定が必要
- original_parts内のHTMLファイル: Skywork.ai AIエージェントサービスで生成
- 統合プレゼンテーションシステム: Claude Codeで開発・統合
- TaskIntakeBot.yml: Difyプラットフォームで作成・エクスポート
- TaskToSheet.json: N8nプラットフォームで作成・エクスポート