はじめに
エイトレッドさんが最近リリースした「AI搭載ワークフロー」を見て、
「これ、コラボフローでもDifyで再現できないかな？」と考えて検証した内容を紹介します。
実現方法
やりたいこと
- コラボフローの申請画面で添付ファイル（Word/PowerPointなど）を読み込む
- Difyに解析させて添付ファイルの中身からタイトル・内容・予算を抽出
- 申請フォームに自動で反映する
今回、Difyに解析させる添付ファイルは稟議書を対象としました。
（理由はエイトレッドさんのYouTubeでも稟議書を解析していたからです…）
全体の流れ（プログラム目線）
- コラボフローAPIで添付ファイルを取得
- Dify APIでステップ1のファイルをアップロード
- Dify APIでチャットメッセージを送信
- 応答（JSON）をパースして、フォーム項目（タイトル/内容/予算）に反映
Dify側の設定
今回のアプリは、ファイルをアップロード → テキスト抽出 → LLMで解析 → 回答を返すという流れで構成しました。
ワークフロー構成
- 開始：入力としてファイル（sys.files）を受け取る
- テキスト抽出：アップロードされたファイルからテキストを抽出
- LLM：抽出したテキストから必要な情報をまとめて抜き出す
- 回答：LLMの出力（text）を返す
ちなみにLLMノードでは、以下のプロンプトを登録しました。
今回はシンプルに「JSON形式で返す」ことを明示しています。
※プロンプトに詳しい方なら、より高度な指示やバリデーションも登録可能だと思います
このファイルから稟議書のタイトル、内容、予算を抽出してください。
JSON形式で { "title": "", "content": "", "budget": "" } として返してください。
実装
1. コラボフローAPIを使用して添付ファイルを取得
Difyとは関係ない箇所になりますが、解析元のファイルを取得します。
注意点や詳細については以下の記事に記載しております。
const fileUrl = `${collaboflow.page.api_endpoint}/v1/files/${file_id}/download`;
const fileResponse = await fetch(fileUrl, {
method: 'GET',
credentials: 'include' // セッションCookieを送信
});
const blob = await fileResponse.blob();
2. Dify APIを使用して、ステップ1で取得したファイルをアップロード
コラボフロー上の添付ファイルをダウンロードした後、Dify上にアップロードします。
ちなみにDifyにアップロードしたファイルは一時的に保存され、数日後に自動削除されます。
Dify側で長期保存が必要な場合は、別途ストレージ管理を追加してください。
const uploadForm = new FormData();
uploadForm.append('file', blob, file_name);
const uploadResponse = await fetch('https://api.dify.ricoh.com/v1/files/upload', {
method: 'POST',
headers: {
'Authorization': `Bearer ${apiKey}`
},
body: uploadForm
});
const uploadData = await uploadResponse.json();
const difyFileId = uploadData.id;
3. Dify APIを使用して、チャットメッセージを送信
アップロード結果（ファイルID）をメッセージに含めて送信します。
以下のソースコードではqueryを指定していますが、おそらくDify側では使用されていないと思います。
※LLMノードのプロンプトでも同様の内容を登録しているため
しかし、APIリファレンスには /v1/chat-messages の query は必須 と記載されているため、
念のため空文字や未指定を避けて送信しています。
また、filesを使う場合は、upload_file_id と transfer_method: "local_file" を正しく指定しないと「invalid_param」エラーになるため注意してください。
const chatPayload = {
inputs: {},
query: "このファイルから稟議書のタイトル、内容、予算を抽出してください",
response_mode: "blocking",
conversation_id: "",
user: userId,
files: [
{
type: "document",
transfer_method: "local_file",
upload_file_id: difyFileId
}
]
};
const response = await fetch('https://api.dify.ricoh.com/v1/chat-messages', {
method: 'POST',
headers: {
'Authorization': `Bearer ${apiKey}`,
'Content-Type': 'application/json'
},
body: JSON.stringify(chatPayload)
});
4. ステップ3からの応答（JSON）をパースして、フォーム項目（タイトル/内容/予算）に反映
Difyからの応答をコラボフローの項目に反映します。
const data = await response.json();
const parsedAnswer = JSON.parse(data.answer);
// コラボフローの各項目に転記する
const titleField = document.getElementById('fidTitle');
const contentField = document.getElementById('fidContent');
const budgetField = document.getElementById('fidBudget');
if (titleField) titleField.value = parsedAnswer.title || '';
if (contentField) contentField.value = parsedAnswer.content || '';
if (budgetField) budgetField.value = parsedAnswer.budget || '';
今回はDifyのアプリタイプがチャットフローだったため、必要な情報は data.answer に格納されていました。
一方、ワークフローの場合は data.outputs に格納されるため、アプリタイプによって応答形式が異なる点には注意が必要です。
チャットフローの応答
ワークフローの応答
実行結果
ネットから拾ってきた稟議書を添付し、「添付ファイル解析」ボタンを押すと…
無事、稟議書の内容がフォームに自動反映されました！
さいごに
Dify×コラボフローの組み合わせで、入力の手間を大幅に削減できそう、ということがわかりました。
ただし、埋め込みチャットのやり取りをAPIでは取得できないため、精度改善には工夫が必要です。
また実運用する際はAPIキーの管理もきちんとしなくちゃと思っています。