1. イントロダクション
動画概要
本教材ではDifyを活用し、ローカル環境で完結する AI アプリを作成する意図やメリットを解説します。講座全体のイントロダクションとして、ローカル運用の利点や安全性、コスト面のメリットを理解し、今後作成するアプリの全体像を把握できるようにします。
重要ポイント
- ローカル環境でセルフホストし固定費ゼロ
- Dify を用いた安全かつ低コストな自前インフラ構築
- 講座で作成する4つの AI アプリの全体像把握
目次
- 講座の目的と狙い
- ローカル環境運用のメリット
- セキュリティとコスト面の考慮
- 本講座で作成する4つの AI アプリ概要
- 今後の進め方と学習スタンス
2. Dify ローカル環境事前準備
動画概要
本教材では、Dify を日本語版でアクセスし、ローカル環境にインストールして起動する手順を解説します。Docker Desktop のインストールから Git リポジトリのクローン、Docker Compose による起動、サインインまでを学び、以降のワークフロー構築に備えます。
重要ポイント
- Git リポジトリをクローンして Dify 環境を準備
- Docker Desktop と Docker Compose でローカル起動
- 登録したアカウントでサインインしローカル版を利用
目次
- Dify 日本語版へのアクセスと会員登録
- Docker Desktop のインストール
- Git クローンによるリポジトリ取得
- Docker Compose で Dify を起動しログイン
Difyインストール Windows用コマンド
git clone https://github.com/langgenius/dify.git cd dify/docker cp .env.example .env docker compose up
各サイトのリンク
3. Notionナレッジ付AIチャットボット
動画概要
本教材では、Notion に格納したデータを Dify と連携し、社内向け AI チャットボットを構築する手順を解説します。LLM の API キー設定から Notion 側のインテグレーション作成、Dify の環境変数編集、ナレッジ設定、チャットボットアプリの作成までを学び、実践的な社内 Q&A ボットを完成させます。
重要ポイント
- Notion と Dify を連携し社内 Q&A チャットを作成
- 環境変数に API キーと Notion シークレットを設定
- 検索スコアの閾値調整で回答精度を最適化
目次
- LLM API と埋め込みサービス (Cohere) 設定
- Notion インテグレーション作成とデータ用意
- Dify への Notion 連携とナレッジ設定
- チャットボットアプリ作成と検索スコア調整
参考プロンプト
# 実行指示:
あなたは社内業務サポート窓口のAIアシスタントです。
[# 回答ルール]を厳守し、社員からの業務に関する質問に、Knowledge内のコンテキストを使って丁寧に回答してください。
# 回答ルール:
- コンテキストに情報がない場合は {お問い合わせ誘導メッセージ} を返す
- です・ます調で丁寧に、落ち着いた口調で回答する
- ルールや手続きについては正確に、簡潔に説明する
- 回答困難な話題については無理に断定せず、必要に応じて確認を勧める
- 社内のナレッジベースを案内・活用する姿勢を示す
- 不安や疑問に寄り添うトーンで対応する
# 情報:
お問い合わせ誘導メッセージ =
すみません、現在の情報ベースには該当する内容が見つかりませんでした。
恐れ入りますが、担当部門または総務へ直接ご確認いただくか、下記のお問い合わせフォームからご連絡ください:
https://example.com/internal-support-form
各サイトのリンク
4-1. activepieces,ngrok 事前準備
動画概要
本教材では、レシート画像から経費データを抽出し、スプレッドシートに自動入力するワークフローを構築する手順を解説します。Dify 上で ActivePieces を導入し、Docker や WSL、ngrok を活用してローカル環境で完結する経費処理オートメーションを実装します。
重要ポイント
- レシート画像を OCR 化しスプレッドシート記録を自動化
- ActivePieces をローカルにインストールしコスト削減
- ngrok でローカルサーバーを公開し HTTP リクエスト対応
目次
- 経費処理オートメーション概要
- ActivePieces インストールと環境構築
- ワークフロー作成:LLM ブロックと HTTP リクエスト
- ngrok 設定および ActivePieces 起動
▶ Step 1:WSL2 環境の確認・セットアップ
Windows PowerShellを管理者として実行し、以下のコマンドを実行します。
wsl --install
1. すでにUbuntuが存在している場合、エラーが出ることがありますが問題ありません。次のステップに進んでください。
2. Ubuntuを起動(`wsl`コマンドを実行)し、ユーザー名とパスワードを設定します。
💡【注意点】
- `sudo`コマンド実行時には、ここで設定したUbuntu内のパスワードが必要になります。
- パスワードを忘れてしまった場合はUbuntuをリセットする必要があるため、ご注意ください。
▶ Step 2:Activepieces ソースの取得と準備
Ubuntu内で作業ディレクトリに移動し、Activepiecesをクローン(またはZIP展開)します。
wslコマンド実行後の位置から、以下のコマンドを実行します。
cd /mnt/c/activepieces (※ここはご自身の保存場所の例)
`tools/deploy.sh` を実行する前に、改行コードと実行権限を整えます。
sudo apt update && sudo apt install dos2unix dos2unix tools/deploy.sh chmod +x tools/deploy.sh
▶ Step 3:初期設定スクリプトの実行と起動
以下のスクリプトを実行します。
./tools/deploy.sh
→ `.env` ファイルと必要な構成が自動生成されます。
その後、Docker ComposeでActivepiecesを起動します。
docker compose up -d
起動後、ブラウザで http://localhost:8080 にアクセスできれば成功です。
▶ Step 4:ngrokによる外部公開(Dify連携用)
1. WSL上のUbuntuでngrokをインストールします。
wget https://bin.equinox.io/c/bNyj1mQVY4c/ngrok-stable-linux-amd64.zip unzip ngrok-stable-linux-amd64.zip sudo mv ngrok /usr/local/bin
2. ngrok公式サイトで取得した認証トークンを登録します。
ngrok config add-authtoken YOUR_AUTHTOKEN
3. 起動してローカルサーバーを外部に公開します。
ngrok http http://localhost:8080
参考リンク
4-2. レシートから経費処理オートメーション
動画概要
本教材では、Dify のワークフローを用いてレシート画像から経費情報を抽出し、ActivePieces 経由で Google Sheets に自動登録する手順を解説します。ファイル入力ブロック、LLM ブロック、HTTP リクエストブロックを組み合わせ、ngrok によるローカル公開を通してワークフロー全体を動作させるまでを学びます。
重要ポイント
- 単一ファイル入力ブロックで画像アップロード設定
- HTTP リクエストで ActivePieces を呼び出す
- Google Sheets へフィールドをマッピング
目次
- ワークフロー構造と開始ブロック
- LLM ブロックの設定とテスト
- HTTP リクエストブロックによる ActivePieces 連携
- Google Sheets 連携およびテスト実行
System プロンプト あなたは領収書・請求書などの画像を読み取り、 指定された JSON Schema に完全準拠した構造化データだけを返すエキスパート AI です。 ### あなたが守るべき原則 1. **必ず JSON だけ** を返し、余計なテキストは一切出力しない。 2. 項目の値が不明・存在しない場合は `"N/A"` と記入する。 3. 金額は税込み・カンマ無しの整数で返す。税抜き金額しか無い場合は自ら税込みを計算する。 4. 日付は `YYYY/MM/DD` 形式で返す。 5. 登録番号は必ず先頭が **T**、続いて 13 桁の数字(例:`T0000000000000`)。 6. 規格外の情報・注意事項は `note` へ記載し、無ければ `"N/A"`。 7. スキーマにないプロパティは絶対に追加しない。 User プロンプト ## 重要事項 - 結果は **JSON 形式のみ** で出力してください。 - わからない項目がある場合は、正直に `"N/A"` と記入してください。 - 標準的でない形式や追加情報がある場合は、各行の注記として `note` に記載してください。 ## 項目の説明 - **company_name**: 支払先の会社名(宛名や請求先ではない) - **issue_date**: 領収書を発行した日付(`YYYY/MM/DD`) - **amount**: 税込み支払金額(カンマ無し整数)。税抜き金額のみの場合は課税額を加算して計算 - **currency**: 支払金額の通貨(例:`JPY`, `USD`, `EUR`) - **invoice_registration_number**: 適格請求書発行事業者の登録番号(`T0000000000000` 形式) - **note**: 追加情報や特記事項。無ければ `"N/A"` ## JSON Schema ```json { "$schema": "http://json-schema.org/draft-07/schema#", "type": "object", "properties": { "company_name": { "type": "string", "description": "支払先の会社名。宛名や請求先ではない。" }, "issue_date": { "type": "string", "format": "date", "pattern": "^\\d{4}/\\d{2}/\\d{2}$", "description": "領収書を発行した日付(YYYY/MM/DD形式)" }, "amount": { "type": "integer", "minimum": 0, "description": "税込みの支払い金額。カンマなしで表示。" }, "currency": { "type": "string", "enum": ["JPY", "USD", "EUR"], "description": "支払金額の通貨(例:JPY、USD、EUR)" }, "invoice_registration_number": { "type": "string", "pattern": "^T\\d{13}$", "description": "適格請求書発行事業者の登録番号(T0000000000000形式)" }, "note": { "type": "string", "description": "標準的でない形式や追加情報。無ければ \"N/A\"" } }, "required": [ "company_name", "issue_date", "amount", "currency", "invoice_registration_number", "note" ] } ##タスク 上記スキーマを満たす JSON を、JSON 以外の文字列を一切含めず に返してください。
5. 補助金情報収集アプリ
動画概要
本教材では、Dify のワークフローを用いてレシート画像から経費情報を抽出し、ActivePieces 経由で Google Sheets に自動登録する手順を解説します。ファイル入力ブロック、LLM ブロック、HTTP リクエストブロックを組み合わせ、ngrok によるローカル公開を通してワークフロー全体を動作させるまでを学びます。
重要ポイント
- 単一ファイル入力ブロックで画像アップロード設定
- HTTP リクエストで ActivePieces を呼び出す
- Google Sheets へフィールドをマッピング
目次
- 開始ブロックの設定:URL を短文入力として受け取る
- HTML パーサーと見出し作成:コードブロックでページ内容を取得し、補助金名などの見出しを抽出
- パラメータ抽出とイテレーション:見出しごとに JSON 配列を生成し、繰り返し処理で詳細情報を構造化
- ActivePieces 連携と Google Sheets 登録:HTTP リクエストで構造化結果を送信し、シートへマッピング
見出し作成
System プロンプト
あなたは高度な情報抽出のプロンプトエンジニアです。HTMLParserで抜き出したページテキスト{{コンテキスト}}から、補助金・助成金プログラムごとに「補助金・助成金名(対象事業・活動内容)」だけを見出しとして抽出し、JSON配列で出力してください。
User プロンプト
各プログラムの見出しをJSON配列で作成してください。
見出し以外の情報は一切出力しないでください。
#出力フォーマット
[ "補助金名(活動内容A)", "補助金名(活動内容B)", ... ]
見出しごとに構造化
System プロンプト
あなたは高度なテキスト構造化の専門家です。
{{コンテキスト}}から、{{イテレーションitem}}に関する内容のみ[抽出フィールド]に対応する箇所を分析して要約し、{出力フォーマット}を参考にし、JSON形式で出力してください。
User プロンプト
#抽出フィールド
- 補助金・助成金名
- 概要・目的
- 対象者/対象団体
- 対象事業・活動内容
- 補助額(上限)
- 補助額(下限)
- 補助率/助成率
- 補助回数・期間
- 申請期間
- 申請方法・申請先URL
- 必要書類
- 申請要件・注意事項
- 審査・決定スケジュール
- 問い合わせ先
- 関連リンク・資料
- 備考・付帯情報
出力フォーマット=" [ { "補助金・助成金名": "...", "概要・目的": "...", "対象者/対象団体": "...", "対象事業・活動内容": "...", "補助額(上限)": "...", "補助額(下限)": "...", "補助率/助成率": "...", "補助回数・期間": "...", "申請期間": "...", "申請方法・申請先URL": "...", "必要書類": "...", "申請要件・注意事項": "...", "審査・決定スケジュール": "...", "問い合わせ先": "...", "関連リンク・資料": "...", "備考・付帯情報": "..." }, {…次のセクション…}, ] " #制約事項 - 絶対に純粋なJson配列のみの出力にしてください。 - ```json という文字は絶対に入れないでください。
6-1. AIメール生成送信アプリ前編
動画概要
本教材では、右クリックで起動する Google 拡張機能と Dify を連携し、AI を活用したメールを自動生成・送信するワークフローを作成します。宛先・件名・本文・テンプレートなどの入力ブロックから分岐ロジックを組み、OAuth 認証を用いて Gmail 送信を実装する手順を学びます。
重要ポイント
- DifyでAIメール生成・送信ワークフロー構築
- テンプレートとプロンプトで各種メール自動生成
- OAuth認証を使いGmail送信を実装
目次
- ワークフロー全体構成と入力設定
- メール生成テンプレートと分岐設定
- 認証プロバイダーとSMTP設定
- 添付ファイルとコードブロック処理
- Google拡張機能の利用方法
参考リンク
※拡張機能とワークフローデータ(.yaml)が格納されてます。
ダウンロードしてご使用ください。


6-2. AIメール生成送信Google拡張機能設定
動画概要
本教材では、AI Mail SenderのChrome拡張機能のインストールと設定、Google OAuth および Microsoft OAuth のクライアント ID/シークレット取得手順を解説します。GCP (Google Cloud Platform) で Gmail API と People API を有効化し、OAuth 同意画面とリダイレクト URI を設定してクライアント ID/シークレットを取得、Azure ポータルで Microsoft アプリ登録と必要な Graph API 権限を設定します。その後、Dify ワークフローと連携して右クリックから AI メールを生成・送信できる環境を整え、動作確認を行います。
重要ポイント
- Chrome 拡張機能「AIメールセンダー」の読み込みと拡張機能 ID の確認
- GCP で Gmail API/People API 有効化し、OAuth 同意画面・認証情報作成でリダイレクト URI(拡張機能 ID を含む)を登録
- Azure ポータルでアプリ登録しクライアント ID/シークレット取得、Microsoft Graph API のアクセス許可を追加
目次
- Chrome 拡張機能の読み込みと拡張機能 ID 確認
- GCP における Gmail API/People API の有効化と OAuth 設定
- OAuth 同意画面設定と認証情報(クライアント ID/シークレット)作成
- Azure ポータルでのアプリ登録と Microsoft Graph API 権限付与
- Dify 設定欄へのクライアント ID/シークレット・API キー登録
- 右クリックから AI メール送信の動作確認とトラブルシューティング
拡張機能のURL
https://npfffmikccnkhonnidladipoooipmglje.chromiumapp.org/Googleのスコープ
…/auth/gmail.send
ユーザー本人に代わってメールを送信
…/auth/userinfo.email
Google アカウントのメインのメールアドレスの参照
…/auth/userinfo.profile
ユーザーの個人情報の表示(ユーザーが一般公開しているすべての個人情報を含む)
…/auth/contacts.readonly
連絡先の表示、ダウンロード
https://mail.google.com/
Gmail のすべてのメールの閲覧、作成、送信、完全な削除
Microsoft Graph APIのスコープ
Contacts.Read
Read user contacts
email
View users’ email address
Mail.Send
Send mail as a user
openid
Sign users in
User.Read
Sign in and read user profile
参考リンク
※拡張機能とワークフローデータ(.yaml)が格納されてます。
ダウンロードしてご使用ください。
6-3. AIメール生成送信アプリ後編
動画概要
本教材では、ローカル環境で動作するDifyワークフローからNext.jsサーバー経由でメール送信を行う仕組みを解説します。ngrok(エングロック)のトンネルを固定ドメイン化し、Next.jsのindex.jsを起動した状態でHTTPリクエストを受け取り、GmailでAI生成メールを送信する流れを学びます。
重要ポイント
- ngrokのユニバーサルゲートウェイで固定ドメインを取得
- Next.jsサーバー(index.js)をポート3030で動作させる
- DifyのWebHookからNext.js経由でGmailメール送信を実行
目次
- ngrokの固定ドメイン取得とトンネル起動
- Next.jsサーバー(index.js)の起動と環境変数設定
- DifyワークフローからのHTTPリクエスト構築
- メール送信成功/失敗のログ確認とトラブルシューティング